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

package/src/Icon/index.ts

@@ -0,0 +1,240 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+export * from "./AcademyIcon"
+export * from "./ActionOffIcon"
+export * from "./ActionOffWhiteIcon"
+export * from "./ActionOnIcon"
+export * from "./AddIcon"
+export * from "./AddLinkIcon"
+export * from "./AddWhiteIcon"
+export * from "./AiIcon"
+export * from "./ArchivedIcon"
+export * from "./ArchivedWhiteIcon"
+export * from "./ArrowBackwardIcon"
+export * from "./ArrowDownIcon"
+export * from "./ArrowForwardIcon"
+export * from "./ArrowLeftIcon"
+export * from "./ArrowRightIcon"
+export * from "./ArrowUpIcon"
+export * from "./BlankIcon"
+export * from "./BoldIcon"
+export * from "./BookmarkOffIcon"
+export * from "./BookmarkOnIcon"
+export * from "./BranchingIcon"
+export * from "./BullettedListIcon"
+export * from "./CaMonogramIcon"
+export * from "./CameraIcon"
+export * from "./CautionIcon"
+export * from "./CautionWhiteIcon"
+export * from "./CheckIcon"
+export * from "./ChevronDownIcon"
+export * from "./ChevronLeftIcon"
+export * from "./ChevronRightIcon"
+export * from "./ChevronUpIcon"
+export * from "./ClearIcon"
+export * from "./ClearWhiteIcon"
+export * from "./CloseIcon"
+export * from "./ClosedIcon"
+export * from "./ClosedWhiteIcon"
+export * from "./CommentAddIcon"
+export * from "./CommentAddWhiteIcon"
+export * from "./CommentBankIcon"
+export * from "./CommentDisabledIcon"
+export * from "./CommentDisabledWhiteIcon"
+export * from "./CommentIcon"
+export * from "./CommentWhiteIcon"
+export * from "./CommunicationsIcon"
+export * from "./CompetencyLibraryIcon"
+export * from "./ConfigureIcon"
+export * from "./ConnectIcon"
+export * from "./ConnectLineIcon"
+export * from "./CustomIcon"
+export * from "./DashboardIcon"
+export * from "./DateEndIcon"
+export * from "./DateEndWhiteIcon"
+export * from "./DateRangeIcon"
+export * from "./DateRangeWhiteIcon"
+export * from "./DateStartIcon"
+export * from "./DateStartWhiteIcon"
+export * from "./DecreaseIndentIcon"
+export * from "./DeltaBareIcon"
+export * from "./DeltaBareWhiteIcon"
+export * from "./DeltaFlatIcon"
+export * from "./DeltaIcon"
+export * from "./DeltaNegativeIcon"
+export * from "./DeltaPositiveIcon"
+export * from "./DeltaWhiteIcon"
+export * from "./DemographicsIcon"
+export * from "./DepartmentIcon"
+export * from "./DraftIcon"
+export * from "./DraftWhiteIcon"
+export * from "./DragIcon"
+export * from "./DuplicateIcon"
+export * from "./EditIcon"
+export * from "./EffectivenessIcon"
+export * from "./EllipsisIcon"
+export * from "./EmailIcon"
+export * from "./EmptyIcon"
+export * from "./EmptyWhiteIcon"
+export * from "./EndIcon"
+export * from "./EngagementIcon"
+export * from "./EngagementWhiteIcon"
+export * from "./EqualIcon"
+export * from "./EqualWhiteIcon"
+export * from "./ExclamationIcon"
+export * from "./ExclamationOctagonIcon"
+export * from "./ExclamationOctagonWhiteIcon"
+export * from "./ExclamationWhiteIcon"
+export * from "./ExperienceIcon"
+export * from "./ExportIcon"
+export * from "./ExportWhiteIcon"
+export * from "./ExternalLinkIcon"
+export * from "./FaceDissatisfiedIcon"
+export * from "./FaceDissatisfiedWhiteIcon"
+export * from "./FaceNeutralIcon"
+export * from "./FaceNeutralWhiteIcon"
+export * from "./FaceSatisfiedIcon"
+export * from "./FaceSatisfiedWhiteIcon"
+export * from "./FaceVeryDissatisfiedIcon"
+export * from "./FaceVeryDissatisfiedWhiteIcon"
+export * from "./FaceVerySatisfiedIcon"
+export * from "./FaceVerySatisfiedWhiteIcon"
+export * from "./FactorsIcon"
+export * from "./FavoriteOffIcon"
+export * from "./FavoriteOnIcon"
+export * from "./FeedbackClassifyIcon"
+export * from "./FeedbackClassifyWhiteIcon"
+export * from "./FeedbackCompletedIcon"
+export * from "./FeedbackCompletedWhiteIcon"
+export * from "./FeedbackReportIcon"
+export * from "./FeedbackReportWhiteIcon"
+export * from "./FeedbackReviewIcon"
+export * from "./FeedbackReviewWhiteIcon"
+export * from "./FeedbackShareIcon"
+export * from "./FeedbackShareWhiteIcon"
+export * from "./FileIcon"
+export * from "./FileWhiteIcon"
+export * from "./FilterIcon"
+export * from "./FlagOffIcon"
+export * from "./FlagOffWhiteIcon"
+export * from "./FlagOnIcon"
+export * from "./FullIcon"
+export * from "./GridViewIcon"
+export * from "./GuidanceIcon"
+export * from "./HamburgerIcon"
+export * from "./HeatmapIcon"
+export * from "./HeatmapWhiteIcon"
+export * from "./HierarchyIcon"
+export * from "./HomeIcon"
+export * from "./ImportIcon"
+export * from "./ImportWhiteIcon"
+export * from "./IncreaseIndentIcon"
+export * from "./IndicatorActiveIcon"
+export * from "./IndicatorInactiveIcon"
+export * from "./InformationIcon"
+export * from "./InformationWhiteIcon"
+export * from "./InsightIcon"
+export * from "./InsightsIcon"
+export * from "./InvisibleIcon"
+export * from "./ItalicsIcon"
+export * from "./KebabIcon"
+export * from "./KioskIcon"
+export * from "./KioskWhiteIcon"
+export * from "./LaunchIcon"
+export * from "./LaunchWhiteIcon"
+export * from "./LeaderboardIcon"
+export * from "./ListViewIcon"
+export * from "./LiveIcon"
+export * from "./LockIcon"
+export * from "./LockWhiteIcon"
+export * from "./LogOutIcon"
+export * from "./MaximizeIcon"
+export * from "./MeatballsIcon"
+export * from "./MinimizeIcon"
+export * from "./MinusIcon"
+export * from "./NavigatorIcon"
+export * from "./NotificationIcon"
+export * from "./NumberedListIcon"
+export * from "./NumberedListRtlIcon"
+export * from "./OpenIcon"
+export * from "./OpenWhiteIcon"
+export * from "./OrganizationIcon"
+export * from "./ParticipationIcon"
+export * from "./ParticipationWhiteIcon"
+export * from "./PauseIcon"
+export * from "./PauseWhiteIcon"
+export * from "./PercentageIcon"
+export * from "./PermissionsIcon"
+export * from "./PersonIcon"
+export * from "./PhotoUploadIcon"
+export * from "./PowerIcon"
+export * from "./PrintIcon"
+export * from "./PrintWhiteIcon"
+export * from "./ProcessManagerIcon"
+export * from "./PromotionIcon"
+export * from "./PromotionWhiteIcon"
+export * from "./QuestionIcon"
+export * from "./QuestionWhiteIcon"
+export * from "./QuestionsIcon"
+export * from "./RedoIcon"
+export * from "./RefreshIcon"
+export * from "./RemoveLinkIcon"
+export * from "./RepeatsIcon"
+export * from "./ReportIcon"
+export * from "./ReportSharingIcon"
+export * from "./RestoreIcon"
+export * from "./SaveIcon"
+export * from "./SearchIcon"
+export * from "./SearchWhiteIcon"
+export * from "./SecurityTipIcon"
+export * from "./SendIcon"
+export * from "./SendRtlIcon"
+export * from "./SettingsIcon"
+export * from "./SettingsWhiteIcon"
+export * from "./ShareIcon"
+export * from "./SkipIcon"
+export * from "./SkipWhiteIcon"
+export * from "./SortAscendingIcon"
+export * from "./SortDescendingIcon"
+export * from "./SpinnerIcon"
+export * from "./StarOffIcon"
+export * from "./StarOnIcon"
+export * from "./StartIcon"
+export * from "./SubtractIcon"
+export * from "./SubtractWhiteIcon"
+export * from "./SuccessIcon"
+export * from "./SuccessWhiteIcon"
+export * from "./SupportIcon"
+export * from "./SurveysIcon"
+export * from "./SurveysWhiteIcon"
+export * from "./SyncIcon"
+export * from "./TagIcon"
+export * from "./TasksIcon"
+export * from "./TasksWhiteIcon"
+export * from "./TemplateIcon"
+export * from "./TemplateWhiteIcon"
+export * from "./TextAnalyticsIcon"
+export * from "./TextAnalyticsWhiteIcon"
+export * from "./ThumbsDownIcon"
+export * from "./ThumbsUpIcon"
+export * from "./TimeIcon"
+export * from "./TimeWhiteIcon"
+export * from "./TranslationIcon"
+export * from "./TrashIcon"
+export * from "./UnattributedIcon"
+export * from "./UnattributedWhiteIcon"
+export * from "./UnderlineIcon"
+export * from "./UndoIcon"
+export * from "./UserAddIcon"
+export * from "./UserDeleteIcon"
+export * from "./UserExitIcon"
+export * from "./UserIcon"
+export * from "./UserSelectIcon"
+export * from "./UserSettingsIcon"
+export * from "./UserUpdateIcon"
+export * from "./UsersIcon"
+export * from "./VisibleIcon"
+export * from "./WritingIcon"
+export * from "./ZoomInIcon"
+export * from "./ZoomOutIcon"

