@licklist/design 0.78.5-dev.9 → 0.78.5-dev.91

package/src/v2/components/Badge/Badge.scss

@@ -0,0 +1,84 @@
+.new-badge {
+  font-family: var(--font-family-mono, 'Geist Mono', monospace);
+  display: inline-flex;
+  padding: 6px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 1px;
+  color: var(--label-primary, #121E52);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 14px;
+  height: 28px;
+
+  &--with-icon {
+    padding-left: 6px;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &--success {
+    border-radius: var(--padding-lg, 24px);
+    border: 1px solid var(--border-status-success, #C9ECBD);
+    background: var(--surface-colour-green-soft, #EEF9EA);
+  }
+
+  &--danger {
+    border-radius: var(--padding-lg, 24px);
+    border: 1px solid var(--border-status-error, #F5C4C2);
+    background: var(--surface-colour-red-soft, #FCECEB);
+  }
+
+  &--warning {
+    border-radius: var(--padding-lg, 24px);
+    border: 1px solid var(--border-status-alert, #FED7B6);
+    background: var(--surface-colour-yellow-soft, #FCF6E7);
+  }
+
+  &--info {
+    border-radius: var(--padding-lg, 24px);
+    border: 1px solid var(--border-status-info, #B4DBF6);
+    background: var(--surface-colour-blue-soft, #E7F4FC);
+  }
+
+  &--neutral {
+    background-color: var(--surface-secondary, #F8F8FA);
+    color: var(--label-secondary, #9399B3);
+    border-radius: var(--padding-lg, 24px);
+    border: 1px solid var(--border-colour-overlay, rgba(18, 30, 82, 0.10));
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .new-badge {
+    padding: 1px 10px;
+    font-size: 12px;
+
+    &--with-icon {
+      padding-left: 6px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .new-badge {
+    padding: 1px 10px;
+    font-size: 11px;
+
+    &--with-icon {
+      padding-left: 6px;
+    }
+  }
+}
+

package/src/v2/components/Badge/Badge.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import './Badge.scss'
+
+export interface BadgeProps {
+  children: React.ReactNode
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'neutral'
+  className?: string
+  icon?: React.ReactNode
+  onClick?: (e: React.MouseEvent) => void
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'neutral',
+  className = '',
+  icon,
+  onClick,
+}) => (
+  <span
+    className={`new-badge new-badge--${variant} ${
+      icon ? 'new-badge--with-icon' : ''
+    } ${className}`}
+    onClick={onClick}
+  >
+    {icon && <span className="new-badge__icon">{icon}</span>}
+    {children}
+  </span>
+)

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

@@ -0,0 +1 @@
+export * from './Badge'

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,74 @@
+import { ButtonHTMLAttributes } from 'react'
+import './Button.scss'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'primary-soft'
+    | 'secondary-soft'
+    | 'tertiary-soft'
+    | 'primary-outline'
+    | 'outline'
+    | 'secondary'
+    | 'destructive-soft'
+    | 'destructive-strong'
+    | 'info'
+    | 'disabled'
+  size?: 'sm' | 'md' | 'lg'
+  isLoading?: boolean
+}
+
+export function Button({
+  variant = 'primary',
+  size: _size = 'md',
+  disabled = false,
+  isLoading = false,
+  className = '',
+  children,
+  ...props
+}: ButtonProps) {
+  const classes = [
+    'new-button',
+    `new-button--${variant}`,
+    disabled || isLoading ? 'new-button--disabled' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  const content = typeof children === 'string' ? (
+    <span className="new-button__text">{children}</span>
+  ) : children
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && <div className="new-button__spinner" />}
+      {content}
+    </button>
+  )
+}
+
+export interface ButtonTextProps {
+  children: React.ReactNode
+  className?: string
+  color?: 'primary' | 'secondary' | 'danger' | 'white' | 'action'
+}
+
+export function ButtonText({ children, className = '', color }: ButtonTextProps) {
+  const classes = [
+    'new-button__text',
+    color ? `new-button__text--${color}` : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <span className={classes}>
+      {children}
+    </span>
+  )
+}
+
+

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

@@ -0,0 +1,63 @@
+.ghost-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+  background: transparent;
+  color: var(--labels-main-label-primary, #121E52);
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:not(.active):hover:not(:disabled) {
+    background-color: var(--surfaces-main-background-tertiary, #E8E9EF);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--fills-main-fill-action, #6200EE);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    background-color: var(--fill-primary, #6200EE);
+    border-color: var(--border-selected, #121E52);
+    color: var(--neutral-white, #FFFFFF);
+
+    .ghost-button__text {
+      color: var(--neutral-white, #FFFFFF);
+    }
+  }
+
+  &--sm {
+    height: 28px;
+    padding: 0 8px 0 8px;
+    font-size: 11px;
+  }
+
+  &--md {
+    height: 36px;
+    padding: 0 12px 0 8px;
+    font-size: 14px;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { ButtonHTMLAttributes } from 'react'
+import './GhostButton.scss'
+
+export interface GhostButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  size?: 'sm' | 'md'
+}
+
+export function GhostButton({
+  icon,
+  size = 'md',
+  className = '',
+  children,
+  ...props
+}: GhostButtonProps) {
+  const classes = [
+    'ghost-button',
+    `ghost-button--${size}`,
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button className={classes} {...props}>
+      {icon && <span className="ghost-button__icon">{icon}</span>}
+      {children && <span className="ghost-button__text">{children}</span>}
+    </button>
+  )
+}

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

@@ -0,0 +1,5 @@
+export { Button, ButtonText } from './Button'
+export type { ButtonProps, ButtonTextProps } from './Button'
+export { GhostButton } from './GhostButton'
+export type { GhostButtonProps } from './GhostButton'
+

package/src/v2/components/Checkbox/Checkbox.scss

@@ -0,0 +1,211 @@
+@import '../../styles/index.scss';
+
+.checkbox {
+  display: flex;
+  max-width: 500px;
+  align-items: center;
+  gap: 11px;
+
+  @media (min-width: 992px) {
+    max-width: unset;
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+    margin: 0;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .checkbox__toggle {
+      background: var(--fill-selected, #14215A);
+      border: 1px solid var(--border-primary, #E8E9EF);
+
+      .checkbox__xmark {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .checkbox__checked-group {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &:focus ~ .checkbox__toggle {
+      box-shadow: 0 0 0 2px rgba(20, 33, 90, 0.2);
+    }
+
+    &:disabled ~ .checkbox__toggle {
+      background-color: var(--surface-status-disabled, #f8f8fa);
+      border-color: var(--border-primary, #e8e9ef);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  // Only show X mark when not pristine and not checked
+  &:not(&--pristine) &__input:not(:checked) ~ &__toggle {
+    .checkbox__xmark {
+      opacity: 1;
+      visibility: visible;
+      top: 50%;
+      position: absolute;
+      right: 4px;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .checkbox__checked-group {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  &__toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end; // Positions X mark to the right
+    width: 58px;
+    height: 34px; // Set explicit height to help with vertical centering
+    min-width: 58px;
+    padding: 4px;
+    background: var(--surface-secondary, #F8F8FA);
+    border: 1px solid var(--border-primary, #E8E9EF);
+    border-radius: var(--padding-xl, 32px);
+    flex-shrink: 0;
+  }
+
+  &__xmark {
+    width: 24px;
+    height: 24px;
+    opacity: 0; // Hidden by default (blank state)
+    visibility: hidden;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__checked-group {
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    opacity: 0;
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__circle {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+    color: var(--label-primary);
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  &__description {
+    color: var(--label-secondary);
+    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+    font-size: var(--text-regular-size, 15px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--text-regular-line, 20px);
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  &__error-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+    font-size: var(--text-xs-size, 11px);
+    line-height: var(--text-xs-line, 14px);
+    color: var(--label-status-error, #ef4444);
+    margin-left: 69px;
+  }
+
+  &__wrapper:hover &__input:not(:disabled) ~ &__toggle {
+    border-color: var(--border-primary-hover, #d1d3de);
+  }
+
+  &--pristine {
+    .checkbox__toggle {
+      background: var(--surface-secondary, #F8F8FA);
+    }
+    .checkbox__xmark,
+    .checkbox__checked-group {
+      opacity: 0 !important;
+      visibility: hidden !important;
+    }
+  }
+}
+
+.checkbox-pristine-wrapper {
+  display: flex;
+  width: 58px;
+  padding: 4px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--padding-xl, 32px);
+  border: 1px solid var(--border-primary, #E8E9EF);
+  background: var(--surface-primary, #FFF);
+}
+