KDS-1756-migrate-skirt-content-to-kaio-2 (#4211)

* add Content + Container

* add Skirt + SkirtCard

* fix lint

* add changeset

* Update tough-beers-carry.md

* Update packages/components/src/Container/_docs/Container.mdx

Co-authored-by: Cassandra <[email protected]>

* Remove duplicate to save some money

---------

Co-authored-by: Cassandra <[email protected]>

.changeset/tough-beers-carry.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Migrate Skirt, Content, Container from `kaizen-legacy`

packages/components/package.json

@@ -83,6 +83,7 @@
     "react-popper": "^2.3.0",
     "react-select": "^5.7.7",
     "react-textfit": "^1.1.1",
+    "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.6.2",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1"

packages/components/src/Container/Container.module.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+
+  * {
+    &,
+    &::after,
+    &::before {
+      box-sizing: border-box;
+    }
+  }
+}

packages/components/src/Container/Container.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import classnames from "classnames"
+import { ContentProps } from "~components/Content"
+import styles from "./Container.module.scss"
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
+ */
+export const Container = React.forwardRef<HTMLDivElement, ContentProps>(
+  ({ children, style, classNameOverride, ...restProps }, ref) => (
+    <div
+      ref={ref}
+      className={classnames(styles.container, classNameOverride)}
+      style={style}
+      {...restProps}
+    >
+      {children}
+    </div>
+  )
+)
+
+Container.displayName = "Container"

packages/components/src/Container/_docs/Container.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import { LinkTo } from "~storybook/components/LinkTo"
+import * as ContainerStories from "./Container.stories"
+
+<Meta of={ContainerStories} />
+
+# Container
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Container"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Container } from "@kaizen/components"'
+/>
+
+## Overview
+
+Wraps your entire page.
+
+<Canvas of={ContainerStories.Playground} />
+<Controls of={ContainerStories.Playground} />
+
+## Use Case
+Usually wraps a <LinkTo pageId="components-content">Content</LinkTo> component.
+<Canvas of={ContainerStories.Example} />

packages/components/src/Container/_docs/Container.stories.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Content } from "~components/Content"
+import { Text } from "~components/Text"
+import { Container } from "../index"
+
+const meta = {
+  title: "Pages/Container",
+  component: Container,
+  args: {
+    children: (
+      <div>
+        <Text variant="body">
+          Bacon ipsum dolor amet andouille buffalo beef boudin kielbasa
+          drumstick fatback cow tongue ground round chicken. Jowl cow short
+          ribs, ham tongue turducken spare ribs pig drumstick chuck meatball.
+          Buffalo turducken pancetta tail salami chicken. Bresaola venison
+          pastrami beef.
+        </Text>
+        <Text variant="body">
+          Porchetta shankle ribeye, ground round beef filet mignon fatback
+          chislic boudin. Boudin burgdoggen spare ribs, meatloaf pastrami pork
+          loin meatball short ribs tenderloin ribeye cupim venison short loin
+          pork chop tongue. Andouille landjaeger bacon, picanha filet mignon
+          short ribs hamburger shank shoulder porchetta. Pork chop ground round
+          tenderloin, biltong kevin corned beef chuck frankfurter spare ribs
+          pork meatball pastrami fatback. Strip steak beef ribs pork loin kevin,
+          biltong fatback tongue salami brisket capicola flank tenderloin.
+        </Text>
+      </div>
+    ),
+  },
+  argTypes: {
+    children: { controls: "disabled" },
+  },
+} satisfies Meta<typeof Container>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Example: Story = {
+  render: args => (
+    <Container>
+      <Content {...args} />
+    </Container>
+  ),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}

packages/components/src/Container/index.ts

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

packages/components/src/Content/Content.module.scss

@@ -0,0 +1,12 @@
+@import "~@kaizen/design-tokens/sass/layout";
+@import "./variables";
+
+.content {
+  max-width: $layout-content-max-width;
+  margin: 0 $layout-content-side-margin;
+  width: 100%;
+
+  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+    margin: 0 $content-margin-width-on-medium-and-small;
+  }
+}

