@licklist/design 0.78.35 → 0.78.37

package/src/index.ts

@@ -29,7 +29,8 @@ export * from './report'
 export * from './venue-map-sets'
 export * from './affiliate'
 export * from './typeahead-helper'
-export * from './zone'
+export { ZoneForm } from './zone/form'
+export type { ZoneFormProps } from './zone/form'
 export * from './resource'
 export * from './virtualized'
 export * from './customers'
@@ -50,3 +51,5 @@ export * from './v2/components'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
 export * from './v2/pages/Settings'
+export * from './v2/pages/ZonesResources'
+export * from './v2/components'

package/src/v2/components/ActionMenu/ActionMenu.scss

@@ -7,46 +7,33 @@
 
   &__trigger {
     display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 8px;
+    width: 32px;
+    height: 32px;
+    padding: 0;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
-    border: 1px solid var(--border-primary, #E8E9EF);
+    border: none;
     background: var(--surface-action-soft);
     color: var(--actions-regular, #5D5BF4);
     cursor: pointer;
     transition: all 0.2s ease;
+    position: relative;
 
     &:hover {
-      background: var(--surface-action-soft);
+      opacity: 0.8;
     }
 
     &--close {
       border-radius: 50%;
       background: #F4F4FE;
-      border: 1px solid #F4F4FE;
 
       &:hover {
         background: #E8E8FD;
+        opacity: 1;
       }
     }
 
-    svg {
-      width: 28px;
-      height: 28px;
-    }
-
-    .action-menu__circle {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 32px;
-      height: 32px;
-      z-index: -1;
-    }
   }
 
   &__dropdown {

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ActionMenu } from './ActionMenu'
+
+export default {
+  title: 'v2/Components/ActionMenu',
+  component: ActionMenu,
+} as Meta<typeof ActionMenu>
+
+type Story = StoryObj<typeof ActionMenu>
+
+const defaultItems = [
+  { label: 'Edit', onClick: () => console.log('Edit') },
+  { label: 'Duplicate', onClick: () => console.log('Duplicate') },
+  { label: 'Delete', onClick: () => console.log('Delete'), variant: 'danger' as const },
+]
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const OpenDown: Story = {
+  args: {
+    items: defaultItems,
+    direction: 'down',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const WithCustomIconColour: Story = {
+  args: {
+    items: defaultItems,
+    iconColour: '#E0423A',
+    direction: 'down',
+  },
+}
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: 'Edit', onClick: () => console.log('Edit') }],
+    direction: 'down',
+  },
+}

package/src/v2/components/ActionMenu/ActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
-import { CloseIcon, EllipsisIcon, CircleIcon } from '../../icons'
+import { CloseIcon, EllipsisIcon } from '../../icons'
 import './ActionMenu.scss'
 
 export interface ActionMenuItem {
@@ -83,10 +83,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
         {isOpen ? (
           <CloseIcon width={18} height={18} />
         ) : (
-          <>
-            <CircleIcon width={32} height={32} className="action-menu__circle" fill="var(--surface-action-soft)" />
-            <EllipsisIcon width={18} height={18} fill="var(--fill-action)" />
-          </>
+          <EllipsisIcon width={18} height={4} fill="var(--fill-action)" />
         )}
       </button>
 
@@ -112,4 +109,4 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
       )}
     </div>
   )
-}
+}

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

