@popsure/dirty-swan 0.61.2 → 0.62.0

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.tsx

@@ -12,54 +12,56 @@ const story = {
   },
 };
 
-export const ButtonCellStory = ({
-  isSelected,
-  buttonCaption,
-  price,
-  disabled,
-}: React.ComponentProps<typeof ButtonCell>) => (
-  <div className="p48 d-flex fd-column gap16 bg-white">
-    <ButtonCell
-      buttonCaption={buttonCaption}
-      price={price}
-      isSelected={isSelected}
-      disabled={disabled}
-      onClick={() => {}}
-    />
+export const ButtonCellStory = {
+  render: ({
+    isSelected,
+    buttonCaption,
+    price,
+    disabled,
+  }: React.ComponentProps<typeof ButtonCell>) => (
+    <div className="p48 d-flex fd-column gap16 bg-white">
+      <ButtonCell
+        buttonCaption={buttonCaption}
+        price={price}
+        isSelected={isSelected}
+        disabled={disabled}
+        onClick={() => {}}
+      />
 
-    <ButtonCell
-      buttonCaption={buttonCaption}
-      price={price}
-      isSelected
-      disabled={disabled}
-      onClick={() => {}}
-    />
+      <ButtonCell
+        buttonCaption={buttonCaption}
+        price={price}
+        isSelected
+        disabled={disabled}
+        onClick={() => {}}
+      />
 
-    <ButtonCell
-      buttonCaption={buttonCaption}
-      price={price}
-      disabled
-      onClick={() => {}}
-    />
+      <ButtonCell
+        buttonCaption={buttonCaption}
+        price={price}
+        disabled
+        onClick={() => {}}
+      />
 
-    <ButtonCell
-      buttonCaption={buttonCaption}
-      isSelected={isSelected}
-      disabled={disabled}
-      onClick={() => {}}
-    />
+      <ButtonCell
+        buttonCaption={buttonCaption}
+        isSelected={isSelected}
+        disabled={disabled}
+        onClick={() => {}}
+      />
 
-    <ButtonCell
-      buttonCaption={buttonCaption}
-      isSelected
-      disabled={disabled}
-      onClick={() => {}}
-    />
+      <ButtonCell
+        buttonCaption={buttonCaption}
+        isSelected
+        disabled={disabled}
+        onClick={() => {}}
+      />
 
-    <ButtonCell buttonCaption={buttonCaption} disabled onClick={() => {}} />
-  </div>
-);
+      <ButtonCell buttonCaption={buttonCaption} disabled onClick={() => {}} />
+    </div>
+  ),
 
-ButtonCellStory.storyName = 'ButtonCell';
+  name: 'ButtonCell',
+};
 
 export default story;

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

@@ -15,27 +15,29 @@ const story = {
   },
 };
 
-export const CTACellStory = ({
-  title,
-  price,
-  icon,
-  buttonCaption,
-  grey,
-  narrow,
-}: React.ComponentProps<typeof CTACell>) => (
-  <div className="p48 d-flex fd-column gap16 bg-white">
-    <CTACell
-      title={title}
-      price={price}
-      icon={icon}
-      buttonCaption={buttonCaption}
-      href=""
-      grey={grey}
-      narrow={narrow}
-    />
-  </div>
-);
+export const CTACellStory = {
+  render: ({
+    title,
+    price,
+    icon,
+    buttonCaption,
+    grey,
+    narrow,
+  }: React.ComponentProps<typeof CTACell>) => (
+    <div className="p48 d-flex fd-column gap16 bg-white">
+      <CTACell
+        title={title}
+        price={price}
+        icon={icon}
+        buttonCaption={buttonCaption}
+        href=""
+        grey={grey}
+        narrow={narrow}
+      />
+    </div>
+  ),
 
-CTACellStory.storyName = 'CTACell';
+  name: 'CTACell',
+};
 
 export default story;

package/src/lib/components/table/components/TableCell/CardCell/CardCell.stories.tsx

@@ -7,28 +7,31 @@ const story = {
   argTypes: {},
   args: {
     title: 'Dental add-on',
-    description: 'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',
+    description:
+      'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',
     icon: <DentalPlusIcon size={24} noMargin />,
     href: 'https://example.com',
   },
 };
 
-export const CardCellStory = ({
-  title,
-  description,
-  icon,
-  href,
-}: React.ComponentProps<typeof CardCell>) => (
-  <div className="p48 d-flex fd-column gap16 bg-white">
-    <CardCell
-      title={title}
-      description={description}
-      icon={icon}
-      href={href}
-    />
-  </div>
-);
+export const CardCellStory = {
+  render: ({
+    title,
+    description,
+    icon,
+    href,
+  }: React.ComponentProps<typeof CardCell>) => (
+    <div className="p48 d-flex fd-column gap16 bg-white">
+      <CardCell
+        title={title}
+        description={description}
+        icon={icon}
+        href={href}
+      />
+    </div>
+  ),
 
-CardCellStory.storyName = 'CardCell';
+  name: 'CardCell',
+};
 
 export default story;

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

