feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

packages/design-system/lib/components/Card/Card.stories.ts

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Card } from './Card.tsx'
-
-const meta = {
-  title: 'Components/Layout/Card',
-  component: Card,
-  argTypes: {
-    intent: {
-      control: 'select',
-      options: ['basic', 'border'],
-    },
-  },
-  args: {
-    intent: 'basic',
-  },
-} satisfies Meta<typeof Card>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const WithBorder: Story = {
-  args: {
-    intent: 'border',
-  },
-}

packages/design-system/lib/components/Card/Card.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Card } from './Card.tsx'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  args: {
+    as: 'Default',
+  },
+}
+
+export const Featured: Story = {
+  args: {
+    ...Default.args,
+    as: 'Featured',
+  },
+}

packages/design-system/lib/components/Card/Card.tsx

@@ -1,26 +1,11 @@
-import styles from './card.module.css'
+import { variants } from './variants'
 
-import { cva, type VariantProps } from 'class-variance-authority'
+import type { CardProps } from './types'
 
-const card = cva(styles.card, {
-  variants: {
-    intent: {
-      basic: styles.basic,
-      border: styles.border,
-    },
-  },
-  // compoundVariants: [
-  //   { intent: "primary", size: "medium", className: styles.primaryMedium },
-  // ],
-  defaultVariants: {
-    intent: 'basic',
-  },
-})
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof card> {}
-
-export function Card({ className, intent }: CardProps) {
-  return <div className={card({ intent, className })}>Card</div>
+export function Card({ as, className, children }: CardProps) {
+  const classNames = variants({
+    as,
+    className,
+  })
+  return <div className={classNames}>{children}</div>
 }

packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+
+import { themes } from '../../../../.storybook/preview'
+
+import { Card } from '../'
+import { Typography } from '../../Typography'
+import { Button } from '../../Button'
+
+type CompositionProps = React.ComponentPropsWithoutRef<typeof Card> & {
+  _onPrimaryPress?: () => void
+  _onSecondaryPress?: () => void
+  inMainArea: boolean
+  showTitle: boolean
+  showPreamble: boolean
+  showPrimaryButton: boolean
+  showSecondaryButton: boolean
+}
+
+const meta: Meta<CompositionProps> = {
+  title: 'Compositions/Card',
+  component: Card,
+  decorators: [
+    (Story, context) => {
+      if (context.name.toLowerCase().indexOf('all themes') >= 0) {
+        return (
+          <>
+            <h1>{context.name}</h1>
+            {Object.entries(themes.themes).map(([key, value]) => {
+              return (
+                <div className={value} style={{ padding: '1em 0' }}>
+                  <h2 style={{ paddingBottom: '0.5em' }}>{key}</h2>
+                  <Story />
+                </div>
+              )
+            })}
+          </>
+        )
+      }
+
+      return (
+        <div style={{ display: 'flex' }}>
+          <Story />
+        </div>
+      )
+    },
+  ],
+  argTypes: {
+    inMainArea: {
+      name: 'Is in main area',
+    },
+    showTitle: {
+      name: 'Composition: Show title',
+    },
+    showPreamble: {
+      name: 'Composition: Show preamble',
+    },
+    showPrimaryButton: {
+      name: 'Composition: Show primary button',
+    },
+    showSecondaryButton: {
+      name: 'Composition: Show secondary button',
+    },
+    _onPrimaryPress: {
+      table: {
+        disable: true,
+      },
+    },
+    _onSecondaryPress: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: ({
+    inMainArea,
+    showTitle,
+    showPreamble,
+    showPrimaryButton,
+    showSecondaryButton,
+    ...args
+  }) => (
+    <Card {...args}>
+      {showTitle && (
+        <Typography variant="Title/md">
+          <h3>Content Card</h3>
+        </Typography>
+      )}
+
+      {showPreamble && (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis
+            mauris at est iaculis pulvinar pulvinar.
+          </p>
+        </Typography>
+      )}
+
+      {showPrimaryButton && inMainArea && (
+        <Button
+          size={'Large'}
+          variant="Primary"
+          typography="Body/Paragraph/mdBold"
+          onPress={args._onPrimaryPress}
+        >
+          Primary action
+        </Button>
+      )}
+
+      {showPrimaryButton && !inMainArea && (
+        <Button
+          size={'Small'}
+          variant="Tertiary"
+          typography="Body/Paragraph/mdBold"
+          onPress={args._onPrimaryPress}
+        >
+          Primary action
+        </Button>
+      )}
+
+      {showSecondaryButton && (
+        <Button
+          size={inMainArea ? 'Large' : 'Small'}
+          variant="Secondary"
+          onPress={args._onSecondaryPress}
+          typography="Body/Paragraph/mdBold"
+        >
+          Secondary action
+        </Button>
+      )}
+    </Card>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<CompositionProps>
+
+export const ContentCardMainArea: Story = {
+  args: {
+    as: 'Default',
+    inMainArea: true,
+    showTitle: true,
+    showPreamble: true,
+    showPrimaryButton: true,
+    showSecondaryButton: true,
+    _onPrimaryPress: fn(),
+    _onSecondaryPress: fn(),
+  },
+}
+
+export const ContentCardNonMainArea: Story = {
+  args: {
+    as: 'Default',
+    inMainArea: false,
+    showTitle: true,
+    showPreamble: true,
+    showPrimaryButton: true,
+    showSecondaryButton: true,
+    _onPrimaryPress: fn(),
+    _onSecondaryPress: fn(),
+  },
+}
+
+export const ContentCardMainAreaAllThemes: Story = {
+  ...ContentCardMainArea,
+}
+
+export const ContentCardNonMainAreaAllThemes: Story = {
+  ...ContentCardNonMainArea,
+}

packages/design-system/lib/components/Card/card.module.css

@@ -1,13 +1,22 @@
 .card {
-  background: #fff;
+  padding: var(--Space-x2) var(--Space-x3);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--Space-x15);
 }
 
-.basic {
-  outline: solid 1px green;
+.Default {
+  border: solid 1px var(--Border-Default);
+  background-color: var(--Surface-Secondary-Default);
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Default);
 }
 
-.border {
-  border-style: solid;
-  border-width: 3px;
-  border-color: var(--color-brand-main-normal);
+.Featured {
+  border: solid 1px var(--Border-Default);
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Default);
 }

packages/design-system/lib/components/Card/types.ts

@@ -0,0 +1,11 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { variants } from './variants'
+
+type CardStyles = 'Default' | 'Featured'
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof variants> {
+  as: CardStyles
+}

packages/design-system/lib/components/Card/variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './card.module.css'
+
+const config = {
+  variants: {
+    as: {
+      Default: styles.Default,
+      Featured: styles.Featured,
+    },
+  },
+  defaultVariants: {
+    as: 'Default',
+  },
+} as const
+
+export const variants = cva(styles.card, config)