@@ -40,7 +40,7 @@
   &--sm {
     height: 28px;
     padding: 0 8px 0 8px;
-    font-size: 13px;
+    font-size: 11px;
   }
 
   &--md {

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

@@ -3,9 +3,8 @@
 .checkbox {
   display: flex;
   max-width: 500px;
-  align-items: flex-start;
+  align-items: center;
   gap: 11px;
-  align-self: stretch;
 
   @media (min-width: 992px) {
     max-width: unset;
@@ -13,11 +12,12 @@
 
   &__wrapper {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 11px;
     cursor: pointer;
     user-select: none;
     width: 100%;
+    margin: 0;
   }
 
   &__input {

package/src/v2/components/Customer/CustomersList.scss

@@ -97,7 +97,7 @@
   &__content {
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: 16px;
     padding: 0 32px 32px;
   }
 
@@ -586,11 +586,16 @@
           display: grid;
           grid-template-areas:
             "customer bookings"
-            "divider divider"
             "next last"
-            "status status"
-            "actions actions";
-          grid-template-columns: 1fr auto;
+            "divider divider"
+            "status actions";
+
+          :is(.waivers-page--compact) & {
+            grid-template-areas:
+              "customer customer"
+              "divider divider"
+              "status actions";
+          }
           border: 1px solid var(--border-primary, #E8E9EF);
           border-radius: 12px;
           margin-bottom: 16px;
@@ -619,11 +624,24 @@
           &.tw-text-right {
             grid-area: actions;
             text-align: right;
-            padding-top: 12px;
-            border-top: 1px solid var(--border-primary, #E8E9EF);
-            margin-top: 4px;
+            padding: 0;
             display: flex;
             justify-content: flex-end;
+            align-items: center;
+
+            :is(.waivers-page--compact) & {
+              padding-top: 0;
+              border-top: none;
+              margin-top: 0;
+            }
+
+            &.waiver-col {
+              grid-area: status;
+              justify-content: flex-start;
+              border-top: none;
+              padding-top: 0;
+              margin-top: 0;
+            }
           }
 
           &:first-child {

package/src/v2/components/FormField/FormField.scss

@@ -33,7 +33,7 @@
     padding: 8px 10px;
     height: 40px;
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
+    font-size: var(--text-regular-size, 16px);
     line-height: var(--text-regular-line, 20px);
     color: var(--label-primary, #121e52);
     background-color: var(--surface-secondary, #f8f8fa);
@@ -66,6 +66,14 @@
       cursor: not-allowed;
       opacity: 0.6;
     }
+
+    &--on-surface {
+      background-color: var(--surface-primary, #fff);
+
+      &:focus {
+        background-color: var(--surface-primary, #fff);
+      }
+    }
   }
 
   &__help-text {
@@ -81,3 +89,14 @@
   }
 }
 
+// Auto-detect: swap input backgrounds when inside a surface-secondary container
+.surface-context--secondary {
+  .form-field__input {
+    background-color: var(--surface-primary, #fff);
+
+    &:focus {
+      background-color: var(--surface-primary, #fff);
+    }
+  }
+}
+

package/src/v2/components/FormField/FormField.tsx

@@ -4,30 +4,44 @@ import './FormField.scss'
 export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string
   error?: string
+  hasError?: boolean
+  success?: boolean
   helpText?: string
   required?: boolean
+  variant?: 'default' | 'on-surface'
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  ({ label, error, helpText, required, className = '', ...props }, ref) => (
-    <div className={`form-field ${className}`}>
-      {label && (
-        <label className="form-field__label">
-          {label}
-          {required && <span className="form-field__required">*</span>}
-        </label>
-      )}
-      <input
-        ref={ref}
-        className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
-        {...props}
-      />
-      {helpText && !error && (
-        <span className="form-field__help-text">{helpText}</span>
-      )}
-      {error && <span className="form-field__error-text">{error}</span>}
-    </div>
-  )
+  ({ label, error, hasError, success, helpText, required, variant, className = '', ...props }, ref) => {
+    const showError = error || hasError
+    const showSuccess = success && !showError
+    const inputClassName = [
+      'form-field__input',
+      showError ? 'form-field__input--error' : '',
+      showSuccess ? 'form-field__input--success' : '',
+      variant === 'on-surface' ? 'form-field__input--on-surface' : '',
+    ].filter(Boolean).join(' ')
+
+    return (
+      <div className={`form-field ${className}`}>
+        {label && (
+          <label className="form-field__label">
+            {label}
+            {required && <span className="form-field__required">*</span>}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={inputClassName}
+          {...props}
+        />
+        {helpText && !showError && (
+          <span className="form-field__help-text">{helpText}</span>
+        )}
+        {error && <span className="form-field__error-text">{error}</span>}
+      </div>
+    )
+  }
 )
 
 FormField.displayName = 'FormField'

package/src/v2/components/IconButton/IconButton.scss

@@ -0,0 +1,81 @@
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  gap: var(--spacing-sm, 8px);
+  padding: 0 16px 0 12px;
+  height: 36px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+
+  @media (max-width: 768px) {
+    height: 44px;
+    padding: 0 20px 0 16px;
+  }
+
+  &:hover {
+    background: var(--surface-secondary);
+    color: var(--label-primary);
+
+    .icon-button__icon {
+      color: var(--label-primary);
+    }
+
+    .icon-button__label {
+      color: var(--label-primary);
+    }
+  }
+
+  &:active {
+    background: var(--surface-tertiary);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    color: var(--label-primary);
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--label-primary);
+  }
+}
+
+// Icon-only variant (no label)
+.icon-button--icon-only {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--label-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--surface-primary, #fff);
+  }
+
+  &:active {
+    background: var(--surface-tertiary);
+  }
+}
+
+// Danger variant
+.icon-button--danger {
+  color: var(--label-danger, #cc3c35);
+
+  &:hover {
+    background: var(--surface-primary, #fff);
+  }
+}

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { IconButton } from './IconButton'
+
+export default {
+  title: 'v2/Components/IconButton',
+  component: IconButton,
+} as Meta<typeof IconButton>
+
+type Story = StoryObj<typeof IconButton>
+
+export const BackWithLabel: Story = {
+  args: {
+    label: 'Go Back',
+    icon: 'back',
+  },
+}
+
+export const AddWithLabel: Story = {
+  args: {
+    label: 'Add Item',
+    icon: 'add',
+  },
+}
+
+export const DeleteWithLabel: Story = {
+  args: {
+    label: 'Remove Item',
+    icon: 'delete',
+    variant: 'danger',
+  },
+}
+
+export const IconOnlyBack: Story = {
+  args: {
+    icon: 'back',
+  },
+}
+
+export const IconOnlyAdd: Story = {
+  args: {
+    icon: 'add',
+  },
+}
+
+export const IconOnlyDelete: Story = {
+  args: {
+    icon: 'delete',
+    variant: 'danger',
+  },
+}

package/src/v2/components/IconButton/IconButton.tsx

@@ -0,0 +1,50 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { ArrowLeftIcon, PlusIcon, DeleteIcon } from '../../icons'
+import './IconButton.scss'
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string
+  icon?: 'back' | 'add' | 'delete' | ReactNode
+  variant?: 'default' | 'danger'
+}
+
+export function IconButton({
+  label,
+  icon = 'back',
+  variant = 'default',
+  className = '',
+  ...props
+}: IconButtonProps) {
+  const isIconOnly = !label
+  const classes = [
+    isIconOnly ? 'icon-button--icon-only' : 'icon-button',
+    variant === 'danger' ? 'icon-button--danger' : '',
+    className,
+  ].filter(Boolean).join(' ')
+
+  const iconSize = isIconOnly ? 32 : 16
+
+  const renderIcon = () => {
+    if (icon === 'back') return ArrowLeftIcon({ width: iconSize, height: iconSize })
+    if (icon === 'add') return PlusIcon({ width: iconSize, height: iconSize })
+    if (icon === 'delete') return DeleteIcon({ width: iconSize, height: iconSize })
+    return icon
+  }
+
+  if (isIconOnly) {
+    return (
+      <button type="button" className={classes} {...props}>
+        {renderIcon()}
+      </button>
+    )
+  }
+
+  return (
+    <button className={classes} {...props}>
+      <span className="icon-button__icon">
+        {renderIcon()}
+      </span>
+      <span className="icon-button__label">{label}</span>
+    </button>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'

package/src/v2/components/InputCheckbox/InputCheckbox.scss

@@ -0,0 +1,53 @@
+.input-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__box {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border: 1px solid var(--border-primary, #e2e2e2);
+    border-radius: 3px;
+    background: var(--surface-primary, #fff);
+    transition: all 0.15s ease;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 4.5px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  &__input:checked + &__box {
+    background: var(--fill-selected, #14215a);
+    border-color: var(--fill-selected, #14215a);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-primary, #121e52);
+  }
+}

package/src/v2/components/InputCheckbox/InputCheckbox.tsx

@@ -0,0 +1,24 @@
+import React, { InputHTMLAttributes, forwardRef } from 'react'
+import './InputCheckbox.scss'
+
+export interface InputCheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string | React.ReactNode
+}
+
+export const InputCheckbox = forwardRef<HTMLInputElement, InputCheckboxProps>(
+  ({ label, className = '', ...props }, ref) => (
+    <label className={`input-checkbox ${className}`}>
+      <input
+        ref={ref}
+        type="checkbox"
+        className="input-checkbox__input"
+        {...props}
+      />
+      <span className="input-checkbox__box" />
+      {label && <span className="input-checkbox__label">{label}</span>}
+    </label>
+  ),
+)
+
+InputCheckbox.displayName = 'InputCheckbox'

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

@@ -0,0 +1,2 @@
+export { InputCheckbox } from './InputCheckbox'
+export type { InputCheckboxProps } from './InputCheckbox'

package/src/v2/components/NewInput/NewInput.tsx

@@ -10,6 +10,7 @@ type CommonInputProps = {
   iconPosition?: 'left' | 'right';
   required?: boolean;
   onIconClick?: () => void;
+  variant?: 'default' | 'on-surface';
 }
 
 type InputProps = CommonInputProps & {
@@ -23,13 +24,14 @@ type TextareaProps = CommonInputProps & {
 export type NewInputProps = InputProps | TextareaProps
 
 export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewInputProps>(
-  ({label, optional, helperText, error, icon, iconPosition = 'left', as = 'input', required, className = '', onIconClick, ...props}, ref) => {
+  ({label, optional, helperText, error, icon, iconPosition = 'left', as = 'input', required, variant, className = '', onIconClick, ...props}, ref) => {
     const inputRef = React.useRef<HTMLInputElement>(null);
     const isError = !!error;
     const containerClasses = [
       'new-form-input',
       isError ? 'new-form-input--error' : '',
       props.disabled ? 'new-form-input--disabled' : '',
+      variant === 'on-surface' ? 'new-form-input--on-surface' : '',
       className
     ].filter(Boolean).join(' ');
 
@@ -94,7 +96,8 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
       <div className={containerClasses}>
         {(label || optional) && (
           <label className="new-form-input__label">
-            {label} {optional && <span className="new-form-input__label-optional">(Optional)</span>}
+            <span>{label}</span>
+            {optional && <span className="new-form-input__label-optional">(optional)</span>}
           </label>
         )}
 

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -7,13 +7,9 @@
     padding: 32px 32px 0px 32px;
 
     @media (max-width: 768px) {
-        padding: 16px 16px 0px 16px;
+        padding: 16px 0 0 0;
         gap: 0;
     }
-
-    @media (max-width: 480px) {
-        padding: 16px 12px 0px 12px;
-    }
 }
 
 .new-page-header {