diff --git a/.changeset/strong-terms-think.md b/.changeset/strong-terms-think.md new file mode 100644 index 00000000000..90a446551fe --- /dev/null +++ b/.changeset/strong-terms-think.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": minor +--- + +Migrate InformationTile, MultiActionTile, TileGrid from kaizen-legacy diff --git a/packages/components/src/Tile/InformationTile/InformationTile.tsx b/packages/components/src/Tile/InformationTile/InformationTile.tsx new file mode 100644 index 00000000000..aad5660c378 --- /dev/null +++ b/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 => ( + +) + +InformationTile.displayName = "InformationTile" diff --git a/packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx b/packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx new file mode 100644 index 00000000000..5b39bad7b17 --- /dev/null +++ b/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" + + + +# InformationTile + + + + + + + +## 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. + + + + +## API + +### Moods + + +### Information + diff --git a/packages/components/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx b/packages/components/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx new file mode 100644 index 00000000000..a6e1b757180 --- /dev/null +++ b/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: () => ( + + + {moodsList.map(mood => ( + + Footer} + /> + + ))} + + + ), +} + +export const StickerSheetDefault: StickerSheetStory = { + ...StickerSheetTemplate, + name: "Sticker Sheet (Default)", +} diff --git a/packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx b/packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx new file mode 100644 index 00000000000..6e8ecb2f587 --- /dev/null +++ b/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 + +export default meta + +type Story = StoryObj + +export const Playground: Story = { + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, +} + +export const Moods: Story = { + render: args => ( +
+ {moodsList.map(mood => ( + + ))} +
+ ), +} + +export const Information: Story = { + args: { + information: "Side B", + }, +} diff --git a/packages/components/src/Tile/InformationTile/index.ts b/packages/components/src/Tile/InformationTile/index.ts new file mode 100644 index 00000000000..05761224ea8 --- /dev/null +++ b/packages/components/src/Tile/InformationTile/index.ts @@ -0,0 +1 @@ +export * from "./InformationTile" diff --git a/packages/components/src/Tile/MultiActionTile/MultiActionTile.module.scss b/packages/components/src/Tile/MultiActionTile/MultiActionTile.module.scss new file mode 100644 index 00000000000..662c9d5aac9 --- /dev/null +++ b/packages/components/src/Tile/MultiActionTile/MultiActionTile.module.scss @@ -0,0 +1,3 @@ +.actions { + display: flex; +} diff --git a/packages/components/src/Tile/MultiActionTile/MultiActionTile.tsx b/packages/components/src/Tile/MultiActionTile/MultiActionTile.tsx new file mode 100644 index 00000000000..29dde88cc9c --- /dev/null +++ b/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 + +const renderActions = ( + primaryAction: TileAction, + secondaryAction?: TileAction +): JSX.Element => ( +
+ {secondaryAction && ( +
+ +
+ )} + +
+) + +/** + * {@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 => ( + + {children} + +) + +MultiActionTile.displayName = "MultiActionTile" diff --git a/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx b/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx new file mode 100644 index 00000000000..44f22d9ae47 --- /dev/null +++ b/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" + + + +# MultiActionTile + + + + + + + +## 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. + + + + +## API + +### Moods + + +### Secondary Action + + +### Information + diff --git a/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx b/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx new file mode 100644 index 00000000000..f2a4799bb25 --- /dev/null +++ b/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: () => ( + + + {moodsList.map(mood => ( + + + + ))} + + + ), +} + +export const StickerSheetDefault: StickerSheetStory = { + ...StickerSheetTemplate, + name: "Sticker Sheet (Default)", +} diff --git a/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx b/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx new file mode 100644 index 00000000000..96241f40040 --- /dev/null +++ b/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 + +export default meta + +type Story = StoryObj + +export const Playground: Story = { + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, +} + +export const Moods: Story = { + render: args => ( +
+ {moodsList.map(mood => ( + + ))} +
+ ), +} + +export const Information: Story = { + args: { + information: "Side B", + }, +} + +export const SecondaryAction: Story = { + args: { + secondaryAction: { + label: "Nevermind", + }, + }, +} diff --git a/packages/components/src/Tile/MultiActionTile/index.ts b/packages/components/src/Tile/MultiActionTile/index.ts new file mode 100644 index 00000000000..abaa931b509 --- /dev/null +++ b/packages/components/src/Tile/MultiActionTile/index.ts @@ -0,0 +1 @@ +export * from "./MultiActionTile" diff --git a/packages/components/src/Tile/TileGrid/TileGrid.module.scss b/packages/components/src/Tile/TileGrid/TileGrid.module.scss new file mode 100644 index 00000000000..d5e62de6031 --- /dev/null +++ b/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%); + } +} diff --git a/packages/components/src/Tile/TileGrid/TileGrid.tsx b/packages/components/src/Tile/TileGrid/TileGrid.tsx new file mode 100644 index 00000000000..152864d64b9 --- /dev/null +++ b/packages/components/src/Tile/TileGrid/TileGrid.tsx @@ -0,0 +1,35 @@ +import React, { HTMLAttributes, ReactElement } from "react" +import classnames from "classnames" +import { OverrideClassName } from "~types/OverrideClassName" +import { InformationTileProps } from "../InformationTile" +import { MultiActionTileProps } from "../MultiActionTile" +import styles from "./TileGrid.module.scss" + +type TileProps = InformationTileProps | MultiActionTileProps + +export type TileElement = ReactElement + +export interface TileGridProps + extends OverrideClassName> { + children: TileElement[] | TileElement +} + +/** + * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} | + * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook} + */ +export const TileGrid = ({ + children, + classNameOverride, + ...restProps +}: TileGridProps): JSX.Element => ( +
+ {children} +
+) + +TileGrid.displayName = "TileGrid" diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx new file mode 100644 index 00000000000..18769acbfb1 --- /dev/null +++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx @@ -0,0 +1,27 @@ +import { Canvas, Controls, Meta } from "@storybook/blocks" +import { ResourceLinks, KaioNotification, Installation } from "~storybook/components" +import * as TileGridStories from "./TileGrid.stories" + + + +# TileGrid + + + + + + + +## Overview + +A layout component to sort your Tiles into a Grid. + + + diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx new file mode 100644 index 00000000000..20a737e97ca --- /dev/null +++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx @@ -0,0 +1,126 @@ +import React from "react" +import { Meta } from "@storybook/react" +import { InformationTile } from "~components/Tile" +import { + StickerSheet, + StickerSheetStory, +} from "~storybook/components/StickerSheet" +import { TileGrid } from "../index" + +export default { + title: "Components/Tiles/TileGrid", + parameters: { + chromatic: { disable: false }, + controls: { disable: true }, + }, +} satisfies Meta + +const StickerSheetTemplate: StickerSheetStory = { + render: () => ( + + + + + + Footer} + /> + Footer} + /> + Footer} + /> + + + + + + + Footer} + /> + Footer} + /> + Footer} + /> + Footer} + /> + Footer} + /> + Footer} + /> + + + + + + + Footer} + /> + Footer} + /> + Footer} + /> + Footer} + /> + + + + + + ), +} + +export const StickerSheetDefault: StickerSheetStory = { + ...StickerSheetTemplate, + name: "Sticker Sheet (Default)", +} diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx new file mode 100644 index 00000000000..318fa943f7c --- /dev/null +++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx @@ -0,0 +1,47 @@ +import React from "react" +import { Meta, StoryObj } from "@storybook/react" +import { InformationTile } from "~components/Tile" +import { TileGrid } from "../index" + +const meta = { + title: "Components/Tiles/TileGrid", + component: TileGrid, + args: { + children: ( + <> + Footer} + /> + Footer} + /> + Footer} + /> + + ), + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Playground: Story = { + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, +} diff --git a/packages/components/src/Tile/TileGrid/index.ts b/packages/components/src/Tile/TileGrid/index.ts new file mode 100644 index 00000000000..6430aff52ff --- /dev/null +++ b/packages/components/src/Tile/TileGrid/index.ts @@ -0,0 +1 @@ +export * from "./TileGrid" diff --git a/packages/components/src/Tile/index.ts b/packages/components/src/Tile/index.ts new file mode 100644 index 00000000000..598a29ae695 --- /dev/null +++ b/packages/components/src/Tile/index.ts @@ -0,0 +1,3 @@ +export * from "./InformationTile" +export * from "./MultiActionTile" +export * from "./TileGrid" diff --git a/packages/components/src/Tile/subcomponents/GenericTile/Action.tsx b/packages/components/src/Tile/subcomponents/GenericTile/Action.tsx new file mode 100644 index 00000000000..50a7e2733a0 --- /dev/null +++ b/packages/components/src/Tile/subcomponents/GenericTile/Action.tsx @@ -0,0 +1,41 @@ +import React from "react" +import { Button } from "~components/Button" +import { TileAction } from "./GenericTile" + +type ActionProps = { + action: TileAction + secondary?: boolean + disabled?: boolean +} + +const Action = ({ + action, + secondary = false, + disabled = false, +}: ActionProps): JSX.Element => { + const { + label, + href, + onClick, + icon, + automationId, + newTabAndIUnderstandTheAccessibilityImplications, + } = action + + return ( +