package/src/Icon/subcomponents/SVG/SVG.module.scss

@@ -0,0 +1,32 @@
+$ca-icon-width: 20px;
+$ca-icon-height: 20px;
+
+.icon {
+  width: $ca-icon-width;
+  height: $ca-icon-height;
+  display: inline-block;
+
+  // jQuery has an IE11 bug where delegated events aren't registered if the click was on an icon.
+  // A workaround is to disable `point-events` on the use element. See https://github.com/jquery/jquery/issues/3877
+  > use {
+    pointer-events: none;
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    color: black;
+  }
+
+  @media screen and (-ms-high-contrast: white-on-black) {
+    color: white;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: black;
+  }
+}
+
+.inheritSize {
+  width: inherit;
+  height: inherit;
+  display: block;
+}

package/src/Icon/subcomponents/SVG/SVG.spec.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { SVG } from "./SVG"
+
+describe("<SVG />", () => {
+  describe("Meaningful (role=img)", () => {
+    it("renders an accessible name", () => {
+      const label = "My accessible label"
+      render(
+        <SVG role="img" aria-label={label}>
+          <path />
+        </SVG>
+      )
+
+      expect(screen.getByRole("img", { name: label })).toBeInTheDocument()
+    })
+  })
+})

package/src/Icon/subcomponents/SVG/SVG.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode, SVGAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./SVG.module.scss"
+
+type BaseSVGProps = {
+  inheritSize?: boolean
+} & OverrideClassName<SVGAttributes<SVGElement>>
+
+type MeaningfulIcon = {
+  role: "img"
+  "aria-label": string
+}
+
+type DecorativeIcon = {
+  role: "presentation"
+  "aria-label"?: never
+}
+
+export type IconProps = BaseSVGProps & (MeaningfulIcon | DecorativeIcon)
+export type SVGProps = IconProps & {
+  children: ReactNode
+}
+
+/**
+ * {@link https://cultureamp.design/?path=/docs/components-icon--meaningful-kaizen-site-demo Storybook}
+ */
+export const SVG = ({
+  inheritSize = false,
+  role,
+  viewBox = "0 0 20 20",
+  classNameOverride,
+  children,
+  ...restProps
+}: SVGProps): JSX.Element => {
+  const classes = classnames(
+    styles.icon,
+    classNameOverride,
+    inheritSize && styles.inheritSize
+  )
+
+  if (role === "presentation") {
+    return (
+      <svg
+        className={classes}
+        viewBox={viewBox}
+        role={role}
+        aria-hidden={true}
+        {...restProps}
+      >
+        {children}
+      </svg>
+    )
+  }
+
+  return (
+    <svg role={role} className={classes} viewBox={viewBox} {...restProps}>
+      {children}
+    </svg>
+  )
+}
+
+SVG.displayName = "SVG"

