@licklist/design 0.78.5-dev.57 → 0.78.5-dev.59

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

@@ -8,8 +8,10 @@ export interface NPSScoreProps {
     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 {
@@ -44,6 +46,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     firstName,
     onSubmit,
     onDismiss,
+    onSubmitDismiss,
 }) => {
     const [selectedScore, setSelectedScore] = useState<number | null>(null)
     const [reason, setReason] = useState('')
@@ -56,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'
         }
@@ -92,7 +91,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                     variant="success"
                     title="Thank you!"
                     message="Your feedback has been submitted successfully."
-                    onDismiss={onDismiss}
+                    onDismiss={onSubmitDismiss}
                 />
             </div>
         )
@@ -143,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}

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

@@ -62,7 +62,19 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
               ref={inputRef}
               {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
             />
-            <div className="icon" onClick={handleIconClick} style={{ cursor: (onIconClick || (props as any).type === 'date') ? 'pointer' : 'default' }}>
+            <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>

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

@@ -2,13 +2,17 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 14px;
+    gap: 0;
     align-self: stretch;
-    padding: 32px 32px 0 32px;
+    padding: 32px 32px 0px 32px;
 
     @media (max-width: 768px) {
-        padding: 16px 16px 0 16px;
-        gap: 10px;
+        padding: 16px 16px 0px 16px;
+        gap: 0;
+    }
+
+    @media (max-width: 480px) {
+        padding: 16px 12px 0px 12px;
     }
 }
 
@@ -49,5 +53,4 @@
     height: 1px;
     border: none;
     background-color: var(--border-primary, #e8e9ef);
-    margin: 0;
 }

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

@@ -9,6 +9,7 @@ export interface NewPageHeaderProps {
     renderRight?: () => React.ReactNode;
     className?: string;
     showDivider?: boolean;
+    dividerClassName?: string;
 }
 
 export const NewPageHeader = ({
@@ -17,26 +18,25 @@ export const NewPageHeader = ({
     onCancel,
     renderRight,
     className = '',
-    showDivider = true
-}: NewPageHeaderProps) => {
-    return (
-        <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"
-                            variant="destructive-soft"
-                            onClick={onCancel}
-                        >
-                            <ButtonText color="danger">{cancelLabel}</ButtonText>
-                        </Button>
-                    )}
-                </div>
+    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"
+                        variant="destructive-soft"
+                        onClick={onCancel}
+                    >
+                        <ButtonText color="danger">{cancelLabel}</ButtonText>
+                    </Button>
+                )}
             </div>
-            {showDivider && <hr className="new-page-header__divider" />}
         </div>
-    );
-};
+        {showDivider && <hr className={`new-page-header__divider ${dividerClassName}`} />}
+    </div>
+);

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

