@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/Tooltip/_docs/Tooltip.stickersheet.stories.tsx

@@ -0,0 +1,147 @@
+import React from "react"
+import { Decorator, Meta } from "@storybook/react"
+import isChromatic from "chromatic/isChromatic"
+import { IconButton } from "~components/Button"
+import { MeatballsIcon } from "~components/Icon"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Tooltip } from "../index"
+
+const openTooltipInChromatic: Decorator = (Story, { args }) => {
+  if (isChromatic()) args.isInitiallyVisible = true
+  return <Story />
+}
+
+export default {
+  title: "Components/Tooltip",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+  decorators: [openTooltipInChromatic],
+} satisfies Meta
+
+const cellStyle = {
+  padding: "0 50px",
+}
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: props => (
+    <div style={{ padding: "50px 100px" }}>
+      <StickerSheet heading="Positions">
+        <StickerSheet.Header headings={["Top", "Bottom", "Left", "Right"]} />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} position="above" text="Tooltip label">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} position="below" text="Tooltip label">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} position="left" text="Tooltip label">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip
+                {...props}
+                position="right"
+                text="Tooltip label"
+                mood="default"
+              >
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet heading="Moods">
+        <StickerSheet.Header
+          headings={[
+            "Default",
+            "Informative",
+            "Positive",
+            "Highlight",
+            "Cautionary",
+          ]}
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} text="Tooltip label" mood="default">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} text="Tooltip label" mood="informative">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} text="Tooltip label" mood="positive">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} text="Tooltip label" mood="highlight">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+            <StickerSheet.Cell style={cellStyle}>
+              <Tooltip {...props} text="Tooltip label" mood="cautionary">
+                <IconButton
+                  label="Label"
+                  icon={<MeatballsIcon role="presentation" />}
+                />
+              </Tooltip>
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </div>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    textDirection: "rtl",
+  },
+}

package/src/Tooltip/_docs/Tooltip.stories.tsx

