@licklist/design 0.78.28 → 0.78.29

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

@@ -0,0 +1,211 @@
+@import '../../styles/index.scss';
+
+.checkbox {
+  display: flex;
+  max-width: 500px;
+  align-items: flex-start;
+  gap: 11px;
+  align-self: stretch;
+
+  @media (min-width: 992px) {
+    max-width: unset;
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 11px;
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+  }
+
+  &__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);
+}
+

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

@@ -0,0 +1,316 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Checkbox } from './Checkbox'
+import { useState } from 'react'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'V2/Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {
+    label: 'Accept terms and conditions',
+  },
+}
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Legal Guardian Consent',
+    description: 'If enabled, displays a checkbox asking if you are, or have permission to sign on behalf of the minor.',
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    label: 'Pre-checked checkbox',
+    description: 'This checkbox starts in checked state',
+    checked: true,
+  },
+}
+
+export const Unchecked: Story = {
+  args: {
+    label: 'Pre-unchecked checkbox',
+    description: 'This checkbox starts in unchecked state (showing X mark)',
+    checked: false,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Checkbox with error',
+    description: 'This checkbox has an error state',
+    error: 'This field is required',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled checkbox',
+    description: 'This checkbox is disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Disabled checked checkbox',
+    description: 'This checkbox is disabled and checked',
+    disabled: true,
+    checked: true,
+  },
+}
+
+// Controlled checkbox example
+export const Controlled: Story = {
+  render: () => {
+    const ControlledExample = () => {
+      const [checked, setChecked] = useState(false)
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+          <Checkbox
+            label="Controlled checkbox"
+            description={`Current state: ${checked ? 'Checked ✓' : 'Unchecked ✗'}`}
+            checked={checked}
+            onChange={(e) => setChecked(e.target.checked)}
+          />
+          <button onClick={() => setChecked(!checked)}>
+            Toggle programmatically
+          </button>
+        </div>
+      )
+    }
+
+    return <ControlledExample />
+  },
+}
+
+// Pristine (blank) state - initial state before any interaction
+export const Pristine: Story = {
+  args: {
+    label: 'Pristine checkbox',
+    description: 'This checkbox is in pristine state (completely blank/empty before any interaction)',
+  },
+}
+
+// Animation showcase - demonstrates the sliding animation
+export const AnimationShowcase: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false)
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
+        <h3>Click to see the animation</h3>
+        <Checkbox
+          label="Animated checkbox"
+          description="Watch the smooth slide animation when toggling"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+        <p style={{ fontSize: '14px', color: '#666' }}>
+          {checked
+            ? '✅ Checkmark slides in from the left'
+            : '❌ X mark slides in from the right'}
+        </p>
+      </div>
+    )
+  },
+}
+
+// Multiple checkboxes with pre-set values (like form edit mode)
+export const MultipleWithPresetValues: Story = {
+  render: () => {
+    const [values, setValues] = useState({
+      legalGuardian: true,
+      oneAdultPerWaiver: false,
+      sendEmail: true,
+    })
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        <h3>Edit Waiver Template (Simulated)</h3>
+        <Checkbox
+          label="Legal Guardian Consent"
+          description="If enabled, displays a checkbox asking if you are, or have permission to sign on behalf of the minor."
+          checked={values.legalGuardian}
+          onChange={(e) => setValues({ ...values, legalGuardian: e.target.checked })}
+        />
+        <Checkbox
+          label="1 Adult per Waiver"
+          description="If enabled, each participant over 18 must sign their own waiver."
+          checked={values.oneAdultPerWaiver}
+          onChange={(e) => setValues({ ...values, oneAdultPerWaiver: e.target.checked })}
+        />
+        <Checkbox
+          label="Send confirmation email"
+          description="Automatically send email after waiver is signed."
+          checked={values.sendEmail}
+          onChange={(e) => setValues({ ...values, sendEmail: e.target.checked })}
+        />
+        <div style={{ marginTop: '20px', padding: '10px', background: '#f0f0f0', borderRadius: '4px' }}>
+          <strong>Current values:</strong>
+          <pre>{JSON.stringify(values, null, 2)}</pre>
+        </div>
+      </div>
+    )
+  },
+}
+
+// Real-world form example with pristine, checked, and unchecked states
+export const RealWorldFormExample: Story = {
+  render: () => {
+    const [isActive, setIsActive] = useState<boolean>(true)
+    const [legalGuardian, setLegalGuardian] = useState<boolean>(false)
+    const [oneAdult, setOneAdult] = useState<boolean | undefined>(undefined)
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '600px' }}>
+        <h3>Waiver Template Settings</h3>
+        <div style={{
+          background: '#f8f9fa',
+          padding: '16px',
+          borderRadius: '8px',
+          marginBottom: '10px'
+        }}>
+          <strong>Current State:</strong>
+          <ul style={{ marginTop: '8px', fontSize: '14px' }}>
+            <li>Active: {String(isActive)} (Checked)</li>
+            <li>Legal Guardian: {String(legalGuardian)} (Unchecked with X)</li>
+            <li>One Adult: {oneAdult === undefined ? 'undefined' : String(oneAdult)} (Pristine/Blank)</li>
+          </ul>
+        </div>
+
+        <Checkbox
+          label="Active"
+          description="Use this waiver when asking customers to fill in their details. Setting as active will disable any other waivers currently in use."
+          checked={isActive}
+          onChange={(e) => setIsActive(e.target.checked)}
+        />
+
+        <Checkbox
+          label="Legal Guardian Consent"
+          description="If enabled, displays a checkbox asking if you are, or have permission to sign on behalf of the minor."
+          checked={legalGuardian}
+          onChange={(e) => setLegalGuardian(e.target.checked)}
+        />
+
+        <Checkbox
+          label="1 Adult per Waiver"
+          description="If enabled, each participant over 18 must sign their own waiver."
+          checked={oneAdult}
+          onChange={(e) => setOneAdult(e.target.checked)}
+        />
+
+        <button
+          onClick={() => {
+            setIsActive(true)
+            setLegalGuardian(false)
+            setOneAdult(true)
+          }}
+          style={{
+            padding: '8px 16px',
+            background: '#269B36',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+        >
+          Load Preset Values
+        </button>
+
+        <button
+          onClick={() => {
+            setIsActive(false)
+            setLegalGuardian(false)
+            setOneAdult(undefined)
+          }}
+          style={{
+            padding: '8px 16px',
+            background: '#6c757d',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+        >
+          Reset Form (Show Pristine State)
+        </button>
+      </div>
+    )
+  },
+}
+
+// All states in one view for comparison
+export const AllStates: Story = {
+  render: () => {
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', padding: '20px' }}>
+        <div>
+          <h4 style={{ marginBottom: '10px' }}>Pristine (Blank)</h4>
+          <Checkbox
+            label="Pristine state"
+            description="No value set (undefined)"
+          />
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: '10px' }}>Checked</h4>
+          <Checkbox
+            label="Checked state"
+            description="Value is true"
+            checked={true}
+            onChange={() => {}}
+          />
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: '10px' }}>Unchecked</h4>
+          <Checkbox
+            label="Unchecked state"
+            description="Value is false (X mark visible)"
+            checked={false}
+            onChange={() => {}}
+          />
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: '10px' }}>Disabled</h4>
+          <Checkbox
+            label="Disabled state"
+            description="Cannot be interacted with"
+            disabled={true}
+          />
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: '10px' }}>Disabled Checked</h4>
+          <Checkbox
+            label="Disabled checked"
+            description="Disabled and checked"
+            disabled={true}
+            checked={true}
+          />
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: '10px' }}>With Error</h4>
+          <Checkbox
+            label="Error state"
+            description="Has validation error"
+            error="This field is required"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+

