@scania/tegel 0.0.2 → 0.0.32

package/dist/collection/foundations-stories/grid/grid.stories.js

@@ -1,31 +1,31 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Grid',
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    fluidContainer: false,
-    padding: true,
-  },
-  argTypes: {
-    fluidContainer: {
-      name: 'Fluid container',
-      description: 'Set container to fluid or not',
-      control: {
-        type: 'boolean',
-      },
-    },
-    padding: {
-      name: 'Fluid container',
-      description: 'Toggle padding on columns',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-// Styling for grid templates
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Grid',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    fluidContainer: false,
+    padding: true,
+  },
+  argTypes: {
+    fluidContainer: {
+      name: 'Fluid container',
+      description: 'Set container to fluid or not',
+      control: {
+        type: 'boolean',
+      },
+    },
+    padding: {
+      name: 'Fluid container',
+      description: 'Toggle padding on columns',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+// Styling for grid templates
 const style = formatHtmlPreview(`
   <style>
     /* Demo code for presentation purposes */
@@ -56,7 +56,7 @@ const style = formatHtmlPreview(`
       margin-top: 16px;
     }
 
-  </style>`);
+  </style>`);
 const GridTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
   ${style}
   <h4>Grid</h4>
@@ -135,9 +135,9 @@ const GridTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
       </div>
     </div>
   </div>
-  `);
-// Controls for the grid
-export const Default = GridTemplate.bind({});
+  `);
+// Controls for the grid
+export const Default = GridTemplate.bind({});
 const GridAutoColTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
   ${style}
 
@@ -213,8 +213,8 @@ const GridAutoColTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
       </div>
     </div>
   </div>
-  `);
-export const Auto = GridAutoColTemplate.bind({});
+  `);
+export const Auto = GridAutoColTemplate.bind({});
 const GridPushTemplate = ({ fluidContainer, collapse, padding }) => formatHtmlPreview(`
   ${style}
 
@@ -264,11 +264,11 @@ const GridPushTemplate = ({ fluidContainer, collapse, padding }) => formatHtmlPr
       </div>
     </div>
   </div>
-  `);
-export const Push = GridPushTemplate.bind({});
-Push.args = {
-  collapse: false,
-};
+  `);
+export const Push = GridPushTemplate.bind({});
+Push.args = {
+  collapse: false,
+};
 const GridOffsetTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
   ${style}
 
@@ -287,8 +287,8 @@ const GridOffsetTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
         </div>
       </div>
     </div>
-  `);
-export const Offset = GridOffsetTemplate.bind({});
+  `);
+export const Offset = GridOffsetTemplate.bind({});
 const GridNoPaddingTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
     ${style}
 
@@ -310,11 +310,11 @@ const GridNoPaddingTemplate = ({ fluidContainer, padding }) => formatHtmlPreview
         </div>
       </div>
     </div>
-  `);
-export const NoPadding = GridNoPaddingTemplate.bind({});
-NoPadding.args = {
-  padding: true,
-};
+  `);
+export const NoPadding = GridNoPaddingTemplate.bind({});
+NoPadding.args = {
+  padding: true,
+};
 const GridFluidTemplate = ({ fluidContainer = true, padding }) => formatHtmlPreview(`
     ${style}
 
@@ -334,8 +334,8 @@ const GridFluidTemplate = ({ fluidContainer = true, padding }) => formatHtmlPrev
         </div>
       </div>
     </div>
-  `);
-export const Fluid = GridFluidTemplate.bind({});
+  `);
+export const Fluid = GridFluidTemplate.bind({});
 const GridNestedTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
  ${style}
 
@@ -363,8 +363,8 @@ const GridNestedTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
      </div>
    </div>
   </div>
- `);
-export const Nested = GridNestedTemplate.bind({});
+ `);
+export const Nested = GridNestedTemplate.bind({});
 const GridHideShow = ({ fluidContainer }) => formatHtmlPreview(`
   ${style}
 
@@ -382,5 +382,6 @@ const GridHideShow = ({ fluidContainer }) => formatHtmlPreview(`
       </div>
     </div>
   </div>
-  `);
-export const ShowHide = GridHideShow.bind({});
+  `);
+export const ShowHide = GridHideShow.bind({});
+//# sourceMappingURL=grid.stories.js.map

