@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

package/src/v2/components/Modal/DeleteModal.tsx

@@ -1,6 +1,15 @@
 import React, { useState, useEffect } from 'react'
-import './DeleteModal.scss'
+import { useTranslation } from 'react-i18next'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '../../shadcn/components/ui/dialog'
 import { NewInput } from '../NewInput'
+import './DeleteModal.scss'
 
 export interface DeleteModalProps {
   isOpen: boolean
@@ -25,6 +34,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
   confirmationPlaceholder,
   isDeleting = false,
 }) => {
+  const { t } = useTranslation(['Design'])
   const [inputValue, setInputValue] = useState('')
 
   useEffect(() => {
@@ -33,10 +43,6 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
     }
   }, [isOpen])
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleConfirm = () => {
     if (inputValue === confirmationText) {
       onConfirm()
@@ -45,19 +51,20 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
 
   const isConfirmDisabled = inputValue !== confirmationText || isDeleting
 
-  if (!isOpen) return null
-
   return (
-    <div className="delete-modal-overlay" role="presentation" onClick={handleClose}>
-      <div className="delete-modal" role="presentation" onClick={(e) => e.stopPropagation()}>
-        <div className="delete-modal__content">
-          <h2 className="delete-modal__title">{title}</h2>
+    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="delete-modal">
+        <DialogHeader>
+          <DialogTitle className="delete-modal__title">{title}</DialogTitle>
+        </DialogHeader>
 
+        <div className="delete-modal__content">
           <div className="delete-modal__description-group">
             {description && (
-              <p className="delete-modal__description">{description}</p>
+              <DialogDescription className="delete-modal__description">
+                {description}
+              </DialogDescription>
             )}
-
             {description_1 && (
               <p className="delete-modal__description">{description_1}</p>
             )}
@@ -65,7 +72,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
 
           <div className="delete-modal__confirmation">
             <p className="delete-modal__label">
-              Type <strong>{confirmationText}</strong> to confirm deletion
+              {t('typeWord')} <strong>{confirmationText}</strong> {t('toConfirmDeletion')}
             </p>
             <NewInput
               type="text"
@@ -75,28 +82,27 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
               autoFocus
             />
           </div>
-
-          <div className="delete-modal__actions">
-            <button
-              type="button"
-              className="delete-modal__button delete-modal__button--delete"
-              onClick={handleConfirm}
-              disabled={isConfirmDisabled}
-            >
-              {isDeleting ? 'Deleting...' : 'Delete'}
-            </button>
-            <button
-              type="button"
-              className="delete-modal__button delete-modal__button--cancel"
-              onClick={handleClose}
-              disabled={isDeleting}
-            >
-              Cancel
-            </button>
-          </div>
         </div>
-      </div>
-    </div>
+
+        <DialogFooter className="delete-modal__actions">
+          <button
+            type="button"
+            className="delete-modal__button delete-modal__button--delete"
+            onClick={handleConfirm}
+            disabled={isConfirmDisabled}
+          >
+            {isDeleting ? t('deleting') : t('delete')}
+          </button>
+          <button
+            type="button"
+            className="delete-modal__button delete-modal__button--cancel"
+            onClick={onClose}
+            disabled={isDeleting}
+          >
+            {t('cancel')}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
-

package/src/v2/components/NPSScore/NPSScore.tsx

@@ -45,7 +45,7 @@ const IconBigSmile = ({ size = 24, className = '' }: { size?: number; className?
 export const NPSScore: React.FC<NPSScoreProps> = ({
     firstName,
     onSubmit,
-    onDismiss,
+    onDismiss: _onDismiss,
     onSubmitDismiss,
 }) => {
     const [selectedScore, setSelectedScore] = useState<number | null>(null)
@@ -53,7 +53,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     const [role, setRole] = useState('')
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [errors, setErrors] = useState<{ reason?: string; role?: string }>({})
-    const [showReasonField, setShowReasonField] = useState(false)
+    const [_showReasonField, _setShowReasonField] = useState(false)
     const [isSubmitted, setIsSubmitted] = useState(false)
 
     const handleSubmit = async () => {

package/src/v2/components/NotificationBanner/NotificationBanner.scss

@@ -0,0 +1,123 @@
+@import '../../styles/index.scss';
+
+.notification-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: var(--padding-reg, 16px) 24px;
+  border-radius: var(--radius-reg, 8px);
+  border: 1px solid;
+  width: 100%;
+
+  &--success {
+    background: var(--surfaces-status-background-success, #eef9ea);
+    border-color: var(--borders-status-border-success, #c9ecbd);
+
+    .notification-banner__icon-wrap {
+      background: var(--fills-status-fill-success, #2D6B18);
+    }
+
+    .notification-banner__title {
+      color: var(--fills-status-fill-success, #2D6B18);
+    }
+  }
+
+  &--error {
+    background: var(--surfaces-status-background-error, #fceceb);
+    border-color: var(--borders-status-border-error, #f5c4c2);
+
+    .notification-banner__icon-wrap {
+      background: var(--fills-status-fill-error, #CC3C35);
+    }
+
+    .notification-banner__title {
+      color: var(--fills-status-fill-error, #CC3C35);
+    }
+  }
+
+  &--info {
+    background: var(--surfaces-status-background-info, #e7f4fc);
+    border-color: var(--borders-status-border-info, #b4dbf6);
+
+    .notification-banner__icon-wrap {
+      background: var(--fills-status-fill-info, #0E8CE2);
+    }
+
+    .notification-banner__title {
+      color: var(--fills-status-fill-info, #0E8CE2);
+    }
+  }
+
+  &__icon-wrap {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #ffffff;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-family: 'Geist', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+    margin: 0;
+  }
+
+  &__message {
+    font-family: 'Geist', sans-serif;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121E52);
+    margin: 0;
+  }
+
+  &__action {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: 'Geist', sans-serif;
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121E52);
+    text-decoration: underline;
+    margin-top: 4px;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  &__dismiss {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    color: var(--labels-main-label-secondary, #626A90);
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { NotificationBanner } from './NotificationBanner'
+
+export default {
+  title: 'v2/Components/NotificationBanner',
+  component: NotificationBanner,
+  parameters: { layout: 'padded' },
+} as Meta<typeof NotificationBanner>
+
+type Story = StoryObj<typeof NotificationBanner>
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    title: 'Provider Updated',
+    message: 'The provider details have been saved successfully.',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    title: 'Failed to Update',
+    message: 'An error occurred while saving. Please try again.',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    title: 'Information',
+    message: 'This action may take a few minutes to complete.',
+  },
+}
+
+export const WithDismiss: Story = {
+  args: {
+    variant: 'success',
+    title: 'Provider Updated',
+    message: 'The provider details have been saved successfully.',
+    onDismiss: () => console.log('dismissed'),
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    variant: 'info',
+    title: 'User Added',
+    message: 'The user has been added to the provider.',
+    action: { label: 'View User', onClick: () => console.log('view user') },
+    onDismiss: () => console.log('dismissed'),
+  },
+}

package/src/v2/components/NotificationBanner/NotificationBanner.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { NotificationSuccessIcon, NotificationErrorIcon, NotificationInfoIcon, NotificationCloseIcon } from '../../icons'
+import './NotificationBanner.scss'
+
+export type NotificationBannerVariant = 'success' | 'error' | 'info'
+
+export interface NotificationBannerProps {
+  variant: NotificationBannerVariant
+  title: string
+  message?: string
+  onDismiss?: () => void
+  action?: {
+    label: string
+    onClick: () => void
+  }
+  className?: string
+}
+
+export const NotificationBanner: React.FC<NotificationBannerProps> = ({
+  variant, title, message, onDismiss, action, className = '',
+}) => {
+  const icons = { success: <NotificationSuccessIcon />, error: <NotificationErrorIcon />, info: <NotificationInfoIcon /> }
+
+  return (
+    <div className={`notification-banner notification-banner--${variant} ${className}`}>
+      <div className="notification-banner__icon-wrap">
+        {icons[variant]}
+      </div>
+      <div className="notification-banner__content">
+        <p className="notification-banner__title">{title}</p>
+        {message && <p className="notification-banner__message">{message}</p>}
+        {action && (
+          <button type="button" className="notification-banner__action" onClick={action.onClick}>
+            {action.label}
+          </button>
+        )}
+      </div>
+      {onDismiss && (
+        <button type="button" className="notification-banner__dismiss" onClick={onDismiss} aria-label="Dismiss">
+          <NotificationCloseIcon />
+        </button>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { NotificationBanner } from './NotificationBanner'
+export type { NotificationBannerProps, NotificationBannerVariant } from './NotificationBanner'

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import React, { useState } from 'react'
-import { RadioCard } from './RadioCard'
+import { RadioCardGroup } from './RadioCardGroup'
 
-const meta: Meta<typeof RadioCard> = {
-  title: 'v2/Components/RadioCard',
-  component: RadioCard,
+const meta: Meta<typeof RadioCardGroup> = {
+  title: 'v2/Components/RadioCardGroup',
+  component: RadioCardGroup,
   parameters: {
     layout: 'centered',
   },
@@ -12,7 +12,7 @@ const meta: Meta<typeof RadioCard> = {
 }
 
 export default meta
-type Story = StoryObj<typeof RadioCard>
+type Story = StoryObj<typeof RadioCardGroup>
 
 export const Default: Story = {
   render: () => {
@@ -21,7 +21,7 @@ export const Default: Story = {
 
       return (
         <div style={{ width: 400 }}>
-          <RadioCard
+          <RadioCardGroup
             name="role-default"
             value={value}
             onChange={setValue}
@@ -58,7 +58,7 @@ export const NoDescriptions: Story = {
 
       return (
         <div style={{ width: 400 }}>
-          <RadioCard
+          <RadioCardGroup
             name="role-no-desc"
             value={value}
             onChange={setValue}
@@ -83,7 +83,7 @@ export const WithDisabled: Story = {
 
       return (
         <div style={{ width: 400 }}>
-          <RadioCard
+          <RadioCardGroup
             name="role-disabled"
             value={value}
             onChange={setValue}

package/src/v2/components/RadioCard/{RadioCard.scss → RadioCardGroup.scss}

@@ -1,9 +1,14 @@
 .radio-card {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 12px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 
   &__option {
+    flex: 1;
     display: flex;
     align-items: flex-start;
     gap: 12px;
@@ -15,8 +20,8 @@
     transition: border-color 0.15s, background 0.15s;
 
     &--selected {
-      border-color: var(--border-selected, #6200ee);
-      background: var(--surface-action-soft, #f3e8ff);
+      border-color: var(--border-primary, #e8e9ef);
+      background: var(--surface-primary, #ffffff);
     }
 
     &--disabled {
@@ -32,6 +37,26 @@
     height: 0;
   }
 
+  &__icon-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 8px 8px;
+    background: var(--surface-secondary, #f8f8fa);
+    border-radius: 6px;
+    flex-shrink: 0;
+    width: 60px;
+    color: var(--fill-primary, #14215a);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &__radio {
     width: 18px;
     height: 18px;
@@ -44,14 +69,14 @@
     justify-content: center;
 
     &--selected {
-      border-color: var(--border-selected, #6200ee);
+      border-color: var(--fills-main-fill-primary, #14215a);
 
       &::after {
         content: '';
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background: var(--border-selected, #6200ee);
+        background: var(--fills-main-fill-primary, #14215a);
       }
     }
   }

package/src/v2/components/RadioCard/{RadioCard.tsx → RadioCardGroup.tsx}

@@ -1,14 +1,15 @@
 import React from 'react'
-import './RadioCard.scss'
+import './RadioCardGroup.scss'
 
 export interface RadioCardOption {
   value: string
   label: string
   description?: string
   disabled?: boolean
+  icon?: React.ReactNode
 }
 
-export interface RadioCardProps {
+export interface RadioCardGroupProps {
   options: RadioCardOption[]
   value: string
   onChange(value: string): void
@@ -16,7 +17,7 @@ export interface RadioCardProps {
   className?: string
 }
 
-export const RadioCard: React.FC<RadioCardProps> = ({
+export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
   options,
   value,
   onChange,
@@ -54,7 +55,14 @@ export const RadioCard: React.FC<RadioCardProps> = ({
             onChange={() => !isDisabled && onChange(option.value)}
             className="radio-card__radio-input"
           />
-          <div className={radioClass} />
+          {option.icon ? (
+            <div className="radio-card__icon-box">
+              <div className="radio-card__icon">{option.icon}</div>
+              <div className={radioClass} />
+            </div>
+          ) : (
+            <div className={radioClass} />
+          )}
           <div className="radio-card__text">
             <span className="radio-card__label">{option.label}</span>
             {option.description && (

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

@@ -1 +1 @@
-export * from './RadioCard'
+export * from './RadioCardGroup'

package/src/v2/components/Select/Select.tsx

@@ -1,6 +1,12 @@
 import { SelectHTMLAttributes } from 'react'
 import './Select.scss'
 
+export interface SelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   variant?: 'default' | 'hover'| 'focus' | 'error' | 'disabled'
   size?: 'sm' | 'md' | 'lg'
@@ -8,6 +14,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   optional?: boolean
   error?: string
   helperText?: string
+  options?: SelectOption[]
 }
 
 export function Select({
@@ -19,6 +26,7 @@ export function Select({
   optional,
   error,
   helperText,
+  options,
   children,
   ...props
 }: SelectProps) {
@@ -46,7 +54,13 @@ export function Select({
           disabled={disabled}
           {...props}
         >
-          {children}
+          {options
+            ? options.map((opt) => (
+                <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  {opt.label}
+                </option>
+              ))
+            : children}
         </select>
         <svg
           className="select-arrow"

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

@@ -1,2 +1,2 @@
 export { Select } from './Select'
-export type { SelectProps } from './Select'
+export type { SelectProps, SelectOption } from './Select'

package/src/v2/components/StatusBadge/StatusBadge.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import './StatusBadge.scss'
 
 export type StatusBadgeStatus =
@@ -9,23 +10,36 @@ export type StatusBadgeStatus =
   | 'imported'
   | 'inactive'
   | 'expired'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'default'
 
 export interface StatusBadgeProps {
   status: StatusBadgeStatus
+  label?: string
 }
 
-const STATUS_LABELS: Record<StatusBadgeStatus, string> = {
-  active: 'Active',
-  disabled: 'Disabled',
-  suspended: 'Suspended',
-  invited: 'Invited',
-  imported: 'Imported',
-  inactive: 'Inactive',
-  expired: 'Expired',
-}
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, label }) => {
+  const { t } = useTranslation(['Design'])
+
+  const STATUS_LABELS: Record<StatusBadgeStatus, string> = {
+    active: t('statusActive'),
+    disabled: t('statusDisabled'),
+    suspended: t('statusSuspended'),
+    invited: t('statusInvited'),
+    imported: t('statusImported'),
+    inactive: t('statusInactive'),
+    expired: t('statusExpired'),
+    success: t('statusSuccess'),
+    warning: t('statusWarning'),
+    error: t('statusError'),
+    default: '',
+  }
 
-export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => (
-  <span className={`status-badge status-badge--${status}`}>
-    {STATUS_LABELS[status]}
-  </span>
-)
+  return (
+    <span className={`status-badge status-badge--${status}`}>
+      {label ?? STATUS_LABELS[status]}
+    </span>
+  )
+}

package/src/v2/components/TableControls/TableControls.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '../Button'
 import { QuickFilter } from '../QuickFilter'
 import type { QuickFilterOption } from '../QuickFilter'
@@ -40,8 +41,9 @@ export const TableControls: React.FC<TableControlsProps> = ({
   searchConfig,
   filters,
   actions,
-  filterLabel = 'Quick Filters:',
+  filterLabel,
 }) => {
+  const { t } = useTranslation(['Design'])
   const filterOptions: QuickFilterOption[] = (filters ?? []).map((f) => ({
     label: f.label,
     value: f.value,
@@ -73,7 +75,7 @@ export const TableControls: React.FC<TableControlsProps> = ({
               <input
                 className="table-controls__search"
                 type="text"
-                placeholder={searchConfig.placeholder ?? 'Search…'}
+                placeholder={searchConfig.placeholder ?? t('searchPlaceholder')}
                 value={searchConfig.value}
                 onChange={(e) => searchConfig.onChange(e.target.value)}
               />
@@ -99,7 +101,7 @@ export const TableControls: React.FC<TableControlsProps> = ({
       {/* ── Quick filters row ── */}
       {filterOptions.length > 0 && (
         <QuickFilter
-          label={filterLabel}
+          label={filterLabel ?? t('quickFilters')}
           options={filterOptions}
           selectedValues={selectedFilterValues}
           onChange={handleFilterChange}