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

package/dist/collection/components/header/header-toolbar.stories.js

@@ -1,204 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    siteName: {
-      name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
-    },
-  },
-  args: {
-    siteName: 'Application',
-  },
-};
-const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
-    <nav class='sdds-nav'>
-        <div class='sdds-nav__left'>
-          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
-          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
-              <span id='sdds-nav__mob-menu-icon'>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
-              </span>
-          </button>
-          <div class='sdds-nav__app-name'>${siteName}</div>
-        </div>
-
-        <div class='sdds-nav__center'>
-          <ul class='sdds-nav__inline-menu'>
-
-              <li class='sdds-nav__item'>
-                  <a class='sdds-nav__item-core' href='#'>
-                      <span class='span'>Item 1</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__item--active'>
-                  <a class='sdds-nav__item-core ' href='#'>
-                      <span class='sdds-nav__item-core-text'>Item 2</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__dropdown'>
-              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
-                  <span class='sdds-nav__item-core-text'>Item 3</span>
-                  <span class='sdds-nav__dropdown-icon'>
-                    <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
-                  </span>
-              </button>
-              <ul class='sdds-nav__dropdown-menu'>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>
-                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-              </ul>
-              </li>
-          </ul>
-
-          <ul class='sdds-nav__toolbar-menu'>
-
-              <li class='sdds-nav__item sdds-nav__avatar' >
-                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
-                      <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
-                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
-                          <span class='sdds-nav__avatar-title'>Employee Name</span>
-                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                      </span>
-                  </button>
-
-                  <ul class='sdds-nav__avatar-menu'>
-                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
-                          <span class='sdds-nav__avatar-info'>
-                              <span class='sdds-nav__avatar-title'>Employee Name</span>
-                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                          </span>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>
-                      </li>
-                  </ul>
-              </li>
-          </ul>
-        </div>
-
-        <div class='sdds-nav__right'>
-          <div class='sdds-nav__item sdds-nav__app-launcher'>
-              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
-                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
-              </button>
-              <ul class='sdds-nav__app-launcher-menu'>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-              </ul>
-          </div>
-          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
-        </div>
-    </nav>
-
-    <script>
-    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-    toggleAvatarMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleMobileMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleAppLauncher = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleInlineDropdown = () => {
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-    closeDropdownsFromOverlay = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-
-    </script>
-    `);
-export const ToolbarMenu = ToolbarMenuTemplate.bind({});

package/dist/collection/components/icon/icon-font.stories.js

@@ -1,57 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from './iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Foundations/Icons',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
-    },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the icon',
-      control: {
-        type: 'range',
-        min: 16,
-        max: 100,
-        step: 4,
-      },
-    },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
-};
-const IconFontTemplate = (args) => formatHtmlPreview(`
-  <style>
-    /* Demo code for presentation purposes */
-    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    .sdds-icon { font-size: ${args.size}px; }
-  </style>
-
-  <i class="sdds-icon ${args.icon}"></i>
-  `);
-export const Native = IconFontTemplate.bind({});
-Native.args = {};

package/dist/collection/components/icon/icon-web-component.stories.js

@@ -1,51 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from './iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Foundations/Icons',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
-    },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the icon',
-      control: {
-        type: 'range',
-        min: 16,
-        max: 100,
-        step: 4,
-      },
-    },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
-};
-const IconTemplate = (args) => formatHtmlPreview(`
-  <sdds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></sdds-icon> 
-  `);
-export const WebComponent = IconTemplate.bind({});
-WebComponent.args = {};

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

@@ -1,45 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Link',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    disabled: {
-      name: 'Disabled',
-      description: 'Display link in disabled state',
-      controls: {
-        type: 'boolean',
-      },
-    },
-    noUnderline: {
-      name: 'No underline',
-      description: 'Hide underline under link text',
-      controls: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    disabled: false,
-    noUnderline: false,
-  },
-};
-const Template = ({ disabled, noUnderline }) => formatHtmlPreview(`
-      <a class="sdds-link ${disabled ? 'disabled' : ''} ${noUnderline ? 'sdds-link--no-underline' : ''}" href="#">
-        This is a link.
-      </a>
-  `);
-export const Default = Template.bind({});

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

@@ -1,117 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Message',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    messageType: {
-      name: 'Message Type',
-      description: 'The type of the message.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-    },
-    variant: {
-      name: 'Variant',
-      description: 'The variant of the message, on-dark/on-light',
-      control: {
-        type: 'radio',
-      },
-      options: ['On dark', 'On light'],
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Show icon',
-      control: {
-        type: 'boolean',
-      },
-    },
-    iconType: {
-      name: 'Icon',
-      description: 'Switch between show a native/web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-    },
-    showExtendedMessage: {
-      name: 'Extended Message',
-      description: 'Show an extended message',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    messageType: 'Information',
-    variant: 'On light',
-    icon: false,
-    iconType: 'Webcomponent',
-    showExtendedMessage: false,
-  },
-};
-const nativeIconNameLookup = {
-  Information: 'info',
-  Error: 'error',
-  Warning: 'warning',
-  Success: 'tick',
-};
-const Template = ({ messageType, icon, iconType, showExtendedMessage, variant }) => {
-  const messageTypeClass = messageType === 'Information'
-    ? 'sdds-message-type-informative'
-    : `sdds-message-type-${messageType.toLowerCase()}`;
-  const iconClass = messageType === 'Information'
-    ? 'sdds-message-icon-informative'
-    : `sdds-message-icon-${messageType.toLowerCase()}`;
-  const variantValue = variant === 'On dark' ? 'sdds-message-ongrey' : '';
-  const iconHtml = iconType === 'Native'
-    ? `<i class="sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}"></i>`
-    : `<div><sdds-icon class="sdds-message-icon ${iconClass}" name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
-  return formatHtmlPreview(`
-
-    ${iconType === 'Native'
-    ? `<style>
-    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
-    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    </style>`
-    : ''}
-
-    <div class="sdds-message ${messageTypeClass} ${icon ? 'sdds-message-icon-active' : ''} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} ${variantValue}">
-    ${icon ? iconHtml : ''}
-    <h4 class="sdds-message-single">
-      Single line message goes here.
-    </h4>
-    ${showExtendedMessage
-    ? '<p class="sdds-message-extended">Longer message text can be placed here. Longer message text can be placed here. Longer message text can be placed here.</p>'
-    : ''}
-  </div>
-  `);
-};
-export const Information = Template.bind({});
-export const Error = Template.bind({});
-Error.args = {
-  messageType: 'Error',
-};
-export const Warning = Template.bind({});
-Warning.args = {
-  messageType: 'Warning',
-};
-export const Success = Template.bind({});
-Success.args = {
-  messageType: 'Success',
-};

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

