@popsure/dirty-swan 0.58.6 → 0.59.0-alpha

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LogoColor } from './LogoColor';
+import { LogoWhite } from './LogoWhite';
+import { LogoBlack } from './LogoBlack';
+import { LogoOrangeBox } from './LogoOrangeBox';
+import { LogoInvertedColor } from './LogoInvertedColor';
+import { LogoInverted } from './LogoInverted';
+import { LogoPositiveColor } from './LogoPositiveColor';
+import { LogoPositiveBlack } from './LogoPositiveBlack';
+
+export default {
+  title: 'JSX/Logo',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const StandardLogos = () => (
+  <div className='d-flex gap24 ai-center fd-wrap'>
+    <div className='bg-neutral-200 br8 p16 ta-center'>
+      <LogoColor width={100} />
+      <p className='p-p mt16'>LogoColor</p>
+    </div>
+    <div className='bg-neutral-200 br8 p16 ta-center'>
+      <LogoBlack width={100} />
+      <p className='p-p mt16'>LogoBlack</p>
+    </div>
+    <div className='bg-neutral-900 br8 p16 ta-center'>
+      <LogoWhite width={100} />
+      <p className='p-p tc-white mt16'>LogoWhite</p>
+    </div>
+    <div className='bg-neutral-200 br8 p16 ta-center'>
+      <LogoOrangeBox width={100} />
+      <p className='p-p mt16'>LogoOrangeBox</p>
+    </div>
+  </div>
+);
+
+export const HorizontalLogos = () => (
+  <div className='d-flex gap24 ai-center fd-wrap'>
+    <div className='ta-center br8 p16 bg-neutral-200'>
+      <LogoPositiveColor width={150} />
+      <p className='p-p mt16'>LogoPositiveColor</p>
+    </div>
+    <div className='ta-center br8 p16 bg-neutral-200'>
+      <LogoPositiveBlack width={150} />
+      <p className='p-p mt16'>LogoPositiveBlack</p>
+    </div>
+    <div className='ta-center br8 p16 bg-neutral-900'>
+      <LogoInvertedColor width={150} />
+      <p className='p-p mt16 tc-white'>LogoInvertedColor</p>
+    </div>
+    <div className='ta-center br8 p16 bg-neutral-900'>
+      <LogoInverted width={150} />
+      <p className='p-p mt16 tc-white'>LogoInverted</p>
+    </div>
+  </div>
+);
+
+export const Sizes = () => (
+  <div className='d-flex gap24 ai-center fd-wrap'>
+    <div className='ta-center'>
+      <LogoColor width={64} />
+      <p className='p-p'>64px</p>
+    </div>
+    <div className='ta-center'>
+      <LogoColor width={128} />
+      <p className='p-p'>128px</p>
+    </div>
+    <div className='ta-center'>
+      <LogoColor width={256} />
+      <p className='p-p'>256px</p>
+    </div>
+  </div>
+);

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

@@ -110,7 +110,7 @@ const InnerModal = ({
                   hideLabel
                   leftIcon={
                     <XIcon
-                      color="grey-700"
+                      color="neutral-800"
                       className={classNames?.closeButtonIcon}
                     />
                   }

package/src/lib/components/modal/genericModal/style.module.scss

@@ -58,8 +58,8 @@
   background:
     linear-gradient($ds-white 30%, $ds-white),
     linear-gradient($ds-white, $ds-white 70%),
-    linear-gradient($ds-grey-300 30%, $ds-grey-300),
-    linear-gradient($ds-grey-300, $ds-grey-300 70%);
+    linear-gradient($ds-neutral-300 30%, $ds-neutral-300),
+    linear-gradient($ds-neutral-300, $ds-neutral-300 70%);
   background-repeat: no-repeat;
   background-size: 100% 1px;
   background-attachment: local, local, scroll, scroll;
@@ -68,5 +68,5 @@
 .footer {
   position: sticky;
   bottom: 0;
-  border-top: 1px solid $ds-grey-300;
+  border-top: 1px solid $ds-neutral-300;
 }

package/src/lib/components/multiDropzone/UploadFileCell/index.tsx

@@ -35,8 +35,8 @@ const UploadFileCell: React.FC<Props> = ({
   const hasError = uploadStatus === 'ERROR';
 
   const mapFileIconColor: { [k in UploadStatus]: Color } = {
-    UPLOADING: 'purple-500',
-    COMPLETE: 'grey-500',
+    UPLOADING: 'purple-600',
+    COMPLETE: 'neutral-600',
     ERROR: 'red-500',
   };
 
@@ -104,7 +104,7 @@ const UploadFileCell: React.FC<Props> = ({
                 variant="filledWhite"
                 className={classnames('mr16', styles.button)}
                 leftIcon={
-                  <EyeVisionIcon noMargin color={'grey-500'} size={24} />
+                  <EyeVisionIcon noMargin color={'neutral-600'} size={24} />
                 }
               >
                 Preview file
@@ -119,7 +119,7 @@ const UploadFileCell: React.FC<Props> = ({
                 className={styles.button}
                 leftIcon={
                   <Trash2Icon
-                    color={hasError ? 'red-500' : 'grey-500'}
+                    color={hasError ? 'red-500' : 'neutral-600'}
                     size={24}
                     noMargin
                   />

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -8,7 +8,7 @@
   min-height: 64px;
   padding: 8px 16px;
 
-  border: 1px solid $ds-grey-400;
+  border: 1px solid $ds-neutral-400;
   border-radius: 8px;
   background-color: white;
 
@@ -43,13 +43,13 @@
 }
 
 .progress-bar {
-  background-color: $ds-grey-200;
+  background-color: $ds-neutral-100;
   border-radius: 10px;
   height: 4px;
 }
 
 .progress-bar-filler {
-  background-color: $ds-primary-500;
+  background-color: $ds-purple-600;
   border-radius: 10px;
   height: 4px;
   position: absolute;
@@ -75,7 +75,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid $ds-grey-900;
+    outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;
   }

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

@@ -123,7 +123,7 @@ const MultiDropzone = ({
         <UploadCloudIcon
           className={isCondensed ? styles.img : ''}
           size={isCondensed ? 24 : 64}
-          color={'purple-500'}
+          color={'purple-600'}
         />
         <div
           className={`p-h4 mt8 d-block c-pointer ${
@@ -135,7 +135,7 @@ const MultiDropzone = ({
               'Please wait while uploading file...'
             : instructionsText}
         </div>
-        <div className="p-p--small tc-grey-500">
+        <div className="p-p--small tc-neutral-600">
           {textOverrides?.supportsText || placeholder}
         </div>
       </div>

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

@@ -6,20 +6,20 @@
 }
 
 .dropzoneContainer {
-  border: 1px dashed var(--ds-primary-500);
+  border: 1px dashed var(--ds-purple-600);
   padding: 32px 0;
   background-color: white;
 
   transition: all 0.6s ease-in-out;
 
   &:focus-visible {
-    outline: 2px solid $ds-grey-900;
+    outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;
   }
 
   &:hover {
-    background-color: var(--ds-primary-100);
+    background-color: var(--ds-purple-300);
     transition: 0.5s ease;
   }
 }

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

@@ -63,7 +63,7 @@ const SegmentedControl = ({
                 {typeof value === 'string' ? (
                   <div
                     className={`p-h4 ta-center ${
-                      selectedIndex === index ? '' : 'tc-primary-500'
+                      selectedIndex === index ? '' : 'tc-purple-600'
                     }`}
                   >
                     {value}
@@ -72,7 +72,7 @@ const SegmentedControl = ({
                   <>
                     <div
                       className={`p-h4 ta-center ${
-                        selectedIndex === index ? '' : 'tc-primary-500'
+                        selectedIndex === index ? '' : 'tc-purple-600'
                       }`}
                     >
                       {value.title}
@@ -80,8 +80,8 @@ const SegmentedControl = ({
                     <div
                       className={`p-p--small ta-center ${
                         selectedIndex === index
-                          ? 'tc-grey-500'
-                          : 'tc-primary-500'
+                          ? 'tc-neutral-600'
+                          : 'tc-purple-600'
                       }`}
                     >
                       {value.subtitle}

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

@@ -22,7 +22,7 @@
   padding-right: 16px;
 
   &:focus {
-    outline-color: var(--ds-primary-500);
+    outline-color: var(--ds-purple-600);
     outline-offset: 2px;
   }
 }

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

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  background-color: var(--ds-grey-200);
+  background-color: var(--ds-neutral-100);
   border-radius: 8px;
   height: 272px;
 }
@@ -19,7 +19,7 @@
   left: 72px;
   bottom: 32px;
 
-  background-color: var(--ds-grey-400);
+  background-color: var(--ds-neutral-400);
 
   border-radius: 1px;
 }
@@ -31,7 +31,7 @@
   right: 16px;
   bottom: 32px;
 
-  color: var(--ds-primary-500);
+  color: var(--ds-purple-600);
   cursor: pointer;
 
   border: none;
@@ -42,7 +42,7 @@
   background-color: transparent;
 
   &:hover {
-    color: var(--ds-primary-700);
+    color: var(--ds-purple-700);
   }
 
   &:before {
@@ -65,7 +65,7 @@
   }
 
   &[disabled] {
-    color: var(--ds-grey-500);
+    color: var(--ds-neutral-600);
   }
 }
 
@@ -86,5 +86,5 @@
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
 
-  background-color: var(--ds-grey-500);
+  background-color: var(--ds-neutral-600);
 }

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

@@ -220,6 +220,9 @@ const story = {
     hideColumns: {
       subContent: 'This property allows to hide defined columns by index.',
     },
+    hideRows: {
+      subContent: 'This property allows to hide selected rows by index.',
+    },
     modalContentRenderer: {
       subContent: 'This property allows to render custom modal content.',
     },
@@ -250,6 +253,7 @@ const story = {
       hideDetails: 'Hide details',
     },
     hideColumns: [],
+    hideRows: [],
   },
 };
 
@@ -258,6 +262,7 @@ export const TableStory = ({
   tableData,
   hideColumns,
   hideDetails,
+  hideRows,
   stickyHeaderTopOffset,
   textOverrides,
   title,
@@ -296,6 +301,7 @@ export const TableStory = ({
         tableData={tableData}
         hideColumns={hideColumns}
         hideDetails={hideDetails}
+        hideRows={hideRows}
         stickyHeaderTopOffset={stickyHeaderTopOffset}
         textOverrides={textOverrides}
         title={title}

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

@@ -32,6 +32,7 @@ export interface TableProps {
   collapsibleSections?: boolean;
   hideColumns?: number[];
   hideDetails?: boolean;
+  hideRows?: number[];
   imageComponent?: (args: any) => JSX.Element;
   modalContentRenderer?: (content: ReactNode) => ReactNode;
   onModalOpen?: ModalFunction;
@@ -53,6 +54,7 @@ const Table = ({
   collapsibleSections,
   hideColumns = [],
   hideDetails,
+  hideRows = [],
   imageComponent,
   modalContentRenderer,
   onModalOpen,
@@ -145,6 +147,7 @@ const Table = ({
               cellReplacements={cellReplacements}
               className={className}
               hideColumns={hideColumns}
+              hideRows={hideRows}
               openModal={handleOpenModal}
               tableCellRows={[tableData?.[0]?.rows?.[0]]}
               title={title}
@@ -162,6 +165,7 @@ const Table = ({
           collapsibleSections={collapsibleSections}
           hideColumns={hideColumns}
           hideDetails={hideDetails}
+          hideRows={hideRows}
           isMobile={isMobile}
           shouldHideDetails={shouldHideDetails}
           openModal={handleOpenModal}
@@ -176,7 +180,7 @@ const Table = ({
           classNames={{
             buttonWrapper: 'm8 mt32',
             title: 'd-flex gap8 ai-center jc-center fw-bold',
-            wrapper: 'bg-grey-200',
+            wrapper: 'bg-neutral-100',
           }}
           title={
             <>

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

@@ -20,7 +20,7 @@
   display: flex;
   line-height: 38px;
   text-decoration: underline;
-  text-decoration-color: $ds-primary-500;
+  text-decoration-color: $ds-purple-600;
   text-decoration-thickness: 4px;
   text-underline-offset: 8px;
 }

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

@@ -101,7 +101,7 @@ export const BaseCell = ({
                 <SelectedIcon
                   aria-hidden="true"
                   key={value}
-                  color={value <= rating?.value ? 'primary-500' : 'grey-400'}
+                  color={value <= rating?.value ? 'purple-600' : '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="primary-500"
+                  color="purple-600"
                 />
               ) : (
                 <XIcon
@@ -125,7 +125,7 @@ export const BaseCell = ({
                   data-testid="table-cell-boolean-no"
                   size={24}
                   aria-hidden
-                  color="grey-400"
+                  color="neutral-400"
                 />
               )}
             </span>
@@ -145,7 +145,7 @@ export const BaseCell = ({
 
             {text && fontVariant === 'PRICE' && (
               <div
-                className="p-h1 p--serif tc-primary-500"
+                className="p-h1 p--serif tc-purple-600"
                 data-testid="table-cell-content"
               >
                 {text}
@@ -183,7 +183,7 @@ export const BaseCell = ({
           <div
             className={classNames(
               styles.description,
-              'd-flex p-p--small tc-grey-500',
+              'd-flex p-p--small tc-neutral-600',
               alignClassName
             )}
           >

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

@@ -1,9 +1,9 @@
 @use "../../../../../../scss/public/colors" as *;
 
-$defaultColor: $ds-purple-100;
-$oneOrTwoColor: $ds-grey-500;
+$defaultColor: $ds-purple-300;
+$oneOrTwoColor: $ds-neutral-600;
 $threeOrFourColor: $ds-blue-300;
-$allFilledColor: $ds-purple-500;
+$allFilledColor: $ds-purple-600;
 
 .progressBar {
   margin-bottom: 4px;

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

@@ -2,20 +2,20 @@
 @use "../../../../../scss/public/colors" as *;
 
 .buttonCell {
-  color: $ds-grey-900;
-  border: 1px solid $ds-grey-400;
+  color: $ds-neutral-900;
+  border: 1px solid $ds-neutral-400;
 
   transition: all 0.3s ease-in-out;
 
   &:disabled {
     border: none;
-    background-color: $ds-grey-200;
-    color: $ds-grey-900;
+    background-color: $ds-neutral-100;
+    color: $ds-neutral-900;
     opacity: 1;
     cursor: default;
 
     &:hover {
-      background-color: $ds-grey-200;
+      background-color: $ds-neutral-100;
     }
   }
 
@@ -34,6 +34,6 @@
 
 .selected {
   transition: all 0.3 ease-in-out;
-  border: 2px solid $ds-purple-500;
-  background-color: $ds-purple-50;
+  border: 2px solid $ds-purple-600;
+  background-color: $ds-purple-100;
 }

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-500">{price}</span>}
+        {price && <span className="p-p tc-purple-600">{price}</span>}
       </Button>
     </div>
   );

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

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 
 import styles from './CTACell.module.scss';
 import { IconRenderer } from '../../IconRenderer/IconRenderer';
+import { Button } from '../../../../button';
 
 export type CTACellProps = {
   title: ReactNode;
@@ -16,6 +17,7 @@ export type CTACellProps = {
   className?: string;
   dataTestId?: string;
   dataCy?: string;
+  onClick?: () => void;
 };
 
 export const CTACell = ({
@@ -30,6 +32,7 @@ export const CTACell = ({
   className,
   dataCy,
   dataTestId,
+  onClick,
 }: CTACellProps) => {
   const renderedIcon = (
     <IconRenderer icon={icon} imageComponent={imageComponent} />
@@ -45,22 +48,25 @@ export const CTACell = ({
         {renderedIcon}
         <p className="p-h3">
           {title}
-          {price && <span className="tc-purple-500"> {price}</span>}
+          {price && <span className="tc-purple-600"> {price}</span>}
         </p>
       </div>
 
-      <a
+      <Button
+        {...onClick ? { onClick } : {
+          as: 'a',
+          href: href,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }}
         className={classNames('mt16 w100 wmx3', {
           'p-btn--primary': !grey,
           'p-btn--secondary-grey': grey,
           [styles.narrow]: narrow,
         })}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
       >
         {buttonCaption}
-      </a>
+      </Button>
     </div>
   );
 };

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

@@ -34,7 +34,7 @@
     bottom: 0;
     right: 0;
     width: 1px;
-    background-color: $ds-grey-200;
+    background-color: $ds-neutral-100;
   }
 }