@kaizen/components 1.34.0 → 1.35.0

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -0,0 +1,225 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import isChromatic from "chromatic"
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  EmailIcon,
+  FeedbackClassifyIcon,
+  SecurityTipIcon,
+} from "~components/Icon"
+import {
+  BrandMomentCaptureIntro,
+  BrandMomentPositiveOutro,
+  BrandMomentError,
+  AnimatedSceneProps,
+} from "~components/Illustration"
+import { Text } from "~components/Text"
+import { BrandMoment } from "../index"
+import {
+  MinimalBasic,
+  MinimalCustomerFocused,
+  FakeNavBar,
+} from "./ExampleHeaders"
+
+const IS_CHROMATIC = isChromatic()
+
+const illustrationProps = (
+  IS_CHROMATIC ? {} : { isAnimated: true, loop: true }
+) satisfies AnimatedSceneProps
+
+const meta = {
+  title: "Components/Brand Moment",
+  component: BrandMoment,
+  parameters: {
+    chromatic: { disable: false },
+  },
+} satisfies Meta<typeof BrandMoment>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const IconRTLTemplate: Pick<Story, "render" | "parameters"> = {
+  render: ({ primaryAction, ...args }, { globals }) => (
+    <BrandMoment
+      {...args}
+      primaryAction={{
+        label: "Primary action label",
+        ...primaryAction,
+        icon:
+          globals.textDirection === "ltr" ? (
+            <ArrowRightIcon role="presentation" />
+          ) : (
+            <ArrowLeftIcon role="presentation" />
+          ),
+      }}
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        // Code snippets will cause the browser to freeze when using JSX.Elements
+        // within an object form prop, thus we must disable them to flip the
+        // primaryAction icon when changing the global text direction
+        code: "disabled",
+      },
+    },
+  },
+}
+
+export const InformativeIntro: Story = {
+  ...IconRTLTemplate,
+  name: "Informative intro",
+  args: {
+    mood: "informative",
+    illustration: <BrandMomentCaptureIntro {...illustrationProps} />,
+    header: <MinimalBasic />,
+    text: {
+      subtitle: "Welcome to Culture Amp",
+      title: "Let's dive in and see how it works",
+    },
+    primaryAction: {
+      label: "Get started",
+      href: "#",
+      icon: <ArrowRightIcon role="presentation" />,
+      iconPosition: "end",
+    },
+  },
+}
+
+export const PositiveOutro: Story = {
+  ...IconRTLTemplate,
+  name: "Positive outro",
+  args: {
+    mood: "positive",
+    illustration: <BrandMomentPositiveOutro {...illustrationProps} />,
+    header: <MinimalBasic />,
+    text: {
+      title: "Import in progress",
+      body: (
+        <>
+          That&apos;s it for now. Your data is importing but you don&apos;t need
+          to hang out here while it happens. Get on with your day and we&apos;ll
+          let you know on the <a href="#">Users page</a> when it&apos;s
+          complete.
+        </>
+      ),
+    },
+    primaryAction: {
+      label: "Go to Users",
+      href: "#",
+      icon: <ArrowRightIcon role="presentation" />,
+      iconPosition: "end",
+    },
+  },
+}
+
+export const InformativeIntroCustomerFocused: Story = {
+  ...IconRTLTemplate,
+  name: "Informative intro (customer focused)",
+  args: {
+    mood: "informative",
+    illustration: <BrandMomentCaptureIntro {...illustrationProps} />,
+    header: <MinimalCustomerFocused />,
+    text: {
+      subtitle: "A survey for Hooli",
+      title: "Manager Effectiveness Survey",
+      body: "Thank you for taking the time to respond to this survey. It'll help us better understand your experience and perspective.",
+      footer: (
+        <>
+          Your responses and information are securely collected and kept by
+          Culture Amp in accordance with our <a href="#">Privacy Policy</a>.
+          Your responses will be reported to Hooli based on the specific rules
+          for this survey. If you have any additional questions, please contact
+          us at <a href="#">support@cultureamp.com</a>.
+        </>
+      ),
+    },
+    primaryAction: {
+      label: "Take survey",
+      href: "#",
+      icon: <ArrowRightIcon role="presentation" />,
+      iconPosition: "end",
+    },
+    secondaryAction: {
+      label: "About data safety",
+      icon: <SecurityTipIcon role="presentation" />,
+    },
+  },
+}
+
+export const PositiveOutroCustomerFocused: Story = {
+  ...IconRTLTemplate,
+  name: "Positive outro (customer focused)",
+  args: {
+    mood: "positive",
+    illustration: <BrandMomentPositiveOutro {...illustrationProps} />,
+    header: <MinimalCustomerFocused />,
+    text: {
+      subtitle: "Manager Effectiveness Survey",
+      title: "That's it — thank you",
+      body: (
+        <>
+          Your responses have been securely recorded. If you need to, you can{" "}
+          <a href="#">retake the survey</a>.
+        </>
+      ),
+      footer: (
+        <>
+          Your responses and information are securely collected and kept by
+          Culture Amp in accordance with our <a href="#">Privacy Policy</a>.
+          Your responses will be reported to Hooli based on the specific rules
+          for this survey. If you have any additional questions, please contact
+          us at <a href="#">support@cultureamp.com</a>.
+        </>
+      ),
+    },
+    primaryAction: {
+      label: "Go to Home",
+      href: "#",
+      icon: <ArrowRightIcon role="presentation" />,
+      iconPosition: "end",
+    },
+    secondaryAction: {
+      label: "Rate this survey",
+      icon: <FeedbackClassifyIcon role="presentation" />,
+    },
+  },
+}
+
+export const Error: Story = {
+  ...IconRTLTemplate,
+  args: {
+    mood: "negative",
+    illustration: <BrandMomentError {...illustrationProps} />,
+    header: <FakeNavBar />,
+    text: {
+      title: "Missing pages are one of life's mysteries",
+    },
+    body: (
+      <>
+        <div className="mb-16">
+          <Text variant="intro-lede">
+            Sorry but we can&apos;t find the page you&apos;re looking for. Go
+            back and try again, or head to <a href="#">Home</a>.
+          </Text>
+        </div>
+        <Text variant="small" color="dark-reduced-opacity">
+          Error code 404
+        </Text>
+      </>
+    ),
+    primaryAction: {
+      label: "Go to Home",
+      href: "#",
+      icon: <ArrowRightIcon role="presentation" />,
+      iconPosition: "end",
+    },
+    secondaryAction: {
+      label: "Contact support",
+      icon: <EmailIcon role="presentation" />,
+    },
+  },
+}

