@licklist/design 0.78.5-dev.62 → 0.78.5-dev.63

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

@@ -17,7 +17,6 @@ export interface ZoneResource {
 
 export interface ZoneCardProps {
   name: string
-  status?: 'active' | 'disabled'
   totalCapacity: number
   resources?: ZoneResource[]
   menuItems?: ActionMenuItem[]
@@ -31,7 +30,6 @@ export interface ZoneCardProps {
 
 export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
   name,
-  status = 'active',
   totalCapacity,
   resources = [],
   menuItems = [],
@@ -46,7 +44,6 @@ export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
     <ZoneContainer ref={ref} className={className} style={style}>
       <ZoneHeader
         name={name}
-        status={status}
         totalCapacity={totalCapacity}
         menuItems={menuItems}
         draggable={draggable}

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

@@ -1,43 +1,66 @@
 import React from 'react'
-import { Badge } from '../Badge'
 import { ActionMenu, ActionMenuItem } from '../ActionMenu'
-import { GripVerticalIcon } from '../../icons'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
 import { DragHandleProps } from './ZoneContainer'
 import './ZoneCard.scss'
 
 export interface ZoneHeaderProps {
   name: string
-  status?: 'active' | 'disabled'
   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,
-  status = 'active',
   totalCapacity,
+  totalLabel = 'Total',
   menuItems = [],
   draggable = true,
   dragHandleProps,
   className = '',
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
 }) => {
-  const statusVariant = status === 'active' ? 'success' : 'neutral'
-  const statusLabel = status.charAt(0).toUpperCase() + status.slice(1)
-
   return (
     <div className={`zone-card__header ${className}`}>
-      {draggable && (
+      {draggable && !isMobile && (
         <div className="zone-card__drag-handle" {...dragHandleProps}>
-          {GripVerticalIcon({ width: 16, height: 16 })}
+          {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>
       )}
       <span className="zone-card__name">{name}</span>
       <div className="zone-card__header-right">
-        <Badge variant={statusVariant}>{statusLabel}</Badge>
-        <span className="zone-card__total">Total: {totalCapacity}</span>
+        <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
         {menuItems.length > 0 && <ActionMenu items={menuItems} />}
       </div>
     </div>

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

@@ -8,7 +8,7 @@ export { ZoneHeader } from './ZoneHeader'
 export type { ZoneHeaderProps } from './ZoneHeader'
 
 export { ResourceRow } from './ResourceRow'
-export type { ResourceRowProps } from './ResourceRow'
+export type { ResourceRowProps, ResourceRowLabels } from './ResourceRow'
 
 export { AddResourceButton } from './AddResourceButton'
 export type { AddResourceButtonProps } from './AddResourceButton'

package/src/v2/icons/index.tsx

@@ -181,21 +181,21 @@ export const InfoIcon = ({ width = 16, height = 16 }: { width?: number; height?:
     </svg>
 )
 
-export const ArrowUpIcon = () => (
-    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 5L5.5 1L1 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+export const ArrowUpIcon = ({ width = 20, height = 20 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14.9999 11.8283L9.63589 17.1923L8.22168 15.7781L15.9999 7.99988L23.778 15.7781L22.3638 17.1923L16.9999 11.8283L16.9999 23.9999L14.9999 23.9999L14.9999 11.8283Z" fill="currentColor" />
     </svg>
 )
 
-export const ArrowDownIcon = () => (
-    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1 1L5.5 5L10 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+export const ArrowDownIcon = ({ width = 20, height = 20 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.9999 20.1715L22.3639 14.8075L23.7781 16.2217L15.9999 23.9999L8.22176 16.2217L9.63596 14.8075L14.9999 20.1715L14.9999 7.99988L16.9999 7.99988L16.9999 20.1715Z" fill="currentColor" />
     </svg>
 )
 
 export const GripVerticalIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
     <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16ZM14 22C14 23.1046 13.1046 24 12 24C10.8954 24 10 23.1046 10 22C10 20.8954 10.8954 20 12 20C13.1046 20 14 20.8954 14 22ZM22 10C22 11.1046 21.1046 12 20 12C18.8954 12 18 11.1046 18 10C18 8.89543 18.8954 8 20 8C21.1046 8 22 8.89543 22 10ZM22 16C22 17.1046 21.1046 18 20 18C18.8954 18 18 17.1046 18 16C18 14.8954 18.8954 14 20 14C21.1046 14 22 14.8954 22 16ZM22 22C22 23.1046 21.1046 24 20 24C18.8954 24 18 23.1046 18 22C18 20.8954 18.8954 20 20 20C21.1046 20 22 20.8954 22 22Z" fill="currentColor"/>
+        <path d="M13 20C14.1046 20 15 20.8954 15 22C15 23.1046 14.1046 24 13 24C11.8954 24 11 23.1046 11 22C11 20.8954 11.8954 20 13 20ZM19 20C20.1046 20 21 20.8954 21 22C21 23.1046 20.1046 24 19 24C17.8954 24 17 23.1046 17 22C17 20.8954 17.8954 20 19 20ZM13 14C14.1046 14 15 14.8954 15 16C15 17.1046 14.1046 18 13 18C11.8954 18 11 17.1046 11 16C11 14.8954 11.8954 14 13 14ZM19 14C20.1046 14 21 14.8954 21 16C21 17.1046 20.1046 18 19 18C17.8954 18 17 17.1046 17 16C17 14.8954 17.8954 14 19 14ZM13 8C14.1046 8 15 8.89543 15 10C15 11.1046 14.1046 12 13 12C11.8954 12 11 11.1046 11 10C11 8.89543 11.8954 8 13 8ZM19 8C20.1046 8 21 8.89543 21 10C21 11.1046 20.1046 12 19 12C17.8954 12 17 11.1046 17 10C17 8.89543 17.8954 8 19 8Z" fill="currentColor"/>
     </svg>
 )
 
@@ -219,11 +219,9 @@ export const CloseIcon = ({width = 24, height = 24, ...props
   </svg>
 )
 
-export const EllipsisIcon = ({ width = 32, height = 32, fill = 'black', ...props }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number; fill?: string } = {}) => (
-  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <circle cx="8" cy="16" r="3" fill={fill} />
-    <circle cx="16" cy="16" r="3" fill={fill} />
-    <circle cx="24" cy="16" r="3" fill={fill} />
+export const EllipsisIcon = ({ width = 18, height = 4, fill = 'currentColor', ...props }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number; fill?: string } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0ZM9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2C7 0.895431 7.89543 0 9 0ZM16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2C14 0.895431 14.8954 0 16 0Z" fill={fill} />
   </svg>
 )
 

package/src/v2/index.ts

@@ -51,7 +51,7 @@ 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, AddResourceButtonProps } from './components/ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
 
 // ZonesResources Page
 export { ZonesResourcesPage } from './pages/ZonesResources'

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

@@ -7,6 +7,25 @@
     padding: 24px 32px 0 32px;
     align-self: flex-start;
 
+    .icon-button {
+      border-color: transparent;
+
+      &:hover {
+        background: var(--surface-action-soft, #F4F4FE);
+        border-color: transparent;
+
+        .icon-button__icon,
+        .icon-button__label {
+          color: var(--fill-action, #5D5BF4);
+        }
+      }
+    }
+
+    .icon-button__icon,
+    .icon-button__label {
+      color: var(--fill-action, #5D5BF4);
+    }
+
     @media (max-width: 768px) {
       padding: 16px 16px 0 16px;
     }
@@ -19,4 +38,10 @@
       padding: 16px;
     }
   }
+
+  &__action {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
 }

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

@@ -1,7 +1,8 @@
 import React from 'react'
 import { IconButton } from '../../components/IconButton'
+import { GhostButton } from '../../components/Button'
 import { NewPageHeader } from '../../components/NewPageHeader'
-import { Button, ButtonText } from '../../components/Button'
+import { PlusIcon } from '../../icons'
 import './ZonesResourcesPage.scss'
 
 export interface ZonesResourcesPageProps {
@@ -17,7 +18,7 @@ export const ZonesResourcesPage: React.FC<ZonesResourcesPageProps> = ({
   title = 'Zones & Resources',
   backLabel = 'Back to Settings',
   onBack,
-  actionLabel = '+ Add Zone',
+  actionLabel = 'Add Zone',
   onAction,
   children,
 }) => {
@@ -31,13 +32,15 @@ export const ZonesResourcesPage: React.FC<ZonesResourcesPageProps> = ({
       <NewPageHeader
         title={title}
         showDivider
-        renderRight={onAction ? () => (
-          <Button variant="primary" onClick={onAction}>
-            <ButtonText color="white">{actionLabel}</ButtonText>
-          </Button>
-        ) : undefined}
       />
       <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>