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

package/src/Illustration/Spot/_docs/Spot.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Text } from "~components/Text"
+import { CompanyDetails } from "../index"
+
+const meta = {
+  title: "Components/Illustrations/Spot",
+  component: CompanyDetails,
+} satisfies Meta<typeof CompanyDetails>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const EnabledAspectRatio: Story = {
+  render: () => (
+    <>
+      <div className="flex items-center gap-16">
+        <CompanyDetails enableAspectRatio={true} />
+        <Text variant="body">
+          With <code>enableAspectRatio</code>... lorem ipsum dolor sit amet
+          consectetur adipisicing elit. Fugit id obcaecati quasi rerum natus
+          nostrum, nobis saepe unde eveniet quidem! Pariatur impedit, veritatis
+          at ea iure id enim ipsam voluptatum!
+        </Text>
+      </div>
+      <div className="flex items-center gap-16">
+        <CompanyDetails />
+        <Text variant="body">
+          Without <code>enableAspectRatio</code>... lorem ipsum dolor sit amet
+          consectetur adipisicing elit. Fugit id obcaecati quasi rerum natus
+          nostrum, nobis saepe unde eveniet quidem! Pariatur impedit, veritatis
+          at ea iure id enim ipsam voluptatum!
+        </Text>
+      </div>
+    </>
+  ),
+}

package/src/Illustration/Spot/index.ts

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

package/src/Illustration/index.ts

@@ -0,0 +1,2 @@
+export * from "./Spot"
+export * from "./Scene"

package/src/Illustration/subcomponents/Base/Base.module.scss

@@ -0,0 +1,125 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/animation";
+
+.wrapper {
+  width: 100%;
+  margin: 0;
+}
+
+.figure {
+  margin: 0;
+  position: relative;
+
+  // nested to get more specificity, beat out the generic button styles
+  .pausePlayButton {
+    opacity: 0%;
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+    /* stylelint-disable declaration-no-important */
+    background-color: $color-white !important;
+    border: 1px solid $color-gray-400;
+    transition: all $animation-duration-immediate;
+
+    @media (hover: none) and (pointer: coarse) {
+      opacity: 100%;
+    }
+
+    svg {
+      color: $color-purple-800;
+      opacity: 70%;
+    }
+
+    &:hover,
+    &:focus {
+      opacity: 100%;
+      background-color: $color-gray-200 !important;
+
+      svg {
+        opacity: 100%;
+      }
+    }
+  }
+
+  &:hover {
+    .pausePlayButton {
+      opacity: 100%;
+    }
+  }
+}
+
+.aspectRatioWrapper {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.landscape {
+  aspect-ratio: 4/3;
+
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 75%;
+      content: "";
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+  }
+}
+
+.portrait {
+  aspect-ratio: 3/4;
+
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 133.33%;
+      content: "";
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+  }
+}
+
+.square {
+  aspect-ratio: auto 1/1;
+
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 100%;
+      content: "";
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+  }
+}
+
+// If the .visually-hidden class is applied to natively focusable elements
+// (such as a, button, input, etc) they must become visible when they receive
+// keyboard focus. Otherwise, a sighted keyboard user would have to try and
+// figure out where their visible focus indicator had gone to.
+.visuallyHidden:not(:focus, :active) {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+}

package/src/Illustration/subcomponents/Base/Base.tsx

@@ -0,0 +1,54 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { assetUrl } from "@kaizen/hosted-assets"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./Base.module.scss"
+
+export type BaseProps = {
+  /**
+   *  Refer to the Base Illustration Sticker Sheet in Heart UI Kit
+   */
+  name: string
+
+  /**
+   * Only provide if there is context/text required surrounding this illustration.
+   * @default ""
+   */
+  alt?: string
+
+  /**
+   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the
+   * component in a container, forcing the aspect ratio.
+   */
+  aspectRatio?: "landscape" | "portrait" | "square"
+} & OverrideClassName<HTMLAttributes<HTMLImageElement>>
+
+export const Base = ({
+  name,
+  alt = "",
+  classNameOverride,
+  aspectRatio,
+  ...restProps
+}: BaseProps): JSX.Element => {
+  const className = classnames(styles.wrapper, classNameOverride)
+
+  return aspectRatio ? (
+    <figure
+      className={classnames(
+        styles.aspectRatioWrapper,
+        aspectRatio && styles[aspectRatio]
+      )}
+    >
+      <img
+        {...restProps}
+        className={className}
+        alt={alt}
+        src={assetUrl(name)}
+      />
+    </figure>
+  ) : (
+    <img {...restProps} className={className} alt={alt} src={assetUrl(name)} />
+  )
+}
+
+Base.displayName = "Base"