package/dist/collection/foundations-stories/grid/grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/grid/grid.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Grid',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  args: {\n    fluidContainer: false,\n    padding: true,\n  },\n  argTypes: {\n    fluidContainer: {\n      name: 'Fluid container',\n      description: 'Set container to fluid or not',\n      control: {\n        type: 'boolean',\n      },\n    },\n    padding: {\n      name: 'Fluid container',\n      description: 'Toggle padding on columns',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n};\n\n// Styling for grid templates\nconst style = formatHtmlPreview(`\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-container,\n    .sdds-container-fluid {\n      background-color: #ff00009e;\n      color: black;\n      outline: 1px solid red;\n    }\n\n    .sdds-row > div {\n      outline: 1px solid #ef1919;\n      background: #fbc5c5;\n      min-height: 50px;\n    }\n\n    .sdds-sidebar {\n      background-color: rgba(255, 0, 0, 0.1);\n    }\n\n    .inside-demo {\n      background: #ef9191;\n      height: 100%;\n      word-break: break-word;\n    }\n\n    .container-demo {\n      margin-top: 16px;\n    }\n\n  </style>`);\n\nconst GridTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n  <h4>Grid</h4>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">12</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-11 sdds-col-xxlg-11 sdds-col-xlg-11 sdds-col-lg-11 sdds-col-md-11 sdds-col-sm-11 sdds-col-xs-11\">\n        <div class=\"inside-demo\">11</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-10 sdds-col-xxlg-10 sdds-col-xlg-10 sdds-col-lg-10 sdds-col-md-10 sdds-col-sm-10 sdds-col-xs-10\">\n        <div class=\"inside-demo\">10</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-9 sdds-col-xxlg-9 sdds-col-xlg-9 sdds-col-lg-9 sdds-col-md-9 sdds-col-sm-9 sdds-col-xs-9\">\n        <div class=\"inside-demo\">9</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n        <div class=\"inside-demo\">8</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-7 sdds-col-xxlg-7 sdds-col-xlg-7 sdds-col-lg-7 sdds-col-md-7 sdds-col-sm-7 sdds-col-xs-7\">\n        <div class=\"inside-demo\">7</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n        <div class=\"inside-demo\">6</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-5 sdds-col-xxlg-5 sdds-col-xlg-5 sdds-col-lg-5 sdds-col-md-5 sdds-col-sm-5 sdds-col-xs-5\">\n        <div class=\"inside-demo\">5</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-4 sdds-col-xxlg-4 sdds-col-xlg-4 sdds-col-lg-4 sdds-col-md-4 sdds-col-sm-4 sdds-col-xs-4\">\n        <div class=\"inside-demo\">4</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-3 sdds-col-xxlg-3 sdds-col-xlg-3 sdds-col-lg-3 sdds-col-md-3 sdds-col-sm-3 sdds-col-xs-3\">\n        <div class=\"inside-demo\">3</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-2 sdds-col-xxlg-2 sdds-col-xlg-2 sdds-col-lg-2 sdds-col-md-2 sdds-col-sm-2 sdds-col-xs-2\">\n        <div class=\"inside-demo\">2</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-1 sdds-col-xxlg-1 sdds-col-xlg-1 sdds-col-lg-1 sdds-col-md-1 sdds-col-sm-1 sdds-col-xs-1\">\n        <div class=\"inside-demo\">1</div>\n      </div>\n    </div>\n  </div>\n  `);\n\n// Controls for the grid\nexport const Default = GridTemplate.bind({});\n\nconst GridAutoColTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Auto columns</h4>\n  <h5>Container 1</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n\n  <h5>Container 2</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n\n  <h5>Container 3</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const Auto = GridAutoColTemplate.bind({});\n\nconst GridPushTemplate = ({ fluidContainer, collapse, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Push</h4>\n\n  <div class=\"sdds-push\">\n    <div class=\"sdds-sidebar ${collapse ? 'sdds-sidebar-collapse' : ''}\">\n    </div>\n    <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const Push = GridPushTemplate.bind({});\n\nPush.args = {\n  collapse: false,\n};\n\nconst GridOffsetTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Offset</h4>\n\n    <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n        <div class=\"sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n        <div class=\"sdds-col-max-2 sdds-col-max-2-offset sdds-col-xxlg-2 sdds-col-xxlg-2-offset sdds-col-xlg-2 sdds-col-xlg-2-offset sdds-col-lg-2 sdds-col-lg-2-offset sdds-col-md-2 sdds-col-md-2-offset sdds-col-sm-2 sdds-col-sm-2-offset sdds-col-xs-2 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const Offset = GridOffsetTemplate.bind({});\n\nconst GridNoPaddingTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n    ${style}\n\n    <h4>Grid no-padding</h4>\n\n    <div class=\"${\n      fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'\n    } demo-example-cols\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-no-padding sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n          <div class=\"inside-demo\">no padding</div>\n        </div>\n        <div class=\"sdds-no-padding sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">no padding</div>\n        </div>\n        <div class=\"${\n          padding ? '' : 'sdds-no-padding'\n        } sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">padding</div>\n        </div>\n        <div class=\"${\n          padding ? '' : 'sdds-no-padding'\n        } sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n          <div class=\"inside-demo\">padding</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const NoPadding = GridNoPaddingTemplate.bind({});\n\nNoPadding.args = {\n  padding: true,\n};\n\nconst GridFluidTemplate = ({ fluidContainer = true, padding }) =>\n  formatHtmlPreview(`\n    ${style}\n\n    <h4>Grid fluid</h4>\n\n    <div class=\"sdds-container-fluid ${padding === false ? 'sdds-no-padding' : ''}\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">container fluid</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"${fluidContainer ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  } container-demo\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">container</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const Fluid = GridFluidTemplate.bind({});\n\nconst GridNestedTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n ${style}\n\n <h4>Nested</h4>\n\n <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}\">\n   <div class=\"sdds-row\">\n     <div class=\"${\n       padding === false ? 'sdds-no-padding' : ''\n     } sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n       <div class=\"inside-demo\">12</div>\n     </div>\n   </div>\n   <div class=\"sdds-row\">\n     <div class=\"sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n      <div class=\"sdds-row\">\n        <div class=\"${\n          padding === false ? 'sdds-no-padding' : ''\n        } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n          <div class=\"inside-demo\">6 nested</div>\n        </div>\n        <div class=\" ${\n          padding === false ? 'sdds-no-padding' : ''\n        } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n          <div class=\"inside-demo\">6 nested</div>\n        </div>\n      </div>\n     </div>\n     <div class=\"${\n       padding === false ? 'sdds-no-padding' : ''\n     } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n       <div class=\"inside-demo\">6</div>\n     </div>\n   </div>\n  </div>\n `);\n\nexport const Nested = GridNestedTemplate.bind({});\n\nconst GridHideShow = ({ fluidContainer }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Hide/show element</h4>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-hide-xlg sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">Hide on xlg and wider</div>\n      </div>\n    </div>\n    <div class=\"sdds-row\">\n      <div class=\"sdds-hide-xs sdds-show-md sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">Show on md and wider</div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const ShowHide = GridHideShow.bind({});\n"]}

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js

