Migrate InformationTile, MultiActionTile, TileGrid (#4207)

* add GenericTile

* add InformationTile

* Add MultiActionTile + tests

* remove unit tests

* add changeset

* add changeset

* add TileGrid

* remove unused scss

* Update strong-terms-think.md

* fix links in docs

* update doc descriptions

* resolve scss utilities to internal variation

* Update MultiActionTile.mdx

* Update InformationTile.mdx

* Update packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

Co-authored-by: Doug MacKenzie <[email protected]>

* Update GenericTile.module.scss

* fixups

* fix lint

* Update packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx

Co-authored-by: Doug MacKenzie <[email protected]>

* remove unsued import

---------

Co-authored-by: Doug MacKenzie <[email protected]>

.changeset/strong-terms-think.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Migrate InformationTile, MultiActionTile, TileGrid from kaizen-legacy

packages/components/src/Tile/InformationTile/InformationTile.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { GenericTile, GenericTileProps } from "../subcomponents/GenericTile"
+
+export type InformationTileProps = GenericTileProps
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
+ */
+export const InformationTile = (props: InformationTileProps): JSX.Element => (
+  <GenericTile {...props} />
+)
+
+InformationTile.displayName = "InformationTile"

packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as InformationTileStories from "./InformationTile.stories"
+
+<Meta of={InformationTileStories} />
+
+# InformationTile
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/InformationTile"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { InformationTile } from "@kaizen/components"'
+/>
+
+## Overview
+
+A visually interesting item in a list consisting of a card, visual, title, metadata, and a footer, that can also include extra information on the backside.
+
+<Canvas of={InformationTileStories.Playground} />
+<Controls of={InformationTileStories.Playground} />
+
+## API
+
+### Moods
+<Canvas of={InformationTileStories.Moods} />
+
+### Information
+<Canvas of={InformationTileStories.Information} />

packages/components/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { moodsList } from "../../subcomponents/GenericTile/types"
+import { InformationTile } from "../index"
+
+export default {
+  title: "Components/InformationTile",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <StickerSheet>
+      <StickerSheet.Body>
+        {moodsList.map(mood => (
+          <StickerSheet.Row key={mood} rowTitle={mood}>
+            <InformationTile
+              mood={mood}
+              title="Title"
+              metadata="Side A"
+              information="Side B"
+              footer={<>Footer</>}
+            />
+          </StickerSheet.Row>
+        ))}
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { moodsList } from "~components/Tile/subcomponents/GenericTile/types"
+import { InformationTile } from "../index"
+
+const meta = {
+  title: "Components/Tiles/InformationTile",
+  component: InformationTile,
+  args: {
+    title: "Title",
+    metadata: "Side A",
+    footer: <>Example Footer</>,
+  },
+} satisfies Meta<typeof InformationTile>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Moods: Story = {
+  render: args => (
+    <div className="flex gap-16 flex-wrap">
+      {moodsList.map(mood => (
+        <InformationTile key={mood} mood={mood} {...args} />
+      ))}
+    </div>
+  ),
+}
+
+export const Information: Story = {
+  args: {
+    information: "Side B",
+  },
+}

packages/components/src/Tile/InformationTile/index.ts

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

packages/components/src/Tile/MultiActionTile/MultiActionTile.module.scss

@@ -0,0 +1,3 @@
+.actions {
+  display: flex;
+}

packages/components/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import {
+  GenericTile,
+  GenericTileProps,
+  TileAction,
+} from "../subcomponents/GenericTile"
+import Action from "../subcomponents/GenericTile/Action"
+import styles from "./MultiActionTile.module.scss"
+
+export type MultiActionTileProps = {
+  primaryAction: TileAction
+  secondaryAction?: TileAction
+} & Omit<GenericTileProps, "footer">
+
+const renderActions = (
+  primaryAction: TileAction,
+  secondaryAction?: TileAction
+): JSX.Element => (
+  <div className={styles.actions}>
+    {secondaryAction && (
+      <div className="mr-8">
+        <Action action={secondaryAction} secondary />
+      </div>
+    )}
+    <Action action={primaryAction} />
+  </div>
+)
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
+ */
+export const MultiActionTile = ({
+  children,
+  primaryAction,
+  secondaryAction,
+  ...restProps
+}: MultiActionTileProps): JSX.Element => (
+  <GenericTile
+    footer={renderActions(primaryAction, secondaryAction)}
+    {...restProps}
+  >
+    {children}
+  </GenericTile>
+)
+
+MultiActionTile.displayName = "MultiActionTile"

packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as MultiActionTileStories from "./MultiActionTile.stories"
+
+<Meta of={MultiActionTileStories} />
+
+# MultiActionTile
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/MultiActionTile"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { MultiActionTile } from "@kaizen/components"'
+/>
+
+## Overview
+
+A visually interesting item in a list consisting of a card, visual, title, metadata, and call to action buttons, that can also include extra information on the backside.
+
+<Canvas of={MultiActionTileStories.Playground} />
+<Controls of={MultiActionTileStories.Playground} />
+
+## API
+
+### Moods
+<Canvas of={MultiActionTileStories.Moods} />
+
+### Secondary Action
+<Canvas of={MultiActionTileStories.SecondaryAction} />
+
+### Information
+<Canvas of={MultiActionTileStories.Information} />

packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { moodsList } from "~components/Tile/subcomponents/GenericTile/types"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { MultiActionTile } from "../index"
+
+export default {
+  title: "Components/Tiles/MultiActionTile",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <StickerSheet>
+      <StickerSheet.Body>
+        {moodsList.map(mood => (
+          <StickerSheet.Row key={mood} rowTitle={mood}>
+            <MultiActionTile
+              mood={mood}
+              title="Title"
+              metadata="Side A"
+              information="Side B"
+              primaryAction={{
+                label: "Take Action!",
+              }}
+              secondaryAction={{
+                label: "Nevermind",
+              }}
+            />
+          </StickerSheet.Row>
+        ))}
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { moodsList } from "~components/Tile/subcomponents/GenericTile/types"
+import { MultiActionTile } from "../index"
+
+const meta = {
+  title: "Components/Tiles/MultiActionTile",
+  component: MultiActionTile,
+  args: {
+    title: "Title",
+    metadata: "Side A",
+    primaryAction: {
+      label: "Take Action!",
+    },
+  },
+} satisfies Meta<typeof MultiActionTile>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Moods: Story = {
+  render: args => (
+    <div className="flex gap-16 flex-wrap">
+      {moodsList.map(mood => (
+        <MultiActionTile key={mood} mood={mood} {...args} />
+      ))}
+    </div>
+  ),
+}
+
+export const Information: Story = {
+  args: {
+    information: "Side B",
+  },
+}
+
+export const SecondaryAction: Story = {
+  args: {
+    secondaryAction: {
+      label: "Nevermind",
+    },
+  },
+}

packages/components/src/Tile/MultiActionTile/index.ts

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

packages/components/src/Tile/TileGrid/TileGrid.module.scss

@@ -0,0 +1,23 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "../../../styles/responsive";
+@import "../subcomponents/GenericTile/variables";
+
+.grid {
+  display: grid;
+  // the more we shave off the width here,
+  // the less the tiles will grow when they lose one from the row
+  grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
+  grid-gap: $spacing-md;
+
+  @include ca-media-mobile {
+    grid-template-columns: repeat(2, minmax(226px, $tileHeight));
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: repeat(1, 100%);
+  }
+}