package/src/Illustration/subcomponents/Base/index.ts

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

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.spec.tsx

@@ -0,0 +1,178 @@
+import * as React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { VideoPlayer } from "./VideoPlayer"
+
+const matchMedia = {
+  media: "",
+  onchange: null,
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+}
+const mockPrefersReducedMotion = {
+  matches: true,
+  ...matchMedia,
+}
+const mockDoesNotPreferReducedMotion = {
+  matches: false,
+  ...matchMedia,
+}
+const mockPlay = jest.fn().mockResolvedValue(undefined)
+const mockLoad = jest.fn()
+const mockPause = jest.fn()
+
+describe("<VideoPlayer />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    window.HTMLMediaElement.prototype.load = mockLoad
+    window.HTMLMediaElement.prototype.play = mockPlay
+    window.HTMLMediaElement.prototype.pause = mockPause
+    window.matchMedia = jest
+      .fn()
+      .mockImplementation(() => mockDoesNotPreferReducedMotion)
+    // this will stop throwing the unstable_flushDiscreteUpdates console error cause by react bug
+    // https://stackoverflow.com/a/65338472/18285270
+    Object.defineProperty(HTMLMediaElement.prototype, "muted", {
+      set: jest.fn(),
+    })
+  })
+
+  it("renders a video player in the document and autoplay", async () => {
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).toBeInTheDocument()
+    expect(mockPlay).toBeCalled()
+  })
+
+  describe("use-reduced-motion", () => {
+    it("respects the use-reduced-motion preferences of the user", () => {
+      window.matchMedia = jest
+        .fn()
+        .mockImplementation(() => mockPrefersReducedMotion)
+      render(
+        <VideoPlayer
+          autoplay
+          fallback="illustrations/heart/spot/moods-cautionary.svg"
+          source="illustrations/heart/spot/moods-cautionary.webm"
+        />
+      )
+      const videoPlayer = screen.getByTestId("kz-video-player")
+      expect(videoPlayer).toMatchInlineSnapshot(`
+        <video
+          aria-hidden="true"
+          class="wrapper"
+          data-testid="kz-video-player"
+          muted=""
+          playsinline=""
+          poster="https://d1e7r7b0lb8p4d.cloudfront.net/illustrations/heart/spot/moods-cautionary.svg.png"
+          preload="metadata"
+          tabindex="-1"
+          width="100%"
+        >
+          <source
+            src="https://d1e7r7b0lb8p4d.cloudfront.net/illustrations/heart/spot/moods-cautionary.webm.mp4"
+            type="video/mp4"
+          />
+        </video>
+      `)
+      expect(mockPause).toBeCalled()
+    })
+
+    it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
+      window.matchMedia = jest
+        .fn()
+        .mockImplementation(() => mockDoesNotPreferReducedMotion)
+      render(
+        <VideoPlayer
+          autoplay
+          fallback="illustrations/heart/spot/moods-cautionary.svg"
+          source="illustrations/heart/spot/moods-cautionary.webm"
+        />
+      )
+      const videoPlayer = screen.getByTestId("kz-video-player")
+      expect(videoPlayer).toMatchInlineSnapshot(`
+        <video
+          aria-hidden="true"
+          autoplay=""
+          class="wrapper"
+          data-testid="kz-video-player"
+          muted=""
+          playsinline=""
+          poster="https://d1e7r7b0lb8p4d.cloudfront.net/illustrations/heart/spot/moods-cautionary.svg.png"
+          preload="metadata"
+          tabindex="-1"
+          width="100%"
+        >
+          <source
+            src="https://d1e7r7b0lb8p4d.cloudfront.net/illustrations/heart/spot/moods-cautionary.webm.mp4"
+            type="video/mp4"
+          />
+        </video>
+      `)
+      expect(mockPlay).toBeCalled()
+    })
+  })
+
+  describe("when the aspect ratio is set as a prop", () => {
+    it("has aspect ratio class", () => {
+      window.matchMedia = jest
+        .fn()
+        .mockImplementation(() => mockDoesNotPreferReducedMotion)
+      const { container } = render(
+        <VideoPlayer
+          aspectRatio="landscape"
+          autoplay
+          fallback="illustrations/heart/spot/moods-cautionary.svg"
+          source="illustrations/heart/spot/moods-cautionary.webm"
+        />
+      )
+      expect(container.querySelector(".aspectRatioWrapper")).toBeTruthy()
+      expect(container.querySelector(".landscape")).toBeTruthy()
+    })
+  })
+
+  describe("when the aspect ratio is not set as a prop", () => {
+    it("does not have aspect ratio class", () => {
+      window.matchMedia = jest
+        .fn()
+        .mockImplementation(() => mockDoesNotPreferReducedMotion)
+      const { container } = render(
+        <VideoPlayer
+          autoplay
+          fallback="illustrations/heart/spot/moods-cautionary.svg"
+          source="illustrations/heart/spot/moods-cautionary.webm"
+        />
+      )
+      expect(container.querySelector(".aspectRatioWrapper")).toBeFalsy()
+      expect(container.querySelector(".landscape")).toBeFalsy()
+    })
+  })
+
+  describe("Pausing/Playing animations", () => {
+    it("restarts the animation when pause button is clicked", () => {
+      const { container, getByRole } = render(
+        <VideoPlayer
+          fallback="illustrations/heart/spot/moods-cautionary.svg"
+          source="illustrations/heart/spot/moods-cautionary.webm"
+        />
+      )
+
+      const videoElement = container.querySelector("video")!
+
+      expect(videoElement.paused).toEqual(true)
+
+      const button = getByRole("button")
+      userEvent.click(button)
+
+      expect(mockPlay).toHaveBeenCalled()
+    })
+  })
+})

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useRef } from "react"
+import classnames from "classnames"
+import { assetUrl } from "@kaizen/hosted-assets"
+import { IconButton } from "~components/Button"
+import { canPlayWebm } from "../../utils/canPlayWebm"
+import { usePausePlay } from "../../utils/usePausePlay"
+import styles from "../Base/Base.module.scss"
+
+export type VideoPlayerProps = {
+  /**
+   * Specifies whether the animation plays as soon as it is rendered.
+   * If the user has enabled prefer-reduced-motion their preferences
+   * take precedent over this prop.
+   */
+  autoplay?: boolean
+
+  /**
+   * Replay from start when active animation reaches the end of the animation.
+   */
+  loop?: boolean
+
+  /**
+   * Fallback image. Used when rendering of the asset fails, or as a
+   * poster for the video player.
+   */
+  fallback: string
+
+  /**
+   * The path of the animation source, excluding the file extension. This
+   * Player will preference Webm over mp4.
+   */
+  source: string
+
+  /**
+   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the
+   * component in a container, forcing the aspect ratio.
+   */
+  aspectRatio?: "landscape" | "portrait" | "square"
+
+  onEnded?: () => void
+}
+
+export const VideoPlayer = ({
+  autoplay = true,
+  loop = false,
+  fallback,
+  source,
+  aspectRatio,
+  onEnded,
+}: VideoPlayerProps): JSX.Element => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [prefersReducedMotion, setPrefersReducedMotion] =
+    React.useState<boolean>(true)
+
+  useEffect(() => {
+    /**
+     * Setting `muted` on the player is required in Safari/Webkit and older
+     * versions of Chome for the video to autoplay (regardless of whether
+     * the format contains an audio stream or not).
+     *
+     * React does not guarentee the `muted` attribute is set on the
+     * `video` element. So on load we force set this attribute. See issue:
+     * https://github.com/facebook/react/issues/10389
+     */
+    const { current: videoElement } = videoRef
+    if (videoElement !== null) {
+      videoElement.setAttribute("muted", "")
+    }
+  }, [])
+
+  useEffect(() => {
+    // when the source of the animation is updated, we need to reload the asset
+    // to ensure the video player is in sync with the new source.
+    const { current: videoElement } = videoRef
+    if (videoElement !== null) {
+      videoElement.load()
+    }
+  }, [source])
+
+  useEffect(() => {
+    if (!window) return
+
+    const reducedMotionQuery = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    )
+    setPrefersReducedMotion(reducedMotionQuery.matches)
+    const updateMotionPreferences = (): void => {
+      const { matches = false } = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      )
+      setPrefersReducedMotion(matches)
+    }
+
+    const isLegacyEdge = navigator.userAgent.match(/Edge/)
+
+    const isUnsupportedSafari =
+      window.matchMedia("").addEventListener === undefined
+
+    if (isLegacyEdge || isUnsupportedSafari) return
+
+    reducedMotionQuery.addEventListener("change", updateMotionPreferences, true)
+
+    return function cleanup() {
+      reducedMotionQuery.removeEventListener("change", updateMotionPreferences)
+    }
+  }, [])
+
+  useEffect(() => {
+    const { current: videoElement } = videoRef
+    if (!videoElement) return
+
+    if (prefersReducedMotion) {
+      videoElement.pause()
+    } else if (autoplay && !prefersReducedMotion) {
+      try {
+        // Older browsers may not return a promise, so .play could return undefined
+        videoElement.play()?.catch(() => {
+          /*
+           * An DOMException _may_ be raised by some browsers if we
+           * programatically interact with the video before the
+           * user has interacted with the page. This is okay - so
+           * we're going to catch this error without handling it. See:
+           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability
+           */
+        })
+      } catch (e) {
+        /**
+         * Older browsers will raise a synchronous error because their first implementation
+         * of `.play` was not a promise.
+         */
+      }
+    }
+    /**
+     * Chrome seems to have an issue with changes to autoplay after the video
+     * has been mounted. If there is a change in autoplay we need to force the
+     * play() method to be called.
+     */
+  }, [prefersReducedMotion, autoplay])
+
+  useEffect(() => {
+    // Add event listeners for the video element
+    const { current: videoElement } = videoRef
+    if (!videoElement || !onEnded) return
+
+    videoElement.addEventListener("ended", onEnded)
+
+    return function cleanup() {
+      videoElement.removeEventListener("ended", onEnded)
+    }
+  }, [videoRef])
+
+  const pausePlay = usePausePlay(videoRef)
+
+  return (
+    <figure
+      className={classnames(styles.figure, {
+        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:
+          Boolean(aspectRatio),
+      })}
+    >
+      <video
+        muted={true}
+        aria-hidden={true}
+        preload="metadata"
+        ref={videoRef}
+        width="100%"
+        data-testid="kz-video-player"
+        className={styles.wrapper}
+        loop={loop}
+        poster={assetUrl(`${fallback}.png`)}
+        autoPlay={prefersReducedMotion ? false : autoplay}
+        playsInline={true}
+        tabIndex={-1}
+      >
+        {/**
+         * This seems counter-intuitive, but webm support is codec specific.
+         * Only offer webm if we are positive the browser supports it.
+         * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1
+         */}
+        {canPlayWebm() && (
+          <source src={assetUrl(`${source}.webm`)} type="video/webm" />
+        )}
+        <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />
+      </video>
+      <IconButton
+        onClick={(): void => pausePlay.toggle()}
+        icon={pausePlay.icon}
+        label={pausePlay.label}
+        classNameOverride={styles.pausePlayButton}
+      />
+    </figure>
+  )
+}

package/src/Illustration/subcomponents/VideoPlayer/index.ts

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

package/src/Illustration/utils/canPlayWebm.ts

@@ -0,0 +1,19 @@
+/**
+ * Detect whether the current browser can play webm files
+ */
+export const canPlayWebm = (): boolean => {
+  if (typeof window === "undefined") return false
+
+  // Don't trust Safari's canPlayType implementation, as there is partial support for webm
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+  if (isSafari) {
+    return false
+  }
+
+  // Attempt webm feature detection
+  const video = document.createElement("video")
+  if (video.canPlayType("video/webm; codecs=vp9") === "probably") {
+    return true
+  }
+  return false
+}