@@ -13,19 +13,22 @@ const story = {
       description: 'Title of the toast.',
     },
     description: {
-      description: 'Additional description content to be displayed inside the toast.',
+      description:
+        'Additional description content to be displayed inside the toast.',
     },
     type: {
-      description: 'Type of toast to display. This changes the styles/colors of the toast.',
+      description:
+        'Type of toast to display. This changes the styles/colors of the toast.',
     },
     action: {
-      description: 'Object containing a possible action button inside the toast.',
+      description:
+        'Object containing a possible action button inside the toast.',
     },
     duration: {
       description: 'Duration in ms that the toast should be displayed.',
       table: {
         defaultValue: { summary: 3000 },
-      }
+      },
     },
     onDismiss: {
       table: {
@@ -33,7 +36,8 @@ const story = {
       },
     },
     classNames: {
-      description: 'Allows customization of toast and toast wrapper (named as Toaster)',
+      description:
+        'Allows customization of toast and toast wrapper (named as Toaster)',
       table: {
         category: 'Toaster props',
       },
@@ -41,34 +45,35 @@ const story = {
   },
   args: {
     title: 'We couldn’t open the chat',
-    description: "We couldn't open the chat description. We couldn't open the chat description.",
+    description:
+      "We couldn't open the chat description. We couldn't open the chat description.",
     action: {
       title: 'Send an email',
-      onClick: () => {}
+      onClick: () => {},
     },
     type: 'success',
     duration: 3000,
     classNames: {
-      toast: "",
-      wrapper: ""
-    }
+      toast: '',
+      wrapper: '',
+    },
   },
 };
 