@@ -1,121 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Modal',
-  parameters: {
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Size of modal',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-    },
-    showModal: {
-      name: 'Show modal',
-      description: 'Toggle if the modal is displayed',
-      control: {
-        type: 'boolean',
-      },
-    },
-    actions: {
-      name: 'Actions',
-      description: 'Behaviour of modal actions',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Customize headline',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    headline: 'The buttons for the modal only works in the canvas tab',
-    actions: 'Static',
-    size: 'Large',
-    showModal: true,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const Template = ({ headline, size, actions, showModal }) => formatHtmlPreview(`    <style>
-  /* demo-wrapper and demo-styles is for demonstration purposes only*/
-  .demo-wrapper {
-    position: relative;
-    top: 0;
-    left: 0;
-    height: 500px;
-  }
-  .demo-styles {
-    position: absolute;
-    margin-bottom: 20px;
-  }
-  </style>
-
-  <div class="demo-wrapper">
-    <button id="modal-button" class="sdds-btn sdds-btn-primary sdds-btn-lg">
-      <span class="sdds-btn-text">Open modal</span>
-    </button>
-    <div id="my-modal" class="sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles">
-      <div class="sdds-modal sdds-modal-${sizeLookUp[size]} sdds-modal__actions-${actions.toLowerCase()}">
-        <div class="sdds-modal-header">
-            <h5 class="sdds-modal-headline">${headline}</h5>
-          <span class="sdds-modal-btn"></span>
-        </div>
-          <div class="sdds-modal-body">
-            <p>
-              Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Maecenas tempus, tellus eget condimentum rhoncus.
-            </p>
-          </div>
-          <div class="sdds-modal-actions">
-              <button class="sdds-btn sdds-btn-primary sdds-btn-md">Save</button>
-              <button class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
-          </div>
-      </div>
-    </div>
-  </div>
-
-  <script>
-  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-  modal = document.getElementById('my-modal');
-  buttons = modal.getElementsByTagName('button');
-  for (const button of buttons) {
-    button.addEventListener('click', () => {
-      modal.classList.replace('show', 'hide')
-    })
-  }
-
-  document.getElementsByClassName('sdds-modal-btn')[0].addEventListener('click', () => {
-    modal.classList.replace('show', 'hide');
-  })
-
-  document.getElementById('modal-button').addEventListener('click', () => {
-    modal.classList.replace('hide', 'show')
-  })
-  </script>
-  `);
-export const Native = Template.bind({});
-Native.args = {};

package/dist/collection/components/modal/modal-webcomponent.stories.js

@@ -1,78 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Modal',
-  parameters: {
-    layout: 'fullscreen',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Size of modal',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-    },
-    actions: {
-      name: 'Actions',
-      description: 'Behaviour of modal actions',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Customize headline',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    headline: 'The buttons for the modal only works in the canvas tab',
-    actions: 'Static',
-    size: 'Large',
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const ModalTemplate = ({ size, headline, actions }) => formatHtmlPreview(`
-  <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>  
-
-  <sdds-modal open id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
-      <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
-      <div class="sdds-modal-body" slot="sdds-modal-body">
-        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Maecenas tempus, tellus eget condimentum rhoncus.
-      </div>
-      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('delete')" class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
-      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('cancel')" class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
-  </sdds-modal>
-  <script>
-
-    document.getElementById('my-modal-button').addEventListener('click', () => {
-      document.getElementById('my-modal').open = true;
-    })
-  </script>
-  
-  `);
-export const WebComponent = ModalTemplate.bind({});
-WebComponent.args = {};