@licklist/design 0.78.19 → 0.78.21

package/src/v2/components/Alert/Alert.scss

@@ -0,0 +1,186 @@
+@import '../../../styles/overrides/functions';
+
+.alert {
+  background: var(--surfaces-status-background-success, #eef9ea);
+  border: 2px solid var(--borders-status-border-success, #c9ecbd);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-reg, 16px);
+  border-radius: var(--radius-reg, 8px);
+  width: 100%;
+
+  // Variant-specific styles
+  &--success {
+    background: var(--surfaces-status-background-success, #eef9ea);
+    border-color: var(--borders-status-border-success, #c9ecbd);
+
+    .alert__icon {
+      background-image: url("./assets/success-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-success, #2d6b18);
+    }
+  }
+
+  &--error {
+    background: var(--surfaces-status-background-error, #fceceb);
+    border-color: var(--borders-status-border-error, #f5c4c2);
+
+    .alert__icon {
+      background-image: url("./assets/error-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-error, #cc3c35);
+    }
+  }
+
+  &--alert {
+    background: var(--surfaces-status-background-alert, #fcf6e7);
+    border-color: var(--borders-status-border-alert, #f6e3b4);
+
+    .alert__icon {
+      background-image: url("./assets/alert-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-alert, #fd7e14);
+    }
+  }
+
+  &--info {
+    background: var(--surfaces-status-background-info, #e7f4fc);
+    border-color: var(--borders-status-border-info, #b4dbf6);
+
+    .alert__icon {
+      background-image: url("./assets/info-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-info, #0e8ce2);
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex: 1 0 0;
+    gap: 16px;
+    align-items: center;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &__icon {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+  &__details {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &__information {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+    position: relative;
+    text-align: left;
+    font-size: 15px;
+    line-height: normal;
+    color: var(--labels-main-label-primary, #121e52);
+    width: 100%;
+    white-space: pre-wrap;
+  }
+
+  &__title {
+    font-family: 'Geist', sans-serif;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__message {
+    font-family: 'Geist', sans-serif;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121e52);
+    max-width: 720px;
+    margin: 0;
+  }
+
+  &__link {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    cursor: pointer;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__link-text {
+    font-family: 'Geist', sans-serif;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__link-icon {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    position: relative;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  &__dismiss {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease;
+    
+    &:hover {
+      opacity: 0.7;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}

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;
+    }
+}