@popsure/dirty-swan 0.59.0 → 0.60.0

package/dist/esm/components/table/Table.js

@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { i as isBaseCell, T as TableSection } from '../../TableSection-b3d158d2.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-65e88f87.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/CheckThick.js';

package/dist/esm/components/table/Table.stories.js

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-b3d158d2.js';
+import '../../TableSection-65e88f87.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/Table.test.js

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-b3d158d2.js';
+import '../../TableSection-65e88f87.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../../../../index-6ea95111.js';
 import { s as styleInject } from '../../../../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".MiniProgressBar-module_progressBar__2K07F {\n  margin-bottom: 4px;\n}\n.MiniProgressBar-module_progressBar__2K07F rect {\n  fill: #E8E7FE;\n}\n\n.MiniProgressBar-module_filledBars1__ZhQbV rect:first-child {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars2__2lH_z rect:nth-child(-n+2) {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars3__1OKUj rect:nth-child(-n+3) {\n  fill: #B0CDF3;\n}\n\n.MiniProgressBar-module_filledBars4__T9kuj rect:nth-child(-n+4) {\n  fill: #B0CDF3;\n}\n\n.MiniProgressBar-module_filledBars5__WxVpb rect {\n  fill: #8883D8;\n}";
+var css_248z = ".MiniProgressBar-module_progressBar__2K07F {\n  margin-top: 4px;\n}\n.MiniProgressBar-module_progressBar__2K07F rect {\n  fill: #f2f2f8;\n}\n\n.MiniProgressBar-module_filledBars1__ZhQbV rect:first-child {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars2__2lH_z rect:nth-child(-n+2) {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars3__1OKUj rect:nth-child(-n+3) {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars4__T9kuj rect:nth-child(-n+4) {\n  fill: #696971;\n}\n\n.MiniProgressBar-module_filledBars5__WxVpb rect {\n  fill: #26262e;\n}";
 var styles = {"progressBar":"MiniProgressBar-module_progressBar__2K07F","filledBars1":"MiniProgressBar-module_filledBars1__ZhQbV","filledBars2":"MiniProgressBar-module_filledBars2__2lH_z","filledBars3":"MiniProgressBar-module_filledBars3__1OKUj","filledBars4":"MiniProgressBar-module_filledBars4__T9kuj","filledBars5":"MiniProgressBar-module_filledBars5__WxVpb"};
 styleInject(css_248z);
 

package/dist/esm/components/table/components/TableContents/TableContents.js

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-b3d158d2.js';
+import { T as TableSection } from '../../../../TableSection-65e88f87.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-b3d158d2.js';
+import '../../../../TableSection-65e88f87.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-b3d158d2.js';
+export { T as TableSection } from '../../../../TableSection-65e88f87.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../useMediaQuery-1a3a2432.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
-import { T as TableSection } from '../../../../TableSection-b3d158d2.js';
+import { T as TableSection } from '../../../../TableSection-65e88f87.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

package/dist/esm/index.js

@@ -32,7 +32,7 @@ export { Accordion } from './components/accordion/index.js';
 export { Table } from './components/table/Table.js';
 import { useCallback, useEffect } from 'react';
 export { u as useMediaQuery } from './useMediaQuery-1a3a2432.js';
-export { u as useOnClickOutside } from './Calendar-5ad3eccf.js';
+export { u as useOnClickOutside } from './Calendar-0f4bf3c1.js';
 export { LogoColor } from './components/logo/LogoColor.js';
 export { LogoWhite } from './components/logo/LogoWhite.js';
 export { LogoBlack } from './components/logo/LogoBlack.js';
@@ -466,7 +466,7 @@ import './components/table/components/IconRenderer/IconRenderer.js';
 import './components/table/components/TableCell/CardCell/CardCell.js';
 import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './components/table/components/TableContents/TableContents.js';
-import './TableSection-b3d158d2.js';
+import './TableSection-65e88f87.js';
 import './components/table/components/TableContents/Collapsible.js';
 import './useTableNavigation-f929fbc9.js';
 import './components/table/components/TableControls/TableControls.js';

package/dist/esm/lib/components/badge/index.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-type Variant = 'warning' | 'error' | 'success' | 'information' | 'neutral' | 'neutral200' | 'neutral300' | 'primary' | 'primary900';
+type Variant = '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;
 }
-declare const Badge: ({ className, size, variant, children, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, variant, children, showDot }: BadgeProps) => JSX.Element;
 export { Badge };