-const FakeInlineToast = ({ 
-  title, 
-  description, 
-  action, 
+const FakeInlineToast = ({
+  title,
+  description,
+  action,
   type,
 }: Omit<ToastProps, 'onDismiss'>) => (
-  <div className='mb32'>
+  <div className="mb32">
     <div
       className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}
       style={{
-        padding: "12px 20px"
+        padding: '12px 20px',
       }}
     >
-      <Toast 
+      <Toast
         title={title}
         onDismiss={() => {}}
         description={description}
@@ -79,65 +84,71 @@ const FakeInlineToast = ({
   </div>
 );
 
-export const ToastStory = ({ 
-  title, 
-  description, 
-  action, 
-  type, 
-  duration, 
-  classNames: toasterClassNames 
-}: ToastProps & ToasterProps) => {
-  const showToast = () => toast(
-    title, 
-    {
-      description,
-      duration,
-      type,
-      action
-    }
-  );
+export const ToastStory = {
+  render: ({
+    title,
+    description,
+    action,
+    type,
+    duration,
+    classNames: toasterClassNames,
+  }: ToastProps & ToasterProps) => {
+    const showToast = () =>
+      toast(title, {
+        description,
+        duration,
+        type,
+        action,
+      });
 
-  return (
-    <>
-      <div className='mb16'>
-        <div>
-          Show a toast using the following code:
+    return (
+      <>
+        <div className="mb16">
+          <div>Show a toast using the following code:</div>
+          <pre className="bg-neutral-300 br4 d-inline-flex p8 mt8">
+            {'() => toast(title, { description, type, action })'}
+          </pre>
         </div>
-        <pre className='bg-neutral-300 br4 d-inline-flex p8 mt8'>
-          {"() => toast(title, { description, type, action })"}
-        </pre>
-      </div>
-      <Toaster classNames={toasterClassNames} />
+        <Toaster classNames={toasterClassNames} />
 
-      <Button onClick={showToast}>Click here to trigger toast</Button>
-    </>
-  );
-};
+        <Button onClick={showToast}>Click here to trigger toast</Button>
+      </>
+    );
+  },
 
-ToastStory.storyName = "Toast";
+  name: 'Toast',
+};
 
-export const ToastTypes = (props: ToastProps) => {
-  return (
-    <>
-      {toastTypes.map((toastType) => (
-        <div key={toastType} className='d-flex fd-column'>
-          <h3 className='p-h3 mb16'>{toastType}</h3>
-          <FakeInlineToast {...props} type={toastType} />
-        </div>
-      ))}
-    </>
-  );
+export const ToastTypes = {
+  render: (props: ToastProps) => {
+    return (
+      <>
+        {toastTypes.map((toastType) => (
+          <div key={toastType} className="d-flex fd-column">
+            <h3 className="p-h3 mb16">{toastType}</h3>
+            <FakeInlineToast {...props} type={toastType} />
+          </div>
+        ))}
+      </>
+    );
+  },
 };
 
-export const ToastContent = ({ title, description, action }: ToastProps) => {
-  return (
-    <div className='d-flex fd-column'>
-      <FakeInlineToast title={title} />
-      <FakeInlineToast title={title} description={description} />
-      <FakeInlineToast title={title} description={description} action={action} />
-      <FakeInlineToast title={title} action={action} />
-    </div>
-  );
+export const ToastContent = {
+  render: ({ title, description, action }: ToastProps) => {
+    return (
+      <div className="d-flex fd-column">
+        <FakeInlineToast title={title} />
+        <FakeInlineToast title={title} description={description} />
+        <FakeInlineToast
+          title={title}
+          description={description}
+          action={action}
+        />
+        <FakeInlineToast title={title} action={action} />
+      </div>
+    );
+  },
 };
 
 export default story;

package/src/lib/scss/index.scss

@@ -4,11 +4,11 @@
 @forward 'private/components';
 @forward 'private/borders';
 
-@import 'public/colors';
+@use 'public/colors';
 
-@import 'public/shadows';
+@use 'public/shadows';
 
-@import 'third-party';
+@use 'third-party';
 
 html {
   box-sizing: border-box;
@@ -21,5 +21,5 @@ html {
 }
 
 body {
-  background-color: $ds-neutral-100;
+  background-color: colors.$ds-neutral-100;
 }

package/src/lib/scss/private/base/_typography.scss

@@ -1,7 +1,7 @@
 @use '../../public/colors' as *;
 @use '../../public/font-weight' as *;
 @use '../../public/grid' as *;
-@use '../../public/font' as *;
+@use '../../public/font' as font;
 
 @font-face {
   font-family: 'Mona Sans';
@@ -22,7 +22,7 @@
 }
 
 body {
-  font-family: $font-family;
+  font-family: font.$font-family;
   -webkit-font-smoothing: antialiased;
 }
 

package/src/lib/scss/private/base/border_radius.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Base/Border Radius" />
 

package/src/lib/scss/private/base/cursors.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Base/Cursors" />
 

package/src/lib/scss/private/base/display.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Base/Display" />
 

package/src/lib/scss/private/base/flex/flex.mdx

@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
+
 import style from './style.module.scss';
 
 <Meta title="CSS/Base/Flex" />

package/src/lib/scss/private/base/spacing.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Base/Spacing" />
 

package/src/lib/scss/private/base/typography.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { Typography } from './demo';
 

package/src/lib/scss/private/base/width_and_height.mdx

@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
+
 import {
   StaticWidthClasses,
   FuildWidthClasses,

package/src/lib/scss/private/borders/_index.scss

@@ -1 +1 @@
-@import 'default';
+@use 'default';

package/src/lib/scss/private/components/cards.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Components/Cards" />
 

package/src/lib/scss/private/components/checkbox.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Components/Checkbox" />
 

package/src/lib/scss/private/components/radio.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Components/Radio" />
 

package/src/lib/scss/private/components/select.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="CSS/Components/Select" />
 

package/src/lib/scss/public/borders.stories.tsx

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import classNames from 'classnames';
 
 const borders = [
   {
@@ -117,7 +117,8 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'Border tokens for consistent border styling across the design system. Includes strong, medium, and soft variants with default, hover, active, and focus states.',
+        component:
+          'Border tokens for consistent border styling across the design system. Includes strong, medium, and soft variants with default, hover, active, and focus states.',
       },
     },
   },

package/src/lib/scss/public/colors/_index.scss

@@ -1,2 +1,2 @@
-@import 'overrides';
-@import 'default';
+@use 'overrides';
+@forward 'default';

package/src/lib/scss/public/colors.mdx

@@ -1,5 +1,6 @@
 import { Colors } from './demo';
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
+
 
 <Meta title="CSS/Variables/Colors" />
 

package/src/lib/scss/public/font/_index.scss

@@ -1,2 +1,2 @@
-@import 'overrides';
-@import 'default';
+@use 'overrides';
+@forward 'default';

package/src/lib/scss/public/font-weight.mdx

@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
+
 
 <Meta title="CSS/Variables/Font weight" />
 

package/src/lib/scss/public/shadows.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { BoxShadows } from './demo';
 
 <Meta title="CSS/Variables/Shadows" />
@@ -31,13 +31,14 @@ Dirty swan provides you with a set of box shadow classes and variables.
 ```
 
 ## Table
-| Variable  | Value                                         |
-| --------- | --------------------------------------------- |
-| `$bs-xs`  | `0 2px 12px rgba($ds-neutral-900, 0.03)`         |
-| `$bs-sm`  | `0 2px 20px 0 rgba($ds-neutral-900, 0.04)`       |
-| `$bs-md`  | `0 2px 28px rgba($ds-neutral-900, 0.08)`         |
-| `$bs-lg`  | `0 2px 32px rgba($ds-neutral-900, 0.1)`          |
-| `$bs-xl`  | `0 2px 50px rgba($ds-neutral-900, 0.18)`         |
+
+| Variable | Value                                      |
+| -------- | ------------------------------------------ |
+| `$bs-xs` | `0 2px 12px rgba($ds-neutral-900, 0.03)`   |
+| `$bs-sm` | `0 2px 20px 0 rgba($ds-neutral-900, 0.04)` |
+| `$bs-md` | `0 2px 28px rgba($ds-neutral-900, 0.08)`   |
+| `$bs-lg` | `0 2px 32px rgba($ds-neutral-900, 0.1)`    |
+| `$bs-xl` | `0 2px 50px rgba($ds-neutral-900, 0.18)`   |
 
 ## Example
 

package/src/lib/scss/third-party/_index.scss

@@ -1 +1 @@
-@import 'google_places';
+@use 'google_places';