@licklist/design 0.78.18 → 0.78.20

package/src/v2/components/Alert/Alert.stories.tsx

@@ -0,0 +1,176 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Alert } from './Alert';
+
+export default {
+  title: 'v2/Components/Alert',
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['success', 'error', 'alert', 'info'],
+      description: 'The type/status of the alert',
+    },
+    title: {
+      control: 'text',
+      description: 'Alert title',
+    },
+    message: {
+      control: 'text',
+      description: 'Alert message',
+    },
+    linkText: {
+      control: 'text',
+      description: 'Optional link text',
+    },
+    onLinkClick: { action: 'link clicked' },
+    onDismiss: { action: 'dismissed' },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta<typeof Alert>;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    title: 'Success!',
+    message: 'Your password has been reset.',
+    linkText: 'Details',
+    onLinkClick: () => console.log('Details clicked'),
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    title: 'Error!',
+    message: 'Your password reset has failed.',
+    linkText: 'Retry',
+    onLinkClick: () => console.log('Retry clicked'),
+  },
+};
+
+export const WarningAlert: Story = {
+  args: {
+    variant: 'alert',
+    title: 'Action required',
+    message: 'Your profile is incomplete',
+    linkText: 'Update profile',
+    onLinkClick: () => console.log('Update profile clicked'),
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    title: 'Did you know?',
+    message: 'You can send email & SMS messages from the marketing dashboard.',
+    linkText: 'Explore feature',
+    onLinkClick: () => console.log('Explore feature clicked'),
+  },
+};
+
+export const WithoutLink: Story = {
+  args: {
+    variant: 'success',
+    title: 'Success!',
+    message: 'Your changes have been saved.',
+  },
+};
+
+export const WithoutDismiss: Story = {
+  args: {
+    variant: 'info',
+    title: 'Info',
+    message: 'This alert cannot be dismissed.',
+    linkText: 'Learn more',
+    onDismiss: undefined,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '20px' }}>
+      <Alert
+        variant="success"
+        title="Success!"
+        message="Your password has been reset."
+        linkText="Details"
+      />
+      <Alert
+        variant="error"
+        title="Error!"
+        message="Your password reset has failed."
+        linkText="Retry"
+      />
+      <Alert
+        variant="alert"
+        title="Action required"
+        message="Your profile is incomplete"
+        linkText="Update profile"
+      />
+      <Alert
+        variant="info"
+        title="Did you know?"
+        message="You can send email & SMS messages from the marketing dashboard."
+        linkText="Explore feature"
+      />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [dismissed, setDismissed] = React.useState(false);
+
+    if (dismissed) {
+      return (
+        <div style={{ padding: '20px', textAlign: 'center', color: '#626a90' }}>
+          Alert dismissed! Click the button below to show it again.
+          <br />
+          <button
+            onClick={() => setDismissed(false)}
+            style={{
+              marginTop: '16px',
+              padding: '8px 16px',
+              background: '#14215a',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+            }}
+          >
+            Reset Alert
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <Alert
+        {...args}
+        onDismiss={() => {
+          args.onDismiss?.();
+          setDismissed(true);
+        }}
+        onLinkClick={() => {
+          args.onLinkClick?.();
+          alert('Link clicked!');
+        }}
+      />
+    );
+  },
+  args: {
+    variant: 'info',
+    title: 'Interactive Alert',
+    message: 'This alert can be dismissed or have its link clicked.',
+    linkText: 'Click me!',
+  },
+};