package/src/Icon/subcomponents/SVG/index.ts

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

package/src/Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react"
+import { AnimatedSceneProps } from "~components/Illustration/Scene/Scene"
+import { Base } from "~components/Illustration/subcomponents/Base/Base"
+import { VideoPlayer } from "~components/Illustration/subcomponents/VideoPlayer"
+
+/**
+ * This component is a snowflake. It plays two assets one after the other:
+ *  - An "initial" animation that is only ever played once, never looping
+ *  - An "ambient" animation that can be looped, depending on the props passed into it
+ */
+export const BrandMomentCaptureIntro = ({
+  isAnimated,
+  alt,
+  enableAspectRatio,
+  ...otherProps
+}: AnimatedSceneProps): JSX.Element => {
+  const [firstAnimationComplete, setFirstAnimationComplete] =
+    useState<boolean>(false)
+  const aspectRatio = enableAspectRatio ? "landscape" : undefined
+
+  if (!isAnimated) {
+    return (
+      <Base
+        aspectRatio={aspectRatio}
+        alt={alt || ""}
+        {...otherProps}
+        name="illustrations/heart/scene/brand-moments-capture-intro-loop.png"
+      />
+    )
+  }
+
+  if (firstAnimationComplete) {
+    return (
+      <VideoPlayer
+        {...otherProps}
+        aspectRatio={aspectRatio}
+        fallback="illustrations/heart/scene/brand-moments-capture-intro-loop"
+        source="illustrations/heart/scene/brand-moments-capture-intro-loop"
+        autoplay={firstAnimationComplete ? otherProps.autoplay : false}
+      />
+    )
+  }
+
+  return (
+    <VideoPlayer
+      {...otherProps}
+      aspectRatio={aspectRatio}
+      fallback="illustrations/heart/scene/brand-moments-capture-intro"
+      source="illustrations/heart/scene/brand-moments-capture-intro"
+      onEnded={(): void => setFirstAnimationComplete(true)}
+      loop={false}
+    />
+  )
+}
+
+BrandMomentCaptureIntro.displayName = "BrandMomentCaptureIntro"

