@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.7

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

@@ -1,96 +0,0 @@
-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{
-                height: 400px;
-                width: 400px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-        </style>
-        <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',
-};

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

@@ -1,94 +0,0 @@
-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 {
-      margin: 0;
-      width: 300px;
-    }
-  </style>
-  <div class="demo-wrapper">
-  <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',
-};

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

@@ -1,38 +0,0 @@
-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 */
-  .demo-wrapper {
-    height: 90px;
-  }
-  .demo-wrapper span {
-    color: white;
-    background-color: black;
-    border: 1px solid white;
-    padding: 4px;
-    position: absolute;
-  }
-</style>
-
-  <div class="demo-wrapper" style="background-color: var(--sdds-black)">
-    <span>--sdds-black</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-white)">
-    <span>--sdds-white</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-blue)">
-    <span>--sdds-blue</span>
-  </div>
-  `);
-export const Brand = Template.bind({});

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

@@ -1,71 +0,0 @@
-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>`;
-  });
-  return formatHtmlPreview(`
-  <style>
-  /* Demo code for presentation purposes */
-  .demo-wrapper {
-    height: 90px;
-  }
-  .demo-wrapper span {
-    color: white;
-    background-color: black;
-    border: 1px solid white;
-    padding: 4px;
-    position: absolute;
-  }
-  </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',
-};

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

@@ -1,40 +0,0 @@
-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 */
-  .demo-wrapper {
-    height: 90px;
-  }
-  .demo-wrapper span {
-    color: white;
-    background-color: black;
-    border: 1px solid white;
-    padding: 4px;
-    position: absolute;
-  }
-</style>
-
-  <div class="demo-wrapper" style="background-color: var(--sdds-positive)">
-    <span>--sdds-positive</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-warning)">
-    <span>--sdds-warning</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-negative)">
-    <span>--sdds-negative</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-information)">
-    <span>--sdds-information</span>
-  </div>`);
-export const Sematic = Template.bind({});