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

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e1c79686.js');
 
 /*
- Stencil Client Patch Esm v2.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/dist/cjs/tegel.cjs.js

@@ -3,7 +3,7 @@
 const index = require('./index-e1c79686.js');
 
 /*
- Stencil Client Patch Browser v2.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tegel.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -32,8 +32,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.2",
-    "typescriptVersion": "4.7.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-b67b15a6.js';
 
 /*
- Stencil Client Patch Esm v2.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();

package/dist/esm/tegel.js

@@ -1,7 +1,7 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-b67b15a6.js';
 
 /*
- Stencil Client Patch Browser v2.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.7",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -16,7 +16,7 @@
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/components/components.esm.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.13.0",
+    "@stencil/core": "^2.20.0",
     "@storybook/addon-google-analytics": "^6.2.9",
     "concurrently": "^7.4.0",
     "dotenv": "^16.0.3",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
-    "@stencil/sass": "^2.0.0",
+    "@stencil/sass": "^2.0.1",
     "@storybook/addon-a11y": "^6.5.14",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

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

@@ -1,91 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-import readmeItem from './accordion-item/readme.md';
-export default {
-  title: 'Components/Accordion',
-  argTypes: {
-    iconPosition: {
-      name: 'Expand icon position',
-      control: {
-        type: 'radio',
-      },
-      options: { End: 'end', Start: 'start' },
-      description: 'The horizontal position of the expand icon.',
-      table: {
-        defaultValue: { summary: 'end' },
-      },
-    },
-    disabled: {
-      name: 'Disable all items',
-      description: 'Disable all accordion items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    paddingReset: {
-      name: 'Less padding right',
-      description: 'Less padding on the right inside accordion items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Variant of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-  },
-  parameters: {
-    notes: { 'Accordion': readme, 'Accordion item': readmeItem },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  args: {
-    disabled: false,
-    paddingReset: false,
-    iconPosition: 'end',
-    modeVariant: 'Primary',
-  },
-};
-const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
-  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
-  const disabledAttr = disabled ? 'disabled' : '';
-  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
-  const tabIndexAttr = 'tabindex="0"';
-  return formatHtmlPreview(`
-    <sdds-accordion mode-variant="${modeVariant.toLowerCase()}">
-      <sdds-accordion-item header="First item" ${tabIndexAttr} ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum doler sit amet.
-      </sdds-accordion-item>
-      <sdds-accordion-item header="Second item" ${tabIndexAttr} ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
-      </sdds-accordion-item>
-    </sdds-accordion>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,101 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Badge',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    visible: {
-      name: 'Visible',
-      description: 'Toggle visibility of badge',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    value: {
-      name: 'Value',
-      description: 'Set a value to show on the badge',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'size', neq: 'sm' },
-      table: {
-        defaultValue: { summary: null },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the component',
-      options: {
-        Large: 'lg',
-        Small: 'sm',
-      },
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-  },
-  args: {
-    visible: true,
-    size: 'lg',
-    value: 1,
-  },
-};
-const Template = ({ value, size, visible }) => formatHtmlPreview(`<sdds-badges
-    ${value ? `value="${value}"` : ''}
-    is-visible=${visible}
-    size="${size}">
-  </sdds-badges>`);
-export const Default = Template.bind({});
-const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
-    <style>
-    /* Note: Demo classes used here are just for demo purposes in Storybook */
-    .badges-demo-box {
-      margin:5px;
-      height: 32px;
-      width: 32px;
-      position: relative;
-      background-color: #C4C4C4;
-    }
-
-    .badges-demo-box sdds-badges[size="lg"]{
-      position: absolute;
-      left: 16px;
-      top: -5px;
-    }
-
-    .badges-demo-box sdds-badges[size="sm"]{
-      position: absolute;
-      left: 26px;
-      top: -2px;
-    }
-    </style>
-
-    <div class="badges-demo-box">
-      <sdds-badges
-        ${value ? `value="${value}"` : ''}
-        is-visible=${visible}
-        size="${size}">
-      </sdds-badges>
-    </div>`);
-export const WithDemoComponent = WithDemoTemplate.bind({});

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

@@ -1,93 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-// FIXME: CMS: Change state to type in Code tab of component
-export default {
-  title: 'Components/Banner',
-  parameters: {
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    state: {
-      name: 'Type',
-      description: 'Changes type of component',
-      options: ['Default', 'Error', 'Info'],
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Text to display in header section',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Text to display in subheader section',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Text to display in link section',
-      control: {
-        type: 'text',
-      },
-    },
-    prefix: {
-      name: 'Show icon',
-      description: 'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-  },
-  args: {
-    state: 'Default',
-    header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    link: 'Learn more',
-    prefix: true,
-  },
-};
-const Template = ({ state, prefix, header, subheader, link }) => formatHtmlPreview(`
-    <div class="sdds-banner sdds-banner-${state.toLowerCase()}">
-      ${prefix && state === 'error'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
-  : ''}
-      ${prefix && state === 'info'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
-  : ''}
-      ${prefix && !(state === 'info' || state === 'error')
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
-  : ''}
-      <div class="sdds-banner-body">
-      ${header && `<h6 class="sdds-banner-header">${header}</h6>`}
-      ${subheader && `<div class="sdds-banner-subheader">${subheader}</div>`}
-      ${link && `<a class="sdds-link sdds-banner-link">${link}</a>`}
-      </div>
-      <button type="button" aria-label="close" class="sdds-banner-close">
-        <sdds-icon name="cross" size="20px"></sdds-icon>
-      </button>
-    </div>
-  `);
-export const Default = Template.bind({});

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

@@ -1,46 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Block',
-  parameters: {
-    layout: 'padded',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Mode variation',
-      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background. ',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Primary' },
-      },
-    },
-  },
-  args: {
-    type: 'Primary',
-  },
-};
-const Template = ({ type }) => formatHtmlPreview(`
-      <div class="sdds-block sdds-block-${type.toLowerCase()}">
-      <h2 class="sdds-headline-02">Block</h2>
-        <p class="sdds-body-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
-        <div class="sdds-block">
-          <h3 class="sdds-headline-03">Block in a block</h3>
-          <p class="sdds-body-02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
-        </div>
-      </div>
-    `);
-export const Default = Template.bind({});

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

@@ -1,26 +0,0 @@
-export default {
-  title: 'Components/Breadcrumb',
-  parameters: {
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  }
-};
-const Template = () => `   
-    <div class="sdds-breadcrumb">
-      <div class="sdds-breadcrumb-item"><a href="#">Page 1</a></div>
-      <div class="sdds-breadcrumb-item"><a href="#">Page 2</a></div>
-      <div class="sdds-breadcrumb-item sdds-breadcrumb-item-current"><a aria-current="page">Page 3</a></div>
-    </div>
-    `;
-export const Default = Template.bind({});
-Default.args = {};

package/dist/collection/components/button/button-native.stories.js

@@ -1,183 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-export default {
-  title: 'Components/Button',
-  parameters: {
-    layout: 'padded',
-    chromatic: {
-      disableSnapshot: false, // enables snapshotting for the component
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text to be displayed on the button',
-      control: {
-        type: 'text',
-      },
-    },
-    btnType: {
-      name: 'Type',
-      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the button',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    variant: {
-      name: 'Variant',
-      description: 'Button variant.',
-      control: {
-        type: 'radio',
-      },
-      options: ['On light', 'On dark'],
-      table: {
-        defaultValue: { summary: 'on-dark' },
-      },
-    },
-    fullbleed: {
-      name: 'Fullbleed',
-      defaultValue: false,
-      description: 'Fluid width in certain components-old',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'onlyIcon', eq: false },
-    },
-    disabled: {
-      name: 'Disabled',
-      type: 'boolean',
-      description: 'Choose to disable the button',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    onlyIcon: {
-      name: 'Only Icon',
-      description: 'Displays only the icon and excludes any text from the button',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...iconsNames],
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Native/Web Component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', neq: 'none' },
-    },
-  },
-  args: {
-    text: 'Button',
-    btnType: 'Primary',
-    size: 'Large',
-    variant: 'On dark',
-    fullbleed: false,
-    disabled: false,
-    onlyIcon: false,
-    icon: 'none',
-    iconType: 'Native',
-  },
-};
-const NativeTemplate = ({ size, variant, btnType, fullbleed, text = 'Button', disabled = '', onlyIcon, icon, iconType, }) => {
-  const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';
-  const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';
-  const btnTypeLookUp = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-    Ghost: 'ghost',
-    Danger: 'danger',
-  };
-  const sizeLookUp = {
-    'Large': 'lg',
-    'Medium': 'md',
-    'Small': 'sm',
-    'Extra small': 'xs',
-  };
-  const varaintLookup = {
-    'On light': 'on-light',
-    'On dark': 'on-dark',
-  };
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    ${icon && iconType === 'Native'
-    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    i.sdds-btn-icon{
-      font-size: ${size === 'Small' ? '16' : '20'}px;
-    }\n `
-    : ''}\ .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-<button class="sdds-btn sdds-btn-${btnTypeLookUp[btnType]} sdds-btn-${sizeLookUp[size]} ${fbClass} ${disabled ? 'disabled' : ''} ${onlyIconCss} ${varaintLookup[variant] === 'on-light' ? 'sdds-on-white-bg' : ''}  ${onlyIcon ? 'sdds-btn-only-icon' : ''}">
-  ${!onlyIcon ? `<span class="sdds-btn-text">${text}</span>` : ''}
-  ${onlyIcon || (icon && icon !== 'none')
-    ? `
-    ${iconType === 'Native'
-      ? `<i class="sdds-btn-icon sdds-icon ${icon}"></i>`
-      : `<sdds-icon class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
-  `
-    : ''}
-</button>
-  </div>
-  `);
-};
-export const Native = NativeTemplate.bind({});
-Native.args = {};
-export const NativeWithIcon = NativeTemplate.bind({});
-NativeWithIcon.args = {
-  icon: 'truck',
-};
-export const NativeOnlyIcon = NativeTemplate.bind({});
-NativeOnlyIcon.args = {
-  text: '',
-  onlyIcon: true,
-  icon: 'truck',
-};