@kaizen/components 1.52.1 → 1.54.0

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
+import { renderWithIntl } from "~tests"
 import { DropdownButton, DropdownButtonProps } from "./DropdownButton"
 
 const DropdownButtonWrapper = (
@@ -7,16 +8,20 @@ const DropdownButtonWrapper = (
 ): JSX.Element => <DropdownButton {...props} />
 
 describe("<DropdownButton />", () => {
-  it("renders icon with default aria-label", () => {
-    render(<DropdownButtonWrapper />)
-    const button = screen.getByRole("button", { name: "Additional actions" })
-    expect(button.getAttribute("aria-label")).toBe("Additional actions")
-    expect(button.firstChild?.nodeName).toEqual("svg")
+  it("renders icon with default aria-label", async () => {
+    renderWithIntl(<DropdownButtonWrapper />)
+    await waitFor(() => {
+      const button = screen.getByRole("button", { name: "Additional actions" })
+      expect(button.getAttribute("aria-label")).toBe("Additional actions")
+      expect(button.firstChild?.nodeName).toEqual("svg")
+    })
   })
 
-  it("renders custom aria-label", () => {
-    render(<DropdownButtonWrapper aria-label="Custom aria label" />)
-    const button = screen.getByRole("button", { name: "Custom aria label" })
-    expect(button.getAttribute("aria-label")).toBe("Custom aria label")
+  it("renders custom aria-label", async () => {
+    renderWithIntl(<DropdownButtonWrapper aria-label="Custom aria label" />)
+    await waitFor(() => {
+      const button = screen.getByRole("button", { name: "Custom aria label" })
+      expect(button.getAttribute("aria-label")).toBe("Custom aria label")
+    })
   })
 })

package/src/Table/_docs/Table.mdx

@@ -10,7 +10,7 @@ import * as TableStories from "./Table.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Table"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37841&t=P1w10jr2cpPuaayw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929256/Table"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation

package/src/Tabs/_docs/Tabs.mdx

@@ -10,7 +10,7 @@ import * as TabsStories from "./Tabs.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A28886&mode=design&t=AGMmnoJia9RscurE-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation

package/src/Tag/_docs/Tag.mdx

@@ -11,7 +11,7 @@ import * as TagStories from "./Tag.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tag"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37843&t=zlNKMVZd1i6MB4db-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags"
-  className="!mb-8"
+
 />
 
 

package/src/Text/_docs/Text.mdx

@@ -9,7 +9,7 @@ import * as TextStories from "./Text.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Text"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="Text" />

package/src/TextArea/_docs/TextArea.mdx

@@ -9,7 +9,7 @@ import * as TextAreaStories from "./TextArea.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TextArea"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="TextArea" />

package/src/TextAreaField/_docs/TextAreaField.mdx

@@ -10,7 +10,7 @@ import * as TextAreaFieldStories from "./TextAreaField.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TextAreaField"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=891%3A179030&t=zlNKMVZd1i6MB4db-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081895966/Text+Area+Field"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="TextAreaField" />

package/src/TextField/_docs/TextField.mdx

@@ -11,7 +11,7 @@ import * as TextFieldStories from "./TextField.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TextField"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=893%3A155422&t=zlNKMVZd1i6MB4db-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="TextField" />

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -10,7 +10,7 @@ import * as InformationTileStories from "./InformationTile.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/InformationTile"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="InformationTile" />

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -10,7 +10,7 @@ import * as MultiActionTileStories from "./MultiActionTile.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/MultiActionTile"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="MultiActionTile" />

package/src/Tile/TileGrid/_docs/TileGrid.mdx

@@ -9,7 +9,7 @@ import * as TileGridStories from "./TileGrid.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/TileGrid"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="TileGrid" />

package/src/TimeField/_docs/TimeField.mdx

@@ -10,7 +10,7 @@ import * as TimeFieldStories from "./TimeField.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TimeField"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=9%3A37847&mode=design&t=tmk2yNQC5xRRlaQF-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3078095243/Time+Field"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="TimeField" />

package/src/TitleBlockZen/_docs/TitleBlockZen.mdx

@@ -9,7 +9,7 @@ import * as TitleBlockZenStories from "./TitleBlockZen.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TitleBlockZen"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075605782/Title+Block"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="TitleBlockZen" />

package/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx

@@ -8,7 +8,7 @@ import * as ToggleSwitchStories from "./ToggleSwitch.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/ToggleSwitch/ToggleSwitch"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="ToggleSwitch" />

package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx

@@ -9,7 +9,7 @@ import * as ToggleSwitchFieldStories from "./ToggleSwitchField.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/ToggleSwitch/ToggleSwitchField"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075638160/Toggle+Switch"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="ToggleSwitchField" />

package/src/VisuallyHidden/_docs/VisuallyHidden.mdx

@@ -8,7 +8,7 @@ import * as VisuallyHiddenStories from "./VisuallyHidden.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/VisuallyHidden"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="VisuallyHidden" />

package/src/Well/_docs/Well.mdx

@@ -10,7 +10,7 @@ import * as WellStories from "./Well.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Well"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=1929%3A14167&t=1IXoBrHg5uK6MAJp-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604733/Well"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="Well" />

package/src/Workflow/_docs/ProgressStepper.mdx

@@ -11,7 +11,7 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
   figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-  className="!mb-8"
+
 />
 
 <InlineNotification type="negative" persistent>

package/src/Workflow/_docs/Workflow.mdx

@@ -11,7 +11,7 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
-  className="!mb-8"
+
 />
 
 <InlineNotification type="negative" persistent>

package/src/Workflow/_docs/WorkflowFooter.mdx

@@ -11,7 +11,7 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
   figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-  className="!mb-8"
+
 />
 
 <InlineNotification type="negative" persistent>

package/src/Workflow/_docs/WorkflowHeader.mdx

@@ -11,7 +11,7 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
   figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-  className="!mb-8"
+
 />
 
 <InlineNotification type="negative" persistent>

package/src/__future__/Select/_docs/Select.mdx

@@ -10,7 +10,7 @@ import * as SelectStories from "./Select.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Select"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="Select" isFuture />

package/src/__future__/Tag/Tag/_docs/Tag.mdx

@@ -9,7 +9,7 @@ import * as TagStories from "./Tag.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3293283155/Tag"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="Tag" isFuture />

package/src/__future__/Workflow/_docs/ProgressStepper.mdx

@@ -10,7 +10,7 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
   figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-  className="!mb-8"
+
 />
 
 <KaioLegacyDocsNotification version="1.16.0" />

package/src/__future__/Workflow/_docs/Workflow.mdx

@@ -10,7 +10,7 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
-  className="!mb-8"
+
 />
 
 

package/src/__future__/Workflow/_docs/WorkflowFooter.mdx

@@ -10,7 +10,7 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
   figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-  className="!mb-8"
+
 />
 
 

package/src/__future__/Workflow/_docs/WorkflowHeader.mdx

@@ -10,7 +10,7 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
   figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
-  className="!mb-8"
+
 />
 
 

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.mdx

@@ -10,7 +10,7 @@ import * as TooltipStories from "./Tooltip.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604978/Tooltip"
-  className="!mb-8"
+
 />
 
 <Installation

package/src/__overlays__/Tooltip/v3/_docs/ApiSpecification.mdx

@@ -16,7 +16,6 @@ import * as exampleStories from "./Tooltip.stories"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
   designGuidelines="/?path=/docs/overlays-tooltip-v3-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"
-  className="mt-16 !mb-8"
 />
 
 <SbContent className="mb-24">

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx

@@ -6,6 +6,7 @@ import { FieldMessage } from "~components/FieldMessage"
 import { AddIcon, QuestionIcon } from "~components/Icon"
 import { Input } from "~components/Input"
 import { Label } from "~components/Label"
+import { Text } from "~components/Text"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
 import * as TestStories from "./Tooltip.spec.stories"
@@ -201,3 +202,54 @@ export const UncontrolledState: Story = {
     )
   },
 }
+
+export const TriggerDo: Story = {
+  play: undefined,
+  args: { placement: "end", shouldFlip: false },
+  render: () => (
+    <Text variant="body" classNameOverride="bg-white p-12 rounded">
+      This is an example of an inline{" "}
+      <TooltipTrigger>
+        <Focusable>
+          <a href="#inline-test" className="text-inherit">
+            tooltip
+          </a>
+        </Focusable>
+        <Tooltip>Tooltip label</Tooltip>
+      </TooltipTrigger>
+    </Text>
+  ),
+}
+export const TriggerDont: Story = {
+  play: undefined,
+  args: { placement: "end", shouldFlip: false },
+  render: () => (
+    <Text variant="body" classNameOverride="bg-white p-12 rounded">
+      This is an example of an inline{" "}
+      <TooltipTrigger>
+        <Focusable>
+          <span>tooltip</span>
+        </Focusable>
+        <Tooltip>Tooltip label</Tooltip>
+      </TooltipTrigger>
+    </Text>
+  ),
+}
+export const TriggerLinkDescription: Story = {
+  play: undefined,
+  args: { placement: "end", shouldFlip: false },
+  render: () => (
+    <Text variant="body" classNameOverride="bg-white p-12 rounded">
+      Use tooltips inline when you want to{" "}
+      <TooltipTrigger>
+        <Focusable>
+          <a href="#describe-link" className="text-inherit">
+            describe a link
+          </a>
+        </Focusable>
+        <Tooltip>Tooltip label</Tooltip>
+      </TooltipTrigger>
+      .
+    </Text>
+  ),
+}

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.mdx

@@ -1,12 +1,9 @@
 import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { CheckIcon, ClearIcon } from "~components/Icon"
-import { ResourceLinks, SbContent, Installation } from "~storybook/components"
+import { ResourceLinks, SbContent, Installation, DosAndDonts, DoOrDont } from "~storybook/components"
 import * as TooltipStories from "./Tooltip.docs.stories"
 import AnatomyPng from "./assets/tooltip_anatomy.png"
 import PlacementPng from "./assets/tooltip_placement.png"
-import Trigger1Png from "./assets/tooltip_trigger_1.png"
-import Trigger2Png from "./assets/tooltip_trigger_2.png"
-import Trigger3Png from "./assets/tooltip_trigger_3.png"
+import DesignSpecPng from "./assets/tooltip_spec.png"
 import WhenToUsePng from "./assets/tooltip_variant.png"
 
 <Meta title="Overlays/Tooltip/v3/Usage Guidelines" />
@@ -24,7 +21,6 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
   designGuidelines="/?path=/docs/overlays-tooltip-v3-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"
   apiSpecification="/?path=/docs/overlays-tooltip-v3-api-specifications--docs"
-  className="!mb-8"
 />
 
 <SbContent>
@@ -70,76 +66,47 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
   - Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations Truncated text)—be mindful of keyboard accessibility
   - **Never include any kind of error messages** in a tooltip
 
-  <img src={WhenToUsePng} alt="Illustration of when to use the Tooltip component" className="mt-24"/>
+  <img src={WhenToUsePng} className="mt-32" alt="Illustration of when to use the Tooltip component" />
 </ SbContent>
 
-<SbContent >
-  ### Dos and don'ts
-</SbContent >
+<SbContent className="mb-64">
+  ### Specs
+  <img src={DesignSpecPng} alt="" />
+</ SbContent>
 
 <div className="flex flex-col mt-16 gap-40 mb-64">
   <div className="flex flex-col m-0 gap-16">
-    <SbContent variant="heading-4">
+    <SbContent>
       #### Do use tooltips to describe icons
       Icons are not always easy to identify on their own. When you use components that don&apos;t have labels — for example, icon-only action buttons and tabs — make sure to use tooltips to provide context for the icons.
     </SbContent>
-    <div className="grid grid-cols-2 gap-16">
-      <div className="relative [&>*]:m-0">
-        <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
-          <CheckIcon role="presentation" />
-          <SbContent ><span className="text-white"><strong>Do</strong></span></SbContent>
-        </div>
-        <Canvas of={TooltipStories.Primary} className="border-green-500 !rounded" />
-      </div>
-    </div>
+    <DosAndDonts>
+      <DoOrDont story={TooltipStories.Primary} />
+    </DosAndDonts>
   </div>
 
   <div className="flex flex-col gap-16">
-    <SbContent variant="heading-4">
+    <SbContent>
       #### Don&apos;t use tooltips to communicate crucial information
 
       Tooltips should never stop a user (or be a gate) from completing a task or performing an action. They disappear so they should never contain critical information that a user would absolutely need to proceed, or information without which a user may cause errors. If the information is crucial for a user to proceed, consider using a modal or inline notification instead.
     </SbContent>
-    <div className="grid grid-cols-2 gap-16">
-      <div className="relative [&>*]:m-0">
-        <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
-          <CheckIcon role="presentation" />
-          <SbContent ><span className="text-white"><strong>Do</strong></span></SbContent>
-        </div>
-        <Canvas of={TooltipStories.DoFieldTooltip} className="border-green-500 !rounded-[10px]" />
-      </div>
-      <div className="relative [&>*]:m-0">
-        <div className="bg-gray-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
-          <ClearIcon role="presentation" />
-          <SbContent ><span className="text-white"><strong>Don&apos;t</strong></span></SbContent>
-        </div>
-        <Canvas of={TooltipStories.DontFieldTooltip} className="border-gray-500 !rounded-[10px]" />
-      </div>
-    </div>
+    <DosAndDonts>
+      <DoOrDont story={TooltipStories.DoFieldTooltip} />
+      <DoOrDont story={TooltipStories.DontFieldTooltip} isDont />
+    </DosAndDonts>
   </div>
 
   <div className="flex flex-col m-0 gap-16">
-    <SbContent variant="heading-4">
+    <SbContent>
       #### Do be concise
 
       Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
     </SbContent>
-    <div className="grid grid-cols-2 gap-16">
-      <div className="relative [&>*]:m-0">
-        <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
-          <CheckIcon role="presentation" />
-          <SbContent ><span className="text-white"><strong>Do</strong></span></SbContent>
-        </div>
-        <Canvas of={TooltipStories.DoConcise} className="border-green-500 !rounded-[10px]" />
-      </div>
-      <div className="relative [&>*]:m-0">
-        <div className="bg-gray-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
-          <ClearIcon role="presentation" />
-          <SbContent ><span className="text-white"><strong>Don&apos;t</strong></span></SbContent>
-        </div>
-        <Canvas of={TooltipStories.DontConcise} className="border-gray-500 !rounded-[10px]" />
-      </div>
-    </div>
+    <DosAndDonts>
+      <DoOrDont story={TooltipStories.DoConcise}/>
+      <DoOrDont story={TooltipStories.DontConcise}  isDont />
+    </DosAndDonts>
   </div>
 </div>
 
@@ -155,28 +122,40 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
   - The proximity of tooltips is always paired to the element with which they are associated.
 </SbContent>
 
-<SbContent className="mb-64">
+<SbContent className="mb-24">
   ### Trigger
 
-  - Should be shown on hover, click or on focus events
-  - Needs to be discoverable:
+  - A tooltip trigger needs to be discoverable:
     - E.g. something like an icon to suggest there’s a tooltip.
     - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
+  - A tooltip should be shown and accessible on hover, click or on focus events.
+</SbContent>
 
-  <img src={Trigger1Png} alt="" className="my-24" />
+<div className="mb-32">
+  <DosAndDonts>
+    <DoOrDont story={TooltipStories.TriggerDo} />
+    <DoOrDont story={TooltipStories.TriggerDont} isDont/>
+  </DosAndDonts>
+</div>
 
+<SbContent className="mb-24">
   - Only trigger tooltips from interactive elements, such as:
     - Buttons
     - Links
     - Icon buttons
+</SbContent>
 
-  <img src={Trigger2Png} alt="" className="my-24" />
+<div className="mb-32">
+  <DosAndDonts>
+    <DoOrDont story={TooltipStories.Primary} />
+    <DoOrDont story={TooltipStories.TriggerLinkDescription} />
+  </DosAndDonts>
+</div>
 
+<SbContent>
   - Non-interactive elements (be mindful of keyboard accessibility):
     - Icons
     - Abbreviations (e.g. dashed underlined text for HRIS that shows a tooltip that says Human Resource Information System)
     - Truncated text
   - For interactive elements that trigger tooltips, only have optional information in the tooltip because it could be missed when the user clicks
-
-  <img src={Trigger3Png} alt="" className="my-24" />
 </SbContent>