@popsure/dirty-swan 0.28.2 → 0.28.3

package/dist/esm/index.d.ts

@@ -1,2 +1,2 @@
 export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, } from './lib';
-export type { TableHeader, DownloadStatus } from './lib';
+export type { DownloadStatus, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus } from './lib';

package/dist/esm/lib/components/comparisonTable/components/TableButton/index.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 interface Props {
+    children: ReactNode;
     onClick: () => void;
     className?: string;
 }

package/dist/esm/lib/components/multiDropzone/types.d.ts

@@ -19,7 +19,6 @@ export declare const IMAGE_FILES: FileType[];
 export interface UploadedFile {
     id: string;
     name: string;
-    type?: FileType;
     previewUrl?: string;
     progress: number;
     error?: string;

package/dist/esm/lib/index.d.ts

@@ -15,7 +15,6 @@ import AutoSuggestInput from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import SegmentedControl from './components/segmentedControl';
 import Markdown from './components/markdown';
-export type { FileType, MultiDropzoneProps, UploadedFile, UploadStatus };
 export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, };
-export type { TableHeader };
+export type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus };
 export type { DownloadStatus } from './models/download';

package/package.json

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

package/src/index.tsx

@@ -32,6 +32,13 @@ export {
   Markdown,
 } from './lib';
 
-export type { TableHeader, DownloadStatus } from './lib';
+export type {
+  DownloadStatus,
+  FileType,
+  MultiDropzoneProps,
+  TableHeader,
+  UploadedFile,
+  UploadStatus
+ } from './lib';
 
 ReactDOM.render(<App />, document.getElementById('root'));

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -112,12 +112,12 @@ h4.cell {
   }
 }
 