package/src/BrandMoment/_docs/ExampleHeaders.scss

@@ -0,0 +1,87 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/layout";
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm $spacing-md;
+}
+
+.headerLeft {
+  flex: 0 0 50%;
+}
+
+.headerRight {
+  flex: 0 0 50%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.logoLink {
+  display: flex;
+  align-items: center;
+  padding: calc(#{$spacing-sm} - #{$border-solid-border-width}) 0;
+  max-inline-size: 133px;
+
+  > img {
+    inline-size: 100%;
+  }
+}
+
+.logoContainer {
+  background: $color-white;
+  box-sizing: border-box;
+  inline-size: 48px;
+  block-size: 48px;
+  padding: $spacing-xs;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+
+  > img {
+    inline-size: 100%;
+    border-radius: 4px;
+  }
+}
+
+.headerCustomerFocused {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: auto auto;
+  padding: $spacing-lg $spacing-md;
+}
+
+.headerCustomerFocused .logoContainer {
+  inline-size: 48px;
+  block-size: 48px;
+  padding: $spacing-xs;
+  margin-inline-end: auto;
+}
+
+.headerCustomerFocused .rightAlign {
+  margin-inline-start: auto;
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .headerCustomerFocused {
+    align-items: flex-start;
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  .headerCustomerFocused .logoContainer {
+    grid-column-start: 2;
+    inline-size: 84px;
+    block-size: 84px;
+    padding: $spacing-sm;
+  }
+}
+
+.fakeNav {
+  background: $color-purple-600;
+  padding: $spacing-md;
+  display: flex;
+  align-items: center;
+}

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { assetUrl } from "@kaizen/hosted-assets"
+import { Button } from "~components/Button"
+import { CloseIcon } from "~components/Icon"
+import styles from "./ExampleHeaders.scss"
+
+export const MinimalBasic = (): JSX.Element => (
+  <div className={styles.header}>
+    <div className={styles.headerLeft}>
+      <a href="/" aria-label="Home" className={styles.logoLink}>
+        <img
+          src={assetUrl("brand/logo-horizontal-default.svg")}
+          alt="Culture Amp"
+        />
+      </a>
+    </div>
+    <div className={styles.headerRight}>
+      <div className="mr-8">
+        <Button
+          href="#"
+          label="Exit"
+          icon={<CloseIcon role="presentation" />}
+          secondary
+        />
+      </div>
+      <div className={styles.logoContainer}>
+        <img src={assetUrl("brand/enso-default.svg")} alt="Culture Amp" />
+      </div>
+    </div>
+  </div>
+)
+
+export const MinimalCustomerFocused = (): JSX.Element => (
+  <div className={styles.headerCustomerFocused}>
+    <div className={styles.logoContainer}>
+      <img src={assetUrl("brand/enso-default.svg")} alt="Culture Amp" />
+    </div>
+  </div>
+)
+
+export const FakeNavBar = (): JSX.Element => (
+  <div className={styles.fakeNav}>
+    <img
+      src={assetUrl("brand/logo-horizontal-reversed.svg")}
+      alt="Culture Amp"
+      width={126}
+    />
+  </div>
+)

package/src/BrandMoment/index.ts

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

package/src/Button/Button/Button.module.scss

@@ -0,0 +1,198 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "../../../styles/utils/button-reset";
+@import "../utils/mixins";
+@import "../utils/variables";
+
+%button {
+  @include button-reset;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: $typography-button-primary-font-family;
+  font-weight: $typography-button-primary-font-weight;
+  font-size: $typography-button-primary-font-size;
+  line-height: $typography-button-primary-line-height;
+  letter-spacing: $typography-button-primary-letter-spacing;
+  display: inline-flex;
+  // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
+  //  and this element is an <a>, causing the element to be full width.
+  align-items: center;
+  box-sizing: border-box;
+  min-height: $button-height;
+  border: $border-solid-border-width $border-solid-border-style;
+  border-radius: $border-solid-border-radius;
+  position: relative;
+  text-align: left;
+  cursor: pointer;
+  overflow: visible; // Required for the focus ring on IE11
+
+  &[href] {
+    text-decoration: none;
+  }
+
+  &:not(:disabled) {
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      &::after {
+        $focus-ring-offset: calc(
+          (#{$border-focus-ring-border-width} * 2) + 1px
+        );
+
+        content: "";
+        position: absolute;
+        background: transparent;
+        border-color: $color-blue-500;
+        border-radius: $border-focus-ring-border-radius;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        inset: calc(-1 * #{$focus-ring-offset});
+      }
+    }
+  }
+
+  &.reversed {
+    &:not(:disabled) {
+      &:focus-visible {
+        &::after {
+          border-color: $color-blue-300;
+        }
+      }
+    }
+  }
+
+  &:disabled,
+  &.working {
+    pointer-events: none;
+    opacity: 30%;
+  }
+
+  #{$className--content} {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: $button-vertical-padding
+      calc(#{$spacing-md} - #{$border-solid-border-width});
+  }
+}
+
+%variant-default {
+  background-color: $color-white;
+  border-color: $color-gray-500;
+  color: $color-purple-800;
+
+  @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600);
+
+  &.reversed {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.65);
+    color: $color-white;
+
+    @include enabled-pseudo-states-variant(
+      rgba($color-white-rgb, 0.1),
+      $color-white
+    );
+  }
+}
+
+%variant-primary {
+  background-color: $color-blue-500;
+  border-color: $border-borderless-border-color;
+  color: $color-white;
+
+  @include enabled-pseudo-states-variant(
+    $color-blue-600,
+    $border-borderless-border-color
+  );
+
+  &.reversed {
+    background-color: $color-green-300;
+    border-color: $border-borderless-border-color;
+    color: $color-purple-800;
+
+    @include enabled-pseudo-states-variant(
+      $color-green-400,
+      $border-borderless-border-color
+    );
+  }
+}
+
+%variant-destructive {
+  background-color: $color-red-500;
+  border-color: $border-borderless-border-color;
+  color: $color-white;
+
+  @include enabled-pseudo-states-variant(
+    $color-red-600,
+    $border-borderless-border-color
+  );
+
+  &.reversed {
+    background-color: $color-red-300;
+    border-color: $border-borderless-border-color;
+    color: $color-purple-800;
+
+    @include enabled-pseudo-states-variant(
+      $color-red-400,
+      $border-borderless-border-color
+    );
+  }
+}
+
+%variant-secondary {
+  font-family: $typography-button-secondary-font-family;
+  font-weight: $typography-button-secondary-font-weight;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  background-color: transparent;
+  border-color: $border-borderless-border-color;
+  color: $color-blue-500;
+
+  @include enabled-pseudo-states-variant(
+    $color-blue-100,
+    $border-borderless-border-color
+  );
+
+  #{$className--content} {
+    padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width});
+    padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width});
+  }
+
+  &.reversed {
+    border-color: $border-borderless-border-color;
+    color: $color-white;
+
+    @include enabled-pseudo-states-variant(
+      rgba($color-white-rgb, 0.2),
+      $border-borderless-border-color
+    );
+  }
+}
+
+%variant-secondary-destructive {
+  color: $color-red-600;
+
+  @include enabled-pseudo-states-variant(
+    $color-red-100,
+    $border-borderless-border-color
+  );
+}
+
+%variant-small {
+  min-height: $button-small-height;
+
+  #{$className--content} {
+    padding-top: $button-vertical-padding--small;
+    padding-bottom: $button-vertical-padding--small;
+  }
+}