@@ -1,10 +1,10 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Spacing',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
 const Template = () => formatHtmlPreview(`
   <style>
     /* Demo code for presentation purposes */
@@ -95,6 +95,7 @@ const Template = () => formatHtmlPreview(`
       <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);"></span></td>
     </tr>
   </table>
-  `);
-export const SpacingElement = Template.bind({});
-SpacingElement.args = {};
+  `);
+export const SpacingElement = Template.bind({});
+SpacingElement.args = {};
+//# sourceMappingURL=spacing-element.stories.js.map

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing-element.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-element.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-spacing-element-demo-box {\n      background-color: var(--sdds-red-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n      text-align: center;\n    }\n\n    th:last-child {\n        text-align: left;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <h4>Spacing Element</h4>\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>2px</td>\n      <td><code>$spacing-element-2</code></td>\n      <td><code>.sdds-spacing-element-2</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)\"></span></td>\n    </tr>\n    <tr>\n      <td>4px</td>\n      <td><code>$spacing-element-4</code></td>\n      <td><code>.sdds-spacing-element-4</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)\"></span></td>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-element-8</code></td>\n      <td><code>.sdds-spacing-element-8</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>12px</td>\n      <td><code>$spacing-element-12</code></td>\n      <td><code>.sdds-spacing-element-12</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-element-16</code></td>\n      <td><code>.sdds-spacing-element-16</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>20px</td>\n      <td><code>$spacing-element-20</code></td>\n      <td><code>.sdds-spacing-element-20</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-element-24</code></td>\n      <td><code>.sdds-spacing-element-24</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-element-32</code></td>\n      <td><code>.sdds-spacing-element-32</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>40px</td>\n      <td><code>$spacing-element-40</code></td>\n      <td><code>.sdds-spacing-element-40</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-element-48</code></td>\n      <td><code>.sdds-spacing-element-48</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingElement = Template.bind({});\nSpacingElement.args = {};\n"]}

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js

