@popsure/dirty-swan 0.51.3 → 0.53.0

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

@@ -1,570 +0,0 @@
-import { Canvas, Meta, Unstyled } from '@storybook/blocks';
-
-import { CardButton } from '../cards';
-
-import {
-  ComparisonTable,
-  TableButton,
-  TableRating,
-  TableRowHeader,
-  TableTrueFalse,
-} from '.';
-
-<Meta title="JSX/Comparison Table" component={ComparisonTable} />
-
-# Comparison Table
-
-The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.
-
-<iframe
-  width="100%"
-  height="450"
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D2025%253A12194"
-  allowFullScreen
-/>
-
-## Arguments
-
-| attribute             | unit                                      | description                                                         | default value  | required |
-| --------------------- | ----------------------------------------- | ------------------------------------------------------------------- | -------------- | -------- |
-| headers               | [Header\[\]](#header)                     | The structure of the table                                          | n/a            | true     |
-| data                  | array                                     | The title text that needs to be displayed                           | n/a            | true     |
-| hideDetails           | boolean                                   | Hide table groups that do not have the `default` attribute          | false          | false    |
-| hideDetailsCaption    | string                                    | Caption of the button to hide the details                           | 'Hide details' | false    |
-| showDetailsCaption    | string                                    | Caption of the button to show the details                           | 'Show details' | false    |
-| hideScrollBars        | boolean                                   | Hide scroll bars                                                    | false          | false    |
-| hideScrollBarsMobile  | boolean                                   | Hide scroll bars on mobile only                                     | false          | false    |
-| collapsibleSections   | boolean                                   | Make table groups with a label collapsible                          | false          | false    |
-| cellWidth             | number                                    | Width of a table content cell                                       | 211px          | false    |
-| firstColumnWidth      | number                                    | Width of the first column of the table                              | 212px          | false    |
-| stickyHeaderTopOffset | number                                    | Y-offset of the sticky header row                                   | 0px            | false    |
-| growContent           | boolean                                   | Makes the content area grow to fill the available space             | false          | false    |
-| onSelectionChanged    | (number) => void                          | Callback to be called when the selected tab index changes on mobile | n/a            | false    |
-| classNameOverrides    | [ClassNameOverrides](#classnameoverrides) | "className" props to be passed down to various internal components  | n/a            | false    |
-
-## Types
-
-### Cell
-
-```typescript
-export interface CellBaseProps<T> {
-  label?: React.ReactNode;
-  render?: (value: any, element: T) => React.ReactNode;
-  key: Extract<keyof T, string>;
-  addonId?: string | number;
-}
-```
-
-### Header
-
-```typescript
-export interface Header<T> {
-  id: number;
-  label?: React.ReactNode;
-  cells: Array<Cell<T>>;
-  default?: boolean;
-}
-```
-
-### ClassNameOverrides
-
-Note that if the component uses custom css such as media queries etc. for certain properties, the override must also use
-custom css (and not just Dirty Swan classes) or else it won't to able override the existing rules.
-
-```typescript
-export interface ClassNameOverrides {
-  header?: string;
-  container?: string;
-  cell?: string;
-  headerCell?: string;
-  collapsibleSection?: string;
-  section?: string;
-  hideDetailsButton?: string;
-}
-```
-
-## Default example
-
-export const ComparisonTableWithData = () => {
-  const headers = [
-    {
-      id: 1,
-      default: true,
-      cells: [
-        {
-          id: 1,
-          key: 'name',
-          label: 'Films',
-          render: (value) => (
-            <TableButton onClick={() => {}}>{value}</TableButton>
-          ),
-        },
-        {
-          id: 2,
-          key: 'country',
-          label: 'Country',
-        },
-        {
-          id: 4,
-          key: 'imdb',
-          label: 'IMDB rating',
-          render: (value) => (
-            <TableButton onClick={() => {}}>{value}</TableButton>
-          ),
-        },
-        {
-          id: 3,
-          key: 'rating',
-          label: (
-            <TableRowHeader
-              label="Our rating of movies found online on IMDB lists"
-              onClickInfo={() => {}}
-            />
-          ),
-          render: (value) => (
-            <TableButton onClick={() => {}}>
-              <TableRating type="star" rating={value} />
-            </TableButton>
-          ),
-        },
-        {
-          id: 5,
-          key: 'recommended',
-          label: (
-            <TableRowHeader
-              label="Recommended"
-              subtitle="Our favourites"
-              onClickInfo={() => {}}
-            />
-          ),
-          render: (value) => <TableRating type="zap" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'familyFriendly',
-          label: 'Family friendly',
-          render: (value) => <TableTrueFalse value={value} />,
-        },
-        {
-          id: 6,
-          key: 'boxOffice',
-          label: 'Box office',
-          render: (value) =>
-            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) => <TableRating type="star" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'recommended',
-          label: 'Recommended',
-          render: (value) => <TableRating type="zap" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'familyFriendly',
-          label: 'Family friendly',
-          render: (value) => <TableTrueFalse value={value} />,
-        },
-        {
-          id: 6,
-          key: 'boxOffice',
-          label: 'Box office',
-          render: (value) =>
-            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) => <TableRating type="star" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'recommended',
-          label: 'Recommended',
-          render: (value) => <TableRating type="zap" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'familyFriendly',
-          label: 'Family friendly',
-          render: (value) => <TableTrueFalse value={value} />,
-        },
-        {
-          id: 6,
-          key: 'boxOffice',
-          label: 'Box office',
-          render: (value) =>
-            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,
-    },
-  ];
-  return (
-    <ComparisonTable
-      data={data}
-      headers={headers}
-      collapsibleSections
-      hideDetails
-      classNameOverrides={{
-        hideDetailsButton: 'p-container wmx6',
-      }}
-    />
-  );
-};
-
-<Unstyled>
-  <ComparisonTableWithData />
-</Unstyled>
-
-```typescript jsx
-import ComparisonTable, {
-  TableRating,
-  TableTrueFalse,
-  TableHeader,
-} from '@popsure/dirty-swan';
-
-interface TableData {
-  id: number;
-  name: string;
-  country: string;
-  year: string;
-  rating: number;
-  imdb: number;
-  recommended: number;
-  familyFriendly: boolean;
-  boxOffice: number;
-}
-
-export const ComparisonTableWithData = () => {
-  const headers = [
-    {
-      id: 1,
-      default: true,
-      cells: [
-        {
-          id: 1,
-          key: 'name',
-          label: 'Films',
-          render: (value) => (
-            <TableButton onClick={() => {}}>{value}</TableButton>
-          ),
-        },
-        {
-          id: 2,
-          key: 'country',
-          label: 'Country',
-        },
-        {
-          id: 4,
-          key: 'imdb',
-          label: 'IMDB rating',
-          render: (value) => (
-            <TableButton onClick={() => {}}>{value}</TableButton>
-          ),
-        },
-        {
-          id: 3,
-          key: 'rating',
-          label: (
-            <TableRowHeader
-              label="Our rating of movies found online on IMDB lists"
-              onClickInfo={() => {}}
-            />
-          ),
-          render: (value) => (
-            <TableButton onClick={() => {}}>
-              <TableRating type="star" rating={value} />
-            </TableButton>
-          ),
-        },
-        {
-          id: 5,
-          key: 'recommended',
-          label: (
-            <TableRowHeader
-              label="Recommended"
-              subtitle="Our favourites"
-              onClickInfo={() => {}}
-            />
-          ),
-          render: (value) => <TableRating type="zap" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'familyFriendly',
-          label: 'Family friendly',
-          render: (value) => <TableTrueFalse value={value} />,
-        },
-        {
-          id: 6,
-          key: 'boxOffice',
-          label: 'Box office',
-          render: (value) =>
-            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: 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) => <TableRating type="star" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'recommended',
-          label: 'Recommended',
-          render: (value) => <TableRating type="zap" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'familyFriendly',
-          label: 'Family friendly',
-          render: (value) => <TableTrueFalse value={value} />,
-        },
-        {
-          id: 6,
-          key: 'boxOffice',
-          label: 'Box office',
-          render: (value) =>
-            value.toLocaleString('de-DE', {
-              style: 'currency',
-              currency: 'EUR',
-            }),
-        },
-      ],
-    },
-    {
-      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) => <TableRating type="star" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'recommended',
-          label: 'Recommended',
-          render: (value) => <TableRating type="zap" rating={value} />,
-        },
-        {
-          id: 5,
-          key: 'familyFriendly',
-          label: 'Family friendly',
-          render: (value) => <TableTrueFalse value={value} />,
-        },
-        {
-          id: 6,
-          key: 'boxOffice',
-          label: 'Box office',
-          render: (value) =>
-            value.toLocaleString('de-DE', {
-              style: 'currency',
-              currency: 'EUR',
-            }),
-        },
-      ],
-    },
-  ];
-  const data: Array<TableData> = [
-    {
-      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,
-    },
-  ];
-  return (
-    <ComparisonTable
-      data={data}
-      headers={headers}
-      collapsibleSections
-      hideDetails
-      classNameOverrides={{
-        hideDetailsButton: 'p-container wmx6',
-      }}
-    />
-  );
-};
-
-<ComparisonTableWithData />;
-```

package/src/lib/components/markdown/config.ts

@@ -1,45 +0,0 @@
-import styles from './styles.module.scss';
-
-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 const defaultStyling: MarkdownStyling = {
-  a: 'p-a',
-  p: 'p-p mt8',
-  h1: 'p-h1 p--serif mt32',
-  h2: 'p-h2 mt24',
-  h3: 'p-h3 mt16',
-  h4: 'p-h4 mt8',
-  h5: 'p-h5 mt8',
-  h6: 'p-h6 mt8',
-  ol: `p-p ${styles.olist} mt8`,
-  ul: `p-p ${styles.ulist} mt8`,
-  strong: 'fw-bold',
-  em: 'fs-italic',
-  table: `w100 mt24 ${styles.table}`,
-  th: 'p-h4',
-  tr: styles.row,
-  td: 'px8 py8 tc-grey-700',
-  blockquote: 'bg-grey-200 my24 px24 pt16 pb24 br8',
-  code: styles.code,
-  pre: `d-block tc-grey-200 bg-grey-900 px16 py16 my16 br8 ${styles.pre}`,
-};