@popsure/dirty-swan 0.62.3 → 0.63.0

package/dist/lib/scss/public/demo.tsx

@@ -12,274 +12,254 @@ const colors = [
     hex: '#fff',
   },
   {
-    name: 'Purple 50',
-    code: 'purple-50',
-    hex: '#F9F9FF',
+    name: 'Primary 25',
+    code: 'primary-25',
+    hex: '#fcfcff',
   },
   {
-    name: 'Purple 100',
-    code: 'purple-100',
-    hex: '#F6F6FE',
+    name: 'Primary 50',
+    code: 'primary-50',
+    hex: '#f7f7ff',
   },
   {
-    name: 'Purple 200',
-    code: 'purple-200',
-    hex: '#EEEEFE',
+    name: 'Primary 100',
+    code: 'primary-100',
+    hex: '#ebebff',
   },
   {
-    name: 'Purple 300',
-    code: 'purple-300',
-    hex: '#E8E7FE',
+    name: 'Primary 300',
+    code: 'primary-300',
+    hex: '#b1b0f5',
   },
   {
-    name: 'Purple 400',
-    code: 'purple-400',
-    hex: '#D2CFFD',
+    name: 'Primary 500',
+    code: 'primary-500',
+    hex: '#8e8cee',
   },
   {
-    name: 'Purple 500',
-    code: 'purple-500',
-    hex: '#B8B4F3',
+    name: 'Primary 700',
+    code: 'primary-700',
+    hex: '#6160a2',
   },
   {
-    name: 'Purple 600',
-    code: 'purple-600',
-    hex: '#8883D8',
-  },
-  {
-    name: 'Purple 700',
-    code: 'purple-700',
-    hex: '#6A65AE',
-  },
-  {
-    name: 'Purple 800',
-    code: 'purple-800',
-    hex: '#484676',
-  },
-  {
-    name: 'Purple 900',
-    code: 'purple-900',
-    hex: '#32334B',
+    name: 'Primary 900',
+    code: 'primary-900',
+    hex: '#2e2e4c',
   },
   {
     name: 'Blue 100',
     code: 'blue-100',
-    hex: '#E5F0FF',
-  },
-  {
-    name: 'Blue 200',
-    code: 'blue-200',
-    hex: '#DAE8FC',
+    hex: '#e5f0ff',
   },
   {
     name: 'Blue 300',
     code: 'blue-300',
-    hex: '#B0CDF3',
+    hex: '#b0cdf3',
   },
   {
     name: 'Blue 500',
     code: 'blue-500',
-    hex: '#8BB4EA',
+    hex: '#8bb4ea',
   },
   {
     name: 'Blue 700',
     code: 'blue-700',
-    hex: '#5F7BA0',
+    hex: '#5f7ba0',
   },
   {
     name: 'Blue 900',
     code: 'blue-900',
-    hex: '#2D394A',
+    hex: '#2d394a',
   },
   {
-    name: 'Red 100',
-    code: 'red-100',
-    hex: '#FEE6E6',
+    name: 'Glacier 100',
+    code: 'glacier-100',
+    hex: '#e0f7fe',
+  },
+  {
+    name: 'Glacier 300',
+    code: 'glacier-300',
+    hex: '#aeddec',
+  },
+  {
+    name: 'Glacier 500',
+    code: 'glacier-500',
+    hex: '#8bcbdf',
+  },
+  {
+    name: 'Glacier 700',
+    code: 'glacier-700',
+    hex: '#5d8896',
+  },
+  {
+    name: 'Glacier 900',
+    code: 'glacier-900',
+    hex: '#2d4148',
   },
   {
-    name: 'Red 200',
-    code: 'red-200',
-    hex: '#FED7D7',
+    name: 'Red 100',
+    code: 'red-100',
+    hex: '#fedede',
   },
   {
     name: 'Red 300',
     code: 'red-300',
-    hex: '#FAA0A0',
+    hex: '#faa0a0',
   },
   {
     name: 'Red 500',
     code: 'red-500',
-    hex: '#E55454',
+    hex: '#e55454',
   },
   {
     name: 'Red 700',
     code: 'red-700',
-    hex: '#C64848',
+    hex: '#c64848',
   },
   {
     name: 'Red 900',
     code: 'red-900',
-    hex: '#4B2525',
+    hex: '#4b2525',
+  },
+  {
+    name: 'Pink 100',
+    code: 'pink-100',
+    hex: '#ffebf1',
+  },
+  {
+    name: 'Pink 300',
+    code: 'pink-300',
+    hex: '#ffb1cb',
+  },
+  {
+    name: 'Pink 500',
+    code: 'pink-500',
+    hex: '#f96092',
   },
   {
-    name: 'Neutral 50',
-    code: 'neutral-50',
-    hex: '#f9f9fd',
+    name: 'Pink 700',
+    code: 'pink-700',
+    hex: '#c0305f',
   },
   {
-    name: 'Neutral 100',
-    code: 'neutral-100',
-    hex: '#f7f7fd',
+    name: 'Pink 900',
+    code: 'pink-900',
+    hex: '#700024',
   },
   {
-    name: 'Neutral 200',
-    code: 'neutral-200',
-    hex: '#f2f2f8',
+    name: 'Grey 100',
+    code: 'grey-100',
+    hex: '#fafaff',
   },
   {
-    name: 'Neutral 300',
-    code: 'neutral-300',
-    hex: '#e7e7ed',
+    name: 'Grey 200',
+    code: 'grey-200',
+    hex: '#f5f6fb',
   },
   {
-    name: 'Neutral 400',
-    code: 'neutral-400',
-    hex: '#d2d2d9',
+    name: 'Grey 300',
+    code: 'grey-300',
+    hex: '#ededf2',
   },
   {
-    name: 'Neutral 500',
-    code: 'neutral-500',
-    hex: '#b8b8c0',
+    name: 'Grey 400',
+    code: 'grey-400',
+    hex: '#d2d2d8',
   },
   {
-    name: 'Neutral 600',
-    code: 'neutral-600',
-    hex: '#919199',
+    name: 'Grey 500',
+    code: 'grey-500',
+    hex: '#91919c',
   },
   {
-    name: 'Neutral 700',
-    code: 'neutral-700',
-    hex: '#696971',
+    name: 'Grey 600',
+    code: 'grey-600',
+    hex: '#696970',
   },
   {
-    name: 'Neutral 800',
-    code: 'neutral-800',
-    hex: '#3f3f47',
+    name: 'Grey 700',
+    code: 'grey-700',
+    hex: '#4c4c53',
   },
   {
-    name: 'Neutral 900',
-    code: 'neutral-900',
+    name: 'Grey 900',
+    code: 'grey-900',
     hex: '#26262e',
   },
   {
     name: 'Green 100',
     code: 'green-100',
-    hex: '#E6FAF1',
-  },
-  {
-    name: 'Green 200',
-    code: 'green-200',
-    hex: '#D5F6E7',
+    hex: '#e4ffe6',
   },
   {
     name: 'Green 300',
     code: 'green-300',
-    hex: '#AAEACC',
+    hex: '#c4f5c8',
   },
   {
     name: 'Green 500',
     code: 'green-500',
-    hex: '#85DCB4',
+    hex: '#84de8a',
   },
   {
     name: 'Green 700',
     code: 'green-700',
-    hex: '#599278',
+    hex: '#5b985f',
   },
   {
     name: 'Green 900',
     code: 'green-900',
-    hex: '#2B4639',
+    hex: '#354a2d',
   },
   {
-    name: 'Yellow 100',
-    code: 'yellow-100',
-    hex: '#FEFAEC',
+    name: 'Spearmint 100',
+    code: 'spearmint-100',
+    hex: '#e3fff2',
   },
   {
-    name: 'Yellow 200',
-    code: 'yellow-200',
-    hex: '#FCF3D1',
+    name: 'Spearmint 300',
+    code: 'spearmint-300',
+    hex: '#aaeacc',
   },
   {
-    name: 'Yellow 300',
-    code: 'yellow-300',
-    hex: '#F6E7AC',
+    name: 'Spearmint 500',
+    code: 'spearmint-500',
+    hex: '#85dcb4',
   },
   {
-    name: 'Yellow 500',
-    code: 'yellow-500',
-    hex: '#F0D26F',
-  },
-  {
-    name: 'Yellow 700',
-    code: 'yellow-700',
-    hex: '#C5A33E',
-  },
-  {
-    name: 'Yellow 900',
-    code: 'yellow-900',
-    hex: '#483D18',
-  },
-  {
-    name: 'Orange 50',
-    code: 'orange-50',
-    hex: '#FAF8F5',
-  },
-  {
-    name: 'Orange 100',
-    code: 'orange-100',
-    hex: '#FCF7EF',
-  },
-  {
-    name: 'Orange 200',
-    code: 'orange-200',
-    hex: '#FDF2E2',
-  },
-  {
-    name: 'Orange 300',
-    code: 'orange-300',
-    hex: '#FEECD3',
+    name: 'Spearmint 700',
+    code: 'spearmint-700',
+    hex: '#599278',
   },
   {
-    name: 'Orange 400',
-    code: 'orange-400',
-    hex: '#FCDAAB',
+    name: 'Spearmint 900',
+    code: 'spearmint-900',
+    hex: '#2b4639',
   },
   {
-    name: 'Orange 500',
-    code: 'orange-500',
-    hex: '#FFD08F',
+    name: 'Yellow 100',
+    code: 'yellow-100',
+    hex: '#fff8e3',
   },
   {
-    name: 'Orange 600',
-    code: 'orange-600',
-    hex: '#F2B873',
+    name: 'Yellow 300',
+    code: 'yellow-300',
+    hex: '#fae3a5',
   },
   {
-    name: 'Orange 700',
-    code: 'orange-700',
-    hex: '#C6824E',
+    name: 'Yellow 500',
+    code: 'yellow-500',
+    hex: '#f7ce5c',
   },
   {
-    name: 'Orange 800',
-    code: 'orange-800',
-    hex: '#7E4B2F',
+    name: 'Yellow 700',
+    code: 'yellow-700',
+    hex: '#cc9e21',
   },
   {
-    name: 'Orange 900',
-    code: 'orange-900',
-    hex: '#4C2D21',
+    name: 'Yellow 900',
+    code: 'yellow-900',
+    hex: '#4a3d10',
   },
 ];
 
