@popsure/dirty-swan 0.51.3 → 0.53.0

package/src/lib/components/cards/card/index.tsx

@@ -67,7 +67,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
     <Tag
       className={classNamesUtil(
         classNames?.buttonWrapper,
-        ' d-flex w100 br8 ai-stretch',
+        'd-flex w100 ai-stretch',
         {
           'c-pointer': propsWithActionIcon,
           [styles.button]: propsWithActionIcon
@@ -81,7 +81,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
     >
       <div
         className={classNamesUtil(
-          'd-flex fd-column br8 bg-white w100 ta-left',
+          'd-flex fd-column jc-center w100 ta-left',
           { 'bs-sm': dropShadow },
           {
             compact: 'p16',
@@ -93,6 +93,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
             center: 'jc-center',
             bottom: 'jc-end',
           }[verticalAlignment as VerticalAlignmentType],
+          styles?.wrapper,
           classNames?.wrapper
         )}
       >
@@ -118,13 +119,13 @@ const Card = <E extends ElementType = CardDefaultAsType>({
           <div className="d-flex jc-between w100">
             <div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
               {label && (
-                <h3 className={classNamesUtil('p-p--small', classNames?.label)}>
+                <h4 className={classNamesUtil('p-p--small', classNames?.label)}>
                   {label}
-                </h3>
+                </h4>
               )}
 
               {title && (
-                <h2
+                <h3
                   className={classNamesUtil(
                     classNames?.title,
                     {
@@ -135,7 +136,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
                   )}
                 >
                   {title}
-                </h2>
+                </h3>
               )}
 
               {description && (

package/src/lib/components/cards/card/style.module.scss

@@ -6,6 +6,7 @@
   outline: 1px solid transparent;
   transition: all 0.2s ease-in-out;
   text-decoration: none;
+  border-radius: 8px;
 
   &:hover {
     outline: 1px solid $ds-primary-500;
@@ -18,6 +19,10 @@
   }
 }
 
+.wrapper {
+  background-color: $ds-white;
+}
+
 .icon {
   margin-right: 12px;
 

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

@@ -0,0 +1,86 @@
+import { on } from 'events';
+import Chip, { ChipProps } from '.';
+
+import featherLogo from '../cards/icons/feather-logo.svg';
+import { useState } from 'react';
+
+const story = {
+  title: 'JSX/Chip',
+  component: Chip,
+  argTypes: {
+    value: {
+      description: 'Value that is displayed inside the Chip',
+    },
+    onRemove: {
+      description: 'Function that is called when the remove button is clicked',
+      table: {
+        category: 'Callbacks'
+      },
+    },
+    className: {
+      description: 'Class name for the most parent element',
+    },
+  },
+  args: {
+    value: {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    className: '',
+  },
+  parameters: {
+    componentSubtitle: 'Chip component displays text and image (optional) of given values.'
+  }
+};
+ 
+export const ChipStory = ({
+  onRemove,
+  value,
+  className,
+}: ChipProps) => (
+  <Chip
+    onRemove={onRemove}
+    value={value}
+    className={className}
+  />
+);
+
+ChipStory.storyName = "Chip";
+
+export const MultipleChips = () => {
+  const values = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  const [selectedValues, setSelectedValues] = useState(values);
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      {selectedValues.map((value) => (
+        <Chip
+          value={value}
+          onRemove={(value) => {
+            const newValues = [...selectedValues].filter(
+              (selectedValue) => selectedValue.value !== value.value
+            );
+            setSelectedValues(newValues);
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default story;

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

@@ -3,15 +3,17 @@ import { XIcon } from '../icon/icons';
 
 import styles from './style.module.scss';
 
+export interface ChipProps {
+  value: Option;
+  onRemove: (value: Option) => void;
+  className?: string;
+}
+
 export default ({
   className,
   value,
   onRemove,
-}: {
-  value: Option;
-  onRemove: (value: Option) => void;
-  className?: string;
-}) => (
+}: ChipProps) => (
   <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>
     {value.leftIcon && (
       <img

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

@@ -0,0 +1,360 @@
+import { ComparisonTable, ComparisonTableProps, TableButton, TableRating, TableRowHeader, TableTrueFalse } from '.';
+import { CardButton } from '../cards';
+
+const headers = [
+  {
+    id: 1,
+    default: true,
+    cells: [
+      {
+        id: 1,
+        key: 'name',
+        label: 'Films',
+        render: (value: string) => (
+          <TableButton onClick={() => {}}>{value}</TableButton>
+        ),
+      },
+      {
+        id: 2,
+        key: 'country',
+        label: 'Country',
+      },
+      {
+        id: 4,
+        key: 'imdb',
+        label: 'IMDB rating',
+        render: (value: string) => (
+          <TableButton onClick={() => {}}>{value}</TableButton>
+        ),
+      },
+      {
+        id: 3,
+        key: 'rating',
+        label: (
+          <TableRowHeader
+            label="Our rating of movies found online on IMDB lists"
+            onClickInfo={() => {}}
+          />
+        ),
+        render: (value: number) => (
+          <TableButton onClick={() => {}}>
+            <TableRating type="star" rating={value} />
+          </TableButton>
+        ),
+      },
+      {
+        id: 5,
+        key: 'recommended',
+        label: (
+          <TableRowHeader
+            label="Recommended"
+            subtitle="Our favourites"
+            onClickInfo={() => {}}
+          />
+        ),
+        render: (value: number) => <TableRating type="zap" rating={value} />,
+      },
+      {
+        id: 5,
+        key: 'familyFriendly',
+        label: 'Family friendly',
+        render: (value: boolean) => <TableTrueFalse value={value} />,
+      },
+      {
+        id: 6,
+        key: 'boxOffice',
+        label: 'Box office',
+        render: (value: number) =>
+          value.toLocaleString('de-DE', {
+            style: 'currency',
+            currency: 'EUR',
+          }),
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'SUBSECTION',
+    cells: [
+      {
+        id: 1,
+        key: 'name',
+        label: 'Films',
+      },
+      {
+        id: 2,
+        key: 'country',
+        label: 'Country',
+      },
+      {
+        id: 4,
+        key: 'imdb',
+        label: 'IMDB rating',
+      },
+      {
+        id: 3,
+        key: 'rating',
+        label: 'Our rating',
+        render: (value: number) => <TableRating type="star" rating={value} />,
+      },
+      {
+        id: 5,
+        key: 'recommended',
+        label: 'Recommended',
+        render: (value: number) => <TableRating type="zap" rating={value} />,
+      },
+      {
+        id: 5,
+        key: 'familyFriendly',
+        label: 'Family friendly',
+        render: (value: boolean) => <TableTrueFalse value={value} />,
+      },
+      {
+        id: 6,
+        key: 'boxOffice',
+        label: 'Box office',
+        render: (value: number) =>
+          value.toLocaleString('de-DE', {
+            style: 'currency',
+            currency: 'EUR',
+          }),
+      },
+      {
+        addonId: 'addon-movies',
+        label: (
+          <CardButton
+            title="All Review"
+            description="Click here to read all reviews"
+            onClick={() => {}}
+          />
+        ),
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: 'SUBSECTION 2',
+    cells: [
+      {
+        id: 1,
+        key: 'name',
+        label: 'Films',
+      },
+      {
+        id: 2,
+        key: 'country',
+        label: 'Country',
+      },
+      {
+        id: 4,
+        key: 'imdb',
+        label: 'IMDB rating',
+      },
+      {
+        id: 3,
+        key: 'rating',
+        label: 'Our rating',
+        render: (value: number) => <TableRating type="star" rating={value} />,
+      },
+      {
+        id: 5,
+        key: 'recommended',
+        label: 'Recommended',
+        render: (value: number) => <TableRating type="zap" rating={value} />,
+      },
+      {
+        id: 5,
+        key: 'familyFriendly',
+        label: 'Family friendly',
+        render: (value: boolean) => <TableTrueFalse value={value} />,
+      },
+      {
+        id: 6,
+        key: 'boxOffice',
+        label: 'Box office',
+        render: (value: number) =>
+          value.toLocaleString('de-DE', {
+            style: 'currency',
+            currency: 'EUR',
+          }),
+      },
+    ],
+  },
+];
+
+const data = [
+  {
+    id: 1,
+    name: 'Pulp Fiction',
+    country: 'United States',
+    year: '1994',
+    rating: 3,
+    imdb: 8.9,
+    recommended: 3,
+    familyFriendly: false,
+    boxOffice: 213928762,
+  },
+  {
+    id: 2,
+    name: 'Parasite',
+    country: 'South Korea',
+    year: '2019',
+    rating: 2,
+    imdb: 8.6,
+    recommended: 3,
+    familyFriendly: false,
+    boxOffice: 355475245,
+  },
+  {
+    id: 3,
+    name: 'Spirited Away',
+    country: 'Japan',
+    year: '2001',
+    rating: 3,
+    imdb: 8.6,
+    recommended: 3,
+    familyFriendly: true,
+    boxOffice: 258908054,
+  },
+];
+
+const story = {
+  title: 'JSX/ComparisonTable',
+  component: ComparisonTable,
+  argTypes: {
+   headers: {
+     description: 'The structure of the table',
+    },
+    data: {
+      description: 'The title text that needs to be displayed',
+    },
+    hideDetails: {
+      description: 'Hide table groups that do not have the `default` attribute',
+    },
+    hideDetailsCaption: {
+      description: 'Caption of the button to hide the details',
+    },
+    showDetailsCaption: {
+      description: 'Caption of the button to show the details',
+    },
+    hideScrollBars: {
+      description: 'Hide scroll bars',
+    },
+
+    hideScrollBarsMobile: {
+      description: 'Hide scroll bars on mobile only',
+    },
+    collapsibleSections: {
+      description: 'Make table groups with a label collapsible',
+    },
+    cellWidth: {
+      description: 'Width of a table content cell',
+    },
+    firstColumnWidth: {
+      description: 'Width of the first column of the table',
+    },
+    stickyHeaderTopOffset: {
+      description: 'Y-offset of the sticky header row',
+    },
+
+    growContent: {
+      description: 'Makes the content area grow to fill the available space',
+    },
+    classNameOverrides: {
+      description: '"className" props to be passed down to various internal components',
+    },
+    onSelectionChanged: {
+      description: 'Callback to be called when the selected tab index changes on mobile',
+      table: {
+        category: 'Callbacks'
+      }
+    },
+  },
+  args: {
+    data,
+    headers,
+    hideDetails: false,
+    hideDetailsCaption: 'Hide details',
+    showDetailsCaption: 'Show details',
+    hideScrollBars: false,
+    hideScrollBarsMobile: false,
+    collapsibleSections: false,
+    cellWidth: undefined,
+    firstColumnWidth: undefined,
+    stickyHeaderTopOffset: 0,
+    growContent: false,
+    classNameOverrides: {
+      header: '',
+      container: '',
+      cell: '',
+      headerCell: '',
+      collapsibleSection: '',
+      section: '',
+      hideDetailsButton: '',
+    }
+  },
+  parameters: {
+    componentSubtitle: 'The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.',
+  },
+};
+
+interface Data {
+  id: number;
+  name: string;
+  country: string;
+  year: string;
+  rating: number;
+  imdb: number;
+  recommended: number;
+  familyFriendly: boolean;
+  boxOffice: number;
+}
+
+export const ComparisonTableStory = ({
+  data,
+  headers,
+  collapsibleSections,
+  hideDetails,
+  classNameOverrides,
+  hideDetailsCaption,
+  showDetailsCaption,
+  hideScrollBars,
+  hideScrollBarsMobile,
+  cellWidth,
+  firstColumnWidth,
+  stickyHeaderTopOffset,
+  growContent,
+}: ComparisonTableProps<Data>) => (
+  <div className='bg-white'> 
+    <ComparisonTable
+      data={data}
+      headers={headers}
+      collapsibleSections={collapsibleSections}
+      hideDetails={hideDetails}
+      classNameOverrides={classNameOverrides}
+      hideDetailsCaption={hideDetailsCaption}
+      showDetailsCaption={showDetailsCaption}
+      hideScrollBars={hideScrollBars}
+      hideScrollBarsMobile={hideScrollBarsMobile}
+      cellWidth={cellWidth}
+      firstColumnWidth={firstColumnWidth}
+      stickyHeaderTopOffset={stickyHeaderTopOffset}
+      growContent={growContent}
+    />
+  </div>
+);
+
+ComparisonTableStory.storyName = "ComparisonTable";
+
+export const HeaderType = () => (
+  <pre>
+   {`export interface Header<T> {
+    id: number;
+    label?: React.ReactNode;
+    cells: Array<Cell<T>>;
+    default?: boolean;
+  }`}
+  </pre>
+)
+
+export default story;

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

@@ -106,6 +106,7 @@ export const GenericModal = ({
 
           <div
             className={classNamesUtil(
+              'w100',
               classNames?.body,
               styles.body
             )}

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

@@ -1,7 +1,6 @@
 
 import { useState } from 'react';
 import { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';
-import { Markdown } from '../markdown';
 import { Button } from '../button';
 
 const story = {
@@ -117,10 +116,8 @@ export const RegularModalStory = ({
   return (
     <>
       Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left "X" icon.  
-      <Markdown>
-        If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead.
-        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).
-      </Markdown>
+      If you want 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="p-btn--primary wmn2 mt24"
@@ -167,10 +164,8 @@ export const BottomModalStory = ({
   return (
     <>
       Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left "X" icon.
-      <Markdown>
-        If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead.
-        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).
-      </Markdown>
+      If you want to use it for 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="p-btn--primary wmn2 mt24"
@@ -216,14 +211,10 @@ export const NonDismissibleModal = ({
 
   return (
     <>
-      <Markdown>
-        Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.
-        This prop can be useful if we want the user to explicitly interact with the modal options.
-      </Markdown>
+      Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.
+      This prop can be useful if we want the user to explicitly interact with the modal options.
 
-      <Markdown>
-        **Warning:** a modal with the dismissible prop can only be closed by changing the isOpen prop to false.
-       </Markdown>
+      <strong>Warning:</strong> a modal with the dismissible prop can only be closed by changing the isOpen prop to false.
 
       <button
         className="p-btn--primary wmn2 mt24"

package/src/lib/index.tsx

@@ -37,7 +37,6 @@ import {
   TableHeader,
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
@@ -73,7 +72,6 @@ export {
   TableButton,
   TableInfoButton,
   SegmentedControl,
-  Markdown,
   Checkbox,
   Radio,
   Link,

package/dist/cjs/lib/components/markdown/config.d.ts

@@ -1,22 +0,0 @@
-export interface MarkdownStyling {
-    a: string;
-    p: string;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-    ol: string;
-    ul: string;
-    strong: string;
-    em: string;
-    table: string;
-    th: string;
-    tr: string;
-    td: string;
-    blockquote: string;
-    code: string;
-    pre: string;
-}
-export declare const defaultStyling: MarkdownStyling;

package/dist/cjs/lib/components/markdown/index.d.ts

@@ -1,10 +0,0 @@
-import { MarkdownStyling } from './config';
-export interface MarkdownProps {
-    children: string;
-    className?: string;
-    openLinksInNewTab?: boolean;
-    styling?: Partial<MarkdownStyling>;
-    renderRawMarkdownChild?: boolean;
-}
-declare const Markdown: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export { Markdown };

package/dist/cjs/lib/components/markdown/index.stories.d.ts

@@ -1,39 +0,0 @@
-import { MarkdownProps } from '.';
-declare const story: {
-    title: string;
-    component: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-    argTypes: {
-        children: {
-            description: string;
-        };
-        className: {
-            description: string;
-        };
-        renderRawMarkdownChild: {
-            description: string;
-        };
-        openLinksInNewTab: {
-            description: string;
-        };
-        styling: {
-            desription: string;
-        };
-    };
-    args: {
-        children: string;
-        className: string;
-        renderRawMarkdownChild: boolean;
-        openLinksInNewTab: boolean;
-        styling: {};
-    };
-    parameters: {
-        componentSubtitle: JSX.Element;
-    };
-};
-export declare const MarkdownStory: {
-    ({ children, className }: MarkdownProps): JSX.Element;
-    storyName: string;
-};
-export declare const AvailableMDComponents: ({ className }: MarkdownProps) => JSX.Element;
-export declare const AddingCustomComponents: ({ className, openLinksInNewTab, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export default story;