@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.10

package/dist/collection/components/popover-canvas/popover-canvas.stories.js

@@ -1,87 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Popover Canvas',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-  },
-  argTypes: {
-    canvasPosition: {
-      name: 'Canvas position',
-      description: 'Position of the PopoverCanvas',
-      type: { summary: 'string' },
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom',
-        'Bottom start',
-        'Bottom end',
-        'Top',
-        'Top start',
-        'Top end',
-        'Left',
-        'Left-start',
-        'Left end',
-        'Right',
-        'Right start',
-        'Right end',
-      ],
-    },
-  },
-  args: {
-    canvasPosition: 'Bottom',
-  },
-};
-const ComponentPopoverCanvas = ({ canvasPosition }) => {
-  const canvasPosLookup = {
-    'Bottom': 'bottom',
-    'Bottom start': 'bottom-start',
-    'Bottom end': 'bottom-end',
-    'Top': 'top',
-    'Top start': 'top-start',
-    'Top end': 'top-end',
-    'Left': 'left',
-    'Left star': 'left-start',
-    'Left end': 'left-end',
-    'Right': 'right',
-    'Right start': 'right-start',
-    'Right end': 'right-end',
-  };
-  return formatHtmlPreview(`
-    <style>
-  /* demo-wrapper and demo-styles is for demonstration purposes only */
-  .demo-wrapper {
-    display: flex;
-    flex-wrap; nowrap;
-    align-items: center;
-  }
-  sdds-icon:hover {
-    cursor:pointer;
-  }
-    </style>
-
-      <sdds-popover-canvas
-        placement="${canvasPosLookup[canvasPosition]}"
-        selector="#trigger">
-        <div>
-          <h2>A popover canvas!</h2>
-          <p>
-            Where you can put anything you want!
-          </p>
-          <p>
-            <a target="_blank" href="https://digitaldesign.scania.com">Even links!</a>
-          </p>
-        </div>
-      </sdds-popover-canvas>
-
-     <!-- demo-wrapper and demo-styles is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span style="user-select: none;margin-right: 16px;">Click icon for popover canvas</span>
-        <sdds-icon id="trigger" name="kebab" size="16px"></sdds-icon> 
-      </div>
-    `);
-};
-export const Default = ComponentPopoverCanvas.bind({});
-Default.args = {};

package/dist/collection/components/popover-menu/popover-menu-icons.stories.js