package/src/Button/Button/Button.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, Ref } from "react"
+
+import { GenericButton, GenericButtonProps, ButtonRef } from "../GenericButton"
+
+export type ButtonProps = GenericButtonProps
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
+ */
+export const Button = forwardRef(
+  (props: ButtonProps, ref: Ref<ButtonRef | undefined>) => (
+    <GenericButton {...props} ref={ref} />
+  )
+)
+
+Button.defaultProps = {
+  fullWidth: false,
+  primary: false,
+  secondary: false,
+  destructive: false,
+  disabled: false,
+  reversed: false,
+  iconPosition: "start",
+  newTabAndIUnderstandTheAccessibilityImplications: false,
+}
+
+Button.displayName = "Button"

package/src/Button/Button/_docs/Button.mdx

@@ -0,0 +1,97 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation, LinkTo } from "~storybook/components"
+import * as ButtonStories from "./Button.stories"
+
+<Meta of={ButtonStories} />
+
+# Button
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/Button"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Button } from "@kaizen/components"'
+/>
+
+## Overview
+
+Buttons perform actions.
+If it needs to navigate somewhere and can be opened in a new tab, use a link instead.
+
+<Canvas of={ButtonStories.Playground} />
+<Controls of={ButtonStories.Playground} />
+
+## API
+
+### Variants
+
+`Default`, `Primary`, `Destructive`, `Secondary`
+If no `variant` is specified, a `Default` button will be rendered.
+
+<Canvas of={ButtonStories.Variants} />
+
+#### Reversed
+
+<Canvas of={ButtonStories.Reversed} />
+
+### Disabled
+
+A disabled Button prevents user interaction. It doesn't appear in the tab order, can't receive focus, and may not read aloud by a screenreader.
+
+<Canvas of={ButtonStories.Disabled} />
+
+### Icon
+
+Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
+
+<Canvas of={ButtonStories.Icon} />
+
+#### Icon position
+
+Change the icon placement with the `iconPosition` prop.
+Default position is `start`.
+
+<Canvas of={ButtonStories.IconPosition} />
+
+### Badge
+
+You can display a `Badge` component within the button using the `badge` prop.
+
+<Canvas of={ButtonStories.Badge} />
+
+### Full width
+
+Buttons can be stretched to fill the full width of their container.
+
+<Canvas of={ButtonStories.FullWidth} />
+
+### Working
+
+The `working` prop should be used in situations where a button action triggers a change in UI state but needs to wait for a server response, such as submitting a form.
+
+In conjuction use the `workingLabel` prop to update the label of the button when the working state is triggered.
+
+Alternatively use the `workingLabelHidden` prop to hide the button label all together.
+
+<Canvas of={ButtonStories.Working} />
+
+### Loading
+
+Use the <LinkTo pageId="components-loading-states-loadinginput">LoadingInput</LinkTo> component for button placeholders.
+
+<Canvas of={ButtonStories.Loading} />
+
+### Native `form` attribute
+
+Button extends native HTML "form" attributes for `button`.
+
+You can use this to submit a `form` using `Button` with a matching form id.
+
+<Canvas of={ButtonStories.NativeFormButton} />