@scania/tegel 0.0.51 → 0.0.52

package/dist/collection/components/utility/colour/background-color.stories.js

@@ -1,77 +1,77 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-export default {
-  title: 'Utilities/Colours',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    backgroundColor: {
-      name: 'Background colour',
-      description: 'The colour of the text',
-      control: {
-        type: 'select',
-      },
-      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-    },
-    greyScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        '50',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '700',
-        '800',
-        '846',
-        '868',
-        '900',
-        '958',
-      ],
-      if: { arg: 'backgroundColor', eq: 'grey' },
-    },
-    redScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'backgroundColor', eq: 'red' },
-    },
-    blueScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'backgroundColor', eq: 'blue' },
-    },
-  },
-};
-const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
-  let scale = 100;
-  switch (backgroundColor) {
-    case 'blue':
-      scale = blueScale;
-      break;
-    case 'grey':
-      scale = greyScale;
-      break;
-    case 'red':
-      scale = redScale;
-      break;
-    default:
-      scale = blueScale;
-      break;
-  }
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Utilities/Colours',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    backgroundColor: {
+      name: 'Background colour',
+      description: 'The colour of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'backgroundColor', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'backgroundColor', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'backgroundColor', eq: 'blue' },
+    },
+  },
+};
+const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (backgroundColor) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
   return formatHtmlPreview(`
         <style>
             .demo-wrapper{
@@ -85,13 +85,13 @@ const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
         <div class="sdds-background-${backgroundColor}-${scale} demo-wrapper">
             <h1>background-color:${backgroundColor}</h1>
         </div>
-          `);
-};
-export const backgroundColor = Template.bind({});
-backgroundColor.args = {
-  backgroundColor: 'blue',
-  blueScale: '500',
-  redScale: '500',
-  greyScale: '958',
-};
-//# sourceMappingURL=background-color.stories.js.map
+          `);
+};
+export const backgroundColor = Template.bind({});
+backgroundColor.args = {
+  backgroundColor: 'blue',
+  blueScale: '500',
+  redScale: '500',
+  greyScale: '958',
+};
+//# sourceMappingURL=background-color.stories.js.map

package/dist/collection/components/utility/colour/text-color.stories.js

@@ -1,77 +1,77 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-export default {
-  title: 'Utilities/Colours',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    colour: {
-      name: 'Colour',
-      description: 'The colour of the text',
-      control: {
-        type: 'select',
-      },
-      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-    },
-    greyScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        '50',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '700',
-        '800',
-        '846',
-        '868',
-        '900',
-        '958',
-      ],
-      if: { arg: 'colour', eq: 'grey' },
-    },
-    redScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'colour', eq: 'red' },
-    },
-    blueScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'colour', eq: 'blue' },
-    },
-  },
-};
-const Template = ({ colour, greyScale, blueScale, redScale }) => {
-  let scale = 100;
-  switch (colour) {
-    case 'blue':
-      scale = blueScale;
-      break;
-    case 'grey':
-      scale = greyScale;
-      break;
-    case 'red':
-      scale = redScale;
-      break;
-    default:
-      scale = blueScale;
-      break;
-  }
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Utilities/Colours',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    colour: {
+      name: 'Colour',
+      description: 'The colour of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'colour', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'colour', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'colour', eq: 'blue' },
+    },
+  },
+};
+const Template = ({ colour, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (colour) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
   return formatHtmlPreview(`
   <style>
     .demo-wrapper h1 {
@@ -83,13 +83,13 @@ const Template = ({ colour, greyScale, blueScale, redScale }) => {
   <h1 class="sdds-text-${colour}-${scale}">A text ${colour} heading</h1>
   <p class="sdds-text-${colour}-${scale}">A text ${colour} paragraph</p>
   </div>
-  `);
-};
-export const textColor = Template.bind({});
-textColor.args = {
-  colour: 'blue',
-  blueScale: '500',
-  redScale: '500',
-  greyScale: '958',
-};
-//# sourceMappingURL=text-color.stories.js.map
+  `);
+};
+export const textColor = Template.bind({});
+textColor.args = {
+  colour: 'blue',
+  blueScale: '500',
+  redScale: '500',
+  greyScale: '958',
+};
+//# sourceMappingURL=text-color.stories.js.map