@@ -0,0 +1,145 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Button } from "~components/Button"
+import { InformationIcon } from "~components/Icon"
+import { Tag } from "~components/Tag"
+import { Text } from "~components/Text"
+import { Tooltip } from "../index"
+
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  args: {
+    text: "Example tooltip text.",
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  render: args => (
+    <Tooltip {...args}>
+      <Button label="Hover or focus me" />
+    </Tooltip>
+  ),
+  decorators: [
+    Story => (
+      <div
+        style={{
+          marginTop: "100px",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const OverflowScroll: Story = {
+  render: props => (
+    <>
+      <p>
+        Default Placement is &apos;above&apos;. Scroll horizontally or
+        vertically to view the Tooltip &quot;flip&quot; and move according to
+        the space of the viewport. Ensuring the Tooltip does not get cut off.
+      </p>
+
+      <div
+        style={{
+          display: "flex",
+          width: "300px",
+          maxHeight: "700px",
+          overflow: "scroll",
+          border: "solid black 2px",
+          flexDirection: "column",
+        }}
+      >
+        <div
+          style={{
+            width: "500px",
+            marginLeft: "200px",
+            marginTop: "400px",
+          }}
+        >
+          <div
+            style={{
+              width: "300px",
+              height: "200px",
+              textAlign: "center",
+              position: "relative",
+            }}
+          >
+            <Tooltip {...props} display="inline-block" text="Tooltip label">
+              <Button label="Default" />
+            </Tooltip>
+          </div>
+        </div>
+        <div
+          style={{
+            width: "500px",
+            marginLeft: "200px",
+          }}
+        >
+          <div
+            style={{
+              width: "300px",
+              height: "100px",
+              textAlign: "center",
+              position: "relative",
+            }}
+          >
+            <Tooltip {...props} display="inline" text="Tooltip label">
+              <InformationIcon role="img" aria-label="Info" />
+            </Tooltip>
+          </div>
+        </div>
+        <div
+          style={{
+            width: "500px",
+            marginLeft: "200px",
+            marginBottom: "500px",
+          }}
+        >
+          <div
+            style={{
+              width: "300px",
+              height: "200px",
+              textAlign: "center",
+              position: "relative",
+            }}
+          >
+            <Text tag="div" variant="body">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
+              nulla quas corporis? Perspiciatis, ratione voluptas{" "}
+              <Tooltip {...props} display="inline-block" text="Tooltip label">
+                <Tag>ad veniam sapiente</Tag>
+              </Tooltip>{" "}
+              Maxime harum, ducimus maiores itaque pariatur quod vel porro
+              mollitia. Lorem ipsum dolor sit{" "}
+              <Tooltip {...props} display="inline" text="Open in new tab">
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a href="#">
+                  amet consectetur adipisicing elit Itaque obcaecati maxime
+                  molestiae blanditiis pariatur
+                </a>
+              </Tooltip>
+              . Magni perspiciatis assumenda in adipisci, eaque commodi quidem
+              dolore, tempore provident animi{" "}
+            </Text>
+          </div>
+        </div>
+      </div>
+    </>
+  ),
+}

package/src/Tooltip/_variables.scss

@@ -0,0 +1,3 @@
+// Sync with Tooltip.tsx
+$arrow-height: 7px;
+$arrow-width: 14px;

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./Tooltip"

package/src/Tooltip/subcomponents/AppearanceAnim.spec.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import useDebounce from "use-debounce"
+import { AnimationProvider } from "./AppearanceAnim"
+
+jest.mock("use-debounce")
+
+const useDebouncedCallback = useDebounce.useDebouncedCallback as jest.Mock
+let mockReturnValue: Record<string, any>
+
+describe("<AnimationProvider />", () => {
+  beforeEach(() => {
+    mockReturnValue = jest.fn()
+    mockReturnValue.cancel = (): void => undefined
+    useDebouncedCallback.mockImplementation(() => mockReturnValue)
+  })
+
+  describe("When no animationDuration prop is given", () => {
+    it("calls useDebouncedCallback with a 400 ms delay", () => {
+      render(<AnimationProvider isVisible />)
+      expect(useDebouncedCallback).toHaveBeenCalledWith(
+        expect.anything(),
+        400,
+        expect.anything()
+      )
+    })
+  })
+  describe("When an animationDuration prop is given", () => {
+    it("calls useDebouncedCallback with the animationDuration value", () => {
+      const expected = 1000
+      render(<AnimationProvider isVisible animationDuration={expected} />)
+      expect(useDebouncedCallback).toHaveBeenCalledWith(
+        expect.anything(),
+        expected,
+        expect.anything()
+      )
+    })
+  })
+})

package/src/Tooltip/subcomponents/AppearanceAnim.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react"
+import { useDebouncedCallback } from "use-debounce"
+
+type AnimationProps = {
+  isAnimIn?: boolean
+  isAnimOut?: boolean
+  prevIsOpen?: boolean
+  animationDuration?: number
+  isVisible: boolean
+}
+
+const ANIM_DURATION_MS = 400
+
+export const AnimationContext = React.createContext<AnimationProps>({
+  isVisible: false,
+  isAnimIn: false,
+  isAnimOut: false,
+})
+
+/**
+ * Simply applies a css animation to transition a component in and out.
+ * When the component is no longer needed, it will no longer be rendered to the
+ * dom.
+ */
+export const AnimationProvider = ({
+  isVisible,
+  animationDuration = ANIM_DURATION_MS,
+  ...otherProps
+}: AnimationProps & { children?: React.ReactNode }): JSX.Element => {
+  const [isAnimIn, setIsAnimIn] = useState(false)
+  const [isAnimOut, setIsAnimOut] = useState(false)
+  const [prevIsOpen, setPrevIsOpen] = useState(false)
+
+  // Keeps the modal visible while the css animation is completing
+  const trackAnimOutCompleted = useDebouncedCallback(
+    () => {
+      setIsAnimOut(false)
+    },
+    animationDuration,
+    { leading: false }
+  )
+
+  // Allows us to flash the component in an "invisible" state, for one frame.
+  // Then set it to "visible". This allows us to make sure the css transition
+  // actually works.
+  const trackAnimInCompleted = useDebouncedCallback(
+    () => {
+      setIsAnimIn(false)
+    },
+    0,
+    { leading: false }
+  )
+
+  if (isVisible !== prevIsOpen) {
+    setPrevIsOpen(isVisible)
+    if (!isVisible) {
+      trackAnimInCompleted.cancel()
+      setIsAnimOut(true)
+      trackAnimOutCompleted()
+    } else {
+      trackAnimOutCompleted.cancel()
+      setIsAnimIn(true)
+      trackAnimInCompleted()
+    }
+  }
+
+  return (
+    <AnimationContext.Provider
+      value={{
+        isVisible,
+        isAnimOut,
+        isAnimIn,
+      }}
+      {...otherProps}
+    />
+  )
+}
+
+export const useAnimation = (): AnimationProps => {
+  const context = React.useContext(AnimationContext)
+  if (!context) {
+    throw new Error("useAnimation must be used within a AnimationProvider")
+  }
+  return context
+}

package/src/Tooltip/utils/isSemanticElement.spec.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { Button, IconButton } from "~components/Button"
+import { ArrowRightIcon } from "~components/Icon"
+import { isSemanticElement } from "./isSemanticElement"
+
+describe("isSemanticElement", () => {
+  it("returns true if provided a native element with a semantic role", () => {
+    expect(
+      isSemanticElement(
+        <button onClick={jest.fn()} type="button">
+          click
+        </button>
+      )
+    ).toBe(true)
+    expect(isSemanticElement(<a href="/">link</a>)).toBe(true)
+  })
+
+  it("returns false if provided a non-semantic element", () => {
+    expect(isSemanticElement(<span>click</span>)).toBe(false)
+    expect(isSemanticElement(<div>link</div>)).toBe(false)
+  })
+
+  it("returns true if provided one of the Kaizen components from the allowed list", () => {
+    expect(isSemanticElement(<Button label="Click" />)).toBe(true)
+    expect(isSemanticElement(<IconButton label="click" />)).toBe(true)
+  })
+
+  it("will return true if provided a non-semantic element with a semantic role", () => {
+    expect(
+      isSemanticElement(
+        <span
+          tabIndex={0}
+          role="button"
+          onKeyDown={jest.fn}
+          onClick={jest.fn()}
+        >
+          custom semantic el
+        </span>
+      )
+    ).toBe(true)
+    expect(
+      isSemanticElement(
+        <div tabIndex={0} role="button" onKeyDown={jest.fn} onClick={jest.fn()}>
+          custom semantic el
+        </div>
+      )
+    ).toBe(true)
+    expect(
+      isSemanticElement(
+        <div role="textbox" contentEditable="true" aria-multiline="true" />
+      )
+    ).toBe(true)
+  })
+
+  it("returns false if provided an element using a role 'presentation' or 'none'", () => {
+    expect(isSemanticElement(<ArrowRightIcon role="presentation" />)).toBe(
+      false
+    )
+    expect(
+      isSemanticElement(
+        <span role="none">
+          <ArrowRightIcon role="presentation" />
+        </span>
+      )
+    ).toBe(false)
+  })
+})

package/src/Tooltip/utils/isSemanticElement.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from "react"
+
+// Noting that this is contingent on our displayName for our components -  this something we control
+const allowedDisplayNames = ["Button", "IconButton", "FilterButtonBase"]
+
+export function extractDisplayName(type: React.FunctionComponent): string {
+  return type.displayName || type.name || "Unknown"
+}
+
+/**
+ *  Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers
+ */
+export const isSemanticElement = (
+  element: ReactNode
+): element is React.ReactElement => {
+  if (!React.isValidElement(element)) return false
+
+  const { props, type } = element
+
+  if ("role" in props) {
+    return props.role !== "presentation" && props.role !== "none"
+  }
+
+  if (typeof type !== "string") {
+    // As we are only checking whether this matches to our allowedDisplayNames
+    // type casting should be fine
+    const displayName = extractDisplayName(
+      type as unknown as React.FunctionComponent
+    )
+
+    return allowedDisplayNames.includes(displayName)
+  }
+
+  return !(type === "div" || type === "span")
+}

package/src/VisuallyHidden/VisuallyHidden.module.scss

@@ -0,0 +1,9 @@
+.srOnly {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/src/VisuallyHidden/VisuallyHidden.spec.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { render } from "@testing-library/react"
+
+import { VisuallyHidden } from "./VisuallyHidden"
+
+describe("<VisuallyHidden />", () => {
+  it("still renders any child components", () => {
+    const { getByText } = render(
+      <VisuallyHidden>
+        <p>Lorem ipsum</p>
+      </VisuallyHidden>
+    )
+
+    expect(getByText("Lorem ipsum")).toBeInTheDocument()
+  })
+})

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode, HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./VisuallyHidden.module.scss"
+
+export type VisuallyHiddenProps = {
+  children: ReactNode
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const VisuallyHidden = ({
+  children,
+  classNameOverride,
+  ...restProps
+}: VisuallyHiddenProps): JSX.Element => (
+  <span className={classnames(styles.srOnly, classNameOverride)} {...restProps}>
+    {children}
+  </span>
+)
+
+VisuallyHidden.displayName = "VisuallyHidden"

package/src/VisuallyHidden/_docs/VisuallyHidden.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as VisuallyHiddenStories from "./VisuallyHidden.stories"
+
+<Meta of={VisuallyHiddenStories} />
+
+# VisuallyHidden
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/VisuallyHidden"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { VisuallyHidden } from "@kaizen/components"'
+/>
+
+## Overview
+
+Utility component to render text that will be read out when using screen readers (and similar assistive technologies), but won't be shown visually on screen.
+
+<Canvas of={VisuallyHiddenStories.Playground} />
+<Controls of={VisuallyHiddenStories.Playground} />
+
+## Usage
+
+This is often used to add context to a button or link, given screen reader users don't have the context from the surrounding elements like visual users do.
+
+For example, imagine a list of surveys, each with a link that reads "View report".
+
+Visual users can see the name of the survey to the left of the link, but screen reader users will often scan the page for links, or skip straight to links.
+
+The context can be added like so:
+
+```jsx
+<a href="/path">View report<VisuallyHidden> for Camper Check-in 2023</VisuallyHidden></a>
+```

package/src/VisuallyHidden/_docs/VisuallyHidden.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { VisuallyHidden } from "../index"
+
+const meta = {
+  title: "Components/Visually Hidden",
+  component: VisuallyHidden,
+  args: {
+    children: "👋 Hello!",
+  },
+} satisfies Meta<typeof VisuallyHidden>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  render: args => (
+    <div>
+      There is visually hidden text between the two brackets (click &quot;Show
+      code&quot; to see more): [<VisuallyHidden {...args} />]
+    </div>
+  ),
+}

package/src/VisuallyHidden/index.ts

@@ -0,0 +1 @@
+export * from "./VisuallyHidden"