@licklist/design 0.78.20 → 0.78.25

package/src/v2/components/Select/Select.scss

@@ -0,0 +1,188 @@
+@import '../../design-system/typography/Typography.scss';
+
+.select-container {
+  position: relative;
+  display: inline-block;
+  width: auto;
+  max-width: 152px;
+
+  @media (min-width: 768px) {
+    max-width: 448px;
+  }
+}
+
+.select {
+  @include typography('heading.h5');
+  display: block;
+  width: auto;
+  height: 40px;
+  padding: 8px var(--padding-reg, 16px);
+  padding-right: 40px;
+  flex-shrink: 0;
+  color: var(--label-primary);
+  line-height: 16px;
+  appearance: none;
+  cursor: pointer;
+  background-color: var(--surface-secondary);
+  border: 2px solid var(--border-primary);
+  border-radius: var(--radius-md, 4px);
+  transition: all 0.2s ease-in-out;
+  &:hover:not(:disabled) {
+    border-color: var(--disabled-regular);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--highlight-dark);
+    box-shadow: 0 0 0 3px var(--surface-highlight-soft);
+  }
+
+  // Variants
+  &--default {
+    background-color: var(--surface-secondary);
+  }
+
+  &--hover {
+    background-color: var(--surface-secondary);
+    border-color: var(--border-secondary);
+  }
+
+  &--focus {
+    background-color: var(--surface-secondary);
+    border-color: var(--border-selected);
+  }
+
+  &--secondary {
+    background-color: var(--surface-secondary);
+    border-color: var(--border-primary);
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-primary-hover);
+      border-color: var(--tone-regular);
+    }
+
+    &:focus {
+      border-color: var(--disabled-regular);
+      background-color: var(--surface-primary);
+    }
+  }
+
+  &--error {
+    background-color: var(--surface-status-error);
+    border-color: var(--border-status-error);
+
+    &:hover:not(:disabled) {
+      background-color: var(--errors-lighter);
+      border-color: var(--errors-light);
+    }
+
+    &:focus {
+      border-color: var(--errors-dark);
+      background-color: var(--surface-status-error);
+    }
+  }
+
+  &--info {
+    background-color: var(--surface-status-info);
+    border-color: var(--border-status-info);
+    color: var(--information-darker);
+
+    &:hover:not(:disabled) {
+      background-color: var(--information-lighter);
+      border-color: var(--information-light);
+    }
+
+    &:focus {
+      border-color: var(--information-dark);
+      background-color: var(--information-lightest);
+    }
+  }
+
+  &--disabled {
+    background-color: var(--surface-status-disabled);
+    border-color: var(--border-status-disabled);
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    &:hover {
+      background-color: var(--surface-status-disabled);
+      border-color: var(--border-status-disabled);
+    }
+  }
+
+  // Sizes
+  &--sm {
+    padding: 4px 32px 4px 8px;
+    font-size: 12px;
+  }
+
+  &--md {
+    padding: 8px 36px 8px 12px;
+    font-size: 14px;
+  }
+
+  &--lg {
+    padding: 12px 40px 12px 16px;
+    font-size: 16px;
+  }
+
+  &::-ms-expand {
+    display: none;
+  }
+}
+
+.select-arrow {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  width: 11px;
+  height: 6px;
+  stroke: var(--label-secondary);
+  transition: all 0.2s ease-in-out;
+  
+  .select:focus + & {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.select {
+  &:focus {
+    outline: none;
+    border-color: var(--highlight-dark);
+    box-shadow: 0 0 0 3px var(--surface-highlight-soft);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0px);
+    box-shadow: 0 0 0 2px var(--surface-highlight-soft);
+  }
+
+  &.select--transitioning {
+    opacity: 0.8;
+    transform: scale(0.98);
+    border-color: var(--cyan-700);
+    
+    &:focus {
+      transform: scale(0.98) translateY(-1px);
+    }
+  }
+}
+
+@keyframes filterPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(31, 154, 181, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(31, 154, 181, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(31, 154, 181, 0);
+  }
+}
+
+.select--filter-active {
+  animation: filterPulse 0.6s ease-out;
+}

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

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Select } from './Select'
+
+const meta = {
+  title: 'v2/Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'primary-soft', 'primary-outline', 'secondary', 'destructive-soft', 'destructive-strong', 'info', 'disabled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const Hover: Story = {
+  args: {
+    variant: 'hover',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const Focus: Story = {
+  args: {
+    variant: 'focus',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+
+export const Disabled: Story = {
+  args: {
+    variant: 'disabled',
+    size: 'md',
+    disabled: true,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '32px', maxWidth: '900px' }}>
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Default</h3>
+        <Select variant="default" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Hover</h3>
+        <Select variant="hover" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Focus</h3>
+        <Select variant="focus" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Error</h3>
+        <Select variant="error" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Disabled</h3>
+        <Select variant="disabled" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+    </div>
+  ),
+}

package/src/v2/components/Select/Select.tsx

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes } from 'react'
+import './Select.scss'
+
+export interface SelectProps extends HTMLAttributes<HTMLSelectElement> {
+  variant?: 'default' | 'hover'| 'focus' | 'error' | 'disabled'
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+export function Select({ 
+  variant = 'default', 
+  size = 'md', 
+  disabled = false, 
+  className = '',
+  children,
+  ...props 
+}: SelectProps) {
+  const classes = [
+    'select',
+    `select--${variant}`,
+    `select--${size}`,
+    disabled ? 'select--disabled' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <div className="select-container">
+      <select 
+        className={classes} 
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </select>
+      <svg 
+        className="select-arrow"
+        xmlns="http://www.w3.org/2000/svg" 
+        width="11" 
+        height="6" 
+        viewBox="0 0 11 6" 
+        fill="none"
+        aria-hidden="true"
+      >
+        <path 
+          d="M1 1L5.5 5L10 1" 
+          stroke="#626A90" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default Select

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

@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export type { SelectProps } from './Select'

package/src/v2/components/Tooltip/Tooltip.scss

@@ -0,0 +1,92 @@
+.tooltip-content {
+    z-index: 50;
+    overflow: hidden;
+    border-radius: 6px;
+    border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    background: var(--surfaces-main-surface-primary, #FFFFFF);
+    padding: 6px 12px;
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121E52);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+
+    &[data-state='delayed-open'][data-side='top'] {
+        animation-name: tooltip-slide-down;
+    }
+
+    &[data-state='delayed-open'][data-side='bottom'] {
+        animation-name: tooltip-slide-up;
+    }
+
+    &[data-state='delayed-open'][data-side='left'] {
+        animation-name: tooltip-slide-right;
+    }
+
+    &[data-state='delayed-open'][data-side='right'] {
+        animation-name: tooltip-slide-left;
+    }
+
+    &[data-state='closed'] {
+        animation-name: tooltip-fade-out;
+        animation-duration: 0.1s;
+    }
+}
+
+@keyframes tooltip-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes tooltip-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tooltip-slide-down {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tooltip-slide-left {
+    from {
+        opacity: 0;
+        transform: translateX(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes tooltip-slide-right {
+    from {
+        opacity: 0;
+        transform: translateX(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

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

@@ -0,0 +1,164 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Tooltip } from './Tooltip'
+
+export default {
+    title: 'v2/Components/Tooltip',
+    component: Tooltip,
+    argTypes: {
+        content: { control: 'text' },
+        side: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+        sideOffset: { control: 'number' },
+        delayDuration: { control: 'number' },
+        disabled: { control: 'boolean' },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta<typeof Tooltip>
+
+type Story = StoryObj<typeof Tooltip>
+
+export const Default: Story = {
+    args: {
+        content: 'Hey Godwin Adebimpe',
+        side: 'bottom',
+        sideOffset: 8,
+        delayDuration: 200,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #E8E9EF',
+                background: '#FFFFFF',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+            }}>
+                Hover me
+            </button>
+        </Tooltip>
+    ),
+}
+
+export const Top: Story = {
+    args: {
+        content: 'Tooltip on top',
+        side: 'top',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <div style={{ marginTop: '100px' }}>
+            <Tooltip {...args}>
+                <button style={{
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    border: '1px solid #E8E9EF',
+                    background: '#FFFFFF',
+                    cursor: 'pointer',
+                    fontFamily: 'Geist, sans-serif',
+                }}>
+                    Hover me
+                </button>
+            </Tooltip>
+        </div>
+    ),
+}
+
+export const Left: Story = {
+    args: {
+        content: 'Tooltip on left',
+        side: 'left',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <div style={{ marginLeft: '150px' }}>
+            <Tooltip {...args}>
+                <button style={{
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    border: '1px solid #E8E9EF',
+                    background: '#FFFFFF',
+                    cursor: 'pointer',
+                    fontFamily: 'Geist, sans-serif',
+                }}>
+                    Hover me
+                </button>
+            </Tooltip>
+        </div>
+    ),
+}
+
+export const Right: Story = {
+    args: {
+        content: 'Tooltip on right',
+        side: 'right',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #E8E9EF',
+                background: '#FFFFFF',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+            }}>
+                Hover me
+            </button>
+        </Tooltip>
+    ),
+}
+
+export const WithAvatar: Story = {
+    args: {
+        content: 'Hey Godwin Adebimpe',
+        side: 'bottom',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                width: '32px',
+                height: '32px',
+                borderRadius: '50%',
+                background: 'rgba(98, 106, 144, 0.2)',
+                border: '2px solid #626A90',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+                fontSize: '10px',
+                fontWeight: 800,
+                color: '#626A90',
+            }}>
+                GA
+            </button>
+        </Tooltip>
+    ),
+}
+
+export const Disabled: Story = {
+    args: {
+        content: 'This tooltip is disabled',
+        side: 'bottom',
+        sideOffset: 8,
+        disabled: true,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #E8E9EF',
+                background: '#FFFFFF',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+            }}>
+                Hover me (disabled tooltip)
+            </button>
+        </Tooltip>
+    ),
+}