packages/components/src/Content/Content.tsx

@@ -0,0 +1,52 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./Content.module.scss"
+
+export type ContentProps = {
+  children?: React.ReactNode
+  /**
+   * Not recommended. A short-circuit for dynamically overriding layout in a pinch
+   */
+  style?: Pick<
+    React.CSSProperties,
+    | "bottom"
+    | "left"
+    | "margin"
+    | "marginBottom"
+    | "marginLeft"
+    | "marginRight"
+    | "marginTop"
+    | "padding"
+    | "paddingBottom"
+    | "paddingLeft"
+    | "paddingRight"
+    | "paddingTop"
+    | "position"
+    | "right"
+    | "top"
+    | "transform"
+    | "transformBox"
+    | "transformOrigin"
+    | "transformStyle"
+  >
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
+ */
+export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
+  ({ children, style, classNameOverride, ...restProps }, ref) => (
+    <div
+      ref={ref}
+      className={classnames(styles.content, classNameOverride)}
+      style={style}
+      {...restProps}
+    >
+      {children}
+    </div>
+  )
+)
+
+Content.displayName = "Content"

packages/components/src/Content/_docs/Content.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import { LinkTo } from "~storybook/components/LinkTo"
+import * as ContentStories from "./Content.stories"
+
+<Meta of={ContentStories} />
+
+# Content
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Content"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Content } from "@kaizen/components"'
+/>
+
+## Overview
+
+Wraps your content at a **page level** in the standard minimum width and margins.
+
+<Canvas of={ContentStories.Playground} />
+
+## Use Case
+Usually wrapped in a <LinkTo pageId="components-container">Container</LinkTo>
+<Canvas of={ContentStories.Example} />

packages/components/src/Content/_docs/Content.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Container } from "~components/Container"
+import { Text } from "~components/Text"
+import { Content } from "../index"
+
+const meta = {
+  title: "Pages/Content",
+  component: Content,
+  args: {
+    children: (
+      <>
+        <Text variant="body">
+          Bacon ipsum dolor amet andouille buffalo beef boudin kielbasa
+          drumstick fatback cow tongue ground round chicken. Jowl cow short
+          ribs, ham tongue turducken spare ribs pig drumstick chuck meatball.
+          Buffalo turducken pancetta tail salami chicken. Bresaola venison
+          pastrami beef.
+        </Text>
+        <Text variant="body">
+          Porchetta shankle ribeye, ground round beef filet mignon fatback
+          chislic boudin. Boudin burgdoggen spare ribs, meatloaf pastrami pork
+          loin meatball short ribs tenderloin ribeye cupim venison short loin
+          pork chop tongue. Andouille landjaeger bacon, picanha filet mignon
+          short ribs hamburger shank shoulder porchetta. Pork chop ground round
+          tenderloin, biltong kevin corned beef chuck frankfurter spare ribs
+          pork meatball pastrami fatback. Strip steak beef ribs pork loin kevin,
+          biltong fatback tongue salami brisket capicola flank tenderloin.
+        </Text>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Content>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Example: Story = {
+  render: args => (
+    <Container>
+      <Content {...args} />
+    </Container>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}

packages/components/src/Content/_variables.scss

@@ -0,0 +1,3 @@
+// This replicates the layout max-width logic in
+// draft-packages/title-block-zen/KaizenDraft/TitleBlockZen/TitleBlockZen.scss
+$content-margin-width-on-medium-and-small: 12px;

packages/components/src/Content/index.ts

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

packages/components/src/Skirt/Skirt.module.scss

@@ -0,0 +1,32 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+$dt-color-background-color-default: $color-purple-600;
+$dt-color-background-color-education: $color-blue-100;
+
+.container {
+  position: relative;
+}
+
+// Actual height is determined in JavaScript
+.underlay {
+  box-sizing: content-box;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
+
+.defaultVariant {
+  background-color: $dt-color-background-color-default;
+}
+
+.educationVariant {
+  background-color: $dt-color-background-color-education;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+}