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

package/src/lib/components/input/input.stories.tsx

@@ -21,7 +21,8 @@ export const InputStory = ({
   hideLabel,
   labelInsideInput,
   prefix,
-  error
+  error,
+  disabled
 }: InputProps) => {
   const [newValue, setValue] = useState(value);
 
@@ -41,6 +42,7 @@ export const InputStory = ({
       labelInsideInput={labelInsideInput}
       prefix={prefix}
       error={error}
+      disabled={disabled}
     />
   );
 };

package/src/lib/components/input/stories/config.ts

@@ -1,3 +1,5 @@
+import { isDisabled } from "@testing-library/user-event/dist/types/utils";
+
 const sharedConfig = {
   argTypes: {
     value: {
@@ -49,7 +51,8 @@ const sharedConfig = {
     labelInsideInput: false,
     prefix: '£',
     id: '1234567890',
-    error: ''
+    error: '',
+    disabled: false
   }
 } 
 

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

@@ -12,7 +12,11 @@
 
   color: var(--ds-neutral-600);
 
-  transition: 0.3s top;
+  transition: top 0.3s, color 0.3s;
+
+  &--with-value {
+    color: var(--ds-neutral-900);
+  }
 
   &--with-error {
     color: var(--ds-red-500);
@@ -38,15 +42,15 @@
 }
 
 .input:focus ~ .placeholder {
-  color: var(--ds-purple-600);
+  color: var(--ds-neutral-900);
 
   &--with-error {
     color: var(--ds-red-500);
   }
 }
 
-.input:focus ~ .prefix {
-  color: var(--ds-purple-600);
+input:focus ~ .prefix {
+  color: var(--ds-neutral-900);
 
   &--with-error {
     color: var(--ds-red-500);

package/src/lib/components/input/toggle/styles.module.scss

@@ -30,10 +30,10 @@
     width: 20px;
     left: 0;
     bottom: -4px;
-    background: var(--ds-neutral-600);
+    background: var(--ds-neutral-500);
     transition: 0.3s ease-in-out;
     transition-property: background-color, outline, transform;
-    outline-color: var(--ds-purple-500);
+    outline-color: var(--ds-neutral-500);
     border-radius: 50%;
   }
 }
@@ -43,11 +43,15 @@
 
   &:checked {
     & + .toggle {
-      background: var(--ds-purple-300);
+      background: var(--ds-purple-400);
     }
     + .toggle:before {
       background: var(--ds-purple-600);
     }
+
+    &:focus-visible ~ .toggle:before {
+      outline: 3px solid var(--ds-purple-500);
+    }
   }
 
   &:disabled + .toggle {
@@ -56,7 +60,7 @@
   }
 
   &:focus-visible ~ .toggle:before {
-    outline: 4px solid var(--ds-purple-500);
+    outline: 3px solid var(--ds-neutral-600);
   }
 
   &:checked + .toggle:before {

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/Table.module.scss

@@ -1,5 +1,6 @@
 
 @use '../../scss/public/grid' as *;
+@use '../../scss/public/colors' as *;
 
 .wrapper {
   position: relative;
@@ -22,6 +23,23 @@
   }
 }
 
+.cardButton {
+  div {
+    background-color: $ds-orange-50;
+  }
+
+  &:hover div {
+    border-color: transparent!important;
+    outline-color: transparent!important;
+    box-shadow: none!important;
+    background-color: $ds-orange-100!important;
+  }
+
+  &:focus-visible div {
+    background-color: $ds-orange-100!important;
+  }
+}
+
 .stickyHeader {
   display: flex;
   position: sticky;

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

@@ -178,9 +178,8 @@ const Table = ({
         <Card
           data-testid="show-hide-details"
           classNames={{
-            buttonWrapper: 'm8 mt32',
+            buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),
             title: 'd-flex gap8 ai-center jc-center fw-bold',
-            wrapper: 'bg-neutral-100',
           }}
           title={
             <>

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

@@ -14,13 +14,3 @@
 .description {
   word-break: break-word;
 }
-
-.bigWithUnderline {
-  position: relative;
-  display: flex;
-  line-height: 38px;
-  text-decoration: underline;
-  text-decoration-color: $ds-purple-600;
-  text-decoration-thickness: 4px;
-  text-underline-offset: 8px;
-}

package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx

@@ -11,7 +11,7 @@ import { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';
 import { TableInfoButton } from '../../../../comparisonTable';
 import { ModalFunction } from '../../../types';
 
-export type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
+export type FontVariant = 'NORMAL' | 'TITLE' | 'PRICE';
 
 const progressLookup: Record<string, number> = {
   '30%': 1,
@@ -101,7 +101,7 @@ export const BaseCell = ({
                 <SelectedIcon
                   aria-hidden="true"
                   key={value}
-                  color={value <= rating?.value ? 'purple-600' : 'neutral-400'}
+                  color={value <= rating?.value ? 'neutral-900' : 'neutral-400'}
                   className={styles.icon}
                   size={rating?.type === 'zap' ? 16 : 14}
                 />
@@ -117,7 +117,7 @@ export const BaseCell = ({
                   data-testid="table-cell-boolean-yes"
                   size={24}
                   aria-hidden
-                  color="purple-600"
+                  color="neutral-900"
                 />
               ) : (
                 <XIcon
@@ -145,20 +145,17 @@ export const BaseCell = ({
 
             {text && fontVariant === 'PRICE' && (
               <div
-                className="p-h1 p--serif tc-purple-600"
+                className="p-h1 p--serif tc-neutral-900"
                 data-testid="table-cell-content"
               >
                 {text}
               </div>
             )}
 
-            {text && fontVariant === 'BIG_WITH_UNDERLINE' && (
+            {text && fontVariant === 'TITLE' && (
               <h2
                 aria-hidden
-                className={classNames(
-                  'tc-grey-800 p-h2 p--serif',
-                  styles.bigWithUnderline
-                )}
+                className="tc-grey-800 p-h2 p--serif"
               >
                 {text}
               </h2>

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.module.scss

@@ -34,6 +34,5 @@
 
 .selected {
   transition: all 0.3 ease-in-out;
-  border: 2px solid $ds-purple-600;
-  background-color: $ds-purple-100;
+  border: 2px solid $ds-neutral-900;
 }

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx

@@ -48,7 +48,7 @@ export const ButtonCell = ({
         disabled={disabled}
       >
         {buttonCaption}
-        {price && <span className="p-p tc-purple-600">{price}</span>}
+        {price && <span className="p-p">{price}</span>}
       </Button>
     </div>
   );

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

@@ -60,7 +60,7 @@ const TableCell = React.memo(
             {...cellProps}
             fontVariant={
               isTopLeftCell
-                ? 'BIG_WITH_UNDERLINE'
+                ? 'TITLE'
                 : cellProps.fontVariant ?? 'NORMAL'
             }
           />

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

@@ -1,7 +1,26 @@
+@use "../../../../scss/public/colors" as *;
+
 .cardWrapper {
   height: 88px;
 }
 
+.cardButton {
+  div {
+    background-color: $ds-orange-50;
+  }
+
+  &:hover div {
+    border-color: transparent!important;
+    outline-color: transparent!important;
+    box-shadow: none!important;
+    background-color: $ds-orange-100!important;
+  }
+
+  &:focus-visible div {
+    background-color: $ds-orange-100!important;
+  }
+}
+
 .card {
   position: absolute;
   left: 0;

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

@@ -84,13 +84,15 @@ const TableContents = ({
                     aria-expanded={isExpanded ? 'true' : 'false'}
                     aria-hidden
                     classNames={{
-                      wrapper: 'bg-purple-100 pl16',
+                      wrapper: 'pl16',
+                      buttonWrapper: styles.cardButton,
                       icon: classNames(styles.cardIcon, 'tc-neutral-900'),
                     }}
                     dropShadow={false}
                     icon={renderedIcon}
                     title={section.title}
                     titleVariant="medium"
+                    variant="primary"
                     {...(collapsibleSections
                       ? {
                           onClick: () => handleToggleSection(index),

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

@@ -9,9 +9,13 @@
 }
 
 .controlButton {
-  border-radius: 50%!important;
   width: 32px;
-  height: 32px;
+  height: 100%;
   padding: 0;
   min-width: 32px;
-}
+
+  &Hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}

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

@@ -23,38 +23,51 @@ const TableControls = ({
     <div
       aria-hidden
       className={classNames(
-        'd-flex ai-center jc-between bg-white px8',
+        'd-flex ai-stretch jc-between bg-white px8',
         styles.stickyHeader
       )}
       style={{ top: `${stickyHeaderTopOffset}px` }}
     >
-      <Button
-        className={styles.controlButton}
-        disabled={activeSection <= 1}
-        hideLabel
-        leftIcon={<ChevronLeftIcon />}
-        onClick={() => navigateTable()}
-        type="button"
-        variant="filledGray"
-        data-testid="previous-section-button"
-      >
-        Previous section
-      </Button>
+      <div className='py24'>
+        <Button
+          className={classNames(
+            { [styles.controlButtonHidden]: activeSection <= 1 },
+            'br8',
+            styles.controlButton
+          )}
+          disabled={activeSection <= 1}
+          hideLabel
+          leftIcon={<ChevronLeftIcon />}
+          onClick={() => navigateTable()}
+          type="button"
+          variant="filledGray"
+          data-testid="previous-section-button"
+          style={{ height: '100%' }}
+        >
+          Previous section
+        </Button>
+      </div>
 
       {children}
 
-      <Button
-        className={styles.controlButton}
-        disabled={activeSection >= columnsLength - 1}
-        hideLabel
-        leftIcon={<ChevronRightIcon />}
-        onClick={() => navigateTable(true)}
-        type="button"
-        variant="filledGray"
-        data-testid="next-section-button"
-      >
-        Next section
-      </Button>
+      <div className='py24'>
+        <Button
+          className={classNames(
+            { [styles.controlButtonHidden]: activeSection >= columnsLength - 1 },
+            'br8',
+            styles.controlButton
+          )}
+          disabled={activeSection >= columnsLength - 1}
+          hideLabel
+          leftIcon={<ChevronRightIcon />}
+          onClick={() => navigateTable(true)}
+          type="button"
+          variant="filledGray"
+          data-testid="next-section-button"
+        >
+          Next section
+        </Button>
+      </div>
     </div>
   );
 };

package/src/lib/scss/index.scss

@@ -2,6 +2,7 @@
 
 @forward 'private/base';
 @forward 'private/components';
+@forward 'private/borders';
 
 @import 'public/colors';
 

package/src/lib/scss/private/base/_typography.scss

@@ -4,66 +4,31 @@
 @use '../../public/font' as *;
 
 @font-face {
-  font-family: 'Merriweather';
+  font-family: 'Mona Sans';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZVcf6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
+  src: url(https://github.githubassets.com/static/fonts/Mona-Sans-Medium.woff2) format('woff2');
+  font-feature-settings: "ss05" on;
 }
 
 @font-face {
-  font-family: 'Merriweather';
+  font-family: 'Mona Sans';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZXMf6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZV8f6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZVsf6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6hPvhPQ.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  src: url(https://github.githubassets.com/static/fonts/Mona-Sans-SemiBold.woff2) format('woff2');
+  font-feature-settings: "ss05" on;
 }
 
 body {
   font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
 }
 
 .p--serif {
-  font-family: 'Merriweather', serif;
+  font-family: 'Mona Sans', sans-serif;
+  font-feature-settings: "ss05" on;
 }
 
 .p-h1,
@@ -87,8 +52,8 @@ body {
 
   &--xl {
     @extend .p-h1;
-    font-size: 48px;
-    line-height: 58px;
+    font-size: 44px;
+    line-height: 56px;
 
     @include p-size-mobile {
       font-size: 32px;
@@ -136,8 +101,9 @@ body {
 
   &--small {
     @extend .p-p;
-    font-size: 12px;
+    font-size: 13px;
     line-height: 18px;
+    letter-spacing: 0.4px;
   }
 }
 
@@ -146,15 +112,18 @@ body {
 }
 
 .p-a {
-  color: $ds-purple-600;
-  text-decoration: none;
+  color: $ds-neutral-900;
+  text-decoration: underline;
+  text-underline-offset: 5px;
+  font-weight: $p-font-weight-bold;
 
   &:hover,
   &:focus {
-    color: $ds-purple-700;
+    color: $ds-neutral-700;
   }
 
   &:focus-visible {
+    color: $ds-neutral-900;
     outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;

package/src/lib/scss/private/borders/_index.scss

@@ -0,0 +1 @@
+@import 'default';