@popsure/dirty-swan 0.61.2 → 0.62.0

package/src/lib/components/cards/infoCard/index.stories.tsx

@@ -40,62 +40,64 @@ const story = {
   },
   args: {
     title: 'Knowledge Base',
-    children: 'Find the answers you\'re looking for in our comprehensive, fact-checked library of articles and resources.',
+    children:
+      "Find the answers you're looking for in our comprehensive, fact-checked library of articles and resources.",
     topIcon: <BookOpenIcon size={40} />,
     topIconType: 'iconWithBackground',
     showIcon: true,
     disabled: false,
     className: '',
-  }
+  },
 };
 
-export const InfoCardStory = (args: InfoCardProps) => {
-  return (
-    <div className='bg-neutral-50 p32'>
-      <div className='wmx4'>
-        <InfoCard
-          {...args}
-          onClick={() => console.log('InfoCard clicked!')}
-        >
-          {args.children}
-        </InfoCard>
+export const InfoCardStory = {
+  render: (args: InfoCardProps) => {
+    return (
+      <div className="bg-neutral-50 p32">
+        <div className="wmx4">
+          <InfoCard {...args} onClick={() => console.log('InfoCard clicked!')}>
+            {args.children}
+          </InfoCard>
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+
+  name: 'InfoCard',
+};
 
 export const IconTypes = () => {
   return (
-    <div className='bg-neutral-50 p32'>
-      <div className='d-flex gap32 flex-wrap'>
-        <div className='wmx4'>
-          <div className='mb16 fw-bold'>Book Icon</div>
+    <div className="bg-neutral-50 p32">
+      <div className="d-flex gap32 flex-wrap">
+        <div className="wmx4">
+          <div className="mb16 fw-bold">Book Icon</div>
           <InfoCard
-            title='Knowledge Base'
+            title="Knowledge Base"
             topIcon={<BookOpenIcon size={40} />}
-            topIconType='iconWithBackground'
+            topIconType="iconWithBackground"
             onClick={() => console.log('Book clicked!')}
           >
             Find answers in our comprehensive library of articles.
           </InfoCard>
         </div>
-        <div className='wmx4'>
-          <div className='mb16 fw-bold'>Heart Icon</div>
+        <div className="wmx4">
+          <div className="mb16 fw-bold">Heart Icon</div>
           <InfoCard
-            title='Favorites'
+            title="Favorites"
             topIcon={<HeartIcon size={40} />}
-            topIconType='iconWithBackground'
+            topIconType="iconWithBackground"
             onClick={() => console.log('Heart clicked!')}
           >
             Save and organize your favorite items.
           </InfoCard>
         </div>
-        <div className='wmx4'>
-          <div className='mb16 fw-bold'>Star Icon</div>
+        <div className="wmx4">
+          <div className="mb16 fw-bold">Star Icon</div>
           <InfoCard
-            title='Premium Features'
+            title="Premium Features"
             topIcon={<StarIcon size={40} />}
-            topIconType='iconWithBackground'
+            topIconType="iconWithBackground"
             onClick={() => console.log('Star clicked!')}
           >
             Unlock advanced features with premium.
@@ -104,53 +106,59 @@ export const IconTypes = () => {
       </div>
     </div>
   );
-}
+};
 
 export const TopIconTypes = () => {
   return (
-    <div className='bg-neutral-50 p32 m-auto wmx12'>
-      <div className='d-flex gap32 flex-wrap'>
-        <div className='w50'>
-          <div className='mb16 fw-bold'>Icon Type</div>
+    <div className="bg-neutral-50 p32 m-auto wmx12">
+      <div className="d-flex gap32 flex-wrap">
+        <div className="w50">
+          <div className="mb16 fw-bold">Icon Type</div>
           <InfoCard
-            title='Help Center'
+            title="Help Center"
             topIcon={<img src="https://placehold.co/80x80" alt="Banner" />}
-            topIconType='icon'
+            topIconType="icon"
             onClick={() => console.log('Icon type clicked!')}
           >
             Icon is displayed in a circular way without any background.
           </InfoCard>
         </div>
-        <div className='w50'>
-          <div className='mb16 fw-bold'>Icon with background Type</div>
+        <div className="w50">
+          <div className="mb16 fw-bold">Icon with background Type</div>
           <InfoCard
-            title='Help Center'
+            title="Help Center"
             topIcon={<BookOpenIcon size={40} />}
-            topIconType='iconWithBackground'
+            topIconType="iconWithBackground"
             onClick={() => console.log('Icon type clicked!')}
           >
             Icon is displayed in a circular background with the orange color.
           </InfoCard>
         </div>
       </div>
-      <div className='d-flex gap32 flex-wrap mt40'>
-        <div className='w50'>
-          <div className='mb16 fw-bold'>Image Type</div>
+      <div className="d-flex gap32 flex-wrap mt40">
+        <div className="w50">
+          <div className="mb16 fw-bold">Image Type</div>
           <InfoCard
-            title='Image Gallery'
-            topIcon={<img src="https://placehold.co/80x80" alt="Image" style={{borderRadius: '8px'}} />}
-            topIconType='image'
+            title="Image Gallery"
+            topIcon={
+              <img
+                src="https://placehold.co/80x80"
+                alt="Image"
+                style={{ borderRadius: '8px' }}
+              />
+            }
+            topIconType="image"
             onClick={() => console.log('Image type clicked!')}
           >
             Image is displayed as-is without background.
           </InfoCard>
         </div>
-        <div className='w50'>
-          <div className='mb16 fw-bold'>Banner Type</div>
+        <div className="w50">
+          <div className="mb16 fw-bold">Banner Type</div>
           <InfoCard
-            title='Featured Content'
+            title="Featured Content"
             topIcon={<img src="https://placehold.co/600x200" alt="Banner" />}
-            topIconType='banner'
+            topIconType="banner"
             onClick={() => console.log('Banner type clicked!')}
           >
             Banner spans the full width of the card.
@@ -159,41 +167,41 @@ export const TopIconTypes = () => {
       </div>
     </div>
   );
-}
+};
 
 export const States = () => {
   return (
-    <div className='bg-neutral-50 p32'>
-      <div className='d-flex gap32 flex-wrap'>
-        <div className='wmx4'>
-          <div className='mb16 fw-bold'>Default State</div>
+    <div className="bg-neutral-50 p32">
+      <div className="d-flex gap32 flex-wrap">
+        <div className="wmx4">
+          <div className="mb16 fw-bold">Default State</div>
           <InfoCard
-            title='Default Card'
+            title="Default Card"
             topIcon={<BookOpenIcon size={40} />}
-            topIconType='icon'
+            topIconType="icon"
             onClick={() => console.log('Default clicked!')}
           >
             This is a default interactive card.
           </InfoCard>
         </div>
-        <div className='wmx4'>
-          <div className='mb16 fw-bold'>Disabled State</div>
+        <div className="wmx4">
+          <div className="mb16 fw-bold">Disabled State</div>
           <InfoCard
-            title='Disabled Card'
+            title="Disabled Card"
             topIcon={<BookOpenIcon size={40} />}
-            topIconType='icon'
+            topIconType="icon"
             disabled={true}
             onClick={() => console.log('This should not fire')}
           >
             This card is disabled and non-interactive.
           </InfoCard>
         </div>
-        <div className='wmx4'>
-          <div className='mb16 fw-bold'>Without Arrow Icon</div>
+        <div className="wmx4">
+          <div className="mb16 fw-bold">Without Arrow Icon</div>
           <InfoCard
-            title='No Arrow'
+            title="No Arrow"
             topIcon={<BookOpenIcon size={40} />}
-            topIconType='icon'
+            topIconType="icon"
             showIcon={false}
             onClick={() => console.log('No arrow clicked!')}
           >
@@ -203,8 +211,6 @@ export const States = () => {
       </div>
     </div>
   );
-}
-
-InfoCardStory.storyName = "InfoCard";
+};
 
 export default story;

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

@@ -14,7 +14,7 @@ const story = {
     onRemove: {
       description: 'Function that is called when the remove button is clicked',
       table: {
-        category: 'Callbacks'
+        category: 'Callbacks',
       },
     },
     className: {
@@ -29,23 +29,18 @@ const story = {
     className: '',
   },
   parameters: {
-    componentSubtitle: 'Chip component displays text and image (optional) of given values.'
-  }
+    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 ChipStory = {
+  render: ({ onRemove, value, className }: ChipProps) => (
+    <Chip onRemove={onRemove} value={value} className={className} />
+  ),
+
+  name: 'Chip',
+};
 
 export const MultipleChips = () => {
   const values = [

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../scss/public/colors';
+@use '../../../../scss/public/colors' as colors;
 
 .container {
   width: var(--growContent, min-content);
@@ -21,7 +21,7 @@
 
 .headerButton {
   border: none;
-  background: $ds-orange-50;
+  background: colors.$ds-orange-50;
   column-gap: 16px;
   cursor: pointer;
   font-family: inherit;
@@ -31,7 +31,7 @@
   transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
 
   &:hover {
-    background: $ds-orange-100;
+    background: colors.$ds-orange-100;
   }
 }
 

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

@@ -1,4 +1,11 @@
-import { ComparisonTable, ComparisonTableProps, TableButton, TableRating, TableRowHeader, TableTrueFalse } from '.';
+import {
+  ComparisonTable,
+  ComparisonTableProps,
+  TableButton,
+  TableRating,
+  TableRowHeader,
+  TableTrueFalse,
+} from '.';
 import { CardButton } from '../cards';
 
 const headers = [
@@ -222,8 +229,8 @@ const story = {
   title: 'JSX/ComparisonTable',
   component: ComparisonTable,
   argTypes: {
-   headers: {
-     description: 'The structure of the table',
+    headers: {
+      description: 'The structure of the table',
     },
     data: {
       description: 'The title text that needs to be displayed',
@@ -261,13 +268,15 @@ const story = {
       description: 'Makes the content area grow to fill the available space',
     },
     classNameOverrides: {
-      description: '"className" props to be passed down to various internal components',
+      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',
+      description:
+        'Callback to be called when the selected tab index changes on mobile',
       table: {
-        category: 'Callbacks'
-      }
+        category: 'Callbacks',
+      },
     },
   },
   args: {
@@ -291,10 +300,11 @@ const story = {
       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.',
+    componentSubtitle:
+      'The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.',
   },
 };
 
@@ -310,51 +320,53 @@ interface Data {
   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>
-);
+export const ComparisonTableStory = {
+  render: ({
+    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";
+  name: 'ComparisonTable',
+};
 
 export const HeaderType = () => (
   <pre>
-   {`export interface Header<T> {
+    {`export interface Header<T> {
     id: number;
     label?: React.ReactNode;
     cells: Array<Cell<T>>;
     default?: boolean;
   }`}
   </pre>
-)
+);
 
 export default story;

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

@@ -20,46 +20,49 @@ const story = {
       description: 'Whether the calendar icon/button trigger should show',
     },
     onChange: {
-      description: 'Called when the value is changed. Must be a valid date to be triggered',
+      description:
+        'Called when the value is changed. Must be a valid date to be triggered',
       action: true,
       table: {
         category: 'Callbacks',
-        type: { 
-          summary: '(date: YYYY-MM-DD) => void'
+        type: {
+          summary: '(date: YYYY-MM-DD) => void',
         },
       },
     },
     value: {
       description: 'Value of the input',
       table: {
-        type: { 
-          summary: 'YYYY-MM-DD'
+        type: {
+          summary: 'YYYY-MM-DD',
         },
       },
     },
     dayjsLocale: {
-      description: `Property used to localize the calendar of the DateSelector. If no dayjsLocale is supplied, the default locale 'en' will be used. Additional locales can be imported from dayjs like import de from 'dayjs/locale/de'; and then passed on to the component.`
+      description: `Property used to localize the calendar of the DateSelector. If no dayjsLocale is supplied, the default locale 'en' will be used. Additional locales can be imported from dayjs like import de from 'dayjs/locale/de'; and then passed on to the component.`,
     },
     placeholders: {
-      description: 'Properties used to localize the calendar of the DateSelector. `placeholders` object can be used to change the text of the different dropdowns.'
+      description:
+        'Properties used to localize the calendar of the DateSelector. `placeholders` object can be used to change the text of the different dropdowns.',
     },
     firstDayOfWeek: {
-      description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`
-    }
+      description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`,
+    },
   },
   args: {
     yearBoundaries: {
       min: 1920,
-      max: 2001
+      max: 2001,
     },
     displayCalendar: false,
     value: '2000-12-12',
   },
   parameters: {
-    componentSubtitle: 'Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.',
+    componentSubtitle:
+      'Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.',
     design: {
       url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D293%253A169',
-      type: 'figma'
+      type: 'figma',
     },
     docs: {
       source: {
@@ -69,48 +72,52 @@ const story = {
   },
 };
 
-export const DateSelectorStory = ({
-  displayCalendar,
-  onChange,
-  yearBoundaries,
-  value
-}: DateSelectorProps) => {
-  const [newValue, setValue] = useState(value);
+export const DateSelectorStory = {
+  render: ({
+    displayCalendar,
+    onChange,
+    yearBoundaries,
+    value,
+  }: DateSelectorProps) => {
+    const [newValue, setValue] = useState(value);
 
-  const handleOnChange = (value: string) => {
-    setValue(value)
-    onChange?.(value);
-  }
+    const handleOnChange = (value: string) => {
+      setValue(value);
+      onChange?.(value);
+    };
 
-  return (
-    <DateSelector
-      onChange={handleOnChange}
-      displayCalendar={displayCalendar}
-      yearBoundaries={yearBoundaries}
-      value={newValue}
-    />
-  );
-}
+    return (
+      <DateSelector
+        onChange={handleOnChange}
+        displayCalendar={displayCalendar}
+        yearBoundaries={yearBoundaries}
+        value={newValue}
+      />
+    );
+  },
 
-DateSelectorStory.storyName = "DateSelector";
+  name: 'DateSelector',
+};
 
-export const DateSelectorLocalisation = ({ onChange, value, yearBoundaries }: DateSelectorProps) => (
-  <>
-    {/** import de from 'dayjs/locale/de'; */}
-    <DateSelector
-      value={value}
-      yearBoundaries={yearBoundaries}
-      onChange={onChange}
-      displayCalendar={true}
-      placeholders={{
-        day: 'Tag',
-        month: 'Monat',
-        year: 'Jahr',
-      }}
-      dayjsLocale={de}
-      firstDayOfWeek={2}
-    />
-  </>
-);
+export const DateSelectorLocalisation = {
+  render: ({ onChange, value, yearBoundaries }: DateSelectorProps) => (
+    <>
+      {/** import de from 'dayjs/locale/de'; */}
+      <DateSelector
+        value={value}
+        yearBoundaries={yearBoundaries}
+        onChange={onChange}
+        displayCalendar={true}
+        placeholders={{
+          day: 'Tag',
+          month: 'Monat',
+          year: 'Jahr',
+        }}
+        dayjsLocale={de}
+        firstDayOfWeek={2}
+      />
+    </>
+  ),
+};
 
 export default story;