package/src/v2/components/Alert/Alert.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import './Alert.scss';
+
+export type AlertVariant = 'success' | 'error' | 'alert' | 'info';
+
+export interface AlertProps {
+  variant: AlertVariant;
+  title: string;
+  message: string;
+  linkText?: string;
+  onLinkClick?: () => void;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+  variant,
+  title,
+  message,
+  linkText,
+  onLinkClick,
+  onDismiss,
+  className,
+}) => {
+  const handleDismiss = () => {
+    onDismiss?.();
+  };
+
+  return (
+    <div className={`alert alert--${variant} ${className || ''}`}>
+      <div className="alert__content">
+        <div className="alert__icon">
+          {/* Icon SVG will be handled by background images in SCSS */}
+        </div>
+        <div className="alert__details">
+          <div className="alert__information">
+            <p className="alert__title">{title}</p>
+            <p className="alert__message">{message}</p>
+          </div>
+          {linkText && (
+            <div className="alert__link" onClick={onLinkClick}>
+              <p className="alert__link-text">{linkText}</p>
+              <div className="alert__link-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M9 6L15 12L9 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      {onDismiss && (
+        <div className="alert__dismiss" onClick={handleDismiss}>
+          {/* Close icon - X mark */}
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 9L23 23M23 9L9 23" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+          </svg>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/v2/components/Alert/assets/alert-icon.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M8.34975 0.469886C8.7415 -0.156552 9.65442 -0.156705 10.046 0.469886L18.2414 13.5832C18.6576 14.2491 18.1789 15.1132 17.3937 15.1134H1.0021C0.216688 15.1134 -0.262743 14.2492 0.153465 13.5832L8.34975 0.469886ZM9.19741 11.1134C8.64521 11.1135 8.19741 11.5612 8.19741 12.1134C8.19748 12.6656 8.64525 13.1133 9.19741 13.1134C9.74965 13.1134 10.1973 12.6657 10.1974 12.1134C10.1974 11.5612 9.74969 11.1134 9.19741 11.1134ZM8.19741 10.1134H10.1974V5.11344H8.19741V10.1134Z" fill="var(--fill-0, #FD7E14)"/>
+</svg>

package/src/v2/components/Alert/assets/error-icon.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 7.58594L6.17188 4.75781L4.75781 6.17188L7.58594 9L4.75781 11.8281L6.17188 13.2422L9 10.4141L11.8281 13.2422L13.2422 11.8281L10.4141 9L13.2422 6.17188L11.8281 4.75781L9 7.58594Z" fill="var(--fill-0, #CC3C35)"/>
+</svg>

package/src/v2/components/Alert/assets/info-icon.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Subtract" d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 7C8.44772 7 8 7.44772 8 8V13C8 13.5523 8.44772 14 9 14C9.55228 14 10 13.5523 10 13V8C10 7.44772 9.55228 7 9 7ZM9 4C8.44772 4 8 4.44772 8 5C8 5.55228 8.44772 6 9 6C9.55228 6 10 5.55228 10 5C10 4.44772 9.55228 4 9 4Z" fill="var(--fill-0, #0E8CE2)"/>
+</svg>

package/src/v2/components/Alert/assets/success-icon.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM7.44629 10.6055L5.72168 8.80762L4.27832 10.1924L7.35254 13.3945L14.6729 6.74023L13.3271 5.25977L7.44629 10.6055Z" fill="var(--fill-0, #2D6B18)"/>
+</svg>

package/src/v2/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert';

package/src/v2/components/Button/Button.scss

@@ -0,0 +1,19 @@
+@import '../../styles/components/Button.scss';
+
+.new-button {
+  &--sm {
+    padding: var(--spacing-xs, 2px) var(--spacing-md, 8px);
+    font-size: var(--text-sm-size, 13px);
+  }
+
+  &--md {
+    padding: var(--spacing-sm, 8px) var(--spacing-reg, 16px);
+    font-size: var(--text-reg-size, 15px);
+  }
+
+  &--lg {
+    padding: var(--spacing-reg, 16px) var(--spacing-lg, 24px);
+    font-size: var(--text-large-size, 18px);
+  }
+}
+

package/src/v2/components/Button/Button.stories.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Button } from './Button'
+
+export default {
+  title: 'v2/Components/Button',
+  component: Button,
+} as Meta<typeof Button>
+
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+  },
+}
+
+export const PrimarySoft: Story = {
+  args: {
+    children: 'Primary Soft',
+    variant: 'primary-soft',
+  },
+}
+
+export const PrimaryOutline: Story = {
+  args: {
+    children: 'Primary Outline',
+    variant: 'primary-outline',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary',
+    variant: 'secondary',
+  },
+}
+
+export const DestructiveSoft: Story = {
+  args: {
+    children: 'Destructive Soft',
+    variant: 'destructive-soft',
+  },
+}
+
+export const DestructiveStrong: Story = {
+  args: {
+    children: 'Destructive Strong',
+    variant: 'destructive-strong',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    children: 'Info',
+    variant: 'info',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    variant: 'primary',
+    disabled: true,
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Button variant="primary" size="sm">Small</Button>
+      <Button variant="primary" size="md">Medium</Button>
+      <Button variant="primary" size="lg">Large</Button>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="primary-soft">Primary Soft</Button>
+      <Button variant="primary-outline">Primary Outline</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive-soft">Destructive Soft</Button>
+      <Button variant="destructive-strong">Destructive Strong</Button>
+      <Button variant="info">Info</Button>
+      <Button variant="primary" disabled>Disabled</Button>
+    </div>
+  ),
+}
+

package/src/v2/components/Button/Button.tsx

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes } from 'react'
+import './Button.scss'
+
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'primary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled'
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+export function Button({ 
+  variant = 'primary', 
+  size = 'md', 
+  disabled = false, 
+  className = '',
+  children,
+  ...props 
+}: ButtonProps) {
+  const classes = [
+    'new-button',
+    `new-button--${variant}`,
+    disabled ? 'new-button--disabled' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button 
+      className={classes} 
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button
+

package/src/v2/components/Button/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button'
+export type { ButtonProps } from './Button'
+

package/src/v2/components/Colors/Colors.scss

@@ -0,0 +1,64 @@
+@import '../../styles/tokens/colors';
+
+.color-swatch {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    width: 100%;
+
+    &__preview {
+        width: 142px;
+        height: 48px;
+        border-radius: 16px;
+        border: 1px solid var(--color-border-primary);
+        flex-shrink: 0;
+    }
+
+    &__details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    &__name {
+        font-family: 'Geist', sans-serif;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 18px;
+        color: var(--color-label-primary);
+    }
+
+    &__hex,
+    &__rgb {
+        font-family: 'Geist Mono', monospace;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        color: var(--color-label-primary);
+        background-color: var(--color-surface-hover);
+        padding: 4px 8px;
+        border-radius: 4px;
+        display: inline-block;
+        width: fit-content;
+    }
+}
+
+.colors-showcase {
+    margin-bottom: 48px;
+
+    &__title {
+        font-family: 'Geist', sans-serif;
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--color-label-primary);
+        margin-bottom: 16px;
+    }
+
+    &__grid {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+}

package/src/v2/components/Colors/Colors.stories.tsx

@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { ColorsShowcase } from './Colors'
+
+export default {
+    title: 'v2/Design System/Colors',
+    component: ColorsShowcase,
+    parameters: {
+        layout: 'padded',
+    },
+} as Meta
+
+type Story = StoryObj<typeof ColorsShowcase>
+
+const purples = {
+    title: 'Purples',
+    colors: [
+        { name: 'purple.50', hex: '#efe6fd', rgb: 'RGB: 239, 230, 253' },
+        { name: 'purple.100', hex: '#dccefb', rgb: 'RGB: 220, 206, 251' },
+        { name: 'purple.200', hex: '#c49af7', rgb: 'RGB: 196, 154, 247' },
+        { name: 'purple.300', hex: '#a866f3', rgb: 'RGB: 168, 102, 243' },
+        { name: 'purple.400', hex: '#8c33ef', rgb: 'RGB: 140, 51, 239' },
+        { name: 'purple.500', hex: '#7000eb', rgb: 'RGB: 112, 0, 235' },
+        { name: 'purple.600', hex: '#5a00bc', rgb: 'RGB: 90, 0, 188' },
+        { name: 'purple.700', hex: '#450091', rgb: 'RGB: 69, 0, 145' },
+        { name: 'purple.800', hex: '#2f0064', rgb: 'RGB: 47, 0, 100' },
+        { name: 'purple.900', hex: '#1a0036', rgb: 'RGB: 26, 0, 54' },
+    ],
+}
+
+const labels = {
+    title: 'Labels - Text Colors',
+    colors: [
+        { name: 'label.primary', hex: '#121e52', description: 'Main text color' },
+        { name: 'label.secondary', hex: '#626a90', description: 'Secondary text' },
+        { name: 'label.tertiary', hex: '#979db2', description: 'Tertiary text' },
+        { name: 'label.disabled', hex: '#c2c7d4', description: 'Disabled text' },
+        { name: 'label.inverse', hex: '#ffffff', description: 'Text on dark backgrounds' },
+    ],
+}
+
+const surfaces = {
+    title: 'Surfaces - Background Colors',
+    colors: [
+        { name: 'surface.primary', hex: '#ffffff', description: 'Main background' },
+        { name: 'surface.secondary', hex: '#f8f8fa', description: 'Secondary background' },
+        { name: 'surface.tertiary', hex: '#e8e9ef', description: 'Tertiary background' },
+        { name: 'surface.hover', hex: '#f0f0f2', description: 'Hover state' },
+        { name: 'surface.active', hex: '#e8e9ef', description: 'Active state' },
+    ],
+}
+
+const borders = {
+    title: 'Borders',
+    colors: [
+        { name: 'border.primary', hex: '#e8e9ef', description: 'Main border color' },
+        { name: 'border.secondary', hex: '#d4d6dd', description: 'Secondary border' },
+        { name: 'border.focus', hex: '#7000eb', description: 'Focus border' },
+    ],
+}
+
+const brand = {
+    title: 'Brand Colors',
+    colors: [
+        { name: 'primary', hex: '#7000eb', description: 'Main brand color' },
+        { name: 'primary.hover', hex: '#5a00bc', description: 'Hover state' },
+        { name: 'primary.active', hex: '#450091', description: 'Active state' },
+        { name: 'primary.focus', hex: '#8c33ef', description: 'Focus state' },
+    ],
+}
+
+const status = {
+    title: 'Status Colors (Legacy)',
+    colors: [
+        { name: 'success', hex: '#10b981', description: 'Success state' },
+        { name: 'success.light', hex: '#d1fae5', description: 'Success background' },
+        { name: 'error', hex: '#ef4444', description: 'Error state' },
+        { name: 'error.light', hex: '#fee2e2', description: 'Error background' },
+        { name: 'warning', hex: '#f59e0b', description: 'Warning state' },
+        { name: 'warning.light', hex: '#fef3c7', description: 'Warning background' },
+        { name: 'info', hex: '#3b82f6', description: 'Info state' },
+        { name: 'info.light', hex: '#dbeafe', description: 'Info background' },
+    ],
+}
+
+const statusTokens = {
+    title: 'Status Colors (Figma Alerts & Errors)',
+    colors: [
+        { name: 'success.fill', hex: '#2d6b18', description: 'Success fill/icon color' },
+        { name: 'success.background', hex: '#eef9ea', description: 'Success background' },
+        { name: 'success.border', hex: '#c9ecbd', description: 'Success border color' },
+        { name: 'error.fill', hex: '#cc3c35', description: 'Error fill/icon color' },
+        { name: 'error.background', hex: '#fceceb', description: 'Error background' },
+        { name: 'error.border', hex: '#f5c4c2', description: 'Error border color' },
+        { name: 'alert.fill', hex: '#fd7e14', description: 'Alert fill/icon color' },
+        { name: 'alert.background', hex: '#fcf6e7', description: 'Alert background' },
+        { name: 'alert.border', hex: '#f6e3b4', description: 'Alert border color' },
+        { name: 'info.fill', hex: '#0e8ce2', description: 'Info fill/icon color' },
+        { name: 'info.background', hex: '#e7f4fc', description: 'Info background' },
+        { name: 'info.border', hex: '#b4dbf6', description: 'Info border color' },
+    ],
+}
+
+export const PurpleScale: Story = {
+    render: () => <ColorsShowcase {...purples} />,
+}
+
+export const Labels: Story = {
+    render: () => <ColorsShowcase {...labels} />,
+}
+
+export const Surfaces: Story = {
+    render: () => <ColorsShowcase {...surfaces} />,
+}
+
+export const Borders: Story = {
+    render: () => <ColorsShowcase {...borders} />,
+}
+
+export const Brand: Story = {
+    render: () => <ColorsShowcase {...brand} />,
+}
+
+export const Status: Story = {
+    render: () => <ColorsShowcase {...status} />,
+}
+
+export const StatusTokens: Story = {
+    render: () => <ColorsShowcase {...statusTokens} />,
+}
+
+export const AllColors: Story = {
+    render: () => (
+        <div>
+            <ColorsShowcase {...purples} />
+            <ColorsShowcase {...labels} />
+            <ColorsShowcase {...surfaces} />
+            <ColorsShowcase {...borders} />
+            <ColorsShowcase {...brand} />
+            <ColorsShowcase {...status} />
+        </div>
+    ),
+}

package/src/v2/components/Colors/Colors.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import './Colors.scss'
+
+interface ColorSwatchProps {
+    name: string
+    hex: string
+    rgb?: string
+    className?: string
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({ name, hex, rgb, className }) => {
+    return (
+        <div className={`color-swatch ${className || ''}`}>
+            <div className="color-swatch__preview" style={{ backgroundColor: hex }} />
+            <div className="color-swatch__details">
+                <div className="color-swatch__name">{name}</div>
+                <div className="color-swatch__hex">{hex}</div>
+                {rgb && <div className="color-swatch__rgb">{rgb}</div>}
+            </div>
+        </div>
+    )
+}
+
+export interface ColorGroup {
+    title: string
+    colors: {
+        name: string
+        hex: string
+        rgb?: string
+        description?: string
+    }[]
+}
+
+export const ColorsShowcase: React.FC<ColorGroup> = ({ title, colors }) => {
+    return (
+        <div className="colors-showcase">
+            <h3 className="colors-showcase__title">{title}</h3>
+            <div className="colors-showcase__grid">
+                {colors.map((color) => (
+                    <ColorSwatch
+                        key={color.name}
+                        name={color.name}
+                        hex={color.hex}
+                        rgb={color.rgb}
+                        className={color.description ? 'color-swatch--with-description' : ''}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}