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

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/pages/DeleteEntity/DeleteEntityPage.tsx

@@ -49,7 +49,7 @@ export function DeleteEntityPage({
   const [confirmationError, setConfirmationError] = useState(false)
 
   const handleDelete = async () => {
-    if (confirmationInput.toLowerCase() !== confirmWord.toLowerCase()) {
+    if (confirmationInput.trim().toLowerCase() !== confirmWord.trim().toLowerCase()) {
       setConfirmationError(true)
       return
     }

package/src/v2/styles/form/NewInput.scss

@@ -92,7 +92,7 @@
         line-height: var(--text-regular-line, 20px);
         color: var(--labels-main-label-primary, #121e52);
         background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        border: 1px solid var(--borders-main-border-primary, #e8e9ef);
+        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
         border-radius: var(--radius-md, 4px);
         padding: 8px 10px;
         min-height: 120px;

package/src/v2/styles/tokens/_colors.scss

@@ -427,6 +427,7 @@
   --border-status-info: var(--information-lighter);
   --border-status-disabled: var(--disabled-lightest);
   --border-colour-overlay: #121E521A;
+  --border-red-regular: var(--red-regular);
 
   /* Fills */
   --fill-primary: var(--shade-lighter);