@licklist/design 0.78.5-dev.112 → 0.78.5-dev.115

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

@@ -28,17 +28,18 @@
     width: 0;
 
     &:checked ~ .checkbox__toggle {
-      background: var(--fill-selected, var(--neutral-500));
+      background: var(--fill-primary, #14215A);
       border: none;
 
-      .checkbox__unchecked-group {
-        opacity: 0;
-        visibility: hidden;
-      }
+      .checkbox__thumb {
+        transform: translateX(24px);
 
-      .checkbox__checked-group {
-        opacity: 1;
-        visibility: visible;
+        svg:first-child {
+          opacity: 0;
+        }
+        svg:last-child {
+          opacity: 1;
+        }
       }
     }
 
@@ -54,76 +55,68 @@
     }
   }
 
-  // Only show Unchecked group (X) when not pristine and not checked
+  // Unchecked state (when interacted or checked, but now unchecked)
   &:not(&--pristine) &__input:not(:checked) ~ &__toggle {
-    background: var(--grey-500); // Match image track color
+    background: var(--surface-tertiary, #D1D5E0);
     border: none;
 
-    .checkbox__unchecked-group {
-      opacity: 1;
-      visibility: visible;
-    }
+    .checkbox__thumb {
+      transform: translateX(0);
 
-    .checkbox__checked-group {
-      opacity: 0;
-      visibility: hidden;
+      svg:first-child {
+        opacity: 1;
+      }
+      svg:last-child {
+        opacity: 0;
+      }
     }
   }
 
   &__toggle {
-    position: relative;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    width: 58px;
-    height: 34px;
-    min-width: 58px;
-    padding: 4px;
-    background: var(--surface-secondary, var(--neutral-25));
-    border: none;
-    border-radius: var(--padding-xl, 32px);
+    width: 52px;
+    height: 28px;
     flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 9999px;
+    border: none;
+    padding: 2px;
     transition: background-color 0.2s ease;
+    position: relative;
+    background: var(--surface-tertiary, #D1D5E0);
   }
 
-  &__unchecked-group {
-    position: absolute;
-    left: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 24px;
-    height: 24px;
-    opacity: 0;
-    visibility: hidden;
+  &__thumb {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: white;
-    border-radius: 50%;
-  }
-
-  &__icon-cross {
-    fill: var(--grey-500);
-    opacity: 0.5;
-  }
-
-  &__checked-group {
-    position: absolute;
-    right: 4px; // Checked position on the right
-    top: 50%;
-    transform: translateY(-50%);
     width: 24px;
     height: 24px;
-    opacity: 0;
-    visibility: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: white;
-    border-radius: 50%;
-  }
+    background: #ffffff;
+    border-radius: 9999px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease;
+    pointer-events: none;
+    transform: translateX(0);
+    position: relative;
+
+    svg {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      transition: opacity 0.2s ease;
+    }
 
-  &__icon-tick {
-    fill: var(--neutral-500);
+    svg:first-child {
+      color: var(--label-tertiary, #A1A5B7);
+      opacity: 1;
+    }
+
+    svg:last-child {
+      color: var(--fill-primary, #14215A);
+      opacity: 0;
+    }
   }
 
   &__content {
@@ -158,7 +151,7 @@
     font-size: var(--text-xs-size, 11px);
     line-height: var(--text-xs-line, 14px);
     color: var(--label-status-error, var(--red-500));
-    margin-left: 69px;
+    margin-left: 63px;
   }
 
   &__wrapper:hover &__input:not(:disabled) ~ &__toggle {
@@ -169,22 +162,23 @@
     .checkbox__toggle {
       background: var(--surface-secondary, var(--neutral-25));
     }
-    .checkbox__unchecked-group,
-    .checkbox__checked-group {
-      opacity: 0 !important;
-      visibility: hidden !important;
+    .checkbox__thumb {
+      transform: translateX(0);
+      svg {
+        opacity: 0 !important;
+      }
     }
   }
 }
 
 .checkbox-pristine-wrapper {
   display: flex;
-  width: 58px;
-  padding: 4px;
+  width: 52px;
+  padding: 2px;
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
-  border-radius: var(--padding-xl, 32px);
+  border-radius: 9999px;
   border: 1px solid var(--border-primary, var(--neutral-50));
   background: var(--surface-primary, var(--neutral-white));
 }

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

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, forwardRef } from 'react'
-import { IconTick, IconCross } from '../../icons'
+import { ToggleCheckIcon, ToggleCrossIcon } from '../../icons'
 import './Checkbox.scss'
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
@@ -42,14 +42,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             {...props}
           />
           <span className="checkbox__toggle">
-            {/* White circle + X mark - visible when unchecked, positioned to the left */}
-            <span className="checkbox__unchecked-group">
-              <IconCross size={16} className="checkbox__icon-cross" />
-            </span>
-
-            {/* White circle + Checkmark - visible when checked, positioned to the right */}
-            <span className="checkbox__checked-group">
-              <IconTick size={16} className="checkbox__icon-tick" />
+            <span className="checkbox__thumb">
+              <ToggleCrossIcon />
+              <ToggleCheckIcon />
             </span>
           </span>
           {(label || description) && (

package/src/v2/components/ColorPicker/ColorPicker.scss

@@ -3,15 +3,16 @@
   flex-wrap: wrap;
   column-gap: 20px;
   row-gap: 32px;
-  margin-top: 16px;
   width: 100%;
   border-radius: 8px;
   border: 1px solid transparent;
   transition: all 0.2s;
 
   &--error {
-    border-color: #E0423A;
+    border-color: var(--border-red-regular);
     background-color: rgba(224, 66, 58, 0.05);
+    padding: 8px;
+    margin-top: 8px;
   }
 
   @media (max-width: 480px) {
@@ -85,6 +86,18 @@
   height: 38px;
   border-radius: 50%;
   transition: all 0.2s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.color-picker-check-icon {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  color: white;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
 }
 
 .color-picker-name {

package/src/v2/components/ColorPicker/ColorPicker.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { NotificationSuccessIcon } from '../../icons'
 import './ColorPicker.scss'
 
 export interface ColorOption {
@@ -9,9 +10,11 @@ export interface ColorOption {
 export interface ColorPickerProps {
   colors: ColorOption[]
   selectedColor?: string
-  onChange: (hex: string) => void
-  t: (key: string) => string
-  error?: string
+  onChange: (...args: any[]) => void
+  t: (...args: any[]) => string
+  error?: string | boolean | null
+  label?: string
+  optional?: boolean
 }
 
 export const ColorPicker: React.FC<ColorPickerProps> = ({
@@ -20,30 +23,49 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   onChange,
   t,
   error,
+  label,
+  optional,
 }) => {
+  const showError = !!error
   return (
-    <div className={`color-picker-grid ${error ? 'color-picker-grid--error' : ''}`}>
-      {colors.map((color) => (
-        <button
-          key={color.name}
-          type="button"
-          className="color-picker-button"
-          onClick={() => onChange(color.hex)}
-        >
-          <div
-            className={`color-picker-outer-circle ${
-              selectedColor === color.hex ? 'color-picker-outer-circle--selected' : ''
-            }`}
-            style={selectedColor === color.hex ? { borderColor: color.hex, borderWidth: '2px' } : {}}
+    <div className="new-form-input">
+      {(label || optional) && (
+        <label className="new-form-input__label">
+          <span>{label}</span>
+          {optional && <span className="new-form-input__label-optional">(optional)</span>}
+        </label>
+      )}
+      <div className={`color-picker-grid ${showError ? 'color-picker-grid--error' : ''}`}>
+        {colors.map((color) => (
+          <button
+            key={color.name}
+            type="button"
+            className="color-picker-button"
+            onClick={() => onChange(color.hex)}
           >
             <div
-              className="color-picker-inner-circle"
-              style={{ backgroundColor: color.hex }}
-            />
-          </div>
-          <span className="color-picker-name">{t(color.name)}</span>
-        </button>
-      ))}
+              className={`color-picker-outer-circle ${
+                selectedColor === color.hex ? 'color-picker-outer-circle--selected' : ''
+              }`}
+              style={selectedColor === color.hex ? { borderColor: color.hex, borderWidth: '2px' } : {}}
+            >
+              <div
+                className="color-picker-inner-circle"
+                style={{ backgroundColor: color.hex }}
+              >
+                {selectedColor === color.hex && (
+                  <NotificationSuccessIcon
+                    size={20}
+                    className="color-picker-check-icon"
+                  />
+                )}
+              </div>
+            </div>
+            <span className="color-picker-name">{t(color.name)}</span>
+          </button>
+        ))}
+      </div>
+      <p className="pricing-period-form__hint">{t('colourHint')}</p>
     </div>
   )
 }

package/src/v2/components/RadioGroup/RadioGroup.scss

@@ -0,0 +1,86 @@
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.radio-group-item {
+  display: flex;
+  flex: 1;
+  padding: 12px 4px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--surface-primary-hover, #F3F4F6);
+  }
+
+  &__input-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    position: relative;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+  }
+
+  &__circle {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid var(--border-primary, #E5E7EB);
+    background-color: var(--surface-primary, #FFFFFF);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-color 0.2s ease;
+  }
+
+  &__inner-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--fill-primary, #14215A);
+    transform: scale(0);
+    transition: transform 0.2s ease;
+  }
+
+  &__input:checked + &__circle {
+    .radio-group-item__inner-dot {
+      transform: scale(1);
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    color: var(--label-primary, #111827);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  &__description {
+    color: var(--label-secondary, #6B7280);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.5;
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { RadioGroup } from './RadioGroup'
+
+export default {
+  title: 'v2/Components/RadioGroup',
+  component: RadioGroup,
+  args: {
+    name: 'radio-group-example',
+    options: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3' },
+    ],
+    value: 'option1',
+  },
+} as Meta<typeof RadioGroup>
+
+type Story = StoryObj<typeof RadioGroup>
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value)
+    return <RadioGroup {...args} value={value} onChange={setValue} />
+  },
+}
+
+export const WithDescriptions: Story = {
+  args: {
+    options: [
+      {
+        value: 'all',
+        label: 'All conditions are met',
+        description: 'Every rule must be satisfied for this tier to apply',
+      },
+      {
+        value: 'any',
+        label: 'Any condition is met',
+        description: 'At least one rule must be satisfied for this tier to apply',
+      },
+    ],
+    value: 'all',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value)
+    return <RadioGroup {...args} value={value} onChange={setValue} />
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('one')
+    const options = [
+      { value: 'one', label: 'Label One', description: 'Description for label one' },
+      { value: 'two', label: 'Label Two', description: 'Description for label two' },
+    ]
+    return (
+      <div style={{ maxWidth: '400px', padding: '20px', background: '#fff' }}>
+        <RadioGroup
+          name="controlled-example"
+          value={value}
+          onChange={setValue}
+          options={options}
+        />
+        <div style={{ marginTop: '20px', fontSize: '14px' }}>
+          Selected value: <strong>{value}</strong>
+        </div>
+      </div>
+    )
+  },
+}

package/src/v2/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import './RadioGroup.scss'
+
+export interface RadioOption {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface RadioGroupProps {
+  name: string
+  options: RadioOption[]
+  value: string
+  onChange: (value: string) => void
+  className?: string
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  name,
+  options,
+  value,
+  onChange,
+  className = '',
+}) => {
+  return (
+    <div className={`radio-group ${className}`} role="radiogroup">
+      {options.map((opt) => (
+        <label
+          key={opt.value}
+          className={`radio-group-item ${value === opt.value ? 'radio-group-item--selected' : ''}`}
+        >
+          <div className="radio-group-item__input-wrapper">
+            <input
+              type="radio"
+              name={name}
+              value={opt.value}
+              checked={value === opt.value}
+              onChange={() => onChange(opt.value)}
+              className="radio-group-item__input"
+            />
+            <div className="radio-group-item__circle">
+              <div className="radio-group-item__inner-dot" />
+            </div>
+          </div>
+          <div className="radio-group-item__content">
+            <span className="radio-group-item__title">{opt.label}</span>
+            {opt.description && (
+              <p className="radio-group-item__description">{opt.description}</p>
+            )}
+          </div>
+        </label>
+      ))}
+    </div>
+  )
+}

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

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

package/src/v2/components/index.ts

@@ -67,6 +67,7 @@ export type { CheckboxProps } from './Checkbox'
 export { InputCheckbox } from './InputCheckbox'
 export type { InputCheckboxProps } from './InputCheckbox'
 
+
 export { WYSIWYGEditor } from './WYSIWYGEditor'
 export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
 
@@ -114,6 +115,8 @@ export type { PaginationProps } from './Pagination'
 export { RadioCardGroup } from './RadioCard'
 export type { RadioCardGroupProps, RadioCardOption } from './RadioCard'
 
+export * from './RadioGroup'
+
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
 

package/src/v2/icons/index.tsx

@@ -110,10 +110,10 @@ export const EditIcon = () => (
 
 export const NoRulesIcon = ({ width = 24, height = 24, className = '' }: { width?: number; height?: number; className?: string } = {}) => (
     <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-        <path d="M24 6C25.6569 6 27 7.34315 27 9V11H25V23C25 24.6569 23.6569 26 22 26H8C6.34315 26 5 24.6569 5 23V21H21V23C21 23.5128 21.386 23.9355 21.8834 23.9933L22 24C22.5128 24 22.9355 23.614 22.9933 23.1166L23 23V8H10C9.48716 8 9.06449 8.38604 9.00673 8.88338L9 9V19H7V9C7 7.34315 8.34315 6 10 6H24Z" fill="black"/>
-        <path d="M11 11C11 10.4477 11.4477 10 12 10H20C20.5523 10 21 10.4477 21 11C21 11.5523 20.5523 12 20 12H12C11.4477 12 11 11.5523 11 11Z" fill="black" fill-opacity="0.25"/>
-        <path d="M11 15C11 14.4477 11.4477 14 12 14H20C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16H12C11.4477 16 11 15.5523 11 15Z" fill="black" fill-opacity="0.25"/>
-        <path d="M11 19C11 18.4477 11.4477 18 12 18H20C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20H12C11.4477 20 11 19.5523 11 19Z" fill="black" fill-opacity="0.25"/>
+        <path d="M24 6C25.6569 6 27 7.34315 27 9V11H25V23C25 24.6569 23.6569 26 22 26H8C6.34315 26 5 24.6569 5 23V21H21V23C21 23.5128 21.386 23.9355 21.8834 23.9933L22 24C22.5128 24 22.9355 23.614 22.9933 23.1166L23 23V8H10C9.48716 8 9.06449 8.38604 9.00673 8.88338L9 9V19H7V9C7 7.34315 8.34315 6 10 6H24Z" fill="currentColor"/>
+        <path d="M11 11C11 10.4477 11.4477 10 12 10H20C20.5523 10 21 10.4477 21 11C21 11.5523 20.5523 12 20 12H12C11.4477 12 11 11.5523 11 11Z" fill="currentColor" fillOpacity="0.25"/>
+        <path d="M11 15C11 14.4477 11.4477 14 12 14H20C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16H12C11.4477 16 11 15.5523 11 15Z" fill="currentColor" fillOpacity="0.25"/>
+        <path d="M11 19C11 18.4477 11.4477 18 12 18H20C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20H12C11.4477 20 11 19.5523 11 19Z" fill="currentColor" fillOpacity="0.25"/>
     </svg>
 )
 

package/src/v2/index.ts

@@ -143,11 +143,11 @@ export { SidebarWithAuth } from './navigation/SidebarWithAuth'
 export type { SidebarWithAuthProps } from './navigation/SidebarWithAuth'
 
 // Dashboard Layout (Complete layout with sidebar, tophat, and content area)
-export { 
-    DashboardLayout, 
-    ProviderSidebar, 
-    AdminSidebar, 
-    TopNavigation, 
+export {
+    DashboardLayout,
+    ProviderSidebar,
+    AdminSidebar,
+    TopNavigation,
     DashboardFooter,
     // Sidebar Icons
     HomeIcon,
@@ -161,14 +161,14 @@ export {
     WaiversIcon,
     SettingsIcon,
 } from './navigation/DashboardLayout'
-export type { 
-    DashboardLayoutProps, 
+export type {
+    DashboardLayoutProps,
     DestinationType,
     ProviderSidebarProps,
     NavItem,
-    AdminSidebarProps, 
-    TopNavigationProps, 
-    DashboardFooterProps 
+    AdminSidebarProps,
+    TopNavigationProps,
+    DashboardFooterProps
 } from './navigation/DashboardLayout'
 
 // Navigation Configuration

package/src/v2/navigation/DashboardLayout/DashboardLayout.scss

@@ -56,6 +56,12 @@
         flex: 1;
         min-height: 0;
         overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__content-inner {
+        flex: 1 0 auto;
         padding-left: var(--container-padding-desktop, 32px);
         padding-right: var(--container-padding-desktop, 32px);
         @media (max-width: 768px) {

package/src/v2/navigation/DashboardLayout/DashboardLayout.tsx

@@ -232,9 +232,11 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                     }}
                 >
                     <div id="main" className="dashboard-layout__content">
-                        {children}
+                        <div className="dashboard-layout__content-inner">
+                            {children}
+                        </div>
+                        {showFooter && <DashboardFooter version={version} />}
                     </div>
-                    {showFooter && <DashboardFooter version={version} />}
                 </main>
             </div>
 

package/src/v2/navigation/DashboardLayout/ProviderSidebar.scss

@@ -231,6 +231,10 @@
         width: 100%;
         color: var(--fills-main-fill-primary, #14215A);
 
+        @media (max-width: 768px) {
+            padding: 10px;
+        }
+
         &:hover:not(&--active) {
             background: var(--surfaces-main-background-secondary-hover, #F0F0F4);
         }
@@ -308,5 +312,9 @@
         color: var(--labels-main-label-primary, #121E52);
         margin: 0;
         white-space: nowrap;
+
+        @media (max-width: 768px) {
+            font-size: 15px;
+        }
     }
 }