@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.10

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

@@ -1,386 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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