@licklist/design 0.78.35 → 0.78.37

package/src/v2/components/ZoneCard/ZoneHeader.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { ActionMenu, ActionMenuItem } from '../ActionMenu'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { DragHandleProps } from './ZoneContainer'
+import './ZoneCard.scss'
+
+export interface ZoneHeaderProps {
+  name: string
+  totalCapacity: number
+  totalLabel?: string
+  menuItems?: ActionMenuItem[]
+  draggable?: boolean
+  dragHandleProps?: DragHandleProps
+  className?: string
+  isMobile?: boolean
+  isFirst?: boolean
+  isLast?: boolean
+  onMoveUp?: () => void
+  onMoveDown?: () => void
+}
+
+export const ZoneHeader: React.FC<ZoneHeaderProps> = ({
+  name,
+  totalCapacity,
+  totalLabel = 'Total',
+  menuItems = [],
+  draggable = true,
+  dragHandleProps,
+  className = '',
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
+}) => {
+  return (
+    <div className={`zone-card__header ${className}`}>
+      {draggable && !isMobile && (
+        <div className="zone-card__drag-handle" {...dragHandleProps}>
+          {GripVerticalIcon({ width: 20, height: 20 })}
+        </div>
+      )}
+      {draggable && isMobile && (
+        <div className="zone-card__reorder-arrows">
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isFirst}
+            onClick={(e) => { e.stopPropagation(); onMoveUp?.() }}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isLast}
+            onClick={(e) => { e.stopPropagation(); onMoveDown?.() }}
+          >
+            <ArrowDownIcon />
+          </button>
+        </div>
+      )}
+      {isMobile ? (
+        <>
+          <div className="zone-card__header-info">
+            <span className="zone-card__name">{name}</span>
+            <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
+          </div>
+          {menuItems.length > 0 && (
+            <div className="zone-card__header-right">
+              <ActionMenu items={menuItems} />
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <span className="zone-card__name">{name}</span>
+          <div className="zone-card__header-right">
+            <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
+            {menuItems.length > 0 && <ActionMenu items={menuItems} />}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+export { ZoneCard } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource } from './ZoneCard'
+
+export { ZoneContainer } from './ZoneContainer'
+export type { ZoneContainerProps, DragHandleProps } from './ZoneContainer'
+
+export { ZoneHeader } from './ZoneHeader'
+export type { ZoneHeaderProps } from './ZoneHeader'
+
+export { ResourceRow } from './ResourceRow'
+export type { ResourceRowProps, ResourceRowLabels } from './ResourceRow'
+
+export { AddResourceButton } from './AddResourceButton'
+export type { AddResourceButtonProps } from './AddResourceButton'

package/src/v2/components/index.ts

@@ -1,3 +1,6 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'
+
 export { Badge } from './Badge'
 export type { BadgeProps } from './Badge'
 
@@ -27,6 +30,9 @@ export type { NewInputProps } from './NewInput'
 export { Checkbox } from './Checkbox'
 export type { CheckboxProps } from './Checkbox'
 
+export { InputCheckbox } from './InputCheckbox'
+export type { InputCheckboxProps } from './InputCheckbox'
+
 export { WYSIWYGEditor } from './WYSIWYGEditor'
 export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
 
@@ -58,6 +64,9 @@ export { NPSScore } from './NPSScore'
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
+
 // Icons
 export {
   InfoIcon,
@@ -76,6 +85,10 @@ export {
   ClearIcon,
   CloseIcon,
   EllipsisIcon,
-  CircleIcon
+  CircleIcon,
+  GripVerticalIcon,
+  PlusIcon,
+  DeleteIcon,
+  ClockIcon
 } from '../icons'
 

package/src/v2/index.ts

@@ -21,6 +21,19 @@ export type { AlertProps, AlertVariant } from './components/Alert'
 export { Button } from './components/Button'
 export type { ButtonProps } from './components/Button'
 
+// NewInput Component
+export { NewInput } from './components/NewInput'
+export type { NewInputProps } from './components/NewInput'
+
+// Checkbox Component
+export { Checkbox } from './components/Checkbox'
+export type { CheckboxProps } from './components/Checkbox'
+
+// NewPageHeader Component
+export { NewPageHeader } from './components/NewPageHeader'
+export type { NewPageHeaderProps } from './components/NewPageHeader'
+
+
 // EntityHeader Component
 export { EntityHeader } from './components/EntityHeader'
 export type { EntityHeaderProps } from './components/EntityHeader'
@@ -36,6 +49,14 @@ export type { NPSScoreProps, NPSSubmitData } from './components/NPSScore'
 export { UserPanel } from './components/UserPanel'
 export type { UserPanelProps } from './components/UserPanel'
 
+// ZoneCard Components
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
+
+// ZonesResources Page
+export { ZonesResourcesPage } from './pages/ZonesResources'
+export type { ZonesResourcesPageProps } from './pages/ZonesResources'
+
 // ============================================================================
 // Navigation Components
 // ============================================================================

package/src/v2/pages/ZonesResources/ZonesResourcesPage.scss

@@ -0,0 +1,43 @@
+.zones-resources-page {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  &__back {
+    padding: 24px 32px 0 32px;
+    align-self: flex-start;
+
+    .ghost-button {
+      color: var(--fill-action, #5D5BF4);
+      border-color: var(--borders-main-border-primary, #E8E9EF);
+
+      &:not(.active):hover:not(:disabled) {
+        background-color: var(--surface-action-soft, #F4F4FE);
+        color: var(--fill-action, #5D5BF4);
+      }
+
+      .ghost-button__icon svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 16px 16px 0 16px;
+    }
+  }
+
+  &__content {
+    padding: 24px 32px;
+
+    @media (max-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  &__action {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/src/v2/pages/ZonesResources/ZonesResourcesPage.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ZonesResourcesPage } from './ZonesResourcesPage'
+
+export default {
+  title: 'v2/Pages/ZonesResourcesPage',
+  component: ZonesResourcesPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta<typeof ZonesResourcesPage>
+
+type Story = StoryObj<typeof ZonesResourcesPage>
+
+export const Default: Story = {
+  args: {
+    onBack: () => alert('Back to Settings'),
+    onAction: () => alert('Add Zone clicked'),
+  },
+}
+
+export const WithContent: Story = {
+  args: {
+    onBack: () => alert('Back to Settings'),
+    onAction: () => alert('Add Zone clicked'),
+    children: (
+      <div style={{ padding: '16px', border: '1px solid var(--border-primary)', borderRadius: '8px' }}>
+        <p style={{ color: 'var(--label-secondary)', fontFamily: 'var(--font-family-sans)' }}>
+          Zone and resource content goes here
+        </p>
+      </div>
+    ),
+  },
+}
+
+export const WithoutBackButton: Story = {
+  args: {
+    onAction: () => alert('Add Zone clicked'),
+  },
+}
+
+export const WithoutAction: Story = {
+  args: {
+    onBack: () => alert('Back to Settings'),
+  },
+}

package/src/v2/pages/ZonesResources/ZonesResourcesPage.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { GhostButton } from '../../components/Button'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { ArrowLeftIcon, PlusIcon } from '../../icons'
+import './ZonesResourcesPage.scss'
+
+export interface ZonesResourcesPageProps {
+  title?: string
+  backLabel?: string
+  onBack?: () => void
+  actionLabel?: string
+  onAction?: () => void
+  children?: React.ReactNode
+}
+
+export const ZonesResourcesPage: React.FC<ZonesResourcesPageProps> = ({
+  title = 'Zones & Resources',
+  backLabel = 'Back to Settings',
+  onBack,
+  actionLabel = 'Add Zone',
+  onAction,
+  children,
+}) => {
+  return (
+    <div className="zones-resources-page">
+      {onBack && (
+        <div className="zones-resources-page__back">
+          <GhostButton onClick={onBack} icon={<ArrowLeftIcon />}>
+            {backLabel}
+          </GhostButton>
+        </div>
+      )}
+      <NewPageHeader
+        title={title}
+        showDivider
+      />
+      <div className="zones-resources-page__content">
+        {onAction && (
+          <div className="zones-resources-page__action">
+            <GhostButton onClick={onAction} icon={<PlusIcon width={16} height={16} />}>
+              {actionLabel}
+            </GhostButton>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { ZonesResourcesPage } from './ZonesResourcesPage'
+export type { ZonesResourcesPageProps } from './ZonesResourcesPage'

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

@@ -105,6 +105,7 @@
   &--destructive-soft {
     border-radius: var(--radius-reg, 8px);
     background: var(--surface-danger-soft, #fceceb);
+    color: var(--label-danger);
 
     &:hover {
       background-color: var(--surface-danger-soft-hover, #f5c4c2);

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

@@ -15,16 +15,20 @@
       font-style: normal;
       font-weight: 600;
       line-height: 20px;
-      color: var(--label-primary, #121E52);
-      display: block;
+      color: var(--label-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
     }
 
     &__label-optional {
       font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: 15px;
-        font-weight: 600;
-        line-height: 20px;
-        color: var(--label-primary, #121E52);
+      font-size: 13px;
+      font-weight: 400;
+      font-style: normal;
+      line-height: 16px;
+      color: var(--label-secondary);
     }
 
 
@@ -218,9 +222,38 @@
         pointer-events: none;
     }
 
+    &--on-surface {
+      .new-form-input__input,
+      .new-form-input__textarea,
+      .new-form-input__input-with-icon {
+        background-color: var(--surface-primary, #fff);
+        background: var(--surface-primary, #fff);
+
+        &:focus,
+        &:focus-within {
+          background-color: var(--surface-primary, #fff);
+        }
+      }
+    }
+
     &.dob-input {
       .new-form-input__label {
         color: var(--label-secondary, #626A90);
       }
     }
 }
+
+// Auto-detect: swap input backgrounds when inside a surface-secondary container
+.surface-context--secondary {
+  .new-form-input__input,
+  .new-form-input__textarea,
+  .new-form-input__input-with-icon {
+    background-color: var(--surface-primary, #fff);
+    background: var(--surface-primary, #fff);
+
+    &:focus,
+    &:focus-within {
+      background-color: var(--surface-primary, #fff);
+    }
+  }
+}