@@ -328,31 +308,25 @@ export const BoxShadows = () => {
         className="d-flex ai-center jc-center ws2 border br8 bs-xs p-p"
         style={{ height: '136px' }}
       >
-        .bs-xs
+        .bx-xs
       </div>
       <div
         className="d-flex ai-center jc-center ws2 border br8 bs-sm p-p"
         style={{ height: '136px' }}
       >
-        .bs-sm
+        .bx-sm
       </div>
       <div
         className="d-flex ai-center jc-center ws2 border br8 bs-md p-p"
         style={{ height: '136px' }}
       >
-        .bs-md
-      </div>
-      <div
-        className="d-flex ai-center jc-center ws2 border br8 bs-lg p-p"
-        style={{ height: '136px' }}
-      >
-        .bs-lg
+        .bx-md
       </div>
       <div
         className="d-flex ai-center jc-center ws2 border br8 bs-lg p-p"
         style={{ height: '136px' }}
       >
-        .bs-xl
+        .bx-lg
       </div>
     </div>
   );

package/dist/lib/scss/public/font/_index.scss

@@ -1,2 +1,2 @@
-@use 'overrides';
-@forward 'default';
+@import 'overrides';
+@import 'default';

package/dist/lib/scss/public/font-weight.scss

@@ -1,4 +1,4 @@
-$p-font-weight-bold: 600;
+$p-font-weight-bold: 700;
 $p-font-weight-normal: 400;
 
 .fw-normal {

package/dist/lib/scss/public/grid.stories.mdx.broken

@@ -27,7 +27,7 @@ You can use the following helper within your sass code.
 
 ```sass
 // demo.scss
-@use '@popsure/dirty-swan/dist/grid';
+@import '@popsure/dirty-swan/dist/grid';
 
 
 .reponsive-element {

package/dist/lib/scss/public/shadows.scss

@@ -1,8 +1,7 @@
-$bs-xs: 0 2px 12px rgba(#26262e, 0.03);
-$bs-sm: 0 2px 20px 0 rgba(#26262e, 0.04);
-$bs-md: 0 2px 28px rgba(#26262e, 0.08);
-$bs-lg: 0 2px 32px rgba(#26262e, 0.1);
-$bs-xl: 0 2px 50px rgba(#26262e, 0.18);
+$bs-xs: 0px 4px 6px rgba(97, 96, 162, 0.01);
+$bs-sm: 0px 2px 20px 0px rgba(97, 96, 162, 0.06);
+$bs-md: 0px 2px 28px rgba(97, 96, 162, 0.12);
+$bs-l: 0px 2px 28px rgba(97, 96, 162, 0.15);
 
 .bs-xs {
   box-shadow: $bs-xs;
@@ -17,9 +16,5 @@ $bs-xl: 0 2px 50px rgba(#26262e, 0.18);
 }
 
 .bs-lg {
-  box-shadow: $bs-lg;
-}
-
-.bs-xl {
-  box-shadow: $bs-xl;
+  box-shadow: $bs-l;
 }

package/dist/lib/scss/third-party/_google_places.scss

@@ -11,12 +11,12 @@
   font-family: Lato, sans-serif;
 
   &:hover {
-    background-color: var(--ds-neutral-100);
+    background-color: var(--ds-grey-200);
   }
 }
 
 .pac-item-selected {
-  background-color: var(--ds-purple-300);
+  background-color: var(--ds-primary-100);
 }
 
 .pac-item {
@@ -47,7 +47,7 @@
 
 .pac-container {
   background-color: white;
-  border: 1px solid var(--ds-neutral-400);
+  border: 1px solid var(--ds-grey-400);
   box-shadow: none;
   border-radius: 8px;
   margin-top: 8px;

package/dist/lib/scss/third-party/_index.scss

@@ -1 +1 @@
-@use 'google_places';
+@import 'google_places';

package/dist/lib/scss/utils/_index.scss

@@ -1,7 +1,5 @@
-@use 'sass:string' as str;
-
 @function url-encoded-color($color) {
-  @return '%23' + str.slice('#{$color}', 2, -1);
+  @return '%23' + str-slice('#{$color}', 2, -1);
 }
 
 .sr-only {
@@ -14,4 +12,4 @@
   position: absolute;
   white-space: nowrap;
   width: 1px;
-}
+}

package/dist/shadows.scss

@@ -1 +1 @@
-@forward 'lib/scss/public/shadows';
+@import 'lib/scss/public/shadows';

package/package.json

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

package/src/index.tsx

@@ -59,6 +59,7 @@ export * from './lib/components/icon';
 
 export type {
   AccordionProps,
+  BadgeProps,
   DownloadStatus,
   InformationBoxProps,
   InputProps,

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx

@@ -1,7 +1,7 @@
 import AnimateHeight from 'react-animate-height';
 
 import styles from './AccordionItem.module.scss';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 const ChevronSVG = ({ className }: { className?: string }) => (
   <svg
@@ -27,19 +27,52 @@ export const AccordionItem = ({
   className = '',
   headerClassName = '',
   label,
+  isOpen: controlledIsOpen,
+  onToggle,
+  scrollOnOpen,
+  scrollTopOffset = 0,
 }: {
   children: React.ReactNode | string;
   className?: string;
   headerClassName?: string;
   label: React.ReactNode;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  scrollOnOpen?: boolean;
+  scrollTopOffset?: number;
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+  const userToggled = useRef(false);
+
+  const isControlled = controlledIsOpen !== undefined && onToggle !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+
   const handleClick = () => {
-    setIsOpen(!isOpen);
+    userToggled.current = true;
+    if (isControlled) {
+      onToggle();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
+  };
+
+  const handleAnimationEnd = () => {
+    if (userToggled.current && isOpen && scrollOnOpen && sectionRef.current) {
+      userToggled.current = false;
+      const top =
+        sectionRef.current.getBoundingClientRect().top +
+        window.scrollY -
+        scrollTopOffset;
+      window.scrollTo({ top, behavior: 'smooth' });
+    }
   };
 
   return (
-    <section className={`d-flex fd-column ${styles.container} ${className}`}>
+    <section
+      ref={sectionRef}
+      className={`d-flex fd-column ${styles.container} ${className}`}
+    >
       <button
         className={`d-flex ai-center jc-between ${styles.headerButton} ${headerClassName}`}
         onClick={handleClick}
@@ -58,7 +91,11 @@ export const AccordionItem = ({
       </button>
       {/* Min height is 0.1 so that the scroll position is correctly synced across accordion items but is not actually shown.
       If set to 0, react-animate-height will set display to "none" which means scrolling is not synced. */}
-      <AnimateHeight duration={300} height={isOpen ? 'auto' : 0.1}>
+      <AnimateHeight
+        duration={300}
+        height={isOpen ? 'auto' : 0.1}
+        onHeightAnimationEnd={handleAnimationEnd}
+      >
         {children}
       </AnimateHeight>
     </section>

package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts

@@ -11,7 +11,6 @@ export const useComparisonTable = ({
   const [showMore, setShowMore] = useState<boolean>(false);
   const [headerWidth, setHeaderWidth] = useState(1400);
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
-  const [selectedSection, setSelectedSection] = useState('');
   const [headerId, setHeaderId] = useState('');
   const headerRef = useRef<HTMLDivElement | null>(null);
   const contentContainerRef = useRef<HTMLDivElement | null>(null);
@@ -140,8 +139,6 @@ export const useComparisonTable = ({
     headerWidth,
     headerId,
     contentContainerRef,
-    selectedSection,
-    setSelectedSection,
     selectedTabIndex,
     setSelectedTabIndex,
     headerRefCallbackRef,