@licklist/design 0.78.32 → 0.78.34

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

@@ -0,0 +1,80 @@
+import React from 'react'
+import './Pagination.scss'
+import { ArrowLeftIcon, ArrowRightIcon } from '../../icons'
+
+export interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  totalItems: number
+  itemsPerPage: number
+  onPageChange: (page: number) => void
+  t: (key: string, options?: any) => string
+  entityName?: string
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  t,
+  entityName = 'items'
+}) => {
+  const startItem = (currentPage - 1) * itemsPerPage + 1
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems)
+  const isFirstPage = currentPage <= 1
+  const isLastPage = currentPage >= totalPages
+
+  const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    if (!isFirstPage) {
+      onPageChange(currentPage - 1)
+    }
+  }
+
+  const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    if (!isLastPage) {
+      onPageChange(currentPage + 1)
+    }
+  }
+
+  return (
+    <div className="v2-pagination">
+      <div className="v2-pagination__controls">
+        <button
+          type="button"
+          className="v2-pagination__button"
+          onClick={handlePrev}
+          disabled={isFirstPage}
+          aria-label={t('App:previous', { defaultValue: 'Previous' })}
+        >
+          <ArrowLeftIcon />
+        </button>
+        <button
+          type="button"
+          className="v2-pagination__button"
+          onClick={handleNext}
+          disabled={isLastPage}
+          aria-label={t('App:next', { defaultValue: 'Next' })}
+        >
+          <ArrowRightIcon />
+        </button>
+      </div>
+      <div className="v2-pagination__info">
+        <div className="v2-pagination__page-number">
+          {t('App:page', { from: currentPage })}
+        </div>
+        <div className="v2-pagination__showing">
+          {t('App:paginationText', {
+            type: entityName,
+            from: startItem,
+            to: endItem,
+            total: totalItems
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,67 @@
+.quick-filter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  &__label {
+    font-size: var(--text-small-size, 13px);
+    font-weight: 500;
+    color: var(--label-secondary, #9399B3);
+    white-space: nowrap;
+  }
+
+  &__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .ghost-button {
+      border-radius: 100px;
+    }
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .quick-filter {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+
+    &__label {
+      font-size: 12px;
+    }
+
+    &__options {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 0;
+      margin: 0;
+      min-width: 0;
+
+      .ghost-button {
+        flex-shrink: 0;
+        border-radius: 100px;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .quick-filter {
+    gap: 8px;
+
+    &__label {
+      font-size: 11px;
+    }
+
+    &__options {
+      gap: 4px;
+    }
+  }
+}
+

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { GhostButton } from '../Button'
+import './QuickFilter.scss'
+
+export interface QuickFilterOption {
+  label: string
+  value: string
+}
+
+export interface QuickFilterProps {
+  options: QuickFilterOption[]
+  selectedValues: string[]
+  onChange: (selectedValues: string[]) => void
+  label?: string
+}
+
+export const QuickFilter: React.FC<QuickFilterProps> = ({
+  options,
+  selectedValues = [],
+  onChange,
+  label,
+}) => {
+  const toggleOption = (value: string) => {
+    if (selectedValues?.includes(value)) {
+      onChange(selectedValues.filter((v) => v !== value))
+    } else {
+      onChange([...selectedValues, value])
+    }
+  }
+
+  return (
+    <div className="quick-filter">
+      {label && <span className="quick-filter__label">{label}</span>}
+      <div className="quick-filter__options">
+        {options.map((option) => (
+          <GhostButton
+            key={option.value}
+            type="button"
+            size="sm"
+            className={
+              selectedValues?.includes(option.value) ? 'active' : ''
+            }
+            onClick={() => toggleOption(option.value)}
+          >
+            {option.label}
+          </GhostButton>
+        ))}
+      </div>
+    </div>
+  )
+}

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

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

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/Select/Select.scss

@@ -1,20 +1,41 @@
 @import '../../design-system/typography/Typography.scss';
 
+.select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 8px);
+  width: 100%;
+}
+
+.select-label {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--label-primary, #121E52);
+  display: block;
+}
+
+.select-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);
+}
+
+
 .select-container {
   position: relative;
-  display: inline-block;
-  width: auto;
-  max-width: 152px;
-
-  @media (min-width: 768px) {
-    max-width: 448px;
-  }
+  display: block;
+  width: 100%;
 }
 
 .select {
   @include typography('heading.h5');
   display: block;
-  width: auto;
+  width: 100%;
   height: 40px;
   padding: 8px var(--padding-reg, 16px);
   padding-right: 40px;
@@ -28,13 +49,12 @@
   border-radius: var(--radius-md, 4px);
   transition: all 0.2s ease-in-out;
   &:hover:not(:disabled) {
-    border-color: var(--disabled-regular);
+    border-color: var(--border-primary);
   }
 
   &:focus {
     outline: none;
-    border-color: var(--highlight-dark);
-    box-shadow: 0 0 0 3px var(--surface-highlight-soft);
+    border-color: var(--border-selected, #6200EE);
   }
 
   // Variants
@@ -49,7 +69,7 @@
 
   &--focus {
     background-color: var(--surface-secondary);
-    border-color: var(--border-selected);
+    border-color: var(--border-selected, #6200EE);
   }
 
   &--secondary {
@@ -148,26 +168,14 @@
 }
 
 .select {
-  &:focus {
-    outline: none;
-    border-color: var(--highlight-dark);
-    box-shadow: 0 0 0 3px var(--surface-highlight-soft);
-    transform: translateY(-1px);
-  }
-
   &:active {
     transform: translateY(0px);
-    box-shadow: 0 0 0 2px var(--surface-highlight-soft);
   }
 
   &.select--transitioning {
     opacity: 0.8;
     transform: scale(0.98);
     border-color: var(--cyan-700);
-
-    &:focus {
-      transform: scale(0.98) translateY(-1px);
-    }
   }
 }
 
@@ -186,3 +194,32 @@
 .select--filter-active {
   animation: filterPulse 0.6s ease-out;
 }
+
+.select-helper-text {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: var(--text-regular-size, 15px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-regular-line, 20px);
+  margin-top: 2px;
+  color: var(--label-secondary, #626A90);
+  min-width: max-content;
+  white-space: nowrap;
+
+  @media (max-width: 768px) {
+    min-width: unset;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}
+
+.select-error-text {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: var(--text-sm-size, 13px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line, 18px);
+  color: var(--status-error, #D32F2F);
+  margin-top: 2px;
+}
+

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

@@ -161,4 +161,80 @@ export const AllVariants: Story = {
       </div>
     </div>
   ),
-}
+}
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Select an option',
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select</option>
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithLabelAndOptional: Story = {
+  args: {
+    label: 'Gender',
+    optional: true,
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select gender</option>
+        <option value="female">Female</option>
+        <option value="male">Male</option>
+        <option value="prefer_not_to_say">Prefer not to say</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Country',
+    error: 'Please select a country',
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select country</option>
+        <option value="us">United States</option>
+        <option value="uk">United Kingdom</option>
+        <option value="ca">Canada</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Timezone',
+    helperText: 'Choose your preferred timezone',
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select timezone</option>
+        <option value="utc">UTC</option>
+        <option value="est">EST</option>
+        <option value="pst">PST</option>
+      </Select>
+    </div>
+  ),
+}
+

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

@@ -1,56 +1,85 @@
-import React, { HTMLAttributes } from 'react'
+import { SelectHTMLAttributes } from 'react'
 import './Select.scss'
 
-export interface SelectProps extends HTMLAttributes<HTMLSelectElement> {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   variant?: 'default' | 'hover'| 'focus' | 'error' | 'disabled'
   size?: 'sm' | 'md' | 'lg'
-  disabled?: boolean
+  label?: string
+  optional?: boolean
+  error?: string
+  helperText?: string
 }
 
-export function Select({ 
-  variant = 'default', 
-  size = 'md', 
-  disabled = false, 
+export function Select({
+  variant = 'default',
+  size = 'md',
+  disabled = false,
   className = '',
+  label,
+  optional,
+  error,
+  helperText,
   children,
-  ...props 
+  ...props
 }: SelectProps) {
+  const isError = !!error
   const classes = [
     'select',
     `select--${variant}`,
     `select--${size}`,
     disabled ? 'select--disabled' : '',
+    isError ? 'select--error' : '',
     className
   ].filter(Boolean).join(' ')
 
   return (
-    <div className="select-container">
-      <select 
-        className={classes} 
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </select>
-      <svg 
-        className="select-arrow"
-        xmlns="http://www.w3.org/2000/svg" 
-        width="11" 
-        height="6" 
-        viewBox="0 0 11 6" 
-        fill="none"
-        aria-hidden="true"
-      >
-        <path 
-          d="M1 1L5.5 5L10 1" 
-          stroke="#626A90" 
-          strokeWidth="2" 
-          strokeLinecap="round" 
-          strokeLinejoin="round"
-        />
-      </svg>
+    <div className="select-wrapper">
+      {(label || optional) && (
+        <label className="select-label">
+          {label} {optional && <span className="select-label-optional">(Optional)</span>}
+        </label>
+      )}
+
+      <div className="select-container">
+        <select
+          className={classes}
+          disabled={disabled}
+          {...props}
+        >
+          {children}
+        </select>
+        <svg
+          className="select-arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="11"
+          height="6"
+          viewBox="0 0 11 6"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M1 1L5.5 5L10 1"
+            stroke="#626A90"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+
+      {helperText && (
+        <p className="select-helper-text">
+          {helperText}
+        </p>
+      )}
+
+      {error && error !== ' ' && (
+        <p className="select-error-text">
+          {error}
+        </p>
+      )}
     </div>
   )
 }
 
-export default Select
+export default Select

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

@@ -1,3 +1,22 @@
+export { Badge } from './Badge'
+export type { BadgeProps } from './Badge'
+
+export { QuickFilter } from './QuickFilter'
+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'
+
+export { DeleteModal } from './Modal'
+export type { DeleteModalProps } from './Modal'
+
 // Form Components
 export { FormField } from './FormField'
 export type { FormFieldProps } from './FormField'
@@ -18,11 +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 { GhostButton } from './Button/GhostButton'
-export type { GhostButtonProps } from './Button/GhostButton'
+export { Button, ButtonText, GhostButton } from './Button'
+export type { ButtonProps, ButtonTextProps, GhostButtonProps } from './Button'
 
 export { Select } from './Select'
 
@@ -34,7 +50,30 @@ export { UserPanel } from './UserPanel'
 
 export { EntityHeader } from './EntityHeader'
 
+
 export { Alert } from './Alert'
 
 export { NPSScore } from './NPSScore'
 
+export { Pagination } from './Pagination'
+export type { PaginationProps } from './Pagination'
+
+// Icons
+export {
+  InfoIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
+  EditIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  SearchIcon,
+  RefreshIcon,
+  SendIcon,
+  ExternalLinkIcon,
+  ExportIcon,
+  ClearIcon,
+  CloseIcon,
+  EllipsisIcon,
+  CircleIcon
+} from '../icons'
+