npm - @scania/tegel - Versions diffs - 0.0.1-beta.9 → 0.0.2 - Mend

@scania/tegel 0.0.1-beta.9 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (530) hide show

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

@@ -0,0 +1,386 @@
+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 */
+    .sdds-container,
+    .sdds-container-fluid {
+      background-color: #ff00009e;
+      color: black;
+      outline: 1px solid red;
+    }
+    .sdds-row > div {
+      outline: 1px solid #ef1919;
+      background: #fbc5c5;
+      min-height: 50px;
+    }
+    .sdds-sidebar {
+      background-color: rgba(255, 0, 0, 0.1);
+    }
+    .inside-demo {
+      background: #ef9191;
+      height: 100%;
+      word-break: break-word;
+    }
+    .container-demo {
+      margin-top: 16px;
+    }
+  </style>`);
+const GridTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+  ${style}
+  <h4>Grid</h4>
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">12</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">11</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">10</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">9</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">8</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">7</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">6</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">5</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">4</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">3</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">2</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">1</div>
+      </div>
+    </div>
+  </div>
+  `);
+// Controls for the grid
+export const Default = GridTemplate.bind({});
+const GridAutoColTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+  ${style}
+  <h4>Grid Auto columns</h4>
+  <h5>Container 1</h5>
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <div class="sdds-col">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+    </div>
+  </div>
+  <h5>Container 2</h5>
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+    </div>
+  </div>
+  <h5>Container 3</h5>
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+    </div>
+  </div>
+  `);
+export const Auto = GridAutoColTemplate.bind({});
+const GridPushTemplate = ({ fluidContainer, collapse, padding }) => formatHtmlPreview(`
+  ${style}
+  <h4>Grid Push</h4>
+  <div class="sdds-push">
+    <div class="sdds-sidebar ${collapse ? 'sdds-sidebar-collapse' : ''}">
+    </div>
+    <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+      <div class="sdds-row">
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `);
+export const Push = GridPushTemplate.bind({});
+Push.args = {
+  collapse: false,
+};
+const GridOffsetTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+  ${style}
+  <h4>Grid Offset</h4>
+    <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+      <div class="sdds-row">
+        <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">
+          <div class="inside-demo">Offset</div>
+        </div>
+        <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">
+          <div class="inside-demo">Offset</div>
+        </div>
+        <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">
+          <div class="inside-demo">Offset</div>
+        </div>
+      </div>
+    </div>
+  `);
+export const Offset = GridOffsetTemplate.bind({});
+const GridNoPaddingTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+    ${style}
+    <h4>Grid no-padding</h4>
+    <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} demo-example-cols">
+      <div class="sdds-row">
+        <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">
+          <div class="inside-demo">no padding</div>
+        </div>
+        <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">
+          <div class="inside-demo">no padding</div>
+        </div>
+        <div class="${padding ? '' : '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">
+          <div class="inside-demo">padding</div>
+        </div>
+        <div class="${padding ? '' : '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">
+          <div class="inside-demo">padding</div>
+        </div>
+      </div>
+    </div>
+  `);
+export const NoPadding = GridNoPaddingTemplate.bind({});
+NoPadding.args = {
+  padding: true,
+};
+const GridFluidTemplate = ({ fluidContainer = true, padding }) => formatHtmlPreview(`
+    ${style}
+    <h4>Grid fluid</h4>
+    <div class="sdds-container-fluid ${padding === false ? 'sdds-no-padding' : ''}">
+      <div class="sdds-row">
+        <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">
+          <div class="inside-demo">container fluid</div>
+        </div>
+      </div>
+    </div>
+    <div class="${fluidContainer ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''} container-demo">
+      <div class="sdds-row">
+        <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">
+          <div class="inside-demo">container</div>
+        </div>
+      </div>
+    </div>
+  `);
+export const Fluid = GridFluidTemplate.bind({});
+const GridNestedTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+ ${style}
+ <h4>Nested</h4>
+ <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}">
+   <div class="sdds-row">
+     <div class="${padding === false ? '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">
+       <div class="inside-demo">12</div>
+     </div>
+   </div>
+   <div class="sdds-row">
+     <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">
+      <div class="sdds-row">
+        <div class="${padding === false ? 'sdds-no-padding' : ''} 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">
+          <div class="inside-demo">6 nested</div>
+        </div>
+        <div class=" ${padding === false ? 'sdds-no-padding' : ''} 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">
+          <div class="inside-demo">6 nested</div>
+        </div>
+      </div>
+     </div>
+     <div class="${padding === false ? 'sdds-no-padding' : ''} 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">
+       <div class="inside-demo">6</div>
+     </div>
+   </div>
+  </div>
+ `);
+export const Nested = GridNestedTemplate.bind({});
+const GridHideShow = ({ fluidContainer }) => formatHtmlPreview(`
+  ${style}
+  <h4>Hide/show element</h4>
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}">
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">Hide on xlg and wider</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <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">
+        <div class="inside-demo">Show on md and wider</div>
+      </div>
+    </div>
+  </div>
+  `);
+export const ShowHide = GridHideShow.bind({});

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

