@licklist/design 0.78.32 → 0.78.34

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

@@ -1,13 +1,17 @@
 import React, { useState } from 'react'
 import './NPSScore.scss'
+import { Button } from '../Button'
+import { Alert } from '../Alert'
 
 export interface NPSScoreProps {
     /** User's first name for personalized greeting */
     firstName?: string
     /** Callback when NPS is submitted */
     onSubmit?: (data: NPSSubmitData) => void
-    /** Callback when dismissed */
+    /** Callback when dismissed without submitting */
     onDismiss?: () => void
+    /** Callback when success alert is dismissed after submission */
+    onSubmitDismiss?: () => void
 }
 
 export interface NPSSubmitData {
@@ -42,6 +46,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     firstName,
     onSubmit,
     onDismiss,
+    onSubmitDismiss,
 }) => {
     const [selectedScore, setSelectedScore] = useState<number | null>(null)
     const [reason, setReason] = useState('')
@@ -54,11 +59,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     const handleSubmit = async () => {
         if (!selectedScore) return
 
-        // Validate required fields - reason required for all scores
         const newErrors: { reason?: string; role?: string } = {}
-        if (!reason.trim()) {
-            newErrors.reason = 'Please provide a reason for your score'
-        }
         if (!role) {
             newErrors.role = 'Please select your role'
         }
@@ -86,13 +87,12 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     if (isSubmitted) {
         return (
             <div className="nps-score">
-                <div className="nps-score__container">
-                    <div className="nps-score__success">
-                        <IconBigSmile size={48} className="nps-score__success-icon" />
-                        <h3 className="nps-score__success-title">Thank you!</h3>
-                        <p className="nps-score__success-message">Your feedback has been submitted successfully.</p>
-                    </div>
-                </div>
+                <Alert
+                    variant="success"
+                    title="Thank you!"
+                    message="Your feedback has been submitted successfully."
+                    onDismiss={onSubmitDismiss}
+                />
             </div>
         )
     }
@@ -142,7 +142,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                         {/* Reason textarea - always visible */}
                         <div className="nps-score__field">
                             <label className="nps-score__field-label">
-                                Reason for this score?
+                                Reason for this score? (Optional)
                             </label>
                             <textarea
                                 value={reason}
@@ -192,13 +192,12 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                         </div>
 
                         {/* Submit button */}
-                        <button
+                        <Button
                             onClick={handleSubmit}
                             disabled={isSubmitting}
-                            className="nps-score__submit"
                         >
                             {isSubmitting ? 'Submitting...' : 'Submit'}
-                        </button>
+                        </Button>
                     </div>
                 )}
             </div>

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { NewInput } from './NewInput'
 import { useState } from 'react'
