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

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