@popsure/dirty-swan 0.59.0-alpha → 0.59.0-beta-2

package/dist/lib/scss/public/borders.stories.tsx

@@ -0,0 +1,124 @@
+import classNames from "classnames";
+
+const borders = [
+  {
+    name: 'Strong Default',
+    className: 'border-strong-default',
+    variable: '$border-strong-default',
+    description: '1px solid neutral-400',
+  },
+  {
+    name: 'Strong Hover',
+    className: 'border-strong-hover',
+    variable: '$border-strong-hover',
+    description: '1px solid neutral-600',
+  },
+  {
+    name: 'Strong Active',
+    className: 'border-strong-active',
+    variable: '$border-strong-active',
+    description: '1px solid neutral-900',
+  },
+  {
+    name: 'Medium Default',
+    className: 'border-medium-default',
+    variable: '$border-medium-default',
+    description: '1px solid neutral-300',
+  },
+  {
+    name: 'Medium Hover',
+    className: 'border-medium-hover',
+    variable: '$border-medium-hover',
+    description: '1px solid neutral-500',
+  },
+  {
+    name: 'Medium Active',
+    className: 'border-medium-active',
+    variable: '$border-medium-active',
+    description: '1px solid neutral-800',
+  },
+  {
+    name: 'Soft Default',
+    className: 'border-soft-default',
+    variable: '$border-soft-default',
+    description: '1px solid neutral-200',
+  },
+  {
+    name: 'Soft Hover',
+    className: 'border-soft-hover',
+    variable: '$border-soft-hover',
+    description: '1px solid neutral-400',
+  },
+  {
+    name: 'Soft Active',
+    className: 'border-soft-active',
+    variable: '$border-soft-active',
+    description: '1px solid neutral-600',
+  },
+  {
+    name: 'Focus',
+    className: 'border-focus',
+    variable: '$border-focus',
+    description: '2px solid neutral-900',
+  },
+];
+
+export const Borders = () => (
+  <div className="bg-white">
+    <h2 className="p-h2 mb24">Border Tokens</h2>
+    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+      <thead>
+        <tr
+          style={{
+            height: '40px',
+            lineHeight: '40px',
+            textAlign: 'left',
+            borderBottom: '1px solid #e7e7ed',
+          }}
+        >
+          <th className="pl16 fw-bold">Preview</th>
+          <th className="pl16 fw-bold">Name</th>
+          <th className="pl16 fw-bold">CSS Class</th>
+          <th className="pl16 fw-bold">SCSS Variable</th>
+          <th className="pl16 fw-bold">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {borders.map((border) => (
+          <tr key={border.className} style={{ height: '80px' }}>
+            <td className="px24" style={{ verticalAlign: 'middle' }}>
+              <div
+                className={classNames('br8 bg-neutral-200', border.className)}
+                style={{ width: '64px', height: '64px' }}
+              />
+            </td>
+            <td className="p16" style={{ verticalAlign: 'middle' }}>
+              {border.name}
+            </td>
+            <td className="p16" style={{ verticalAlign: 'middle' }}>
+              {border.className}
+            </td>
+            <td className="p16" style={{ verticalAlign: 'middle' }}>
+              {border.variable}
+            </td>
+            <td className="p16" style={{ verticalAlign: 'middle' }}>
+              {border.description}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+export default {
+  title: 'CSS/Base',
+  component: Borders,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Border tokens for consistent border styling across the design system. Includes strong, medium, and soft variants with default, hover, active, and focus states.',
+      },
+    },
+  },
+};

package/dist/lib/scss/public/colors/default.scss

@@ -92,6 +92,7 @@ $colors: (
   'neutral-100': $ds-neutral-100,
   'neutral-300': $ds-neutral-300,
   'neutral-400': $ds-neutral-400,
+  'neutral-500': $ds-neutral-500,
   'neutral-600': $ds-neutral-600,
   'neutral-700': $ds-neutral-700,
   'neutral-800': $ds-neutral-800,

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

@@ -1,8 +1,8 @@
-$bs-xs: 0 2px 12px rgba($ds-neutral-900, 0.03);
-$bs-sm: 0 2px 20px 0 rgba($ds-neutral-900, 0.04);
-$bs-md: 0 2px 28px rgba($ds-neutral-900, 0.08);
-$bs-lg: 0 2px 32px rgba($ds-neutral-900, 0.1);
-$bs-xl: 0 2px 50px rgba($ds-neutral-900, 0.18);
+$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 {
   box-shadow: $bs-xs;

package/package.json

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

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

@@ -88,6 +88,7 @@ const Accordion = ({
               title={question}
               titleVariant="small"
               density='compact'
+              variant='transparent'
               icon={icon}
               classNames={{
                 icon: classnamesUtil(

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

@@ -65,8 +65,4 @@
   &:hover {
     outline: 0 solid transparent!important;
   }
-
-  &:focus-visible {
-    outline: 2px solid $ds-purple-600!important;
-  }
 }

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

@@ -37,7 +37,7 @@ const story = {
   args: {
     children: 'Click me',
     disabled: false,
-    variant: 'filledColor',
+    variant: 'filledBlack',
     loading: false,
     hideLabel: false,
     className: 'wmn3',
@@ -80,8 +80,8 @@ ButtonStory.storyName = "Button";
 export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
   <div>
     <h3 className='p-h3 mb24'>Filled variants</h3>
-    <div className='d-flex gap16 p24 bg-neutral-300 br8'>
-      {[ "filledColor", "filledGray", "filledWhite", "filledBlack"].map((variant) => (
+    <div className='d-flex gap16 p24 bg-neutral-100 br8'>
+      {[ "filledBlack", "filledGray", "filledWhite"].map((variant) => (
           <div key={variant}>
             <h4 className='p-h4 mb16'>
               {variant}
@@ -95,9 +95,9 @@ export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
     </div>
 
     <h3 className='p-h3 my24'>Text variants</h3>
-    <div className='d-flex gap16 p24 bg-neutral-300 br8'>
-      {["textColor", "textWhite"].map((variant, index) => (
-        <div key={variant} className={variant === "textWhite" ? "bg-purple-600 px32 br8" : ""}>
+    <div className='d-flex gap16 p24 bg-neutral-100 br8'>
+      {["textBlack", "textWhite"].map((variant, index) => (
+        <div key={variant} className={variant === "textWhite" ? "bg-neutral-800 px32 pb16 br8" : ""}>
           <h4 className={`p-h4 mb16 ${variant === "textWhite" ? "tc-white" : ''}`}>
             {variant}
           </h4>
@@ -110,23 +110,11 @@ export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
     </div>
 
     <h3 className='p-h3 my24'>Outline variants</h3>
-    <div className='d-flex gap16 p24 bg-purple-600 br8'>
-      <div>
-        <h4 className='p-h4 mb16 tc-white'>
-          outlineWhite
-        </h4>
-
-        <Button onClick={onClick} variant={'outlineWhite'}>
-          {children}
-        </Button>
-      </div>
-    </div>
-    
-    <h3 className='p-h3 my24'>State variants</h3>
-    <div className='d-flex gap16 p24 bg-neutral-300 br8'>
-      {["filledSuccess", "filledError"].map((variant) => (
-          <div key={variant}>
-            <h4 className='p-h4 mb16'>
+    <div className='d-flex gap16 p24 bg-neutral-100 br8'>
+      {["outlineGray", "outlineWhite"].map((variant, index) => (
+        <div key={variant} className={variant === "outlineWhite" ? "bg-neutral-800 px32 py16 br8" : "px32 py16"}>
+          <div>
+            <h4 className={`p-h4 mb16 ${variant === "outlineWhite" ? "tc-white" : ''}`}>
               {variant}
             </h4>
 
@@ -134,43 +122,20 @@ export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
               {children}
             </Button>
           </div>
+        </div>
       ))}
     </div>
-  </div>
-);
-
-export const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (
-  <div>
-    <div className='p24 bg-white br8'>
-      <h3 className='p-h3 mb16'>On white</h3>
-      <div className='d-flex gap16'>
-        {[ "filledColor", "filledGray", "textColor"].map((variant) => (
-          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>
-            {variant}
-          </Button>
-        ))}
-      </div>
-    </div>
-
-    <div className='p24 bg-neutral-100 br8'>
-      <h3 className='p-h3 mb16'>On grey</h3>
-      <div className='d-flex gap16'>
-        {[ "filledColor", "filledWhite", "textColor"].map((variant) => (
-          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>
-            {variant}
-          </Button>
-        ))}
-      </div>
-    </div>
+    
+    <h3 className='p-h3 my24'>State variants</h3>
+    <div className='d-flex gap16 p24 bg-neutral-100 br8'>
+      <div>
+        <h4 className='p-h4 mb16'>
+          filledError
+        </h4>
 
-    <div className='p24 bg-purple-600 br8'>
-      <h3 className='p-h3 mb16 tc-white'>On primary</h3>
-      <div className='d-flex gap16'>
-        {["filledWhite", "outlineWhite", "textWhite"].map((variant) => (
-          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>
-            {variant}
-          </Button>
-        ))}
+        <Button onClick={onClick} variant="filledError">
+          {children}
+        </Button>
       </div>
     </div>
   </div>

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

@@ -2,25 +2,23 @@ import classNames from 'classnames';
 import React, { ReactElement, ReactNode } from 'react';
 
 type ButtonVariant =
-  | 'filledColor'
+  | 'filledBlack'
   | 'filledGray'
   | 'filledWhite'
-  | 'filledBlack'
-  | 'textColor'
+  | 'textBlack'
   | 'textWhite'
+  | 'outlineGray'
   | 'outlineWhite'
-  | 'filledSuccess'
   | 'filledError';
 
 const buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {
-  filledColor: 'p-btn--primary',
+  filledBlack: 'p-btn--secondary-black',
   filledGray: 'p-btn--secondary-grey',
   filledWhite: 'p-btn--secondary-white',
-  filledBlack: 'p-btn--secondary-black',
-  textColor: 'p-btn--secondary',
+  textBlack: 'p-btn--text-black',
   textWhite: 'p-btn--secondary-inverted',
   outlineWhite: 'p-btn--outline-white',
-  filledSuccess: 'p-btn--success',
+  outlineGray: 'p-btn--outline-grey',
   filledError: 'p-btn--danger',
 };
 
@@ -55,7 +53,7 @@ const Button = React.forwardRef((
     className,
     loading = false,
     children,
-    variant = 'filledColor',
+    variant = 'filledBlack',
     leftIcon,
     rightIcon,
     hideLabel,

package/src/lib/components/cards/card/index.stories.tsx

@@ -2,7 +2,7 @@ import { Card, CardProps } from '.';
 import { illustrations } from '../../../util/images';
 import { Button } from '../../button';
 import { Badge } from '../../badge';
-import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';
+import { BasketballSportsIcon, CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';
 
 const story = {
   title: 'JSX/Cards/Card',
@@ -120,6 +120,65 @@ export const CardStory = ({
   </div>
 );
 
+export const CardVariants = ({ 
+  description,
+  onClick,
+  title,
+}: CardProps) => (
+  <div className='d-flex fd-column gap24 p24 bg-neutral-50'>
+    <div>
+      <h4 className='p-h4 mb16'>default</h4>
+      <Card
+        description={description}
+        icon={<BasketballSportsIcon size={24} />}
+        onClick={onClick}
+        title={title}
+        variant='default'
+      />
+    </div>
+    <div>
+      <h4 className='p-h4 mb16'>transparent</h4>
+      <Card
+        description={description}
+        icon={<BasketballSportsIcon size={24} />}
+        onClick={onClick}
+        title={title}
+        variant='transparent'
+      />
+    </div>
+    <div>
+      <h4 className='p-h4 mb16'>outline</h4>
+      <Card
+        description={description}
+        icon={<BasketballSportsIcon size={24} />}
+        onClick={onClick}
+        title={title}
+        variant='outline'
+      />
+    </div>
+    <div>
+      <h4 className='p-h4 mb16'>secondary</h4>
+      <Card
+        description={description}
+        icon={<BasketballSportsIcon size={24} />}
+        onClick={onClick}
+        title={title}
+        variant='secondary'
+      />
+    </div>
+    <div>
+      <h4 className='p-h4 mb16'>primary</h4>
+      <Card
+        description={description}
+        icon={<BasketballSportsIcon size={24} />}
+        onClick={onClick}
+        title={title}
+        variant='primary'
+      />
+    </div>
+  </div>
+);
+
 CardStory.storyName = "Card";
 
 export const CardAsOtherComponents = () => (

package/src/lib/components/cards/card/index.tsx

@@ -9,13 +9,15 @@ type CardDefaultAsType = typeof cardDefaultAs;
 type DensityType = 'balanced' | 'compact' | 'spacious';
 type TitleVariantType = 'small' | 'medium' | 'large';
 type VerticalAlignmentType = 'top' | 'center' | 'bottom';
+type CardVariant = 'default' | 'transparent' | 'outline' | 'secondary' | 'primary';
 
 type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
   as?: E;
   children?: ReactNode;
   classNames?: {
     buttonWrapper?: string;
-    wrapper?: string;
+    wrapper?: string
+    contentWrapper?: string;
     label?: string;
     title?: string;
     description?: string;
@@ -35,6 +37,7 @@ type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
   actionIcon?: ReactNode;
   showActionIcon?: boolean;
   verticalAlignment?: VerticalAlignmentType;
+  variant?: CardVariant
 } 
 
 export type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &
@@ -56,6 +59,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
   titleVariant = 'large',
   showActionIcon,
   verticalAlignment = 'center',
+  variant = 'default',
   ...rest
 }: CardProps<E>) => {
   const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
@@ -82,7 +86,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
       <div
         className={classNamesUtil(
           'd-flex fd-column jc-center w100 ta-left br8',
-          { 'bs-sm': dropShadow },
+          { 'bs-sm': dropShadow && variant === 'default' },
           {
             compact: 'p16',
             balanced: 'p24',
@@ -94,6 +98,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
             bottom: 'jc-end',
           }[verticalAlignment as VerticalAlignmentType],
           styles?.wrapper,
+          styles?.[`wrapper--${variant}`],
           classNames?.wrapper
         )}
       >
@@ -117,7 +122,12 @@ const Card = <E extends ElementType = CardDefaultAsType>({
           )}
 
           <div className="d-flex jc-between w100">
-            <div className="d-flex jc-center gap8 fd-column tc-neutral-900 w100">
+            <div
+              className={classNamesUtil(
+                classNames?.contentWrapper || '',
+                "d-flex jc-center gap8 fd-column tc-neutral-900 w100"
+              )}
+            >
               {label && (
                 <h4 className={classNamesUtil('p-p--small', classNames?.label)}>
                   {label}

package/src/lib/components/cards/card/style.module.scss

@@ -1,4 +1,32 @@
 @use '../../../scss/public/colors' as *;
+@use '../../../scss/private/borders/default' as *;
+
+.wrapper {
+  background-color: $ds-white;
+  border: 1px solid transparent;
+  transition: all 0.2s ease-in-out;
+
+  &--default {
+    background-color: $ds-white;
+  }
+
+  &--transparent {
+    background-color: transparent;
+  }
+
+  &--outline {
+    background-color: $ds-white;
+    border: $border-strong-default;
+  }
+
+  &--secondary {
+    background-color: $ds-purple-200;
+  }
+
+  &--primary {
+    background-color: $ds-orange-300;
+  }
+}
 
 .button {
   background-color: transparent;
@@ -7,25 +35,73 @@
   transition: all 0.2s ease-in-out;
   text-decoration: none;
   border-radius: 8px;
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
 
-  &:hover {
-    outline: 1px solid $ds-purple-600;
-    color: $ds-purple-600;
+  &:hover .wrapper {
+    &--default {
+      border: $border-strong-default;
+    }
+
+    &--transparent {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &--outline {
+      background-color: $ds-white;
+      border: $border-strong-active;
+    }
+
+    &--secondary {
+      background-color: $ds-purple-200;
+      border-color: $ds-purple-500;
+    }
+
+    &--primary {
+      background-color: $ds-orange-300;
+      border-color: $ds-orange-600;
+    }
   }
 
-  &:focus-visible {
-    outline: 2px solid $ds-purple-600;
-    color: $ds-purple-600;
+  &:focus .wrapper,
+  &:focus-visible .wrapper {
+    &--default {
+      border-color: $ds-neutral-900;
+      box-shadow: inset 0 0 0 1px $ds-neutral-900;
+    }
+
+    &--outline {
+      box-shadow: inset 0 0 0 1px $ds-neutral-900;
+      border-color: $ds-neutral-900;
+    }
+
+    &--transparent {
+      background-color: $ds-neutral-200;
+      box-shadow: none;
+    }
+
+    &--primary {
+      border-color: $ds-orange-700;
+      box-shadow: inset 0 0 0 1px $ds-orange-700;
+    }
+
+    &--secondary {
+      border-color: $ds-purple-700;
+      box-shadow: inset 0 0 0 1px $ds-purple-700;
+    }
+  }
+
+  &:focus-visible .wrapper {
+    border-color: $ds-neutral-900;
+    box-shadow: inset 0 0 0 1px $ds-neutral-900;
   }
-}
 
-.wrapper {
-  background-color: $ds-white;
 }
 
 .icon {
   margin-right: 12px;
-  color: $ds-purple-600;
+  color: $ds-neutral-900;
 
   &balanced {
     margin-right: 16px;
@@ -37,6 +113,7 @@
 }
 
 .actionIcon {
+  color: $ds-neutral-900;
   margin-left: 12px;
 
   &balanced {

package/src/lib/components/cards/cardButton/index.stories.tsx

@@ -28,8 +28,8 @@ const story = {
     },
   },
   args: {
-    title: 'Risky Sports',
-    description: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+    title: 'Label',
+    description: 'Honest, simple insurance',
     disabled: false,
     className: '',
     href: 'https://feather-insurance.com/',

package/src/lib/components/cards/cardButton/index.tsx

@@ -29,7 +29,9 @@ export const CardButton = ({
           className,
           { [styles.containerDisabled]: disabled }
         ),
-        description: 'tc-purple-600 p-p',
+        label: 'tc-neutral-700',
+        description: 'tc-neutral-900 p-p',
+        contentWrapper: styles.contentWrapper
       }}
       density='compact'
       label={title}
@@ -37,7 +39,7 @@ export const CardButton = ({
       actionIcon={
         <ChevronRightIcon
           size={20}
-          color={'purple-600'}
+          color={'neutral-900'}
           className={styles.chevronRight}
         />
       }

package/src/lib/components/cards/cardButton/style.module.scss

@@ -1,4 +1,8 @@
 .containerDisabled {
   pointer-events: none;
   opacity: 0.25;
+}
+
+.contentWrapper {
+  gap: 4px!important;
 }