@@ -1,10 +1,10 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Spacing',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
 const Template = () => formatHtmlPreview(`
   <style>
    /* Demo code for presentation purposes */
@@ -89,6 +89,7 @@ const Template = () => formatHtmlPreview(`
       <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);"></span></td>
     </tr>
   </table>
-  `);
-export const SpacingLayout = Template.bind({});
-SpacingLayout.args = {};
+  `);
+export const SpacingLayout = Template.bind({});
+SpacingLayout.args = {};
+//# sourceMappingURL=spacing-layout.stories.js.map

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing-layout.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-layout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n   /* Demo code for presentation purposes */\n    .demo-wrapper {\n      background-color: var(--sdds-blue-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-layout-8</code></td>\n      <td><code>.sdds-spacing-layout-8</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-layout-16</code></td>\n      <td><code>.sdds-spacing-layout-16</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-layout-24</code></td>\n      <td><code>.sdds-spacing-layout-24</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-layout-32</code></td>\n      <td><code>.sdds-spacing-layout-32</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-layout-48</code></td>\n      <td><code>.sdds-spacing-layout-48</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);\"></span></td>\n    </tr>\n    <tr>\n      <td>64px</td>\n      <td><code>$spacing-layout-64</code></td>\n      <td><code>.sdds-spacing-layout-64</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);\"></span></td>\n    </tr>\n    <tr>\n      <td>72px</td>\n      <td><code>$spacing-layout-72</code></td>\n      <td><code>.sdds-spacing-layout-72</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);\"></span></td>\n    </tr>\n    <tr>\n      <td>96px</td>\n      <td><code>$spacing-layout-96</code></td>\n      <td><code>.sdds-spacing-layout-96</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);\"></span></td>\n    </tr>\n    <tr>\n      <td>128px</td>\n      <td><code>$spacing-layout-128</code></td>\n      <td><code>.sdds-spacing-layout-128</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);\"></span></td>\n    </tr>\n    <tr>\n      <td>160px</td>\n      <td><code>$spacing-layout-160</code></td>\n      <td><code>.sdds-spacing-layout-160</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingLayout = Template.bind({});\nSpacingLayout.args = {};\n"]}

package/dist/collection/foundations-stories/typography/typography-body.stories.js

@@ -1,10 +1,10 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
 const Template = () => formatHtmlPreview(`
   <p class='sdds-body-01'>
   Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.
@@ -12,5 +12,6 @@ const Template = () => formatHtmlPreview(`
   <p class='sdds-body-02'>
   Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.
   </p>
-  `);
-export const Body = Template.bind({});
+  `);
+export const Body = Template.bind({});
+//# sourceMappingURL=typography-body.stories.js.map

package/dist/collection/foundations-stories/typography/typography-body.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-body.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-body.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;GAOD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-body-01'>\n  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.\n  </p>\n  <p class='sdds-body-02'>\n  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.\n  </p>\n  `,\n  );\n\nexport const Body = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-detail.stories.js

@@ -1,10 +1,10 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
 const Template = () => formatHtmlPreview(`
   <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>
   <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>
@@ -13,5 +13,6 @@ const Template = () => formatHtmlPreview(`
   <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>
   <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
   <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>
-  `);
-export const Detail = Template.bind({});
+  `);
+export const Detail = Template.bind({});
+//# sourceMappingURL=typography-detail.stories.js.map

package/dist/collection/foundations-stories/typography/typography-detail.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-detail.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-detail.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;GAQD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>\n  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>\n  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>\n  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>\n  <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>\n  `,\n  );\n\nexport const Detail = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-headline.stories.js

@@ -1,20 +1,20 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'The type of headline. Functional/Expressive.',
-      control: {
-        type: 'radio',
-      },
-      options: { Functional: 'functional', Expressive: 'expressive' },
-    },
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'The type of headline. Functional/Expressive.',
+      control: {
+        type: 'radio',
+      },
+      options: { Functional: 'functional', Expressive: 'expressive' },
+    },
+  },
+};
 const Template = ({ type }) => formatHtmlPreview(`
     <style>
     /* Demo code for presentation purposes */