package/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx

@@ -0,0 +1,45 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as BrandMomentCaptureIntroStories from "./BrandMomentCaptureIntro.stories"
+
+<Meta of={BrandMomentCaptureIntroStories} />
+
+# BrandMomentCaptureIntro
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/BrandMomentCaptureIntro"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=50195%3A251126&mode=design&t=AWARn1Fp8ago39Br-1"
+  designGuidelines="https://cultureamp.atlassian.net/l/cp/58wsFtBe"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { BrandMomentCaptureIntro } from "@kaizen/components"'
+/>
+
+## Overview
+
+Functionally similar to an animation Scene illustration but has 3 different states based on the properties passed in:
+- An initial animation that is only ever played once, never looping.
+- An ambient animation that can be looped.
+- A static image that is not animated.
+
+<Canvas of={BrandMomentCaptureIntroStories.Playground} />
+<Controls of={BrandMomentCaptureIntroStories.Playground} />
+
+## API
+
+### Single animation
+Will trigger the animation once.
+<Canvas of={BrandMomentCaptureIntroStories.Animated} />
+
+### Looped animation
+Will render the a looped animation. Should be used with `isAnimated` to render the "initial" intro animation.
+<Canvas of={BrandMomentCaptureIntroStories.Looped} />
+
+### Autoplay disabled
+If false will render the animation paused. This can be re-enabled clicking the pause sign on hover.
+<Canvas of={BrandMomentCaptureIntroStories.Autoplay} />

package/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { BrandMomentCaptureIntro } from "../index"
+
+export default {
+  title: "Components/Illustrations/Scene/BrandMomentCaptureIntro",
+  parameters: {
+    chromatic: { disable: false, delay: 400 },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed}>
+      <StickerSheet.Header headings={["Default", "Autoplay (hover)"]} />
+      <StickerSheet.Body>
+        <StickerSheet.Row>
+          <BrandMomentCaptureIntro />
+          <BrandMomentCaptureIntro isAnimated autoplay={false} />
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  parameters: {
+    pseudo: {
+      hover: true,
+    },
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

package/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { BrandMomentCaptureIntro } from "../index"
+
+const meta = {
+  title: "Components/Illustrations/Scene/BrandMomentCaptureIntro",
+  component: BrandMomentCaptureIntro,
+} satisfies Meta<typeof BrandMomentCaptureIntro>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Animated: Story = {
+  args: {
+    loop: false,
+    isAnimated: true,
+  },
+}
+
+export const Looped: Story = {
+  args: {
+    isAnimated: true,
+    loop: true,
+  },
+}
+
+export const Autoplay: Story = {
+  args: {
+    isAnimated: true,
+    loop: true,
+    autoplay: false,
+  },
+}

package/src/Illustration/Scene/BrandMomentCaptureIntro/index.ts

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