package/src/v2/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,106 @@
+import React, { InputHTMLAttributes, forwardRef } from 'react'
+import './Checkbox.scss'
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string | React.ReactNode
+  description?: string
+  error?: string
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ label, description, error, className = '', checked, onChange, ...props }, ref) => {
+    const [isPristine, setIsPristine] = React.useState(checked === undefined)
+    const hasInteractedRef = React.useRef(false)
+
+    // Update pristine state when checked prop changes (e.g., from form defaultValues)
+    React.useEffect(() => {
+      // If checked is defined (true or false) and user hasn't manually interacted, show the state
+      if (checked !== undefined && !hasInteractedRef.current) {
+        setIsPristine(false)
+      } else if (checked === undefined && !hasInteractedRef.current) {
+        // If checked becomes undefined again, restore pristine state (blank)
+        setIsPristine(true)
+      }
+    }, [checked])
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      hasInteractedRef.current = true
+      setIsPristine(false)
+      onChange?.(e)
+    }
+
+    return (
+      <div className={`checkbox ${isPristine ? 'checkbox--pristine' : ''} ${className}`}>
+        <label className="checkbox__wrapper">
+          <input
+            ref={ref}
+            type="checkbox"
+            className={`checkbox__input ${error ? 'checkbox__input--error' : ''}`}
+            checked={checked}
+            onChange={handleChange}
+            {...props}
+          />
+          <span className="checkbox__toggle">
+            {/* X mark - visible when unchecked, positioned to the right */}
+            <span className="checkbox__xmark">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"
+                  fill="#14215A"
+                />
+                <path
+                  d="M18.1426 8.59961L14.0762 12.375L18.1426 16.1504L16.1006 18.3496L11.8711 14.4219L7.64258 18.3496L5.60059 16.1504L9.66602 12.375L5.60059 8.59961L7.64258 6.40039L11.8711 10.3271L16.1006 6.40039L18.1426 8.59961Z"
+                  fill="white"
+                />
+              </svg>
+            </span>
+
+            {/* White circle + Checkmark - visible when checked, positioned to the left */}
+            <span className="checkbox__checked-group">
+              <span className="checkbox__circle">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <circle cx="12" cy="12" r="12" fill="white" />
+                </svg>
+              </span>
+              <span className="checkbox__checkmark">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M19.1272 8.67725L10.8545 18.1013L5.71509 13.2058L7.78491 11.0334L10.6611 13.7734L16.8728 6.69824L19.1272 8.67725Z"
+                    fill="#14215A"
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+          {(label || description) && (
+            <div className="checkbox__content">
+              {label && <span className="checkbox__label">{label}</span>}
+              {description && <span className="checkbox__description">{description}</span>}
+            </div>
+          )}
+        </label>
+        {error && <span className="checkbox__error-text">{error}</span>}
+      </div>
+    )
+  }
+)
+
+Checkbox.displayName = 'Checkbox'

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

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox'
+export type { CheckboxProps } from './Checkbox'
+