@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -0,0 +1,115 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Tooltip',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    tooltipPosition: {
+      name: 'Tooltip position',
+      control: {
+        type: 'select',
+        options: [
+          'Bottom-start',
+          'Bottom',
+          'Bottom-end',
+          'Top-start',
+          'Top',
+          'Top-end',
+          'Left-start',
+          'Left',
+          'Left-end',
+          'Right-start',
+          'Right',
+          'Right-end',
+        ],
+      },
+      description: 'Position of the tooltip',
+    },
+    text: {
+      name: 'Tooltip text',
+      description: 'Text that will be displayed inside tooltip',
+      control: {
+        type: 'text',
+      },
+    },
+    slot: {
+      name: 'Tooltip html content',
+      description: 'A slot for the tooltip to pass in html.',
+      control: {
+        type: 'text',
+      },
+    },
+    mouseOverTooltip: {
+      name: 'Open while hovering over tooltip',
+      control: 'boolean',
+      description: 'Keep the tooltip visible as long as the mouse hover over it',
+    },
+  },
+  args: {
+    tooltipPosition: 'Bottom',
+    text: 'Text inside tooltip',
+    slot: '<p class="sdds-detail-05 sdds-u-m0"> Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',
+    mouseOverTooltip: true,
+  },
+};
+const positionLookup = {
+  'Bottom-start': 'bottom-start',
+  'Bottom': 'bottom',
+  'Bottom-end': 'bottom-end',
+  'Top-start': 'top-start',
+  'Top': 'top',
+  'Top-end': 'top-end',
+  'Left-start': 'left-start',
+  'Left': 'left',
+  'Left-end': 'left-end',
+  'Right-start': 'right-start',
+  'Right': 'right',
+  'Right-end': 'right-end',
+};
+const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) => formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+     .demo-wrapper{
+       height: 300px;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+     }
+    </style>
+
+   <div class="demo-wrapper">
+   <!-- The 'referenceEl' prop can be used instead of 'selector',
+    which might be preferable in frameworks like React -->
+   <sdds-tooltip
+      placement="${positionLookup[tooltipPosition]}"
+      selector="#button-1"
+      text="${text}"
+      mouse-over-tooltip="${mouseOverTooltip}">
+      ${slot}
+    </sdds-tooltip>
+
+    <!-- Demo button for presentation purposes -->
+    <sdds-button size= 'sm' id="button-1" text='Hover me'></sdds-button>
+   </div>
+  `);
+export const WebComponent = ComponentTooltip.bind({});

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

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

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

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

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

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