@licklist/design 0.78.28 → 0.78.30

package/src/v2/pages/Settings/components/SidebarCustomisation.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarCustomisation, defaultSidebarItems, SidebarItem } from './SidebarCustomisation'
+
+const meta: Meta<typeof SidebarCustomisation> = {
+  title: 'V2/Pages/Settings/SidebarCustomisation',
+  component: SidebarCustomisation,
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarCustomisation>
+
+const InteractiveSidebarCustomisation = () => {
+  const [items, setItems] = useState<SidebarItem[]>(defaultSidebarItems)
+
+  const handleSave = (updatedItems: SidebarItem[]) => {
+    console.log('Saved items:', updatedItems)
+    alert('Settings saved!')
+  }
+
+  const handleReset = () => {
+    setItems(defaultSidebarItems)
+    console.log('Reset to defaults')
+  }
+
+  const handleCancel = () => {
+    console.log('Cancelled')
+  }
+
+  return (
+    <div style={{ maxWidth: '900px' }}>
+      <SidebarCustomisation
+        items={items}
+        onItemsChange={setItems}
+        onSave={handleSave}
+        onReset={handleReset}
+        onCancel={handleCancel}
+      />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveSidebarCustomisation />,
+}

package/src/v2/pages/Settings/components/SidebarNavItem.scss

@@ -0,0 +1,76 @@
+@import '../../../styles/tokens/typography';
+@import '../../../styles/tokens/colors';
+
+.sidebar-nav-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &--disabled {
+      .sidebar-nav-item__icon {
+        color: var(--fill-disabled);
+      }
+
+      .sidebar-nav-item__name {
+        color: var(--label-status-disabled);
+      }
+    }
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fill-primary);
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__name {
+    @include typography('text.small.emphasis');
+  }
+
+  &__input {
+    @include typography('text.small');
+    height: 40px;
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: 6px;
+    background-color: var(--surface-secondary);
+    color: var(--label-primary);
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &::placeholder {
+      color: var(--label-secondary);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--actions-regular);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/v2/pages/Settings/components/SidebarNavItem.stories.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarNavItem } from './SidebarNavItem'
+
+const HomeIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M17.7273 20.1182H6.27273C5.82086 20.1182 5.45455 19.7423 5.45455 19.2785V11.7207H3L11.4496 3.83661C11.7617 3.54543 12.2383 3.54543 12.5504 3.83661L21 11.7207H18.5455V19.2785C18.5455 19.7423 18.1792 20.1182 17.7273 20.1182ZM7.09091 18.4387H16.9091V10.1734L12 5.59288L7.09091 10.1734V18.4387Z" fill="currentColor" />
+  </svg>
+)
+
+const meta: Meta<typeof SidebarNavItem> = {
+  title: 'V2/Pages/Settings/SidebarNavItem',
+  component: SidebarNavItem,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Display label for the item',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarNavItem>
+
+const InteractiveSidebarNavItem = () => {
+  const [label, setLabel] = useState('Home')
+
+  return (
+    <div style={{ maxWidth: '300px' }}>
+      <SidebarNavItem
+        id="home"
+        label={label}
+        defaultLabel="Home"
+        icon={<HomeIcon />}
+        onLabelChange={(id, newLabel) => setLabel(newLabel)}
+      />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveSidebarNavItem />,
+}

package/src/v2/pages/Settings/components/SidebarNavItem.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import './SidebarNavItem.scss'
+
+export interface SidebarNavItemProps {
+  /** Unique identifier for the item */
+  id: string
+  /** Display label for the item (editable value) */
+  label: string
+  /** Default/original label name shown in header */
+  defaultLabel: string
+  /** Icon to display */
+  icon: React.ReactNode
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Callback when the label changes */
+  onLabelChange?: (id: string, label: string) => void
+}
+
+export const SidebarNavItem: React.FC<SidebarNavItemProps> = ({
+  id,
+  label,
+  defaultLabel,
+  icon,
+  disabled = false,
+  onLabelChange,
+}) => {
+  return (
+    <div className="sidebar-nav-item">
+      <div className="sidebar-nav-item__header">
+        <div className={`sidebar-nav-item__info ${disabled ? 'sidebar-nav-item__info--disabled' : ''}`}>
+          <div className="sidebar-nav-item__icon">
+            {icon}
+          </div>
+          <span className="sidebar-nav-item__name">
+            {defaultLabel}
+          </span>
+        </div>
+      </div>
+      <input
+        type="text"
+        id={id}
+        className={`sidebar-nav-item__input ${disabled ? 'sidebar-nav-item__input--disabled' : ''}`}
+        value={label}
+        onChange={(e) => onLabelChange?.(id, e.target.value)}
+        disabled={disabled}
+        placeholder={label}
+      />
+    </div>
+  )
+}
+
+export default SidebarNavItem

package/src/v2/pages/Settings/components/index.ts

@@ -0,0 +1,5 @@
+export { SidebarCustomisation, defaultSidebarItems } from './SidebarCustomisation'
+export type { SidebarCustomisationProps, SidebarItem } from './SidebarCustomisation'
+
+export { SidebarNavItem } from './SidebarNavItem'
+export type { SidebarNavItemProps } from './SidebarNavItem'

package/src/v2/pages/Settings/index.ts

@@ -0,0 +1,8 @@
+export { SettingsPage } from './SettingsPage'
+export type { SettingsPageProps } from './SettingsPage'
+
+export { SettingsTabs } from './SettingsTabs'
+export type { SettingsTabsProps, SettingsTab } from './SettingsTabs'
+
+export { SidebarCustomisation, defaultSidebarItems, SidebarNavItem } from './components'
+export type { SidebarCustomisationProps, SidebarItem, SidebarNavItemProps } from './components'

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

@@ -2,59 +2,48 @@
 
 .new-button {
   display: flex;
-  gap: var(--spacing-sm, 8px);
-  align-items: center;
+  gap: var(--spacing-sm);
   justify-content: center;
-  padding: var(--spacing-sm, 8px) var(--spacing-reg, 16px);
-  border-radius: var(--radius-md, 4px);
-  font-family: var(--font-family-sans, 'Geist', sans-serif);
-  font-weight: var(--heading-h5-weight, 600);
-  font-size: var(--text-reg-size, 15px);
-  line-height: var(--text-reg-line, 18px);
+  padding: 12px 24px;
+  align-self: flex-start;
+  text-align: center;
+  align-items: center;
+  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  font-weight: 600;
+  line-height: 20px;
+  min-height: 44px;
   border: none;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
 
-  // Primary Button - Solid with gradient
+  // Primary Button - Solid purple
   &--primary {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      var(--purples-purple-500) 5.77%,
-      var(--purples-purple-700) 95.19%,
-      var(--purples-purple-900) 100%
-    ),
-    linear-gradient(
-      180deg,
-      var(--purples-purple-50) 0%,
-      var(--purples-purple-900) 100%
-    ),
-    linear-gradient(90deg, var(--purples-purple-500) 0%, var(--purples-purple-500) 100%);
-    color: var(--labels-main-label-white, #ffffff);
+    background: #6200EE;
+    color: #ffffff;
 
     &:hover {
-      background-color: var(--fills-main-fill-action, #6200ee);
+      background: #360083;
     }
 
     &:active,
     &:focus {
-      background-color: var(--fills-main-fill-action, #6200ee);
+      background: #360083;
     }
   }
 
-  // Primary - Soft
+  // Primary - Soft (Light purple)
   &--primary-soft {
-    background-color: var(--surfaces-main-background-action-soft, #efe6fd);
-    color: var(--labels-main-label-action, #6200ee);
+    background: #efeffe;
+    color: #5d5bf4;
 
     &:hover {
-      background-color: var(--surfaces-main-background-action-soft-hover, #ceb0fa);
+      background: #cdccfc;
     }
 
     &:active {
-      background-color: var(--surfaces-main-background-action-soft-pressed, #965ff4);
-      color: var(--labels-main-label-white, #ffffff);
+      background: #b4b4fa;
     }
   }
 
@@ -76,39 +65,32 @@
 
   // Secondary Button
   &--secondary {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      var(--neutrals-gray-200) 5.77%,
-      var(--purples-purple-700) 95.19%,
-      var(--purples-purple-900) 100%
-    ),
-    linear-gradient(
-      180deg,
-      var(--neutrals-gray-200) 0%,
-      var(--fills-main-fill-secondary) 100%
-    ),
-    linear-gradient(90deg, var(--fills-main-fill-secondary) 0%, var(--fills-main-fill-secondary) 100%);
-    color: var(--labels-main-label-white, #ffffff);
+    border-radius: var(--sizes-radius-radius, 8px);
+    background: var(--surface-action-soft);
+    color: var(--label-action);
 
-    &:hover,
-    &:active {
-      // Same gradient for hover/pressed states
+    &:hover {
+      background: #EFE6FD;
+    }
+
+    &:active,
+    &:focus {
+      background: #EFE6FD;
     }
   }
 
   // Destructive - Soft
   &--destructive-soft {
-    background-color: var(--surfaces-main-background-danger-soft, #fceceb);
-    color: var(--labels-main-label-danger, #cc3c35);
+    border-radius: var(--radius-reg, 8px);
+    background: var(--surface-danger-soft, #fceceb);
 
     &:hover {
-      background-color: var(--surfaces-main-background-danger-soft-hover, #f5c4c2);
+      background-color: var(--surface-danger-soft-hover, #f5c4c2);
     }
 
     &:active {
-      background-color: var(--surfaces-main-background-danger-soft-pressed, #e66861);
-      color: var(--labels-main-label-white, #ffffff);
+      background-color: var(--surface-danger-soft-pressed, #e66861);
+      color: var(--label-white, #ffffff);
     }
   }
 
@@ -155,6 +137,22 @@
     pointer-events: none;
   }
 
+  /* Button text styling */
+  &__text {
+    font-family: 'Geist', sans-serif;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    text-align: center;
+
+    &--primary { color: var(--label-primary); }
+    &--secondary { color: var(--label-secondary); }
+    &--danger { color: var(--label-danger); }
+    &--white { color: var(--label-white); }
+    &--action { color: var(--label-action); }
+  }
+
   // Text styling
   p {
     margin: 0;

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

@@ -0,0 +1,15 @@
+.waiver-template-form-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--padding-reg, 16px);
+  align-self: stretch;
+}
+
+.waiver-template-form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--padding-lg, 24px);
+  align-self: stretch;
+}

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

@@ -1,24 +1,28 @@
 /* New Form Input Styles based on Figma design tokens */
+@import '../../styles/tokens/typography';
 
 .new-form-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs, 4px);
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  align-self: stretch;
+  width: 100%;
 
     &__label {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        font-weight: var(--heading-h5-weight, 500);
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-primary, #121e52);
-        margin: 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+      color: var(--label-primary, #121E52);
+
     }
 
     &__label-optional {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
         font-size: var(--text-xs-size, 11px);
-        font-weight: var(--heading-h6-weight, 500);
+        font-weight: 400;
         line-height: var(--text-xs-line, 14px);
         color: var(--labels-main-label-secondary, #626a90);
         text-align: right;
@@ -32,34 +36,37 @@
         width: 100%;
     }
 
-    &__input {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-primary, #121e52);
-        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
-        border-radius: var(--radius-md, 4px);
-        padding: 8px 10px;
-        height: 40px;
-        width: 100%;
-        transition: all 0.2s ease;
+  &__input {
+    @include typography('text.regular');
+    flex: 1 0 0;
+    background-color: var(--surfaces-main-background-secondary);
+    border: 2px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    padding: 8px 10px;
+    min-height: 40px;
+    background: var(--surface-secondary);
+    width: 100%;
+    transition: all 0.2s ease;
 
-        &:focus {
-            outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
-            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        }
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
 
-        &::placeholder {
-            color: var(--labels-main-label-secondary, #626a90);
-        }
+    &:focus {
+      outline: none;
+      border-color: var(--border-selected, #6200EE);
+      background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+    }
+
+    &::placeholder {
+      color: var(--labels-main-label-secondary, #626a90);
     }
+  }
 
     &__textarea {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        line-height: var(--text-sm-line, 16px);
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-regular-size, 15px);
+        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);
@@ -70,9 +77,13 @@
         resize: vertical;
         transition: all 0.2s ease;
 
+        @media (max-width: 768px) {
+          font-size: 16px;
+        }
+
         &:focus {
             outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
 
         &::placeholder {
@@ -88,16 +99,20 @@
         border: 2px solid var(--borders-main-border-primary, #e8e9ef);
         border-radius: var(--radius-md, 4px);
         padding: 5px;
-        height: 40px;
+        min-height: 40px;
 
         input {
             flex: 1;
             border: none;
             background: transparent;
             font-family: var(--font-family-sans, 'Geist', sans-serif);
-            font-size: var(--text-sm-size, 13px);
-            line-height: var(--text-sm-line, 16px);
-            color: var(--labels-main-label-primary, #121e52);
+            font-size: var(--text-regular-size, 15px);
+            line-height: var(--text-regular-line, 20px);
+            color: var(--label-primary);
+
+            @media (max-width: 768px) {
+              font-size: 16px;
+            }
 
             &:focus {
                 outline: none;
@@ -134,24 +149,43 @@
 
             &:focus {
                 outline: none;
-                border-color: var(--borders-main-border-selected, #121e52);
+                border-color: var(--border-selected, #6200EE);
             }
         }
     }
 
     &__helper-text {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        font-weight: 400;
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-secondary, #626a90);
-        margin: 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-regular-size, 15px);
+      font-style: normal;
+      font-weight: 400;
+      line-height: var(--text-regular-line, 20px);
+      margin-top: 2px;
+      color: var(--label-secondary, #626A90);
+      min-width: max-content;
+      white-space: nowrap;
+
+      @media (max-width: 768px) {
+        min-width: unset;
+        white-space: normal;
+        word-wrap: break-word;
+      }
+    }
+
+    &__error-text {
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px;
+      margin-top: 2px;
+      color: var(--labels-status-label-error, #ef4444);
     }
 
     // States
     &--active {
         .new-form-input__input {
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
     }
 
@@ -159,14 +193,10 @@
         .new-form-input__input {
             border-color: var(--borders-status-border-error, #ef4444);
         }
-
-        .new-form-input__helper-text {
-            color: var(--labels-status-label-error, #ef4444);
-        }
     }
 
     &--disabled {
         opacity: var(--opacity-50, 0.5);
         pointer-events: none;
     }
-}
+}

package/src/v2/styles/index.scss

@@ -2,3 +2,4 @@
 @import './tokens/sizes';
 @import './tokens/status';
 @import './tokens/typography';
+@import './form/Layout';

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

@@ -5,7 +5,7 @@
 
 :root {
   /* Base Colors - BKIT */
-  
+
   /* Blues */
   --blue-50: #E7F4FC;
   --blue-100: #B4DBF6;
@@ -144,7 +144,7 @@
   --neutral-black: #000000;
 
   /* Main Color Abstractions */
-  
+
   /* Purple Scale */
   --purple-lightest: var(--purple-50);
   --purple-lighter: var(--purple-100);
@@ -253,7 +253,7 @@
   --shade-darkest: var(--neutral-black);
 
   /* Semantic Colors */
-  
+
   /* Highlight Colors */
   --highlight-lightest: var(--cyan-lightest);
   --highlight-lighter: var(--cyan-lighter);
@@ -326,7 +326,7 @@
   --disabled-darkest: var(--shade-regular);
 
   /* Light Theme Palette Mappings */
-  
+
   /* Labels */
   --label-primary: var(--shade-light);
   --label-secondary: var(--tone-darkest);
@@ -387,7 +387,7 @@
   /* Borders */
   --border-primary: var(--tone-light);
   --border-secondary: var(--tone-regular);
-  --border-selected: var(--shade-light);
+  --border-selected: var(--neutral-600);
   --border-action: var(--actions-regular);
   --border-status-error: var(--errors-lighter);
   --border-status-success: var(--success-lighter);
@@ -551,4 +551,4 @@
 
 @mixin color-border($color) {
   border-color: var(--#{$color});
-}
+}