@scania/tegel 0.0.33 → 0.0.51

package/dist/collection/components/card/sdds-card.stories.js

@@ -1,135 +1,126 @@
-import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Card',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant of the component, based on current mode.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    header: {
-      name: 'Header text',
-      description: 'The header text',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader text',
-      description: 'The subheader text',
-      control: {
-        type: 'text',
-      },
-    },
-    headerImg: {
-      name: 'Header image',
-      description: 'Image for the header',
-      control: {
-        type: 'boolean',
-      },
-    },
-    headerPlacement: {
-      name: 'Header placement',
-      description: 'Placement of the header',
-      control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'above' },
-      },
-    },
-    bodyContent: {
-      name: 'Body text',
-      description: 'The body text for the card',
-      control: {
-        type: 'text',
-      },
-    },
-    clickable: {
-      name: 'Clickable',
-      description: 'Toggles if the card is clickable or not.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    bodyDivider: {
-      name: 'Body divider',
-      description: 'Adds a divider above the body content.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'bodyImg', eq: false },
-    },
-    bodyImg: {
-      name: 'Body image',
-      description: 'Image in body on card.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    imageTop: {
-      name: 'Image on top',
-      description: 'Places the body image above the header.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'image', eq: true },
-    },
-    cardBottom: {
-      name: 'Content of the bottom of the card',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    header: 'Header text',
-    subheader: 'Subheader text',
-    headerImg: true,
-    headerPlacement: 'Above',
-    bodyImg: false,
-    bodyContent: '',
-    bodyDivider: false,
-    cardBottom: `<div slot="card-bottom"><sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon></div>`,
-    modeVariant: 'Inherit from parent',
-    clickable: false,
-  },
-};
-const Template = ({ modeVariant, headerPlacement, header, subheader, bodyContent, clickable, headerImg, bodyImg, bodyDivider, cardBottom, }) => formatHtmlPreview(`<style>
+import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Card',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    header: {
+      name: 'Header text',
+      description: 'Sets the header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader text',
+      description: 'Sets the subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    headerImg: {
+      name: 'Header image',
+      description: 'Toggles an image in the header.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    headerPlacement: {
+      name: 'Header placement',
+      description: 'Sets the placement of the header, above or below the body image.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'above' },
+      },
+    },
+    bodyImg: {
+      name: 'Body image',
+      description: 'Toggles an image in the card body. Cannot be combined with divider.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyDivider', eq: false },
+    },
+    bodyContent: {
+      name: 'Body text',
+      description: 'Sets the body text for the card.',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Adds a divider above the body content. Cannot be combined with body image.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyImg', eq: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    cardBottom: {
+      name: 'Content of the bottom of the card',
+      description: 'Slot to add custom HTML elements to the bottom of the card.',
+      control: {
+        type: 'text',
+      },
+    },
+    clickable: {
+      name: 'Clickable',
+      description: 'Toggles if the card is clickable or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    header: 'Header text',
+    subheader: 'Subheader text',
+    headerImg: true,
+    headerPlacement: 'Above',
+    bodyImg: false,
+    bodyContent: '',
+    bodyDivider: false,
+    cardBottom: `<div slot="card-bottom"><sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon></div>`,
+    clickable: false,
+  },
+};
+const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement, bodyImg, bodyContent, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`<style>
     /* demo-wrapper is for demonstration purposes only*/
     .demo-wrapper {
         width: 368px;
@@ -146,24 +137,24 @@ const Template = ({ modeVariant, headerPlacement, header, subheader, bodyContent
     ${clickable ? 'clickable' : ''}
     ${bodyDivider ? 'body-divider' : ''}
   >
-  ${bodyContent
+  ${bodyContent
   ? `
     <div slot="card-body">
         ${bodyContent}
-    </div>`
+    </div>`
   : ''}
     ${cardBottom ? `${cardBottom}` : ''}
     </sdds-card>
     </div>
-    ${clickable
+    ${clickable
   ? `
     <script>
         document.addEventListener('sddsClick', (event)=>{
             console.log('Card with id: ', event.detail.cardId, ' was clicked.')
         })
     </script>
-    `
+    `
   : ''}
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-card.stories.js.map
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-card.stories.js.map

package/dist/collection/components/card/sdds-card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-card.stories.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';\nimport { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Card',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant of the component, based on current mode.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    header: {\n      name: 'Header text',\n      description: 'The header text',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader text',\n      description: 'The subheader text',\n      control: {\n        type: 'text',\n      },\n    },\n    headerImg: {\n      name: 'Header image',\n      description: 'Image for the header',\n      control: {\n        type: 'boolean',\n      },\n    },\n    headerPlacement: {\n      name: 'Header placement',\n      description: 'Placement of the header',\n      control: {\n        type: 'radio',\n      },\n      options: ['Above', 'Below'],\n      table: {\n        defaultValue: { summary: 'above' },\n      },\n    },\n    bodyContent: {\n      name: 'Body text',\n      description: 'The body text for the card',\n      control: {\n        type: 'text',\n      },\n    },\n    clickable: {\n      name: 'Clickable',\n      description: 'Toggles if the card is clickable or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    bodyDivider: {\n      name: 'Body divider',\n      description: 'Adds a divider above the body content.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'bodyImg', eq: false },\n    },\n    bodyImg: {\n      name: 'Body image',\n      description: 'Image in body on card.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    imageTop: {\n      name: 'Image on top',\n      description: 'Places the body image above the header.',\n      control: {\n        type: 'text',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'image', eq: true },\n    },\n    cardBottom: {\n      name: 'Content of the bottom of the card',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    header: 'Header text',\n    subheader: 'Subheader text',\n    headerImg: true,\n    headerPlacement: 'Above',\n    bodyImg: false,\n    bodyContent: '',\n    bodyDivider: false,\n    cardBottom: `<div slot=\"card-bottom\"><sdds-icon style=\"font-size: 20px;\" name=\"arrow_right\"></sdds-icon></div>`,\n    modeVariant: 'Inherit from parent',\n    clickable: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  headerPlacement,\n  header,\n  subheader,\n  bodyContent,\n  clickable,\n  headerImg,\n  bodyImg,\n  bodyDivider,\n  cardBottom,\n}) =>\n  formatHtmlPreview(\n    `<style>\n    /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n        width: 368px;\n    }\n    </style>\n    <div class=\"demo-wrapper\">\n    <sdds-card\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    ${header ? `header=\"${header}\"` : ''}\n    header-placement=\"${headerPlacement.toLowerCase()}\"\n    ${subheader ? `subheader=\"${subheader}\"` : ''}\n    ${headerImg ? `header-img=\"${CardPlaceholder}\"` : ''}\n    ${bodyImg ? `body-img=\"${CardPlaceholder}\"` : ''}\n    ${clickable ? 'clickable' : ''}\n    ${bodyDivider ? 'body-divider' : ''}\n  >\n  ${\n    bodyContent\n      ? `\n    <div slot=\"card-body\">\n        ${bodyContent}\n    </div>`\n      : ''\n  }\n    ${cardBottom ? `${cardBottom}` : ''}\n    </sdds-card>\n    </div>\n    ${\n      clickable\n        ? `\n    <script>\n        document.addEventListener('sddsClick', (event)=>{\n            console.log('Card with id: ', event.detail.cardId, ' was clicked.')\n        })\n    </script>\n    `\n        : ''\n    }\n  `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-card.stories.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';\nimport { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Card',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    header: {\n      name: 'Header text',\n      description: 'Sets the header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader text',\n      description: 'Sets the subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    headerImg: {\n      name: 'Header image',\n      description: 'Toggles an image in the header.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    headerPlacement: {\n      name: 'Header placement',\n      description: 'Sets the placement of the header, above or below the body image.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Above', 'Below'],\n      table: {\n        defaultValue: { summary: 'above' },\n      },\n    },\n    bodyImg: {\n      name: 'Body image',\n      description: 'Toggles an image in the card body. Cannot be combined with divider.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'bodyDivider', eq: false },\n    },\n    bodyContent: {\n      name: 'Body text',\n      description: 'Sets the body text for the card.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyDivider: {\n      name: 'Body divider',\n      description: 'Adds a divider above the body content. Cannot be combined with body image.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'bodyImg', eq: false },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    cardBottom: {\n      name: 'Content of the bottom of the card',\n      description: 'Slot to add custom HTML elements to the bottom of the card.',\n      control: {\n        type: 'text',\n      },\n    },\n    clickable: {\n      name: 'Clickable',\n      description: 'Toggles if the card is clickable or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    header: 'Header text',\n    subheader: 'Subheader text',\n    headerImg: true,\n    headerPlacement: 'Above',\n    bodyImg: false,\n    bodyContent: '',\n    bodyDivider: false,\n    cardBottom: `<div slot=\"card-bottom\"><sdds-icon style=\"font-size: 20px;\" name=\"arrow_right\"></sdds-icon></div>`,\n    clickable: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  header,\n  subheader,\n  headerImg,\n  headerPlacement,\n  bodyImg,\n  bodyContent,\n  bodyDivider,\n  cardBottom,\n  clickable,\n}) =>\n  formatHtmlPreview(\n    `<style>\n    /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n        width: 368px;\n    }\n    </style>\n    <div class=\"demo-wrapper\">\n    <sdds-card\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    ${header ? `header=\"${header}\"` : ''}\n    header-placement=\"${headerPlacement.toLowerCase()}\"\n    ${subheader ? `subheader=\"${subheader}\"` : ''}\n    ${headerImg ? `header-img=\"${CardPlaceholder}\"` : ''}\n    ${bodyImg ? `body-img=\"${CardPlaceholder}\"` : ''}\n    ${clickable ? 'clickable' : ''}\n    ${bodyDivider ? 'body-divider' : ''}\n  >\n  ${\n    bodyContent\n      ? `\n    <div slot=\"card-body\">\n        ${bodyContent}\n    </div>`\n      : ''\n  }\n    ${cardBottom ? `${cardBottom}` : ''}\n    </sdds-card>\n    </div>\n    ${\n      clickable\n        ? `\n    <script>\n        document.addEventListener('sddsClick', (event)=>{\n            console.log('Card with id: ', event.detail.cardId, ' was clicked.')\n        })\n    </script>\n    `\n        : ''\n    }\n  `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/checkbox/checkbox.stories.js

@@ -1,55 +1,63 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Checkbox',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the checkbox',
-      control: {
-        type: 'boolean',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Checks the checkbox',
-      control: {
-        type: 'boolean',
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'The label of the component',
-      type: 'string',
-    },
-  },
-  args: {
-    disabled: false,
-    checked: false,
-    label: 'Label',
-  },
-};
-const Template = ({ checked, disabled, label }) => formatHtmlPreview(`
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Checkbox',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Checks the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    checked: false,
+    disabled: false,
+  },
+};
+const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
     <div class="sdds-checkbox-item">
       <input class="sdds-form-input" type="checkbox" id="unique-id" ${checked ? 'checked="checked"' : ''}  ${disabled ? 'disabled' : ''}>
-      ${label
-  ? `<label class="sdds-form-label" for="unique-id" ${disabled ? 'disabled' : ''}>  ${label} </label>`
+      ${label
+  ? `<label class="sdds-form-label" for="unique-id" ${disabled ? 'disabled' : ''}>  ${label} </label>`
   : ''}
     </div>
-  `);
-export const Native = Template.bind({});
-//# sourceMappingURL=checkbox.stories.js.map
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=checkbox.stories.js.map

package/dist/collection/components/checkbox/checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,uBAAuB;MACpC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,4BAA4B;MACzC,IAAI,EAAE,QAAQ;KACf;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,OAAO;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAChD,iBAAiB,CAAC;;sEAGZ,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAClC,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QAE7B,KAAK;EACH,CAAC,CAAC,kDACE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,WAAW;EACxB,CAAC,CAAC,EACN;;GAEH,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Checkbox',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox',\n      control: {\n        type: 'boolean',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Checks the checkbox',\n      control: {\n        type: 'boolean',\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'The label of the component',\n      type: 'string',\n    },\n  },\n  args: {\n    disabled: false,\n    checked: false,\n    label: 'Label',\n  },\n};\n\nconst Template = ({ checked, disabled, label }) =>\n  formatHtmlPreview(`\n    <div class=\"sdds-checkbox-item\">\n      <input class=\"sdds-form-input\" type=\"checkbox\" id=\"unique-id\" ${\n        checked ? 'checked=\"checked\"' : ''\n      }  ${disabled ? 'disabled' : ''}>\n      ${\n        label\n          ? `<label class=\"sdds-form-label\" for=\"unique-id\" ${\n              disabled ? 'disabled' : ''\n            }>  ${label} </label>`\n          : ''\n      }\n    </div>\n  `);\n\nexport const Native = Template.bind({});\n"]}
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChD,iBAAiB,CAAC;;sEAGZ,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAClC,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QAE7B,KAAK;EACH,CAAC,CAAC,kDACE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,WAAW;EACxB,CAAC,CAAC,EACN;;GAEH,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Checkbox',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Checks the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, checked, disabled }) =>\n  formatHtmlPreview(`\n    <div class=\"sdds-checkbox-item\">\n      <input class=\"sdds-form-input\" type=\"checkbox\" id=\"unique-id\" ${\n        checked ? 'checked=\"checked\"' : ''\n      }  ${disabled ? 'disabled' : ''}>\n      ${\n        label\n          ? `<label class=\"sdds-form-label\" for=\"unique-id\" ${\n              disabled ? 'disabled' : ''\n            }>  ${label} </label>`\n          : ''\n      }\n    </div>\n  `);\n\nexport const Native = Template.bind({});\n"]}