@@ -1,6 +1,11 @@
 .new-table-wrapper {
   width: 100%;
   overflow-x: auto;
+  overflow-y: visible;
+
+  &.action-menu-open {
+    overflow: visible !important;
+  }
 }
 
 .new-table {
@@ -28,6 +33,17 @@
   &__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;
@@ -46,6 +62,7 @@
     font-size: var(--text-base-size, 14px);
     color: var(--label-primary, #121E52);
     vertical-align: middle;
+    overflow: visible;
   }
 
   &__no-data-cell {
@@ -60,7 +77,6 @@
 // Mobile styles
 @media (max-width: 768px) {
   .new-table-wrapper {
-    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 

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

@@ -62,6 +62,7 @@ export function NewTable<T extends { id?: string | number }>({
                       <td
                         key={colIndex}
                         className={`new-table__cell ${column.className || ''}`}
+                        role="presentation"
                         onClick={(e) => {
                           if (column.disableRowClick) {
                             e.stopPropagation()

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

@@ -13,8 +13,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
@@ -43,8 +43,8 @@
     }
 
     svg {
-      width: 20px;
-      height: 20px;
+      width: 24px;
+      height: 24px;
       flex-shrink: 0; // Prevent SVG from shrinking
     }
   }
@@ -56,13 +56,13 @@
   }
 
   &__page-number {
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
     color: #14215a; // Main fill primary
   }
 
   &__showing {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     color: #626a90; // Secondary text color
   }
@@ -78,12 +78,12 @@
     }
 
     &__button {
-      width: 36px;
-      height: 36px;
+      width: 40px;
+      height: 40px;
 
       svg {
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
       }
     }
 
@@ -92,11 +92,11 @@
     }
 
     &__page-number {
-      font-size: 13px;
+      font-size: 14px;
     }
 
     &__showing {
-      font-size: 11px;
+      font-size: 12px;
     }
   }
 }
@@ -114,12 +114,12 @@
     }
 
     &__button {
-      width: 32px;
-      height: 32px;
+      width: 36px;
+      height: 36px;
 
       svg {
-        width: 16px;
-        height: 16px;
+        width: 18px;
+        height: 18px;
       }
     }
 
@@ -131,11 +131,11 @@
     }
 
     &__page-number {
-      font-size: 12px;
+      font-size: 13px;
     }
 
     &__showing {
-      font-size: 10px;
+      font-size: 11px;
     }
   }
 }

package/src/v2/components/Pagination/Pagination.tsx