@@ -32,8 +32,9 @@ const Template = ({ type }) => formatHtmlPreview(`
         <h6 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-06">A sub headline, which is most commonly paired with body-02</h6>
         <h7 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-07">A sub headline, which is most commonly paired with detail-02 </h7>
     </div>
-  `);
-export const Headlines = Template.bind({});
-Headlines.args = {
-  type: 'functional',
-};
+  `);
+export const Headlines = Template.bind({});
+Headlines.args = {
+  type: 'functional',
+};
+//# sourceMappingURL=typography-headline.stories.js.map

package/dist/collection/foundations-stories/typography/typography-headline.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-headline.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-headline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,8CAA8C;MAC3D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE;KAChE;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAC5B,iBAAiB,CACf;;;;;;;;;0BASsB,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BACvC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BAEvD,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;;GAEL,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,IAAI,EAAE,YAAY;CACnB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'The type of headline. Functional/Expressive.',\n      control: {\n        type: 'radio',\n      },\n      options: { Functional: 'functional', Expressive: 'expressive' },\n    },\n  },\n};\n\nconst Template = ({ type }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Demo code for presentation purposes */\n    .demo-wrapper h1 {\n        margin: 0;\n    }\n    </style>\n\n    <div class=\"demo-wrapper\">\n        <h1 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-01\">Headline</h1>\n        <h2 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-02\">Headline</h2>\n        <h3 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-03\">A headline for page layouts</h3>\n        <h4 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-04\">A headline for page layouts</h4>\n        <h5 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-05\">A sub headline, which is most commonly paired with body-01</h5>\n        <h6 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-06\">A sub headline, which is most commonly paired with body-02</h6>\n        <h7 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-07\">A sub headline, which is most commonly paired with detail-02 </h7>\n    </div>\n  `,\n  );\n\nexport const Headlines = Template.bind({});\nHeadlines.args = {\n  type: 'functional',\n};\n"]}

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js

@@ -1,12 +1,13 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
 const Template = () => formatHtmlPreview(`
         <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>
         <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>
-  `);
-export const Paragraph = Template.bind({});
+  `);
+export const Paragraph = Template.bind({});
+//# sourceMappingURL=typography-paragraph.stories.js.map

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-paragraph.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-paragraph.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;GAGD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>\n        <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>\n  `,\n  );\n\nexport const Paragraph = Template.bind({});\n"]}

package/dist/collection/index.js

@@ -1 +1,2 @@
-export * from './components';
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/collection/utils/utils.js

@@ -1,12 +1,13 @@
-import prettier from 'prettier/standalone';
-import parserBabel from 'prettier/parser-babel';
-import parserHtml from 'prettier/parser-html';
-const prettierOptions = {
-  bracketSameLine: false,
-  htmlWhitespaceSensitivity: 'ignore',
-  printWidth: 100,
-};
-export const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.assign({ parser: 'html', plugins: [parserBabel, parserHtml] }, prettierOptions));
-export function demoFormat(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
+import prettier from 'prettier/standalone';
+import parserBabel from 'prettier/parser-babel';
+import parserHtml from 'prettier/parser-html';
+const prettierOptions = {
+  bracketSameLine: false,
+  htmlWhitespaceSensitivity: 'ignore',
+  printWidth: 100,
+};
+export const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.assign({ parser: 'html', plugins: [parserBabel, parserHtml] }, prettierOptions));
+export function demoFormat(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAG9C,MAAM,eAAe,GAAY;EAC/B,eAAe,EAAE,KAAK;EACtB,yBAAyB,EAAE,QAAQ;EACnC,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,EAAE,CAC3C,QAAQ,CAAC,MAAM,CAAC,OAAO,kBACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,IAC/B,eAAe,EAClB,CAAC;AAEL,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;EACpE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["import prettier from 'prettier/standalone';\nimport parserBabel from 'prettier/parser-babel';\nimport parserHtml from 'prettier/parser-html';\nimport { Options } from 'prettier';\n\nconst prettierOptions: Options = {\n  bracketSameLine: false,\n  htmlWhitespaceSensitivity: 'ignore',\n  printWidth: 100,\n};\n\nexport const formatHtmlPreview = (htmlStr) =>\n  prettier.format(htmlStr, {\n    parser: 'html',\n    plugins: [parserBabel, parserHtml],\n    ...prettierOptions,\n  });\n\nexport function demoFormat(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}