@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,107 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Message',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    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: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    messageType: {
-      name: 'Message type',
-      description: 'Changes the type of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'information' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Sets the header for the message.',
-      control: {
-        type: 'text',
-      },
-    },
-    extendedMessage: {
-      name: 'Extended message content',
-      description: 'Sets the content of an extended message.',
-      control: {
-        type: 'text',
-      },
-    },
-    minimal: {
-      name: 'Minimal',
-      description: 'Applies minimal message styling.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hides the icon.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    messageType: 'Information',
-    header: 'Message header',
-    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
-    minimal: false,
-    noIcon: false,
-  },
-};
-const Template = ({ modeVariant, messageType, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
-    <style>
-      .demo-wrapper {
-        width: 380px;
-      }
-    </style>
-    <div class="demo-wrapper">
-      <sdds-message
-          type="${messageType.toLowerCase()}"
-          header="${header}"
-          ${noIcon ? 'no-icon' : ''}
-          ${minimal ? 'minimal' : ''}
-          mode-variant="${modeVariant.toLowerCase()}"
-          ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      >
-      ${extendedMessage}
-      </sdds-message>
-    </div>
-    `);
-export const WebComponent = Template.bind({});

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

@@ -1,137 +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: {
-    actions: {
-      name: 'Actions',
-      description: 'Defines the behaviour of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-      table: {
-        defaultValue: { summary: 'Static' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Sets the headline of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyText: {
-      name: 'Modal body text',
-      description: 'Sets the body text of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    showModal: {
-      name: 'Show modal',
-      description: 'Toggles if the modal is displayed.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-  },
-  args: {
-    actions: 'Static',
-    size: 'Large',
-    headline: 'The buttons for the modal only works in the canvas tab',
-    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-    showModal: true,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const Template = ({ actions, size, headline, bodyText, showModal }) => formatHtmlPreview(`    <style>
-  /* demo-wrapper and demo-styles is for demonstration purposes only*/
-  .demo-wrapper {
-    position: relative;
-    top: 0;
-    left: 0;
-    height: 100vh;
-  }
-  .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>
-          <button class="sdds-modal-close" aria-label="close">
-            <sdds-icon name="cross" size="20px"></sdds-icon>
-          </button>
-        </div>
-          <div class="sdds-modal-body">
-            <p class="sdds-u-mb0 sdds-u-mt0">${bodyText}</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-close')[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({});

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

@@ -1,97 +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: {
-    actions: {
-      name: 'Actions',
-      description: 'Defines the behaviour of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-      table: {
-        defaultValue: { summary: 'static' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'md' },
-      },
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Sets the headline of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyText: {
-      name: 'Modal body text',
-      description: 'Sets the body text of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    showModal: {
-      name: 'Show modal',
-      description: 'Toggles if the modal is displayed.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    actions: 'Static',
-    size: 'Large',
-    headline: 'The buttons for the modal only works in the canvas tab',
-    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-    showModal: true,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const ModalTemplate = ({ actions, size, headline, bodyText, showModal }) => formatHtmlPreview(`
-  <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>
-  <sdds-modal selector="#my-modal-button" ${showModal ? 'show' : ''} id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
-      <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
-      <span slot="sdds-modal-body">
-          ${bodyText}
-      </span>
-      <button slot="sdds-modal-actions" data-dismiss-modal class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
-      <button slot="sdds-modal-actions" data-dismiss-modal class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
-  </sdds-modal>
-  <script>
-    modal = document.querySelector('sdds-modal')
-    modal.addEventListener('sddsClose', (event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-export const WebComponent = ModalTemplate.bind({});

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

@@ -1,91 +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: 'Sets the position of the popover canvas.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom',
-        'Bottom start',
-        'Bottom end',
-        'Top',
-        'Top start',
-        'Top end',
-        'Left',
-        'Left-start',
-        'Left end',
-        'Right',
-        'Right start',
-        'Right end',
-        'Auto',
-      ],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-  },
-  args: {
-    canvasPosition: 'Auto',
-  },
-};
-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',
-    'Auto': 'auto',
-  };
-  return formatHtmlPreview(`
-      <style>
-        /* demo-wrapper and demo-styles is for demonstration purposes only */
-        .demo-wrapper {
-          display: flex;
-          flex-wrap; nowrap;
-          align-items: center;
-        }
-      </style>
-
-      <!-- The 'referenceEl' prop can be used instead of 'selector', 
-      wich might be preferable in frameworks like React -->
-      <sdds-popover-canvas
-        placement="${canvasPosLookup[canvasPosition]}"
-        selector="#trigger"
-        class="sdds-u-p2">
-        <h2>A popover canvas!</h2>
-        <p>
-          Where you can put anything you want!
-        </p>
-        <p>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Even links!</a>
-        </p>
-      </sdds-popover-canvas>
-
-      <!-- demo-wrapper code below is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span class="sdds-u-mr2">Click icon for popover canvas</span>
-        
-        <sdds-button aria-label="menu" onlyIcon id="trigger" type="ghost" size="sm">
-          <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
-        </sdds-button>
-      </div>
-    `);
-};
-export const Default = ComponentPopoverCanvas.bind({});

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

@@ -1,125 +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: 'Sets the 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',
-        'Auto',
-      ],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-  },
-  args: {
-    menuPosition: 'Auto',
-  },
-};
-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',
-    'Auto': 'auto',
-  };
-  return formatHtmlPreview(`
-    <style>
-      /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-      }
-    </style>
-
-    <sdds-popover-menu
-      placement="${menuPosLookup[menuPosition]}"
-      id="my-popover-menu">
-      <ul class="sdds-popover-menu-wrapper">
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-            Menu item 1
-          </a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-            Menu item 2
-          </a>
-        </li>
-        <li class="divider"></li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-            Menu item 4
-          </a>
-        </li>
-      </ul>
-    </sdds-popover-menu>
-
-    <!-- demo-wrapper code below is for demonstration purposes only -->
-    <div class="demo-wrapper">
-      <span class="sdds-u-mr2">Click icon for popover menu</span>
-      
-      <sdds-button aria-label="menu" onlyIcon id="my-popover-button" type="ghost" size="sm">
-        <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
-      </sdds-button>
-    </div>
-
-    <script>
-      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
-      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
-    </script>
-    `);
-};
-export const WithIcons = Template.bind({});

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

@@ -1,118 +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: 'Sets the 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',
-        'Auto',
-      ],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-  },
-  args: {
-    menuPosition: 'Auto',
-  },
-};
-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',
-    'Auto': 'auto',
-  };
-  return formatHtmlPreview(`
-    <style>
-      /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-      }
-    </style>
-
-    <sdds-popover-menu
-      id="my-popover-menu"
-      placement="${menuPosLookup[menuPosition]}">
-      <ul class="sdds-popover-menu-wrapper">
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 1</a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            Menu item 2
-          </a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 3</a>
-        </li>
-        <li class="divider"></li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 4</a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" 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 class="sdds-u-mr2">Click icon for popover menu</span>
-      
-      <sdds-button aria-label="menu" onlyIcon id="my-popover-button" type="ghost" size="sm">
-        <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
-      </sdds-button>
-    </div>
-
-    <script>
-      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
-      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
-    </script>
-    `);
-};
-export const Default = Template.bind({});