-.addon {
-  width: 100%;
+h4.addon {
   border-right: none;
-  max-width: 100vw;
+  max-width: calc(100vw - 64px);
+  width: 100vw;
 
   @include p-size-desktop {
-    max-width: 944px;
+    max-width: 976px;
   }
 }

package/src/lib/components/comparisonTable/components/TableButton/index.tsx

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
 import styles from './style.module.scss';
 
 interface Props {
+  children: ReactNode;
   onClick: () => void;
   className?: string;
 }
@@ -15,7 +17,9 @@ const TableButton: React.FC<Props> = ({
     data-testid="ds-table-button"
     onClick={onClick}
   >
-    {children}
+    <span>
+      {children}
+    </span>
   </button>
 );
 

package/src/lib/components/comparisonTable/components/TableButton/style.module.scss

@@ -2,17 +2,25 @@
 
 .button {
   background-color: transparent;
-  border-bottom: 2px dashed $ds-grey-600;
   color: $ds-grey-700;
   cursor: pointer;
+  margin: 2px 0;
   padding: 2px;
-  transition: 0.3s ease;
-  transition-property: color, border-color;
+  transition: color 0.3s ease;
+
+  span {
+    border-bottom: 2px dashed $ds-grey-600;
+    display: inline;
+    transition: border-color 0.3s ease;
+  }
 
   &:hover,
   &:focus {
-    border-color: $ds-primary-500;
     color: $ds-primary-500;
     outline-color: $ds-primary-500;
+    
+    span {
+      border-color: $ds-primary-500;
+    }
   }
 }

package/src/lib/components/comparisonTable/components/TableRating/index.tsx

@@ -28,7 +28,7 @@ const TableRating = (props: TableRatingProps) => {
   const SelectedIcon = getRatingIcon(type);
 
   return (
-    <div>
+    <>
       {VALID_VALUES.map((value) => (
         <SelectedIcon
           key={value}
@@ -38,7 +38,7 @@ const TableRating = (props: TableRatingProps) => {
           )}
         />
       ))}
-    </div>
+    </>
   );
 };
 

package/src/lib/components/comparisonTable/components/TableRowHeader/index.tsx

@@ -16,7 +16,7 @@ const TableRowHeader = ({ icon, label, subtitle, onClickInfo }: TableRowHeaderPr
         {!onClickInfo ? (
           <span>{label}</span>
         ) : (
-          <TableButton className="mr8" onClick={onClickInfo}>
+          <TableButton className="mr8 ta-left" onClick={onClickInfo}>
             {label}
           </TableButton>
         )}

package/src/lib/components/comparisonTable/index.stories.mdx

@@ -1,6 +1,14 @@
 import { Meta, Preview } from '@storybook/addon-docs/blocks';
 
-import { ComparisonTable, TableRating, TableRowHeader, TableButton, TableTrueFalse } from '.';
+import { CardButton } from '../cards';
+
+import {
+  ComparisonTable,
+  TableButton,
+  TableRating,
+  TableRowHeader,
+  TableTrueFalse,
+} from '.';
 
 <Meta title="JSX/Comparison Table" component={ComparisonTable} />
 
@@ -77,13 +85,18 @@ export const ComparisonTableWithData = () => {
           id: 4,
           key: 'imdb',
           label: 'IMDB rating',
+          render: (value) => (
+            <TableButton onClick={() => {}}>
+              {value}
+            </TableButton>
+          ),
         },
         {
           id: 3,
           key: 'rating',
-          label: <TableRowHeader label="Our Rating" onClickInfo={console.log} />,
+          label: <TableRowHeader label="Our rating of movies found online on IMDB lists" onClickInfo={() => {}} />,
           render: (value) => (
-            <TableButton className="jc-center" onClick={console.log}>
+            <TableButton onClick={() => {}}>
               <TableRating type="star" rating={value} />
             </TableButton>
           ),
@@ -91,7 +104,13 @@ export const ComparisonTableWithData = () => {
         {
           id: 5,
           key: 'recommended',
-          label: 'Recommended',
+          label: (
+            <TableRowHeader
+              label="Recommended"
+              subtitle="Our favourites"
+              onClickInfo={() => {}}
+            />
+          ),
           render: (value) => <TableRating type="zap" rating={value} />,
         },
         {
@@ -159,6 +178,16 @@ export const ComparisonTableWithData = () => {
               currency: 'EUR',
             }),
         },
+        {
+          addonId: 'addon-movies',
+          label: (
+            <CardButton
+              title="All Review"
+              description="Click here to read all reviews"
+              onClick={() => {}}
+            />
+          ),
+        },
       ],
     },
     {
@@ -297,13 +326,18 @@ export const ComparisonTableWithData = () => {
           id: 4,
           key: 'imdb',
           label: 'IMDB rating',
+          render: (value) => (
+            <TableButton onClick={() => {}}>
+              {value}
+            </TableButton>
+          ),
         },
         {
           id: 3,
           key: 'rating',
-          label: <TableRowHeader label="Our Rating" onClickInfo={console.log} />,
+          label: <TableRowHeader label="Our rating of movies found online on IMDB lists" onClickInfo={() => {}} />,
           render: (value) => (
-            <TableButton className="jc-center" onClick={console.log}>
+            <TableButton onClick={() => {}}>
               <TableRating type="star" rating={value} />
             </TableButton>
           ),
@@ -311,7 +345,13 @@ export const ComparisonTableWithData = () => {
         {
           id: 5,
           key: 'recommended',
-          label: 'Recommended',
+          label: (
+            <TableRowHeader
+              label="Recommended"
+              subtitle="Our favourites"
+              onClickInfo={() => {}}
+            />
+          ),
           render: (value) => <TableRating type="zap" rating={value} />,
         },
         {
@@ -330,6 +370,16 @@ export const ComparisonTableWithData = () => {
               currency: 'EUR',
             }),
         },
+        {
+          addonId: 'addon-movies',
+          label: (
+            <CardButton
+              title="All Review"
+              description="Click here to read all reviews"
+              onClick={() => {}}
+            />
+          ),
+        },
       ],
     },
     {

package/src/lib/components/multiDropzone/types.ts

@@ -24,7 +24,6 @@ export const IMAGE_FILES: FileType[] = ['heic', 'bmp', 'jpeg', 'jpg', 'png'];
 export interface UploadedFile {
   id: string;
   name: string;
-  type?: FileType;
   previewUrl?: string;
   progress: number;
   error?: string;

package/src/lib/index.tsx

@@ -39,13 +39,6 @@ import {
 import SegmentedControl from './components/segmentedControl';
 import Markdown from './components/markdown';
 
-export type {
-  FileType,
-  MultiDropzoneProps,
-  UploadedFile,
-  UploadStatus
-};
-
 export {
   DateSelector,
   SignaturePad,
@@ -77,6 +70,12 @@ export {
   Markdown,
 };
 
-export type { TableHeader };
+export type {
+  FileType,
+  MultiDropzoneProps,
+  TableHeader,
+  UploadedFile,
+  UploadStatus
+};
 
 export type { DownloadStatus } from './models/download';