feat(tooltip): add TooltipFooter component

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 166 components exported from carbon-components-svelte@0.31.1.
+> 167 components exported from carbon-components-svelte@0.31.1.
 
 ## Components
 
@@ -167,6 +167,7 @@
 - [`ToolbarSearch`](#toolbarsearch)
 - [`Tooltip`](#tooltip)
 - [`TooltipDefinition`](#tooltipdefinition)
+- [`TooltipFooter`](#tooltipfooter)
 - [`TooltipIcon`](#tooltipicon)
 - [`Truncate`](#truncate)
 - [`UnorderedList`](#unorderedlist)
@@ -4470,6 +4471,24 @@ None.
 | mouseleave | forwarded | --     |
 | focus      | forwarded | --     |
 
+## `TooltipFooter`
+
+### Props
+
+| Prop name            | Kind             | Reactive | Type                | Default value                                  | Description                                                                 |
+| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
+| selectorPrimaryFocus | <code>let</code> | No       | <code>string</code> | <code>"a[href], button:not([disabled])"</code> | Specify a selector to be focused inside the footer when opening the tooltip |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `TooltipIcon`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 166,
+  "total": 167,
   "components": [
     {
       "moduleName": "Accordion",
@@ -11202,6 +11202,25 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "TooltipFooter",
+      "filePath": "src/Tooltip/TooltipFooter.svelte",
+      "props": [
+        {
+          "name": "selectorPrimaryFocus",
+          "kind": "let",
+          "description": "Specify a selector to be focused inside the footer when opening the tooltip",
+          "type": "string",
+          "value": "\"a[href], button:not([disabled])\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
     {
       "moduleName": "TooltipIcon",
       "filePath": "src/TooltipIcon/TooltipIcon.svelte",

docs/src/pages/components/Tooltip.svx

@@ -1,5 +1,5 @@
 <script>
-  import { Tooltip, Link, Button } from "carbon-components-svelte";
+  import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
   import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -45,10 +45,10 @@ By default, the tooltip is triggered by an information icon.
   <p>
     Resources are provisioned based on your account's organization.
   </p>
-  <div class="bx--tooltip__footer">
+  <TooltipFooter selectorPrimaryFocus="#d">
     <Link href="/">Learn more</Link>
-    <Button size="small">Manage</Button>
-  </div>
+    <Button id="d" size="small">Manage</Button>
+</TooltipFooter>
 </Tooltip>
 
 ### Custom icon (component)

src/Tooltip/Tooltip.svelte

@@ -63,10 +63,14 @@
   /** Obtain a reference to the icon HTML element */
   export let refIcon = null;
 
-  import { createEventDispatcher, afterUpdate } from "svelte";
+  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
+  import { writable } from "svelte/store";
   import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
 
   const dispatch = createEventDispatcher();
+  const tooltipOpen = writable(open);
+
+  setContext("Tooltip", { tooltipOpen });
 
   function onKeydown(e) {
     if (e.key === "Escape") {
@@ -143,6 +147,7 @@
     }
   });
 
+  $: tooltipOpen.set(open);
   $: dispatch(open ? "open" : "close");
   $: buttonProps = {
     role: "button",

src/Tooltip/TooltipFooter.svelte

@@ -0,0 +1,29 @@
+<script>
+  /** Specify a selector to be focused inside the footer when opening the tooltip */
+  export let selectorPrimaryFocus = "a[href], button:not([disabled])";
+
+  import { getContext, onMount } from "svelte";
+
+  let ref = null;
+  let open = false;
+
+  const ctx = getContext("Tooltip");
+  const unsubscribe = ctx.tooltipOpen.subscribe((tooltipOpen) => {
+    open = tooltipOpen;
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  $: if (open && ref) {
+    const node = ref.querySelector(selectorPrimaryFocus);
+    if (node) node.focus();
+  }
+</script>
+
+<div bind:this="{ref}" class:bx--tooltip__footer="{true}">
+  <slot />
+</div>

src/Tooltip/index.js

@@ -1 +1,2 @@
 export { default as Tooltip } from "./Tooltip.svelte";
+export { default as TooltipFooter } from "./TooltipFooter.svelte";

src/index.js

@@ -121,7 +121,7 @@ export {
 export { TimePicker, TimePickerSelect } from "./TimePicker";
 export { Toggle, ToggleSkeleton } from "./Toggle";
 export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
-export { Tooltip } from "./Tooltip";
+export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { Truncate } from "./Truncate";

types/Tooltip/TooltipFooter.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface TooltipFooterProps {
+  /**
+   * Specify a selector to be focused inside the footer when opening the tooltip
+   * @default "a[href], button:not([disabled])"
+   */
+  selectorPrimaryFocus?: string;
+}
+
+export default class TooltipFooter extends SvelteComponentTyped<
+  TooltipFooterProps,
+  {},
+  { default: {} }
+> {}

types/index.d.ts

@@ -139,6 +139,7 @@ export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton";
 export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall";
 export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton";
 export { default as Tooltip } from "./Tooltip/Tooltip";
+export { default as TooltipFooter } from "./Tooltip/TooltipFooter";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
 export { default as Truncate } from "./Truncate/Truncate";