+import { SearchIcon, CalendarSmallIcon } from '../../icons'
 
 const meta: Meta<typeof NewInput> = {
   title: 'V2/Components/NewInput',
@@ -121,6 +122,7 @@ export const DateInput: Story = {
   args: {
     label: 'Date of Birth',
     type: 'date',
+    icon: <CalendarSmallIcon />,
   },
 }
 
@@ -202,24 +204,7 @@ export const RequiredField: Story = {
 export const WithIcon: Story = {
   args: {
     label: 'Search',
-    placeholder: 'Search...',
-    icon: (
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4.35-4.35"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
+    icon: <SearchIcon />,
   },
 }
 

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

@@ -7,7 +7,9 @@ type CommonInputProps = {
   helperText?: string;
   error?: string;
   icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
   required?: boolean;
+  onIconClick?: () => void;
 }
 
 type InputProps = CommonInputProps & {
@@ -21,7 +23,8 @@ type TextareaProps = CommonInputProps & {
 export type NewInputProps = InputProps | TextareaProps
 
 export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewInputProps>(
-  ({label, optional, helperText, error, icon, as = 'input', required, className = '', ...props}, ref) => {
+  ({label, optional, helperText, error, icon, iconPosition = 'left', as = 'input', required, className = '', onIconClick, ...props}, ref) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
     const isError = !!error;
     const containerClasses = [
       'new-form-input',
@@ -30,6 +33,17 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
       className
     ].filter(Boolean).join(' ');
 
+    // Merge refs
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+    const handleIconClick = () => {
+      if (onIconClick) {
+        onIconClick();
+      } else if (inputRef.current && (props as any).type === 'date') {
+        inputRef.current.showPicker?.();
+      }
+    };
+
     const renderInput = () => {
       if (as === 'textarea') {
         return (
@@ -43,12 +57,26 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
 
       if (icon) {
         return (
-          <div className="new-form-input__input-with-icon">
+          <div className={`new-form-input__input-with-icon new-form-input__input-with-icon--${iconPosition}`}>
             <input
-              ref={ref as React.Ref<HTMLInputElement>}
+              ref={inputRef}
               {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
             />
-            <div className="icon">{icon}</div>
+            <div
+              className="icon"
+              role="button"
+              tabIndex={0}
+              onClick={handleIconClick}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleIconClick();
+                }
+              }}
+              style={{ cursor: (onIconClick || (props as any).type === 'date') ? 'pointer' : 'default' }}
+            >
+              {icon}
+            </div>
           </div>
         );
       }
@@ -65,14 +93,9 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
     return (
       <div className={containerClasses}>
         {(label || optional) && (
-          <div className="new-form-input__label-row">
-            {label && (
-              <label className="new-form-input__label">
-                {label}
-              </label>
-            )}
-            {optional && <span className="new-form-input__label-optional">Optional</span>}
-          </div>
+          <label className="new-form-input__label">
+            {label} {optional && <span className="new-form-input__label-optional">(Optional)</span>}
+          </label>
         )}
 
         {renderInput()}

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

@@ -2,15 +2,17 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 24px;
+    gap: 0;
     align-self: stretch;
-    padding-left: 32px;
-    padding-right: 32px;
+    padding: 32px 32px 0px 32px;
 
     @media (max-width: 768px) {
-        padding-left: 16px;
-        padding-right: 16px;
-        gap: 16px;
+        padding: 16px 16px 0px 16px;
+        gap: 0;
+    }
+
+    @media (max-width: 480px) {
+        padding: 16px 12px 0px 12px;
     }
 }
 
@@ -29,12 +31,20 @@
 
     &__title {
         color: var(--label-primary);
-        font-family: 'Geist', sans-serif;
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
         font-size: 24px;
         font-style: normal;
         font-weight: 600;
         line-height: 28px;
         margin: 0;
+        padding: 0;
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-shrink: 0;
     }
 }
 
@@ -43,5 +53,4 @@
     height: 1px;
     border: none;
     background-color: var(--border-primary, #e8e9ef);
-    margin: 0;
 }

package/src/v2/components/NewPageHeader/NewPageHeader.tsx

@@ -6,19 +6,26 @@ export interface NewPageHeaderProps {
     title: string;
     cancelLabel?: string;
     onCancel?: () => void;
+    renderRight?: () => React.ReactNode;
     className?: string;
+    showDivider?: boolean;
+    dividerClassName?: string;
 }
 
-export const NewPageHeader: React.FC<NewPageHeaderProps> = ({
+export const NewPageHeader = ({
     title,
     cancelLabel = 'Cancel',
     onCancel,
-    className = ''
-}) => {
-    return (
-        <div className={`new-page-header-container ${className}`}>
-            <div className="new-page-header">
-                <h1 className="new-page-header__title">{title}</h1>
+    renderRight,
+    className = '',
+    showDivider = true,
+    dividerClassName = ''
+}: NewPageHeaderProps) => (
+    <div className={`new-page-header-container ${className}`}>
+        <div className="new-page-header">
+            <h1 className="new-page-header__title">{title}</h1>
+            <div className="new-page-header__actions">
+                {renderRight && renderRight()}
                 {onCancel && (
                     <Button
                         type="button"
@@ -29,7 +36,7 @@ export const NewPageHeader: React.FC<NewPageHeaderProps> = ({
                     </Button>
                 )}
             </div>
-            <hr className="new-page-header__divider" />
         </div>
-    );
-};
+        {showDivider && <hr className={`new-page-header__divider ${dividerClassName}`} />}
+    </div>
+);

package/src/v2/components/NewTable/NewTable.scss

@@ -0,0 +1,126 @@
+.new-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+
+  &.action-menu-open {
+    overflow: visible !important;
+  }
+}
+
+.new-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+
+  &__head {
+    background-color: var(--surface-secondary, #F8F8FA);
+  }
+
+  &__header-cell {
+    padding: 16px 24px;
+    font-size: var(--text-small-size, 13px);
+    font-weight: 500;
+    color: var(--label-secondary, #9399B3);
+    border-bottom: 1px solid var(--border-primary, #E8E9EF);
+    white-space: nowrap;
+  }
+
+  &__body {
+    background-color: var(--neutral-white, #FFFFFF);
+  }
+
+  &__row {
+    border-bottom: 1px solid var(--border-primary, #E8E9EF);
+    transition: background-color 0.2s ease;
+    overflow: visible;
+
+    &.action-menu-open {
+      overflow: visible !important;
+      z-index: 20;
+      position: relative;
+
+      .new-table__cell {
+        overflow: visible !important;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--clickable {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--surface-primary-hover, #F8F8FA);
+      }
+    }
+  }
+
+  &__cell {
+    padding: 16px 24px;
+    font-size: var(--text-base-size, 14px);
+    color: var(--label-primary, #121E52);
+    vertical-align: middle;
+    overflow: visible;
+  }
+
+  &__no-data-cell {
+    padding: 64px 24px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #9399B3;
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .new-table-wrapper {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .new-table {
+    min-width: 600px; // Ensure table doesn't collapse too much
+
+    &__header-cell {
+      padding: 12px 16px;
+      font-size: 12px;
+    }
+
+    &__cell {
+      padding: 12px 16px;
+      font-size: 13px;
+    }
+
+    &__no-data-cell {
+      padding: 48px 16px;
+      font-size: 14px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .new-table {
+    min-width: 500px;
+
+    &__header-cell,
+    &__cell {
+      padding: 10px 12px;
+    }
+
+    &__header-cell {
+      font-size: 11px;
+    }
+
+    &__cell {
+      font-size: 12px;
+    }
+
+    &__no-data-cell {
+      padding: 32px 12px;
+      font-size: 13px;
+    }
+  }
+}
+

package/src/v2/components/NewTable/NewTable.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import './NewTable.scss'
+
+export interface NewTableColumn<T> {
+  header: React.ReactNode
+  accessor: keyof T | ((row: T) => React.ReactNode)
+  className?: string
+  width?: string | number
+  disableRowClick?: boolean
+}
+
+export interface NewTableProps<T> {
+  columns: NewTableColumn<T>[]
+  data: T[]
+  className?: string
+  rowClassName?: string | ((row: T) => string)
+  onRowClick?: (row: T) => void
+  noDataText?: string
+}
+
+export function NewTable<T extends { id?: string | number }>({
+  columns,
+  data,
+  className = '',
+  rowClassName = '',
+  onRowClick,
+  noDataText,
+}: NewTableProps<T>) {
+  return (
+    <div className={`new-table-wrapper ${className}`}>
+      <table className="new-table">
+        <thead className="new-table__head">
+          <tr>
+            {columns.map((column, index) => (
+              <th
+                key={index}
+                className={`new-table__header-cell ${column.className || ''}`}
+                style={{ width: column.width }}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="new-table__body">
+          {data.length > 0 ? (
+            data.map((row, rowIndex) => {
+              const customRowClass = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName
+              return (
+                <tr
+                  key={row.id || rowIndex}
+                  className={`new-table__row ${onRowClick ? 'new-table__row--clickable' : ''} ${customRowClass}`}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((column, colIndex) => {
+                    const content =
+                      typeof column.accessor === 'function'
+                        ? column.accessor(row)
+                        : (row[column.accessor] as React.ReactNode)
+
+                    return (
+                      <td
+                        key={colIndex}
+                        className={`new-table__cell ${column.className || ''}`}
+                        role="presentation"
+                        onClick={(e) => {
+                          if (column.disableRowClick) {
+                            e.stopPropagation()
+                          }
+                        }}
+                      >
+                        {content}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })
+          ) : (
+            noDataText && (
+              <tr className="new-table__no-data-row">
+                <td colSpan={columns.length} className="new-table__no-data-cell">
+                  {noDataText}
+                </td>
+              </tr>
+            )
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './NewTable'

package/src/v2/components/Pagination/Pagination.scss

@@ -0,0 +1,142 @@
+.v2-pagination {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+
+  &__controls {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    background-color: #efeffe; // Light purple background
+    color: #6200ee; // Primary purple color
+    transition: background-color 0.2s ease, color 0.2s ease;
+    flex-shrink: 0; // Prevent button from shrinking
+
+    &:hover:not(:disabled) {
+      background-color: #cdccfc;
+    }
+
+    &:active:not(:disabled) {
+      background-color: #b4b4fa;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #6200ee;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      background-color: #e5e7eb; // Light gray
+      color: #9ca3af; // Gray arrow
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0; // Prevent SVG from shrinking
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__page-number {
+    font-size: 15px;
+    font-weight: 600;
+    color: #14215a; // Main fill primary
+  }
+
+  &__showing {
+    font-size: 13px;
+    font-weight: 500;
+    color: #626a90; // Secondary text color
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .v2-pagination {
+    gap: 12px;
+
+    &__controls {
+      gap: 6px;
+    }
+
+    &__button {
+      width: 40px;
+      height: 40px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &__info {
+      gap: 2px;
+    }
+
+    &__page-number {
+      font-size: 14px;
+    }
+
+    &__showing {
+      font-size: 12px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .v2-pagination {
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-start;
+
+    &__controls {
+      order: 2;
+      width: 100%;
+      justify-content: center;
+    }
+
+    &__button {
+      width: 36px;
+      height: 36px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    &__info {
+      order: 1;
+      width: 100%;
+      text-align: center;
+      align-items: center;
+    }
+
+    &__page-number {
+      font-size: 13px;
+    }
+
+    &__showing {
+      font-size: 11px;
+    }
+  }
+}
+