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

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}
@@ -125,12 +125,12 @@ export const BottomOrRegularModalStory = ({
       >
         <div style={{ padding: '0 24px 24px 24px' }}>
           <div>{children}</div>
-          <button
-            className="p-btn--primary mt24 wmn3"
+          <Button
+            className="mt24 wmn3"
             onClick={() => setDisplay(false)}
           >
             Continue
-          </button>
+          </Button>
         </div>
       </BottomOrRegularModal>
     </>
@@ -159,21 +159,21 @@ 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>
-          <button
-            className="p-btn--primary mt24 wmn3"
+          <Button
+            className="mt24 wmn3"
             onClick={() => setDisplay(false)}
           >
             Continue
-          </button>
+          </Button>
         </div>
       </RegularModal>
     </>
@@ -202,21 +202,21 @@ 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>
-          <button
-            className="p-btn--primary mt24 wmn3"
+          <Button
+            className="mt24 wmn3"
             onClick={() => setDisplay(false)}
           >
             Continue
-          </button>
+          </Button>
         </div>
       </BottomModal>
     </>
@@ -242,22 +242,22 @@ 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>
 
-          <button
-            className="p-btn--primary mt24 wmn3"
+          <Button
+            className="mt24 wmn3"
             onClick={() => setDisplay(false)}
           >
             Continue
-          </button>
+          </Button>
         </div>
       </FullScreenModal>
     </>
@@ -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}
@@ -300,12 +300,12 @@ export const NonDismissibleModal = ({
       >
         <div style={{ padding: '0 24px 24px 24px' }}>
           <div>{children}</div>
-          <button
-            className="p-btn--primary mt24 wmn3"
+          <Button
+            className="mt24 wmn3"
             onClick={() => setDisplay(false)}
           >
             Continue
-          </button>
+          </Button>
         </div>
       </BottomOrRegularModal>
     </>
@@ -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 {
+      border-color: $ds-neutral-400;
+    }
+
+    &:focus {
+      border-color: $ds-neutral-500;
+    }
+
+    &: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;
       }
     }
   }