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

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FeatureCard } from './FeatureCard'
+import { AnalyticsIcon } from '../../icons'
+import * as React from 'react'
+
+const meta: Meta<typeof FeatureCard> = {
+  title: 'V2/Components/FeatureCard',
+  component: FeatureCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof FeatureCard>
+
+export const Default: Story = {
+  args: {
+    icon: <AnalyticsIcon />,
+    title: 'Dynamic Pricing',
+    description: 'When enabled, you will be able to set different prices for different times of the day.',
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    icon: <AnalyticsIcon />,
+    title: 'Variable Pricing',
+    description: 'Set different prices for different days of the week or periods.',
+    action: <div style={{ width: '40px', height: '24px', background: '#ccc', borderRadius: '12px' }} />,
+  },
+}
+
+export const CustomClassName: Story = {
+  args: {
+    icon: <AnalyticsIcon />,
+    title: 'Custom Styled Card',
+    description: 'This card has a custom CSS class applied to it.',
+    className: 'custom-feature-card',
+  },
+}

package/src/v2/components/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import './FeatureCard.scss'
+
+export interface FeatureCardProps {
+  icon: React.ReactNode
+  title: string
+  description: string
+  action?: React.ReactNode
+  className?: string
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  className = '',
+}) => {
+  return (
+    <div className={`feature-card ${className}`}>
+      <div className="feature-card__content">
+        <div className="feature-card__icon-wrapper">
+          {icon}
+        </div>
+        <div className="feature-card__text">
+          <h3 className="feature-card__title">{title}</h3>
+          <p className="feature-card__description">{description}</p>
+        </div>
+      </div>
+      {action && (
+        <div className="feature-card__action">
+          {action}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { FeatureCard } from './FeatureCard'
+export type { FeatureCardProps } from './FeatureCard'

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

@@ -76,6 +76,6 @@
   color: var(--label-danger, #cc3c35);
 
   &:hover {
-    background: var(--surface-primary, #fff);
+    background: var(--surface-danger-soft-hover, color-mix(in srgb, var(--surface-danger-soft) 85%, black));
   }
 }

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

@@ -6,12 +6,20 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   label?: string
   icon?: 'back' | 'add' | 'delete' | ReactNode
   variant?: 'default' | 'danger'
+  backgroundColor?: string
+  borderColor?: string
+  hoverBackgroundColor?: string
+  hoverBorderColor?: string
 }
 
 export function IconButton({
   label,
   icon = 'back',
   variant = 'default',
+  backgroundColor,
+  borderColor,
+  hoverBackgroundColor,
+  hoverBorderColor,
   className = '',
   ...props
 }: IconButtonProps) {
@@ -22,6 +30,24 @@ export function IconButton({
     className,
   ].filter(Boolean).join(' ')
 
+  const style: any = {
+    ...(backgroundColor ? { backgroundColor } : {}),
+    ...(borderColor ? { borderColor } : {}),
+    ...(props.style || {}),
+  }
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (hoverBackgroundColor) e.currentTarget.style.backgroundColor = hoverBackgroundColor
+    if (hoverBorderColor) e.currentTarget.style.borderColor = hoverBorderColor
+    if (props.onMouseEnter) props.onMouseEnter(e)
+  }
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.currentTarget.style.backgroundColor = backgroundColor || ''
+    e.currentTarget.style.borderColor = borderColor || ''
+    if (props.onMouseLeave) props.onMouseLeave(e)
+  }
+
   const iconSize = isIconOnly ? 32 : 16
 
   const renderIcon = () => {
@@ -33,14 +59,27 @@ export function IconButton({
 
   if (isIconOnly) {
     return (
-      <button type="button" className={classes} {...props}>
+      <button
+        type="button"
+        className={classes}
+        style={style}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
         {renderIcon()}
       </button>
     )
   }
 
   return (
-    <button className={classes} {...props}>
+    <button
+      className={classes}
+      style={style}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
       <span className="icon-button__icon">
         {renderIcon()}
       </span>

package/src/v2/components/PeriodCard/PeriodCard.tsx

@@ -2,16 +2,18 @@ import React from 'react'
 import { NewInput } from '../NewInput'
 import { Checkbox } from '../Checkbox'
 import { IconButton } from '../IconButton'
-import { ClockIcon } from '../../icons'
+import { ClockIcon,  } from '../../icons'
 import './PeriodCard.scss'
 
 export interface PeriodCardValue {
-  days: string[]
+  days?: string[]
   is24Hours: boolean
   startTime?: string
   endTime?: string
-  maxCapacity: number
-  minCapacity: number | null
+  startDate?: string
+  endDate?: string
+  maxCapacity?: number
+  minCapacity?: number | null
 }
 
 export interface PeriodCardLabels {
@@ -24,6 +26,8 @@ export interface PeriodCardLabels {
   alignToggle?: string
   startTime?: string
   endTime?: string
+  startDate?: string
+  endDate?: string
 }
 
 const DEFAULT_LABELS: Required<PeriodCardLabels> = {
@@ -36,6 +40,8 @@ const DEFAULT_LABELS: Required<PeriodCardLabels> = {
   alignToggle: 'Align with Opening Hours',
   startTime: 'Start Time',
   endTime: 'End Time',
+  startDate: 'Start Date',
+  endDate: 'End Date',
 }
 
 const DAY_OPTIONS = [
@@ -68,8 +74,18 @@ export interface PeriodCardProps {
   hideTime?: boolean
   /** Make the min value field optional (shows "(optional)" label) */
   minOptional?: boolean
-  /** Custom icon for the badge. Defaults to ClockIcon */
+  /** Custom icon for the badge. Defaults to ClockIcon or CalendarIcon based on props */
   badgeIcon?: React.ReactNode
+  /** Type of the period card, determines the default badge icon */
+  type?: 'date_time' | 'range'
+  /** Background color for the delete icon button */
+  deleteBackgroundColor?: string
+  /** Border color for the delete icon button */
+  deleteBorderColor?: string
+  /** Hover background color for the delete icon button */
+  deleteHoverBackgroundColor?: string
+  /** Hover border color for the delete icon button */
+  deleteHoverBorderColor?: string
   /** Custom content. When provided, built-in sections (capacity, days, time) are not rendered. */
   children?: React.ReactNode
   className?: string
@@ -88,6 +104,11 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
   hideTime = false,
   minOptional = true,
   badgeIcon,
+  type,
+  deleteBackgroundColor,
+  deleteBorderColor,
+  deleteHoverBackgroundColor,
+  deleteHoverBorderColor,
   children,
   className = '',
 }) => {
@@ -127,7 +148,17 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
       {title && (
         <div className="period-card__title-row">
           <span className="period-card__title">{title}</span>
-          {onDelete && <IconButton icon="delete" onClick={onDelete} />}
+          {onDelete && (
+            <IconButton
+              icon="delete"
+              variant="danger"
+              backgroundColor={deleteBackgroundColor}
+              borderColor={deleteBorderColor}
+              hoverBackgroundColor={deleteHoverBackgroundColor}
+              hoverBorderColor={deleteHoverBorderColor}
+              onClick={onDelete}
+            />
+          )}
         </div>
       )}
 
@@ -139,7 +170,15 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
             <span className="period-card__badge">{labels.badge}</span>
           </div>
           {onDelete && (
-            <IconButton icon="delete" onClick={onDelete} />
+            <IconButton
+              icon="delete"
+              variant="danger"
+              backgroundColor={deleteBackgroundColor}
+              borderColor={deleteBorderColor}
+              hoverBackgroundColor={deleteHoverBackgroundColor}
+              hoverBorderColor={deleteHoverBorderColor}
+              onClick={onDelete}
+            />
           )}
         </div>
       )}
@@ -162,7 +201,7 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
                   type="number"
                   min={0}
                   value={
-                    value.minCapacity === null || value.minCapacity === 0
+                    value.minCapacity === null || value.minCapacity === undefined || value.minCapacity === 0
                       ? ''
                       : value.minCapacity
                   }
@@ -179,7 +218,7 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
                   label={labels.maxValue}
                   type="number"
                   min={1}
-                  value={value.maxCapacity === 0 ? '' : value.maxCapacity}
+                  value={value.maxCapacity === 0 || value.maxCapacity === undefined ? '' : value.maxCapacity}
                   onChange={(e) =>
                     updateField({
                       maxCapacity:
@@ -193,6 +232,30 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
             </div>
           )}
 
+          {/* Date Range */}
+          {type === 'range' && value && (
+            <div className="period-card__section">
+              <div className="period-card__row">
+                <NewInput
+                  label={labels.startDate}
+                  type="date"
+                  value={value.startDate || ''}
+                  onChange={(e) =>
+                    updateField({ startDate: (e.target as HTMLInputElement).value })
+                  }
+                />
+                <NewInput
+                  label={labels.endDate}
+                  type="date"
+                  value={value.endDate || ''}
+                  onChange={(e) =>
+                    updateField({ endDate: (e.target as HTMLInputElement).value })
+                  }
+                />
+              </div>
+            </div>
+          )}
+
           {/* Days */}
           {!hideDays && value && (
             <div className="period-card__section">
@@ -240,16 +303,16 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
                   <NewInput
                     label={labels.startTime}
                     type="time"
-                    value={value.startTime || '09:00'}
-                    onChange={(e) =>
+                    value={value.startTime || ''}
+                    onChange={(e: { target: HTMLInputElement }) =>
                       updateField({ startTime: (e.target as HTMLInputElement).value })
                     }
                   />
                   <NewInput
                     label={labels.endTime}
                     type="time"
-                    value={value.endTime || '17:00'}
-                    onChange={(e) =>
+                    value={value.endTime || ''}
+                    onChange={(e: { target: HTMLInputElement }) =>
                       updateField({ endTime: (e.target as HTMLInputElement).value })
                     }
                   />

package/src/v2/components/index.ts

@@ -1,3 +1,6 @@
+export { ColorPicker } from './ColorPicker'
+export type { ColorPickerProps, ColorOption } from './ColorPicker'
+
 export { IconButton } from './IconButton'
 export type { IconButtonProps } from './IconButton'
 
@@ -19,6 +22,9 @@ export type { TableControlsProps, TableSearchConfig, TableFilterConfig, TableHea
 export { EmptyState } from './EmptyState'
 export type { EmptyStateProps } from './EmptyState'
 
+export { FeatureCard } from './FeatureCard'
+export type { FeatureCardProps } from './FeatureCard'
+
 
 export { Tabs } from './Tabs'
 export type { TabsProps, TabItem } from './Tabs'

package/src/v2/icons/index.tsx

@@ -82,8 +82,8 @@ export const WaiversIcon = ({ width = 24, height = 24, className = '' }: { width
     </svg>
 )
 
-export const CalendarIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+export const CalendarIcon = ({ width = 24, height = 24 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none">
         <path d="M13 6V8H19V6H21V8H25C25.5523 8 26 8.44772 26 9V25C26 25.5523 25.5523 26 25 26H7C6.44772 26 6 25.5523 6 25V9C6 8.44772 6.44772 8 7 8H11V6H13ZM24 16H8V24H24V16ZM15 18V22H10V18H15ZM11 10H8V14H24V10H21V12H19V10H13V12H11V10Z" fill="currentColor" />
     </svg>
 )
@@ -108,6 +108,15 @@ export const EditIcon = () => (
     </svg>
 )
 
+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"/>
+    </svg>
+)
+
 export const CalendarSmallIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 22" fill="none">
         <path d="M8.9375 4.125V5.5H13.0625V4.125H14.4375V5.5H17.1875C17.5672 5.5 17.875 5.80781 17.875 6.1875V17.1875C17.875 17.5672 17.5672 17.875 17.1875 17.875H4.8125C4.43281 17.875 4.125 17.5672 4.125 17.1875V6.1875C4.125 5.80781 4.43281 5.5 4.8125 5.5H7.5625V4.125H8.9375ZM16.5 11H5.5V16.5H16.5V11ZM10.3125 12.375V15.125H6.875V12.375H10.3125ZM7.5625 6.875H5.5V9.625H16.5V6.875H14.4375V8.25H13.0625V6.875H8.9375V8.25H7.5625V6.875Z" fill="#626A90"/>
@@ -582,8 +591,21 @@ export const ReportsEmptyIcon = () => (
   </svg>
 )
 
-export const CurrencyPoundIcon = ({ size = 28 }: { size?: number } = {}) => (
-  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const CurrencyPoundIcon = ({
+  size = 28,
+  className = '',
+}: {
+  size?: number
+  className?: string
+} = {}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
     <path d="M16.0049 26.0028C10.482 26.0028 6.00488 21.5257 6.00488 16.0028C6.00488 10.48 10.482 6.00281 16.0049 6.00281C21.5277 6.00281 26.0049 10.48 26.0049 16.0028C26.0049 21.5257 21.5277 26.0028 16.0049 26.0028ZM16.0049 24.0028C20.4232 24.0028 24.0049 20.4211 24.0049 16.0028C24.0049 11.5845 20.4232 8.00281 16.0049 8.00281C11.5866 8.00281 8.00488 11.5845 8.00488 16.0028C8.00488 20.4211 11.5866 24.0028 16.0049 24.0028ZM13.0049 17.0028H12.0049V15.0028H13.0049V14.0028C13.0049 12.0698 14.5719 10.5028 16.5049 10.5028C17.9741 10.5028 19.2319 11.4081 19.7509 12.6913L17.7644 13.1879C17.4971 12.7756 17.0329 12.5028 16.5049 12.5028C15.6765 12.5028 15.0049 13.1744 15.0049 14.0028V15.0028H18.0049V17.0028H15.0049V19.0028H20.0049V21.0028H12.0049V19.0028H13.0049V17.0028Z" fill="currentColor"/>
   </svg>
 )
@@ -734,6 +756,9 @@ export const IconGripVertical: React.FC<ShadcnIconProps> = ({ className = '', si
   </svg>
 )
 
+export const IconPlus = PlusIcon
+export const IconPlusThick = PlusIcon
+
 // ── Sandbox icon aliases (used by shadcn ui components) ─────────────────────
 export const IconArrowLeft = ArrowLeftIcon
 export const IconArrowRight = ArrowRightIcon

package/src/v2/pages/SettingsSubPage/SettingsSubPage.scss

@@ -4,7 +4,7 @@
   align-self: stretch;
 
   &__back {
-    padding: 24px 32px 0 0;
+    padding: 24px 0 0 0;
     align-self: flex-start;
 
     .ghost-button {
@@ -23,15 +23,15 @@
     }
 
     @media (max-width: 768px) {
-      padding: 16px 16px 0 0;
+      padding: 16px 0 0 0;
     }
   }
 
   &__content {
-    padding: 24px 0;
+    padding: 0;
 
     @media (max-width: 768px) {
-      padding: 0;
+      padding: 16px 0;
     }
   }
 

package/src/v2/pages/SettingsSubPage/SettingsSubPage.tsx

@@ -11,6 +11,7 @@ export interface SettingsSubPageProps {
   actionLabel?: string
   onAction?: () => void
   children?: React.ReactNode
+  showDivider?: boolean
 }
 
 export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
@@ -20,6 +21,7 @@ export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
   actionLabel,
   onAction,
   children,
+  showDivider = true,
 }) => {
   return (
     <div className="settings-sub-page">
@@ -32,7 +34,7 @@ export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
       )}
       <NewPageHeader
         title={title}
-        showDivider
+        showDivider={showDivider}
       />
       <div className="settings-sub-page__content">
         {onAction && actionLabel && (

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

@@ -116,6 +116,16 @@
   --pink-800: #80224D;
   --pink-900: #611A3B;
 
+  --grey-100: #F8F8FA;
+  --grey-200: #E8E9EF;
+  --grey-300: #D2D5E3;
+  --grey-400: #B6BACC;
+  --grey-500: #9399B3;
+  --grey-600: #626A90;
+  --grey-700: #433D7B;
+  --grey-800: #14215A;
+  --grey-900: #0B1232;
+
   /* Teals */
   --teal-50: #E9FAF7;
   --teal-100: #BAF0E7;
@@ -218,6 +228,15 @@
   --pink-darker: var(--pink-700);
   --pink-darkest: var(--pink-800);
 
+  /* Grey Scale */
+  --grey-lightest: var(--grey-50);
+  --grey-lighter: var(--grey-100);
+  --grey-light: var(--grey-300);
+  --grey-regular: var(--grey-500);
+  --grey-dark: var(--grey-600);
+  --grey-darker: var(--grey-700);
+  --grey-darkest: var(--grey-800);
+
   /* Green Scale */
   --green-lightest: var(--green-50);
   --green-lighter: var(--green-100);

package/src/v2/utils/colourPicker/colors.ts

@@ -0,0 +1,17 @@
+/**
+ * Standard color palette for pricing periods and other color picker components
+ */
+export const COLORS = [
+  { name: 'red', hex: '#E0423A' },
+  { name: 'orange', hex: '#FD7E14' },
+  { name: 'yellow', hex: '#FBB912' },
+  { name: 'green', hex: '#52C22B' },
+  { name: 'teal', hex: '#22CEB1' },
+  { name: 'cyan', hex: '#2BD9FF' },
+  { name: 'blue', hex: '#0E8CE2' },
+  { name: 'indigo', hex: '#5D5BF4' },
+  { name: 'purple', hex: '#6200EE' },
+  { name: 'pink', hex: '#EC1479' },
+  { name: 'grey', hex: '#9399B3' },
+]
+

package/src/v2/utils/timeFormat/formatTime.ts

@@ -0,0 +1,18 @@
+/**
+ * Formats time from "HH:mm:ss" to "HH:mm" format
+ * Useful for converting HTML time input values to backend-compatible format
+ *
+ * @param time - Time string in "HH:mm:ss" or "HH:mm" format
+ * @returns Time string in "HH:mm" format, or undefined if input is undefined
+ *
+ * @example
+ * formatTimeToHHMM("09:00:00") // returns "09:00"
+ * formatTimeToHHMM("17:30") // returns "17:30"
+ * formatTimeToHHMM(undefined) // returns undefined
+ */
+export const formatTimeToHHMM = (time?: string): string | undefined => {
+  if (!time) return undefined
+  // Extract HH:mm from HH:mm:ss (or return as-is if already HH:mm)
+  return time.substring(0, 5)
+}
+