@@ -1,132 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Popover Menu',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    menuPosition: {
-      name: 'Menu position',
-      description: 'Position of the Popover menu',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom',
-        'Bottom start',
-        'Bottom end',
-        'Top',
-        'Top start',
-        'Top end',
-        'Left',
-        'Left-start',
-        'Left end',
-        'Right',
-        'Right start',
-        'Right end',
-      ],
-    },
-  },
-  args: {
-    menuPosition: 'Bottom',
-  },
-};
-const Template = ({ menuPosition }) => {
-  const menuPosLookup = {
-    'Bottom': 'bottom',
-    'Bottom start': 'bottom-start',
-    'Bottom end': 'bottom-end',
-    'Top': 'top',
-    'Top start': 'top-start',
-    'Top end': 'top-end',
-    'Left': 'left',
-    'Left star': 'left-start',
-    'Left end': 'left-end',
-    'Right': 'right',
-    'Right start': 'right-start',
-    'Right end': 'right-end',
-  };
-  return formatHtmlPreview(`
-        <style>
-        /* demo-wrapper is for demonstration purposes only*/
-        .demo-wrapper {
-          display: flex;
-          flex-wrap: nowrap;
-          alignt-items: center;
-        }
-        sdds-icon:hover {
-          cursor:pointer;
-        }
-      </style>
-
-      <sdds-popover-menu
-        placement="${menuPosLookup[menuPosition]}"
-        selector="#trigger">
-        <ul class="sdds-popover-menu-wrapper">
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-                Menu item 1
-            </a>
-          </li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-              Menu item 2
-            </a>
-          </li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-              Menu item 3
-            </a>
-          </li>
-          <li class="divider"></li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-              Menu item 4
-            </a>
-          </li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-              Menu item 5
-            </a>
-          </li>
-        </ul>
-      </sdds-popover-menu>
-
-      <!-- demo-wrapper code below is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span style="user-select: none;margin-right: 16px;">Click icon for popover menu</span>
-        <sdds-icon id="trigger" name="kebab" size="16px"></sdds-icon>
-      </div>
-      `);
-};
-export const WithIcons = Template.bind({});
-WithIcons.args = {};

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -1,109 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Popover Menu',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    menuPosition: {
-      name: 'Menu position',
-      description: 'Position of the Popover menu',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom',
-        'Bottom start',
-        'Bottom end',
-        'Top',
-        'Top start',
-        'Top end',
-        'Left',
-        'Left-start',
-        'Left end',
-        'Right',
-        'Right start',
-        'Right end',
-      ],
-    },
-  },
-  args: {
-    menuPosition: 'Bottom',
-  },
-};
-const Template = ({ menuPosition }) => {
-  const menuPosLookup = {
-    'Bottom': 'bottom',
-    'Bottom start': 'bottom-start',
-    'Bottom end': 'bottom-end',
-    'Top': 'top',
-    'Top start': 'top-start',
-    'Top end': 'top-end',
-    'Left': 'left',
-    'Left star': 'left-start',
-    'Left end': 'left-end',
-    'Right': 'right',
-    'Right start': 'right-start',
-    'Right end': 'right-end',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        alignt-items: center;
-      }
-      sdds-icon:hover {
-        cursor:pointer;
-      }
-    </style>
-
-    <sdds-popover-menu
-        placement="${menuPosLookup[menuPosition]}"
-        selector="#trigger">
-        <ul class="sdds-popover-menu-wrapper">
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">Menu item 1</a>
-          </li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">
-              Menu item 2
-            </a>
-          </li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">Menu item 3</a>
-          </li>
-          <li class="divider"></li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">Menu item 4</a>
-          </li>
-          <li>
-            <a target="_blank" href="https://digitaldesign.scania.com">Menu item 5</a>
-          </li>
-        </ul>
-      </sdds-popover-menu>
-
-      <!-- demo-wrapper code below is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span style="user-select: none;margin-right: 16px;">Click icon for popover menu</span>
-        <sdds-icon id="trigger" name="kebab" size="16px"></sdds-icon> 
-      </div>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,68 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Radio Button',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label',
-      description: 'The label for the radio button',
-      controls: {
-        type: 'string',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the radio button',
-      control: {
-        type: 'boolean',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Marks the radio button as checked',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    label: 'Label text',
-    disabled: false,
-    checked: false,
-  },
-};
-const Template = (args) => formatHtmlPreview(`
-   <div class="sdds-radio-button-group">
-   <div class="sdds-radio-item">
-     <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" checked="" ${args.disabled ? 'disabled' : ''}>
-     <label class="sdds-form-label" for="rb-option-1">
-       ${args.label} 1
-     </label>
-   </div>
- </div>
- <div class="sdds-radio-button-group">
-   <div class="sdds-radio-item">
-     <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" ${args.checked ? 'checked="checked"' : ''} >
-     <label class="sdds-form-label" for="rb-option-1">
-       ${args.label} 2
-     </label>
-   </div>
-
-   </div>
-`);
-export const Default = Template.bind({});
-Default.args = {};

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -1,182 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Side Menu',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    collapsed: {
-      name: 'Collapsed',
-      description: 'Toggle the side menus collapsed state.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    showIcons: {
-      name: 'Show icons',
-      description: 'Toggle if icons for side menu options are displayed.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'collapsed', neq: true },
-    },
-  },
-  args: {
-    collapsed: false,
-    showIcons: false,
-  },
-};
-const Template = ({ showIcons, collapsed }) => {
-  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    align-items: stretch;
-    height: 100vh;
-  }
-  .sdds-container {
-    overflow-y: auto;
-    max-width: 10000px;
-  }
-</style>
-
-<nav class="sdds-nav">
-  <div class="sdds-nav__left">
-    <button class="sdds-nav__mob-menu-btn">
-      <sdds-icon name="burger" size="20px"></sdds-icon>
-    </button>
-    <div class="sdds-nav__app-name">My application</div>
-  </div>
-  <div class="sdds-nav__right">
-    <a class="sdds-nav__item sdds-nav__app-logo" href="#"></a>
-  </div>
-</nav>
-<div class="sdds-push demo-wrapper">
-  <div class="sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}">
-    <div class="sdds-sidebar-mheader">
-    <button class="sdds-sidebar-mheader__close">
-      <sdds-icon name="cross" size="20px"></sdds-icon>
-    </button>
-    </div>
-    <ul class="sdds-sidebar-nav sdds-sidebar-nav--main ${icons}">
-      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
-        <button class="sdds-sidebar-nav__item-link">
-          <div>
-            <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
-          </div>
-          <span class="sdds-sidebar-nav__item-text">Sub-menu</span>
-          <div>
-            <sdds-icon class="sdds-sidebar-nav__chevron" name="chevron_down" size="16px"></sdds-icon>
-          </div>
-        </button>
-        <ul class="sdds-sidebar-nav-subnav">
-          <li class="sdds-sidebar-nav-subnav__item">
-            <span class="sdds-sidebar-nav__item-title">Sub-menu</span>
-          </li>
-          <li class="sdds-sidebar-nav-subnav__item">
-            <a class="sdds-sidebar-nav__item-link" href="#"
-              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
-            >
-          </li>
-          <li class="sdds-sidebar-nav-subnav__item">
-            <a class="sdds-sidebar-nav__item-link" href="#"
-              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
-            >
-          </li>
-          <li class="sdds-sidebar-nav-subnav__item">
-            <a class="sdds-sidebar-nav__item-link" href="#"
-              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
-            >
-          </li>
-        </ul>
-      </li>
-      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
-      <button class="sdds-sidebar-nav__item-link">
-      <div>
-        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
-      </div>
-      <span class="sdds-sidebar-nav__item-text">Sub-menu</span>
-      <div>
-        <sdds-icon class="sdds-sidebar-nav__chevron" name="chevron_down" size="16px"></sdds-icon>
-      </div>
-      </button>
-        <ul class="sdds-sidebar-nav-subnav">
-          <li class="sdds-sidebar-nav-subnav__item">
-            <span class="sdds-sidebar-nav__item-title">Sub-menu</span>
-          </li>
-          <li class="sdds-sidebar-nav-subnav__item">
-            <a class="sdds-sidebar-nav__item-link" href="#"
-              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
-            >
-          </li>
-          <li class="sdds-sidebar-nav-subnav__item">
-            <a class="sdds-sidebar-nav__item-link" href="#"
-              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
-            >
-          </li>
-          <li class="sdds-sidebar-nav-subnav__item">
-            <a class="sdds-sidebar-nav__item-link" href="#"
-              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
-            >
-          </li>
-        </ul>
-      </li>
-      <li class="sdds-sidebar-nav__item">
-        <a class="sdds-sidebar-nav__item-link" href="#">
-        <div>
-        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
-      </div>
-          <span class="sdds-sidebar-nav__item-text">Page link</span>
-        </a>
-      </li>
-      <li class="sdds-sidebar-nav__item">
-        <a class="sdds-sidebar-nav__item-link" href="#">
-        <div>
-        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
-      </div>
-          <span class="sdds-sidebar-nav__item-text">Page link</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div class="sdds-container" style="padding-top: 30px">
-  </div>
-</div>
-
-
-<script>
-    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {
-    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')
-  })
-  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {
-    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')
-  })
-  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');
-  for (let i = 0; i < expandableListItems.length; i++) {
-    expandableListItems[i].addEventListener('click', () => {
-      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');
-    });
-  }
-</script>
-  `);
-};
-export const Default = Template.bind({});