@popsure/dirty-swan 0.59.1 → 0.60.1

package/src/lib/components/badge/index.stories.tsx

@@ -18,12 +18,16 @@ const story = {
     variant: {
       description: 'Variant that defines the style of the Badge',
     },
+    showDot: {
+      description: 'Whether to show a dot indicator',
+    }
   },
   args: {
     children: 'Value',
     className: '',
     size: 'medium',
     variant: 'information',
+    showDot: false
   }
 };
  
@@ -32,11 +36,13 @@ export const BadgeStory = ({
   className,
   size,
   variant,
+  showDot,
 }: BadgeProps) => (
   <Badge
     className={className}
     size={size}
     variant={variant}
+    showDot={showDot}
   >
     {children}
   </Badge>
@@ -44,4 +50,63 @@ export const BadgeStory = ({
 
 BadgeStory.storyName = "Badge";
 
+const variants: BadgeProps['variant'][] = [
+  'white',
+  'neutral',
+  'neutralStrong',
+  'information',
+  'warning',
+  'primary',
+  'error',
+  'success',
+  'secondary',
+  'secondaryStrong',
+  'black',
+];
+
+export const Variants = () => (
+  <div className='d-flex fd-column gap16'>
+    {variants.map((variant) => (
+      <div key={variant} className='d-flex'>
+        <div className='ws3'>
+          <Badge variant={variant}>
+            {variant}
+          </Badge>
+        </div>
+        <div className='ws3 ml32'>
+          <Badge
+            variant={variant}
+            showDot
+          >
+            {variant}
+          </Badge>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+const sizes: BadgeProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
+
+export const Sizes = () => (
+  <div className='d-flex fd-column gap16'>
+    {sizes.map((size) => (
+      <div key={size} className='d-flex'>
+        <div className='ws3'>
+          <Badge size={size}>
+            {size}
+          </Badge>
+        </div>
+        <div className='ws3 ml32'>
+          <Badge size={size} showDot>
+            {size}
+          </Badge>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+BadgeStory.storyName = "Badge";
+
 export default story;

package/src/lib/components/badge/index.tsx

@@ -3,51 +3,55 @@ import classNames from 'classnames';
 import styles from './style.module.scss';
 
 type Variant = 
- | 'warning'
- | 'error'
- | 'success'
- | 'information'
- | 'neutral'
- | 'neutral200'
- | 'neutral300'
- | 'primary'
- | 'primary900';
+  | 'white'
+  | 'neutral'
+  | 'neutralStrong'
+  | 'information'
+  | 'warning'
+  | 'primary'
+  | 'error'
+  | 'success'
+  | 'black'
+  | 'secondary'
+  | 'secondaryStrong';
 
 export interface BadgeProps {
   className?: string;
   variant?: Variant;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
   children: ReactNode;
+  showDot?: boolean;
 }
 
-const getVariantClassNames = (variant: Variant) => ({
-  information: 'bg-blue-100',
-  neutral: 'bg-white',
-  neutral200: 'bg-neutral-100',
-  neutral300: 'bg-neutral-300',
-  warning: 'bg-yellow-200',
-  error: 'bg-red-100',
-  success: 'bg-green-100',
-  primary: 'bg-purple-300',
-  primary900: 'bg-purple-900 tc-white',
-}[variant])
-
 const Badge = ({
   className = '',
   size = 'medium',
   variant = 'information',
   children,
+  showDot = false
 }: BadgeProps) => (
   <div
     role="status" 
     className={classNames(
-      className, 
-      'px16 br8 d-inline-block ai-center fw-bold p-p', 
-      { 'p-p--small': size === 'small' },
+      className,
+      'br8 d-inline-flex ai-center fw-bold p-p',
+      styles.badge,
       styles[`badge--${size}`],
-      getVariantClassNames(variant)
+      styles[`badge--${variant}`],
+      {
+        'p-p--small': size === 'small' || size === 'xsmall',
+      }
     )}
   >
+    {showDot && (
+      <span
+        className={classNames(
+          styles.badgeDot,
+          styles[`badgeDot--${variant}`]
+        )}
+      />
+    )}
+
     {children}
   </div>
 );

package/src/lib/components/badge/style.module.scss

@@ -1,13 +1,125 @@
+@use '../../scss/public/colors' as *;
 
 .badge {
-  &--small,
+  border: 1px solid $ds-white;
+  position: relative;
+  gap: 6px;
+
+  &--xsmall {
+    padding: 4px 10px;
+  }
+  
+  &--small {
+    padding: 6px 12px;
+  }
+
   &--medium {
-    padding-bottom: 6px;
-    padding-top: 6px;
+    padding: 6px 16px;
   }
  
   &--large {
-    padding-bottom: 8px;
-    padding-top: 8px;
+    gap: 8px;
+    padding: 8px 16px;
+  }
+
+  // Variants
+  &--white {
+    background-color: $ds-white;
+    border-color: $ds-neutral-100;
+  }
+
+  &--neutral {
+    background-color: $ds-neutral-100;
+    border-color: $ds-neutral-200;
+  }
+
+  &--neutralStrong {
+    background-color: $ds-neutral-300;
+    border-color: $ds-neutral-300;
+  }
+
+  &--information {
+    background-color: $ds-blue-100;
+    border-color: $ds-blue-200;
+  }
+
+  &--warning,
+  &--primary {
+    background-color: $ds-orange-300;
+    border-color: $ds-orange-400;
+  }
+
+  &--error {
+    background-color: $ds-red-100;
+    border-color: $ds-red-200;
+  }
+
+  &--success {
+    background-color: $ds-green-100;
+    border-color: $ds-green-200;
+  }
+
+  &--black {
+    background-color: $ds-neutral-900;
+    border-color: $ds-neutral-900;
+    color: $ds-white;
+  }
+
+  &--secondary {
+    background-color: $ds-purple-200;
+    border-color: $ds-purple-300;
+  }
+
+  &--secondaryStrong {
+    background-color: $ds-purple-600;
+    border-color: $ds-purple-600;
+    color: $ds-white;
+  }
+}
+
+.badgeDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+
+  &--primary,
+  &--warning {
+    background-color: $ds-orange-700;
+  }
+  &--white {
+    background-color: $ds-neutral-500;
+  }
+
+  &--neutral {
+    background-color: $ds-neutral-600;
+  }
+
+  &--neutralStrong {
+    background-color: $ds-neutral-700;
+  }
+
+  &--information {
+    background-color: $ds-blue-700;
+  }
+
+  &--error {
+    background-color: $ds-red-700;
+  }
+
+  &--success {
+    background-color: $ds-green-700;
+  }
+
+  &--black {
+    background-color: $ds-white;
+  }
+
+  &--secondary {
+    background-color: $ds-purple-700;
+  }
+
+  &--secondaryStrong {
+    background-color: $ds-white;
   }
-}
+}

package/src/lib/components/table/Table.stories.tsx

@@ -266,6 +266,7 @@ export const TableStory = ({
   stickyHeaderTopOffset,
   textOverrides,
   title,
+  activeSection,
 }: TableProps) => {
   const [price, setPrice] = useState(999);
   return (
@@ -305,6 +306,7 @@ export const TableStory = ({
         stickyHeaderTopOffset={stickyHeaderTopOffset}
         textOverrides={textOverrides}
         title={title}
+        activeSection={activeSection}
       />
     </div>
   );

package/src/lib/components/table/Table.tsx

@@ -1,6 +1,6 @@
 import { TableCell } from './components/TableCell/TableCell';
 import { BottomOrRegularModal } from '../modal';
-import { ReactNode, useCallback, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '../icon';
 import { Card } from '../cards/card';
 
@@ -41,6 +41,7 @@ export interface TableProps {
   tableData: TableData;
   textOverrides?: TextOverrides;
   title: string;
+  activeSection?: number;
 }
 
 const defaultTextOverrides = {
@@ -63,6 +64,7 @@ const Table = ({
   tableData,
   textOverrides: definedTextOverrides,
   title,
+  activeSection: externalActiveSection
 }: TableProps) => {
   const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
   const isMobile = useMediaQuery('BELOW_MOBILE');
@@ -74,7 +76,7 @@ const Table = ({
 
   useScrollSync(headerRef, containerRef, !isMobile);
 
-  const { activeSection, navigateTable } = useTableNavigation({
+  const { activeSection, navigateTable, setActiveSection } = useTableNavigation({
     enabled: isMobile,
     containerRef,
     onSelectionChanged,
@@ -100,6 +102,12 @@ const Table = ({
     setInfoModalData({ body, title });
   }, []);
 
+  useEffect(() => {
+    if (externalActiveSection && externalActiveSection !== activeSection) {
+      setActiveSection(externalActiveSection - 1);
+    }
+  }, [externalActiveSection]);
+
   return (
     <div className={classNames(styles.wrapper, 'bg-white')}>
       {isMobile ? (

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 interface UseTableNavigationReturn {
   activeSection: number;
   navigateTable: (increase?: boolean) => void;
+  setActiveSection: (section: number) => void;
 }
 
 interface UseTableNavigationProps {
@@ -75,5 +76,6 @@ export const useTableNavigation = ({
   return {
     activeSection: activeSection + 1,
     navigateTable: handleScrollToSection,
+    setActiveSection,
   }
 }

package/dist/esm/useTableNavigation-f929fbc9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableNavigation-f929fbc9.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n  activeSection: number;\n  navigateTable: (increase?: boolean) => void;\n}\n\ninterface UseTableNavigationProps {\n  containerRef: React.RefObject<HTMLElement>,\n  enabled?: boolean,\n  onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n  enabled,\n  containerRef,\n  onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n  const [activeSection, setActiveSection] = useState(0);\n\n  const handleScrollToSection = (increase?: boolean) => {\n    if (!enabled) {\n      return;\n    }\n\n    setActiveSection((prevSection) => \n      prevSection + (increase ? 1 : -1)\n    );\n  };\n\n  const handleTableScroll = useCallback(() => {\n    if (!containerRef.current || !enabled) {\n      return;\n    }\n\n    const containerWidth = containerRef.current.getBoundingClientRect().width;\n    const scrollLeft = containerRef.current.scrollLeft * 1.1;\n    const cellWidth = containerWidth / 2;\n\n    setActiveSection(Math.floor(scrollLeft / cellWidth));\n   }, [activeSection, containerRef, enabled]);\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    container?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return container?.removeEventListener('scroll', handleTableScroll);\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    onSelectionChanged?.(activeSection + 1);\n\n    if (containerRef.current) {\n      const containerWidth = containerRef.current.getBoundingClientRect().width;\n      const cellWidth = containerWidth / 2;\n\n      containerRef.current.scroll({\n        top: 0,\n        left: cellWidth * activeSection,\n        behavior: 'smooth',\n      });\n    }\n  }, [enabled, activeSection]);\n\n  return {\n    activeSection: activeSection + 1,\n    navigateTable: handleScrollToSection,\n  }\n}"],"names":["debounce"],"mappings":";;;IAca,kBAAkB,GAAG,UAAC,EAIT;QAHxB,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,kBAAkB,wBAAA;IAEZ,IAAA,KAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,QAAA,EAAE,gBAAgB,QAAe,CAAC;IAEtD,IAAM,qBAAqB,GAAG,UAAC,QAAkB;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,gBAAgB,CAAC,UAAC,WAAW;YAC3B,OAAA,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SAAA,CAClC,CAAC;KACH,CAAC;IAEF,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACrC,OAAO;SACR;QAED,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,IAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,CAAC;QACzD,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC;QAErC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5C,IAAM,oBAAoB,GAAGA,eAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;IAE9D,SAAS,CAAC;QACR,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;YAC1D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;KACpE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,aAAa,GAAG,CAAC,CAAC,CAAC;QAExC,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1E,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC;YAErC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,SAAS,GAAG,aAAa;gBAC/B,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;KACF,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO;QACL,aAAa,EAAE,aAAa,GAAG,CAAC;QAChC,aAAa,EAAE,qBAAqB;KACrC,CAAA;AACH;;;;"}