@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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({});

package/dist/collection/index.js

@@ -1 +1 @@
-export * from './components';
+export * from './components';

package/dist/collection/utils/utils.js

@@ -1,12 +1,12 @@
-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}` : '');
+}