package/dist/esm/lib/components/badge/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { BadgeProps } from '.';
 declare const story: {
     title: string;
-    component: ({ className, size, variant, children, }: BadgeProps) => JSX.Element;
+    component: ({ className, size, variant, children, showDot }: BadgeProps) => JSX.Element;
     argTypes: {
         children: {
             control: string;
@@ -17,16 +17,22 @@ declare const story: {
         variant: {
             description: string;
         };
+        showDot: {
+            description: string;
+        };
     };
     args: {
         children: string;
         className: string;
         size: string;
         variant: string;
+        showDot: boolean;
     };
 };
 export declare const BadgeStory: {
-    ({ children, className, size, variant, }: BadgeProps): JSX.Element;
+    ({ children, className, size, variant, showDot, }: BadgeProps): JSX.Element;
     storyName: string;
 };
+export declare const Variants: () => JSX.Element;
+export declare const Sizes: () => JSX.Element;
 export default story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

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

@@ -41,24 +41,22 @@
 
 .buttonWrapper {
   background-color: transparent!important;
-  color: $ds-purple-600;
+  color: $ds-neutral-900;
   outline-offset: -4px;
 
   &Default {
     outline-offset: 0;
   }
 
-  &:hover,
-  &:focus-visible {
-    background: $ds-purple-100;
-
+  &:focus-visible,
+  &:hover {
     .icon {
-      color: $ds-purple-600!important;
+      color: $ds-neutral-900!important;
     }
 
     .question,
     .chevron{
-      color: $ds-purple-600;
+      color: $ds-neutral-900;
     }
   }
 

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/cards/card/style.module.scss

@@ -1,7 +1,7 @@
 @use '../../../scss/public/colors' as *;
 @use '../../../scss/private/borders/default' as *;
 
-.wrapper {
+@mixin wrapper-base-styles {
   background-color: $ds-white;
   border: 1px solid transparent;
   transition: all 0.2s ease-in-out;
@@ -32,6 +32,10 @@
   }
 }
 
+.wrapper {
+  @include wrapper-base-styles;
+}
+
 .button {
   background-color: transparent;
   color: $ds-neutral-900;
@@ -110,6 +114,13 @@
       box-shadow: inset 0 0 0 1px $ds-purple-600;
     }
   }
+
+  @media (pointer: coarse) {
+    &:hover .wrapper,
+    &:active .wrapper {
+      @include wrapper-base-styles;
+    }
+  }
 }
 
 .smallPadding {

package/src/lib/components/dateSelector/components/Calendar.tsx

@@ -72,11 +72,10 @@ export const Calendar = ({
         onClick={() => setCalendarOpen(!isOpen)}
         data-testid="calendar-button"
         hideLabel
-        variant='filledBlack'
-        leftIcon={<CalendarIcon />}
+        variant='textBlack'
         type="button"
       >
-        Select date
+        <CalendarIcon size={24} />
       </Button>
 
       {isOpen && (

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

@@ -233,7 +233,7 @@ export const DateSelector = ({
 
   return (
     <div>
-      <div className="d-flex ai-center">
+      <div className="d-flex">
         <div className={classNames(styles.container, "d-flex gap8")}>
           <div className={"d-flex gap8 jc-between"}>
             <Input {...getInputProps('day', 0)} />

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

@@ -29,7 +29,7 @@ const InformationBox = ({
     error: 'red-500',
     success: 'green-500',
     information: 'blue-500',
-    neutral: 'purple-600',
+    neutral: 'neutral-900',
   };
 
   return (

package/src/lib/components/modal/genericModal/index.tsx

@@ -143,7 +143,7 @@ const InnerModal = ({
                   styles.footer
                 )}
               >
-                <div className="p24 pt16">{footer}</div>
+                <div className="p24 pt16 pb32">{footer}</div>
               </div>
             )}
           </div>

package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.module.scss

@@ -1,12 +1,14 @@
 @use "../../../../../../scss/public/colors" as *;
 
-$defaultColor: $ds-purple-300;
-$oneOrTwoColor: $ds-neutral-600;
-$threeOrFourColor: $ds-blue-300;
-$allFilledColor: $ds-purple-600;
+$defaultColor: $ds-neutral-200;
+$oneColor: $ds-neutral-600;
+$twoColor: $ds-neutral-600;
+$threeColor: $ds-neutral-600;
+$fourColor: $ds-neutral-700;
+$allFilledColor: $ds-neutral-900;
 
 .progressBar {
-  margin-bottom: 4px;
+  margin-top: 4px;
 
   rect {
     fill: $defaultColor;
@@ -15,25 +17,25 @@ $allFilledColor: $ds-purple-600;
 
 .filledBars1 {
   rect:first-child {
-    fill: $oneOrTwoColor;
+    fill: $oneColor;
   }
 }
 
 .filledBars2 {
   rect:nth-child(-n + 2) {
-    fill: $oneOrTwoColor;
+    fill: $twoColor;
   }
 }
 
 .filledBars3 {
   rect:nth-child(-n + 3) {
-    fill: $threeOrFourColor;
+    fill: $threeColor;
   }
 }
 
 .filledBars4 {
   rect:nth-child(-n + 4) {
-    fill: $threeOrFourColor;
+    fill: $fourColor;
   }
 }