@@ -0,0 +1,100 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+    /* Demo code for presentation purposes */
+    .sdds-spacing-element-demo-box {
+      background-color: var(--sdds-red-500);
+      display: inline-block;
+    }
+    table th, table td {
+      padding: 8px;
+      text-align: center;
+    }
+    th:last-child {
+        text-align: left;
+    }
+    th:last-child,
+    td:last-child {
+      text-align: left;
+    }
+  </style>
+  <h4>Spacing Element</h4>
+  <table>
+    <tr>
+      <th>Px</th>
+      <th>Token</th>
+      <th>CSS</th>
+      <th>Scale</th>
+    </tr>
+    <tr>
+      <td>2px</td>
+      <td><code>$spacing-element-2</code></td>
+      <td><code>.sdds-spacing-element-2</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)"></span></td>
+    </tr>
+    <tr>
+      <td>4px</td>
+      <td><code>$spacing-element-4</code></td>
+      <td><code>.sdds-spacing-element-4</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)"></span></td>
+    </tr>
+    <tr>
+      <td>8px</td>
+      <td><code>$spacing-element-8</code></td>
+      <td><code>.sdds-spacing-element-8</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)"></span></td>
+    </tr>
+    <tr>
+      <td>12px</td>
+      <td><code>$spacing-element-12</code></td>
+      <td><code>.sdds-spacing-element-12</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);"></span></td>
+    </tr>
+    <tr>
+      <td>16px</td>
+      <td><code>$spacing-element-16</code></td>
+      <td><code>.sdds-spacing-element-16</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);"></span></td>
+    </tr>
+    <tr>
+      <td>20px</td>
+      <td><code>$spacing-element-20</code></td>
+      <td><code>.sdds-spacing-element-20</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);"></span></td>
+    </tr>
+    <tr>
+      <td>24px</td>
+      <td><code>$spacing-element-24</code></td>
+      <td><code>.sdds-spacing-element-24</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);"></span></td>
+    </tr>
+    <tr>
+      <td>32px</td>
+      <td><code>$spacing-element-32</code></td>
+      <td><code>.sdds-spacing-element-32</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);"></span></td>
+    </tr>
+    <tr>
+      <td>40px</td>
+      <td><code>$spacing-element-40</code></td>
+      <td><code>.sdds-spacing-element-40</code></td>
+      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);"></span></td>
+    </tr>
+    <tr>
+      <td>48px</td>
+      <td><code>$spacing-element-48</code></td>
+      <td><code>.sdds-spacing-element-48</code></td>
+      <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 = {};

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

@@ -0,0 +1,94 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+   /* Demo code for presentation purposes */
+    .demo-wrapper {
+      background-color: var(--sdds-blue-500);
+      display: inline-block;
+    }
+    table th, table td {
+      padding: 8px;
+    }
+    th:last-child,
+    td:last-child {
+      text-align: left;
+    }
+  </style>
+  <table>
+    <tr>
+      <th>Px</th>
+      <th>Token</th>
+      <th>CSS</th>
+      <th>Scale</th>
+    </tr>
+    <tr>
+      <td>8px</td>
+      <td><code>$spacing-layout-8</code></td>
+      <td><code>.sdds-spacing-layout-8</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)"></span></td>
+    </tr>
+    <tr>
+      <td>16px</td>
+      <td><code>$spacing-layout-16</code></td>
+      <td><code>.sdds-spacing-layout-16</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);"></span></td>
+    </tr>
+    <tr>
+      <td>24px</td>
+      <td><code>$spacing-layout-24</code></td>
+      <td><code>.sdds-spacing-layout-24</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);"></span></td>
+    </tr>
+    <tr>
+      <td>32px</td>
+      <td><code>$spacing-layout-32</code></td>
+      <td><code>.sdds-spacing-layout-32</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);"></span></td>
+    </tr>
+    <tr>
+      <td>48px</td>
+      <td><code>$spacing-layout-48</code></td>
+      <td><code>.sdds-spacing-layout-48</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);"></span></td>
+    </tr>
+    <tr>
+      <td>64px</td>
+      <td><code>$spacing-layout-64</code></td>
+      <td><code>.sdds-spacing-layout-64</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);"></span></td>
+    </tr>
+    <tr>
+      <td>72px</td>
+      <td><code>$spacing-layout-72</code></td>
+      <td><code>.sdds-spacing-layout-72</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);"></span></td>
+    </tr>
+    <tr>
+      <td>96px</td>
+      <td><code>$spacing-layout-96</code></td>
+      <td><code>.sdds-spacing-layout-96</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);"></span></td>
+    </tr>
+    <tr>
+      <td>128px</td>
+      <td><code>$spacing-layout-128</code></td>
+      <td><code>.sdds-spacing-layout-128</code></td>
+      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);"></span></td>
+    </tr>
+    <tr>
+      <td>160px</td>
+      <td><code>$spacing-layout-160</code></td>
+      <td><code>.sdds-spacing-layout-160</code></td>
+      <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 = {};

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

@@ -0,0 +1,16 @@
+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.
+  </p>
+  <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({});

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

@@ -0,0 +1,17 @@
+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>
+  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>
+  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
+  <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({});

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

@@ -0,0 +1,39 @@
+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 */
+    .demo-wrapper h1 {
+        margin: 0;
+    }
+    </style>
+    <div class="demo-wrapper">
+        <h1 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-01">Headline</h1>
+        <h2 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-02">Headline</h2>
+        <h3 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-03">A headline for page layouts</h3>
+        <h4 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-04">A headline for page layouts</h4>
+        <h5 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-05">A sub headline, which is most commonly paired with body-01</h5>
+        <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',
+};

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

@@ -0,0 +1,12 @@
+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({});