@scania/tegel 0.0.51 → 0.0.52

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,6 +382,6 @@ const GridHideShow = ({ fluidContainer }) => formatHtmlPreview(`
       </div>
     </div>
   </div>
-  `);
-export const ShowHide = GridHideShow.bind({});
-//# sourceMappingURL=grid.stories.js.map
+  `);
+export const ShowHide = GridHideShow.bind({});
+//# sourceMappingURL=grid.stories.js.map

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,7 +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 = {};
-//# sourceMappingURL=spacing-element.stories.js.map
+  `);
+export const SpacingElement = Template.bind({});
+SpacingElement.args = {};
+//# sourceMappingURL=spacing-element.stories.js.map

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,7 +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 = {};
-//# sourceMappingURL=spacing-layout.stories.js.map
+  `);
+export const SpacingLayout = Template.bind({});
+SpacingLayout.args = {};
+//# sourceMappingURL=spacing-layout.stories.js.map

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,6 +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({});
-//# sourceMappingURL=typography-body.stories.js.map
+  `);
+export const Body = Template.bind({});
+//# sourceMappingURL=typography-body.stories.js.map

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,6 +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({});
-//# sourceMappingURL=typography-detail.stories.js.map
+  `);
+export const Detail = Template.bind({});
+//# sourceMappingURL=typography-detail.stories.js.map

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,9 +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',
-};
-//# sourceMappingURL=typography-headline.stories.js.map
+  `);
+export const Headlines = Template.bind({});
+Headlines.args = {
+  type: 'functional',
+};
+//# sourceMappingURL=typography-headline.stories.js.map

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

@@ -1,13 +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({});
-//# sourceMappingURL=typography-paragraph.stories.js.map
+  `);
+export const Paragraph = Template.bind({});
+//# sourceMappingURL=typography-paragraph.stories.js.map

package/dist/collection/index.js

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

package/dist/collection/utils/utils.js

@@ -1,13 +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}` : '');
-}
-//# sourceMappingURL=utils.js.map
+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