package/dist/collection/foundations-stories/colour/colour-brand.stories.js

@@ -1,15 +1,15 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Colour',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Colour',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
 const Template = () => formatHtmlPreview(`
   <style>
   /* Demo code for presentation purposes */
@@ -34,6 +34,6 @@ const Template = () => formatHtmlPreview(`
   <div class="demo-wrapper" style="background-color: var(--sdds-blue)">
     <span>--sdds-blue</span>
   </div>
-  `);
-export const Brand = Template.bind({});
-//# sourceMappingURL=colour-brand.stories.js.map
+  `);
+export const Brand = Template.bind({});
+//# sourceMappingURL=colour-brand.stories.js.map

package/dist/collection/foundations-stories/colour/colour-scales.stories.js

@@ -1,42 +1,42 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Colour',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-  },
-};
-const Template = ({ colour }) => {
-  const scale = {
-    grey: [
-      '50',
-      '100',
-      '200',
-      '300',
-      '400',
-      '500',
-      '600',
-      '700',
-      '800',
-      '846',
-      '868',
-      '900',
-      '958',
-    ],
-    blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-    red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-  };
-  const picked = scale[colour];
-  let div = '';
-  picked.forEach((num) => {
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Colour',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
+const Template = ({ colour }) => {
+  const scale = {
+    grey: [
+      '50',
+      '100',
+      '200',
+      '300',
+      '400',
+      '500',
+      '600',
+      '700',
+      '800',
+      '846',
+      '868',
+      '900',
+      '958',
+    ],
+    blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  };
+  const picked = scale[colour];
+  let div = '';
+  picked.forEach((num) => {
     div += `<div id="test" class="demo-wrapper" style="background-color: var(--sdds-${colour}-${num})">
       <span>--sdds-${colour}-${num}</span>
-      </div>`;
-  });
+      </div>`;
+  });
   return formatHtmlPreview(`
   <style>
   /* Demo code for presentation purposes */
@@ -53,20 +53,20 @@ const Template = ({ colour }) => {
   </style>
 
     ${div}
-    `);
-};
-export const Scales = Template.bind({});
-Scales.argTypes = {
-  colour: {
-    name: 'Colour',
-    description: 'Choose colour scale to display',
-    control: {
-      type: 'select',
-    },
-    options: { Grey: 'grey', Blue: 'blue', Red: 'red' },
-  },
-};
-Scales.args = {
-  colour: 'grey',
-};
-//# sourceMappingURL=colour-scales.stories.js.map
+    `);
+};
+export const Scales = Template.bind({});
+Scales.argTypes = {
+  colour: {
+    name: 'Colour',
+    description: 'Choose colour scale to display',
+    control: {
+      type: 'select',
+    },
+    options: { Grey: 'grey', Blue: 'blue', Red: 'red' },
+  },
+};
+Scales.args = {
+  colour: 'grey',
+};
+//# sourceMappingURL=colour-scales.stories.js.map

package/dist/collection/foundations-stories/colour/colour-semantic.stories.js

@@ -1,15 +1,15 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Colour',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Colour',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
 const Template = () => formatHtmlPreview(`
   <style>
   /* Demo code for presentation purposes */
@@ -36,6 +36,6 @@ const Template = () => formatHtmlPreview(`
   </div>
   <div class="demo-wrapper" style="background-color: var(--sdds-information)">
     <span>--sdds-information</span>
-  </div>`);
-export const Sematic = Template.bind({});
-//# sourceMappingURL=colour-semantic.stories.js.map
+  </div>`);
+export const Sematic = Template.bind({});
+//# sourceMappingURL=colour-semantic.stories.js.map