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

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/comparisonTable/components/TableArrows/style.module.scss

@@ -55,5 +55,6 @@
 }
 
 .noPointerEvents {
+  visibility: hidden;
   pointer-events: none;
 }

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

@@ -72,7 +72,7 @@ export const Calendar = ({
         onClick={() => setCalendarOpen(!isOpen)}
         data-testid="calendar-button"
         hideLabel
-        variant='textColor'
+        variant='filledBlack'
         leftIcon={<CalendarIcon />}
         type="button"
       >

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

@@ -42,7 +42,7 @@
 }
 
 .input:focus ~ .placeholder {
-  color: var(--ds-purple-600);
+  color: var(--ds-neutral-900);
 
   &--with-error {
     color: var(--ds-red-500);

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

@@ -106,12 +106,12 @@ export const BottomOrRegularModalStory = ({
 
   return (
     <>
-      <button
-        className="d-flex p-btn--primary wmn2"
+      <Button
+        className="wmn2"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
 
       <BottomOrRegularModal
         dismissible={dismissible}
@@ -159,12 +159,12 @@ export const RegularModalStory = ({
       to use it for Mobile only, you should check BottomModal instead. Want to
       use either Regular Modal or Bottom Modal based on the screen width? You
       can use Bottom or Regular modal.
-      <button
-        className="d-flex p-btn--primary wmn2 mt24"
+      <Button
+        className="wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
       <RegularModal title={title} isOpen={display} onClose={handleOnClose}>
         <div style={{ padding: '0 24px 24px 24px' }}>
           <div>{children}</div>
@@ -202,12 +202,12 @@ export const BottomModalStory = ({
       Desktop only, you should check Regular modal instead. Want to use either
       Regular Modal or Bottom Modal based on the screen width? You can use
       Bottom or Regular modal.
-      <button
-        className="d-flex p-btn--primary wmn2 mt24"
+      <Button
+        className="wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
       <BottomModal title={title} isOpen={display} onClose={handleOnClose}>
         <div style={{ padding: '0 24px 24px 24px' }}>
           <div>{children}</div>
@@ -242,12 +242,12 @@ export const FullScreenModalStory = ({
       Full screen modals are primary meant to be used as blocker screens. The
       modal will cover the entire screen and the user will be able to dismiss
       them using the top left "X" icon.
-      <button
-        className="d-flex p-btn--primary wmn2 mt24"
+      <Button
+        className="wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
       <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>
         <div style={{ padding: '0 24px 24px 24px' }}>
           <div>{children}</div>
@@ -286,12 +286,12 @@ export const NonDismissibleModal = ({
       the modal options.
       <strong>Warning:</strong> a modal with the dismissible prop can only be
       closed by changing the isOpen prop to false.
-      <button
-        className="d-flex p-btn--primary wmn2 mt24"
+      <Button
+        className="wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
       <BottomOrRegularModal
         dismissible={false}
         title={title}
@@ -326,12 +326,12 @@ export const ModalWithFooter = ({
 
   return (
     <>
-      <button
-        className="d-flex p-btn--primary wmn2"
+      <Button
+        className="wmn2"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
 
       <BottomOrRegularModal
         title={title}
@@ -340,7 +340,7 @@ export const ModalWithFooter = ({
         footer={
           <div className="d-flex fd-row gap8">
             <Button
-              variant="textColor"
+              variant="textBlack"
               className="w100"
               onClick={handleOnClose}
             >
@@ -374,12 +374,12 @@ export const ModalWithFooterAndScroll = ({
 
   return (
     <>
-      <button
-        className="d-flex p-btn--primary wmn2"
+      <Button
+        className="wmn2"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
-      </button>
+      </Button>
 
       <BottomOrRegularModal
         title={title}
@@ -388,7 +388,7 @@ export const ModalWithFooterAndScroll = ({
         footer={
           <div className="d-flex fd-row gap8">
             <Button
-              variant="textColor"
+              variant="textBlack"
               className="w100"
               onClick={handleOnClose}
             >

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

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-block;
 
-  background-color: var(--ds-primary-100);
+  background-color: var(--ds-purple-100);
   border-radius: 8px;
 
   padding: 0 8px;

package/src/lib/components/table/components/TableControls/TableControls.module.scss

@@ -13,4 +13,9 @@
   height: 100%;
   padding: 0;
   min-width: 32px;
-}
+
+  &Hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}

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

@@ -30,7 +30,11 @@ const TableControls = ({
     >
       <div className='py24'>
         <Button
-          className={classNames('br8', styles.controlButton)}
+          className={classNames(
+            { [styles.controlButtonHidden]: activeSection <= 1 },
+            'br8',
+            styles.controlButton
+          )}
           disabled={activeSection <= 1}
           hideLabel
           leftIcon={<ChevronLeftIcon />}
@@ -48,7 +52,11 @@ const TableControls = ({
 
       <div className='py24'>
         <Button
-          className={classNames('br8', styles.controlButton)}
+          className={classNames(
+            { [styles.controlButtonHidden]: activeSection >= columnsLength - 1 },
+            'br8',
+            styles.controlButton
+          )}
           disabled={activeSection >= columnsLength - 1}
           hideLabel
           leftIcon={<ChevronRightIcon />}

package/src/lib/scss/private/components/_buttons.scss

@@ -49,36 +49,35 @@
 
   &--primary {
     @extend .p-btn;
-    background-color: $ds-purple-600;
+    background-color: $ds-neutral-200;
     color: white;
 
     &:hover {
-      background-color: $ds-purple-700;
+      background-color: $ds-neutral-300;
 
       @include p-size-mobile {
-        background-color: $ds-purple-600;
+        background-color: $ds-neutral-300;
       }
     }
 
     &[disabled] {
-      background-color: $ds-purple-500;
+      background-color: $ds-neutral-200;
       opacity: 1;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-neutral-400;
     }
   }
 
   &--secondary {
     @extend .p-btn;
     background-color: transparent;
-    color: $ds-purple-600;
+    color: $ds-neutral-900;
 
     &:hover {
-      background-color: $ds-purple-300;
+      background-color: $ds-neutral-200;
 
       @include p-size-mobile {
         background-color: transparent;
@@ -86,36 +85,69 @@
     }
 
     &[disabled] {
-      color: $ds-purple-700;
+      color: $ds-neutral-900;
 
       &:hover {
         background-color: transparent;
       }
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-neutral-900;
     }
 
     &-grey {
       @extend .p-btn--secondary;
-      background-color: $ds-purple-100;
+      background-color: $ds-neutral-200;
+
+      &:hover {
+        background-color: $ds-neutral-300;
+      }
+
+      &:focus {
+        background-color: $ds-neutral-400;
+      }
+
+      &:focus-visible {
+        background-color: $ds-purple-100;
+      }
+        background-color: $ds-neutral-200;
+
+      &[disabled]:hover {
+        background-color: $ds-neutral-200;
+      }
+
     }
 
     &-white {
       @extend .p-btn--secondary;
       background-color: $ds-white;
+
+      &:hover {
+        background-color: $ds-neutral-200;
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 2px $ds-neutral-500;
+      }
     }
 
     &-inverted {
       @extend .p-btn--secondary;
       color: $ds-white;
 
-      &:hover,
+      &:hover {
+        background-color: $ds-neutral-700;
+      }
+
       &:focus {
-        background-color: $ds-purple-700;
+        background-color: $ds-neutral-600;
+      }
+
+      &:focus-visible {
+        background-color: transparent;
+        box-shadow: 0 0 0 2px $ds-white;
       }
     }
 
@@ -129,17 +161,16 @@
       }
 
       &[disabled] {
-        background-color: $ds-neutral-900;
-        color: white;
+        color: $ds-white;
+        background-color: rgba($ds-neutral-900, 50%);
 
         &:hover {
-          background-color: $ds-neutral-900;
+        background-color: rgba($ds-neutral-900, 50%);
         }
       }
 
-      &:focus {
-        box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-purple-900, $alpha: 0.5);
+      &:focus-visible {
+        box-shadow: 0 0 0 2px $ds-neutral-500;
       }
     }
   }
@@ -158,39 +189,14 @@
     }
 
     &[disabled] {
-      background-color: $ds-red-300;
-      opacity: 1;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
-    }
-  }
-
-  &--success {
-    @extend .p-btn;
-    background-color: $ds-green-500;
-    color: white;
-
-    &:hover {
-      background-color: $ds-green-700;
-
-      @include p-size-mobile {
-        background-color: $ds-green-500;
-      }
-    }
-
-    &[disabled] {
-      background-color: $ds-green-300;
+      background-color: $ds-red-500;
+      color: $ds-red-300;
       opacity: 1;
     }
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-red-700;
     }
   }
 
@@ -228,8 +234,8 @@
       background-color: transparent;
 
       &:hover {
-        background-color: $ds-purple-700;
-        border-color: $ds-purple-700;
+        background-color: transparent;
+        border-color: $ds-white;
       }
 
       &[disabled] {
@@ -239,37 +245,66 @@
 
       &:focus {
         outline: none;
-        box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
+        box-shadow: 0 0 0 1px $ds-white;
       }
     }
 
     &-grey {
       @extend .p-btn;
 
-      color: $ds-neutral-600;
+      color: $ds-neutral-900;
       background-color: transparent;
 
       border: 1px solid $ds-neutral-400;
 
       &:hover {
-        color: $ds-neutral-700;
-        border-color: $ds-neutral-600;
+        border-color: $ds-neutral-900;
       }
 
       &[disabled] {
-        color: $ds-neutral-600;
         border-color: $ds-neutral-400;
-        opacity: 0.5;
+        opacity: 0.7;
       }
 
       &:focus {
-        color: $ds-neutral-700;
-        border-color: $ds-neutral-700;
+        border-color: $ds-neutral-900;
+        box-shadow: 0 0 0 1px $ds-neutral-900;
+        color: $ds-neutral-900;
+        outline: 0;
       }
     }
   }
 
+  &--text-black {
+    @extend .p-btn;
+
+    color: $ds-purple-900;
+    background-color: transparent;
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: rgba($color: $ds-neutral-900, $alpha: 0.04)
+    }
+
+    &:focus {
+      background-color: rgba($color: $ds-neutral-900, $alpha: 0.08)
+    }
+
+    &:focus-visible {
+      background-color: transparent;
+      border: 1px solid $ds-neutral-900;
+      box-shadow: 0 0 0 1px $ds-neutral-900;
+      outline: 0;
+    }
+
+    &[disabled] {
+      opacity: 0.5;
+      background-color: transparent;
+      border: none;
+    }
+
+  }
+
   &--loading {
     color: transparent;
     cursor: default;
@@ -296,12 +331,19 @@
       animation: spinner-rotate 0.9s infinite;
     }
 
+
+    &:focus-visible {
+      box-shadow: none;
+      border-color: transparent;
+    }
+
     &.p-btn--secondary:not(.p-btn--secondary-black),
     &.p-btn--secondary-grey,
+    &.p-btn--text-black,
     &.p-btn--secondary-white {
       &::before {
-        border-color: rgba($color: $ds-purple-600, $alpha: 0.5);
-        border-left-color: $ds-purple-600;
+        border-color: rgba($color: $ds-neutral-900, $alpha: 0.5);
+        border-left-color: $ds-neutral-900;
       }
     }
   }