@@ -59,7 +59,7 @@ export const Pagination: React.FC<PaginationProps> = ({
           disabled={isLastPage}
           aria-label={t('App:next', { defaultValue: 'Next' })}
         >
-          <ArrowRightIcon width={32} height={32} />
+          <ArrowRightIcon />
         </button>
       </div>
       <div className="v2-pagination__info">

package/src/v2/components/QuickFilter/QuickFilter.scss

@@ -14,28 +14,9 @@
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-  }
-
-  &__option {
-    padding: 4px 16px;
-    border-radius: 100px;
-    border: 1px solid var(--border-primary, #E8E9EF);
-    background-color: var(--neutral-white, #FFFFFF);
-    font-size: var(--text-small-size, 13px);
-    font-weight: 500;
-    color: var(--label-primary, #121E52);
-    cursor: pointer;
-    transition: all 0.2s ease;
 
-    &:hover:not(&--active) {
-      background-color: var(--surface-primary-hover, #F8F8FA);
-    }
-
-    &--active {
-      background-color: var(--fill-primary);
-      border-color: var(--border-selected, #121E52);
-      color: var(--neutral-white, #FFFFFF);
-      font-weight: 600;
+    .ghost-button {
+      border-radius: 100px;
     }
   }
 }
@@ -43,29 +24,36 @@
 // Mobile styles
 @media (max-width: 768px) {
   .quick-filter {
-    flex-direction: column;
+    display: flex;
+    flex-direction: row;
     align-items: flex-start;
-    gap: 8px;
+    gap: 12px;
+    width: 100%;
 
     &__label {
       font-size: 12px;
     }
 
     &__options {
-      width: 100%;
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
       gap: 6px;
-    }
+      padding: 0;
+      margin: 0;
+      min-width: 0;
 
-    &__option {
-      padding: 3px 12px;
-      font-size: 12px;
+      .ghost-button {
+        flex-shrink: 0;
+        border-radius: 100px;
+      }
     }
   }
 }
 
 @media (max-width: 480px) {
   .quick-filter {
-    gap: 6px;
+    gap: 8px;
 
     &__label {
       font-size: 11px;
@@ -74,11 +62,6 @@
     &__options {
       gap: 4px;
     }
-
-    &__option {
-      padding: 2px 10px;
-      font-size: 11px;
-    }
   }
 }
 

package/src/v2/components/QuickFilter/QuickFilter.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { GhostButton } from '../Button'
 import './QuickFilter.scss'
 
 export interface QuickFilterOption {
@@ -32,16 +33,17 @@ export const QuickFilter: React.FC<QuickFilterProps> = ({
       {label && <span className="quick-filter__label">{label}</span>}
       <div className="quick-filter__options">
         {options.map((option) => (
-          <button
+          <GhostButton
             key={option.value}
             type="button"
-            className={`quick-filter__option ${
-              selectedValues?.includes(option.value) ? 'quick-filter__option--active' : ''
-            }`}
+            size="sm"
+            className={
+              selectedValues?.includes(option.value) ? 'active' : ''
+            }
             onClick={() => toggleOption(option.value)}
           >
             {option.label}
-          </button>
+          </GhostButton>
         ))}
       </div>
     </div>

package/src/v2/components/SectionHeader/SectionHeader.tsx

@@ -6,10 +6,8 @@ export interface SectionHeaderProps {
     className?: string;
 }
 
-export const SectionHeader: React.FC<SectionHeaderProps> = ({ title, className = '' }) => {
-    return (
-        <span className={`section-header ${className}`}>
-            {title}
-        </span>
-    );
-};
+export const SectionHeader: React.FC<SectionHeaderProps> = ({ title, className = '' }) => (
+    <span className={`section-header ${className}`}>
+        {title}
+    </span>
+);

package/src/v2/components/TableSortIcon/TableSortIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+
+export type SortDirection = 'asc' | 'desc' | null
+
+export interface TableSortIconProps {
+  active?: boolean
+  direction: SortDirection
+  className?: string
+}
+
+export const TableSortIcon: React.FC<TableSortIconProps> = ({ active = false, direction, className = '' }) => {
+  if (!active || !direction) return null
+
+  return (
+    <span className={className}>
+      {direction === 'asc' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+    </span>
+  )
+}

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

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

package/src/v2/components/WYSIWYGEditor/Icons.tsx

@@ -62,8 +62,8 @@ export const QuoteAltIcon = () => (
 export const DividerIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <rect x="5.25" y="11.25" width="13.5" height="1.5" fill="#626A90"/>
-    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
-    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fillOpacity="0.5"/>
+    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fillOpacity="0.5"/>
   </svg>
 );
 

package/src/v2/components/index.ts

@@ -7,6 +7,9 @@ export type { QuickFilterProps, QuickFilterOption } from './QuickFilter'
 export { NewTable } from './NewTable'
 export type { NewTableProps, NewTableColumn } from './NewTable'
 
+export { TableSortIcon } from './TableSortIcon'
+export type { TableSortIconProps } from './TableSortIcon'
+
 
 export { ActionMenu } from './ActionMenu'
 export type { ActionMenuProps, ActionMenuItem } from './ActionMenu'
@@ -34,8 +37,8 @@ export { SectionHeader } from './SectionHeader'
 export type { SectionHeaderProps } from './SectionHeader'
 
 // Existing Components
-export { Button, ButtonText } from './Button'
-export type { ButtonProps, ButtonTextProps } from './Button'
+export { Button, ButtonText, GhostButton } from './Button'
+export type { ButtonProps, ButtonTextProps, GhostButtonProps } from './Button'
 
 export { Select } from './Select'
 
@@ -69,6 +72,8 @@ export {
   ExternalLinkIcon,
   ExportIcon,
   ClearIcon,
-  CloseIcon
+  CloseIcon,
+  EllipsisIcon,
+  CircleIcon
 } from '../icons'
 

package/src/v2/icons/index.tsx

@@ -207,5 +207,19 @@ 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} />
+  </svg>
+)
+
+export const CircleIcon = ({ width = 32, height = 32, fill = 'var(--surface-action-soft)', className = '', ...props }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number; fill?: string } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx="16" cy="16" r="16" fill={fill} />
+  </svg>
+)
+
 
 

package/src/v2/pages/Settings/components/SidebarCustomisation.tsx

@@ -174,4 +174,4 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   )
 }
 
-export default SidebarCustomisation
+export default SidebarCustomisation