@scania/tegel 1.3.3 → 1.5.0

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

@@ -1,119 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/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: {
-    actionsPosition: {
-      name: 'Actions position',
-      description: "Defines the postion of Modal action's slot - if slot scrolls or stays on top of the content.",
-      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' },
-      },
-    },
-    headerText: {
-      name: 'Modal header',
-      description: 'Sets the header text of the Modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyContent: {
-      name: 'Modal body text',
-      description: 'Sets the body content of the Modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    showModal: {
-      name: 'Show Modal',
-      description: 'Toggles if the Modal is displayed.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    prevent: {
-      name: 'Prevent',
-      description: 'Disables closing Modal on clicking on overlay area.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    actionsPosition: 'Static',
-    size: 'Large',
-    headerText: 'The buttons for the Modal only works in the canvas tab',
-    bodyContent: '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,
-    prevent: false,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal, prevent }) => formatHtmlPreview(`
- <!-- The button below is just for demo purposes -->
-  <tds-button id="my-modal-button" text="Open Modal"></tds-button>
-  
-  
-  <tds-modal 
-    header="${headerText}"
-    selector="#my-modal-button"   
-    ${showModal ? 'show' : ''} 
-    id="my-modal" size="${sizeLookUp[size]}" 
-    actions-position="${actionsPosition.toLowerCase()}"
-    prevent="${prevent}"
-  >          
-      <span slot="body">
-          ${bodyContent}
-      </span>      
-      <span slot='actions' class='tds-u-flex tds-u-gap2'>
-        <tds-button data-dismiss-modal size="md" text="Delete" variant="danger"></tds-button>
-        <tds-button data-dismiss-modal size="md" text="Cancel" variant="secondary"></tds-button>
-      </span>      
-  </tds-modal>
-  
-  <!-- The script below is just for demo purposes -->
-  <script>
-    modal = document.querySelector('tds-modal')
-    modal.addEventListener('tdsClose', (event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-export const Default = ModalTemplate.bind({});

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

@@ -1,92 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/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 start': '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 -->
-      <tds-popover-canvas
-        placement="${canvasPosLookup[canvasPosition]}"
-        selector="#trigger"
-        class="tds-u-p2">
-        <h2 class="tds-headline-02 tds-u-mt0">A Popover Canvas!</h2>
-        <p class="tds-body-01">
-          Where you can put anything you want!
-        </p>  
-        <tds-link>
-          <a target="_blank" rel="noopener noreferrer" href="https://tegel.scania.com">Even links!</a>
-        </tds-link>
-      </tds-popover-canvas>
-
-      <!-- demo-wrapper code below is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span class="tds-u-mr2">Click icon for Popover Canvas</span>
-        
-        <tds-button aria-label="menu" only-icon id="trigger" type="secondary" size="sm">
-          <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
-        </tds-button>
-      </div>
-    `);
-};
-export const Default = ComponentPopoverCanvas.bind({});

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

@@ -1,146 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import popoverMenuReadme from "./readme.md";
-import popoverMenuItemReadme from "./popover-menu-item/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Popover Menu`,
-  parameters: {
-    layout: 'centered',
-    notes: { 'Popover Menu': popoverMenuReadme, 'Popover Menu Item': popoverMenuItemReadme },
-    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' },
-      },
-    },
-    icons: {
-      name: 'Icons',
-      description: 'Shows the Popover Menu with/without icons.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    fluidWidth: {
-      name: 'Fluid width',
-      description: 'Unsets the width of the Popover Menu.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    menuPosition: 'Auto',
-    icons: false,
-    fluidWidth: false,
-  },
-};
-const Template = ({ menuPosition, icons, fluidWidth }) => {
-  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 start': '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>
-
-    <tds-popover-menu
-      id="my-popover-menu"
-      placement="${menuPosLookup[menuPosition]}"
-      ${fluidWidth ? 'fluid-width' : ''}
-      selector="#my-popover-button"
-      >
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} ${fluidWidth ? 'The menu width adjusts to the widest word' : 'Action'} </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item disabled>
-          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
-        </tds-popover-menu-item>
-    </tds-popover-menu>
-
-    <!-- demo-wrapper code below is for demonstration purposes only -->
-    <div class="demo-wrapper">
-      <span class="tds-u-mr2">Click icon for Popover Menu</span>
-      
-      <tds-button aria-label="menu" only-icon id="my-popover-button" type="ghost" size="sm">
-        <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
-      </tds-button>
-    </div>
-    
-    
-    `);
-};
-export const Default = Template.bind({});

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

@@ -1,91 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Radio Button`,
-  parameters: {
-    notes: readme,
-    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 text',
-      description: 'Sets the label for the Radio Button.',
-      controls: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the Radio Button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    label: 'Label text',
-    disabled: false,
-  },
-};
-const Template = ({ label, disabled }) => formatHtmlPreview(`
-  <style>
-  .demo-fieldset-reset { 
-    border: 0;
-    margin: 0;
-    min-width: 0;
-    padding: 0; 
-  }
-</style>
-
-  <fieldset class="demo-fieldset-reset">
-  <tds-radio-button 
-    name="rb-example"
-    value="option1"
-    radio-id="option-1"
-    required=false
-    ${disabled ? 'disabled' : ''}
-    checked="true" 
-  >
-    <div slot="label">
-      ${label} 1
-    </div>
-  </tds-radio-button>
-
-  <tds-radio-button
-    name="rb-example"
-    value="option2"
-    radio-id="option-2"
-    required=false
-    ${disabled ? 'disabled' : ''} 
-  >
-    <div slot="label">
-      ${label} 2
-    </div>
-  </tds-radio-button>
-    
-  </fieldset>
-
-  <!-- Script tag with eventlistener for demo purposes. -->
-  <script>
-  document.addEventListener('tdsChange', (event) => {
-    console.log(event)
-  })
-  </script>
-  `);
-export const Default = Template.bind({});

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

@@ -1,224 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeSideMenuUser from "./side-menu-user/readme.md";
-import readmeSideMenuOverlay from "./side-menu-overlay/readme.md";
-import readmeSideMenuCloseButton from "./side-menu-close-button/readme.md";
-import readmeSideMenuCollapseButton from "./side-menu-collapse-button/readme.md";
-import readmeSideMenuDropdown from "./side-menu-dropdown/readme.md";
-import readmeSideMenuItem from "./side-menu-item/readme.md";
-import readmeSideMenuDropdownList from "./side-menu-dropdown-list/readme.md";
-import readmeSideMenuDropdownListItem from "./side-menu-dropdown-list-item/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Side Menu`,
-  parameters: {
-    notes: {
-      'Side Menu': readme,
-      'Side Menu Item': readmeSideMenuItem,
-      'Side Menu Dropdown': readmeSideMenuDropdown,
-      'Side Menu Dropdown List': readmeSideMenuDropdownList,
-      'Side Menu Dropdown List Item': readmeSideMenuDropdownListItem,
-      'Side Menu User': readmeSideMenuUser,
-      'Side Menu Collapse Button': readmeSideMenuCollapseButton,
-      'Side Menu Close Button': readmeSideMenuCloseButton,
-      'Side Menu Overlay': readmeSideMenuOverlay,
-    },
-    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: {
-    persistent: {
-      name: 'Persistent',
-      description: 'Set the Side Menu to always show. This should be used if there are more navigation items to show than can always fit in the Header, more than three Header items is a good rule of thumb.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    collapsible: {
-      name: 'Collapsible',
-      description: 'Make the Side Menu collapsible',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'persistent', truthy: true },
-    },
-    collapsed: {
-      name: 'Collapsed',
-      description: 'Collapsed Side Menu',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'collapsible', truthy: true },
-    },
-  },
-  args: {
-    persistent: true,
-    collapsible: false,
-    collapsed: false,
-  },
-};
-const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
-    <script>
-    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
-    window.demoSideMenu = document.querySelector('#demo-side-menu');
-  </script>
-  <style>
-    :root {
-      --app-bar-height: 64px;
-    }
-
-    /* Note: to make the layout fill the entire viewport height you'll need to set the */
-    /* height of the parent element and all of its ancestors to 100%. */
-    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
-    .demo-layout {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .demo-header {
-      position: sticky;
-      top: 0;
-    }
-    .demo-wrap-side-menu-and-main {
-      display: flex;
-      flex-grow: 1;
-    }
-    ${persistent
-  ? `
-        /* the lg breakpoint is used here to match the breakpoint used in the Header */
-    @media (min-width: 992px) {
-      #demo-side-menu {
-        /* We suggest you attach the persistent Side Menu to your layout like this: */
-        height: calc(100vh - var(--app-bar-height));
-        position: sticky;
-        top: var(--app-bar-height);
-        left: 0px;
-      }
-    }`
-  : ''}
-    /* If an extra button in the Header is required except on */
-    /* very narrow screens, you can use classes like these: */
-    .demo-hide {
-      display: none;
-    }
-
-    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
-    @media (min-width: 375px) {
-      .demo-xs-hide {
-        display: none;
-      }
-      .demo-xs-show {
-        display: block;
-      }
-    }
-  </style>
-
-  <div class="demo-layout">
-    <tds-header class="demo-header">
-      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
-
-      <tds-header-title>
-        My Application
-      </tds-header-title>
-
-      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
-
-      <tds-header-brand-symbol slot="end">
-        <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
-      </tds-header-brand-symbol>
-    </tds-header>
-
-    <div class="demo-wrap-side-menu-and-main">
-      <!-- Note: the "persistent" property keeps the menu open on desktop -->
-      <tds-side-menu ${collapsed ? 'collapsed' : ''} aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
-
-        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="timer" size="24px"></tds-icon>
-            About us
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="truck" size="24px"></tds-icon>
-            Trucks
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-dropdown default-open selected>
-          <tds-icon slot="icon" name="profile" size="24px"></tds-icon>
-          <span slot="label">
-            Wheel types
-          </span>
-          <tds-side-menu-dropdown-list>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.scania.com">
-                Hub-centric wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com" aria-current="page">
-                Rim wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-          </tds-side-menu-dropdown-list>
-        </tds-side-menu-dropdown>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="star" size="24px"></tds-icon>
-            Values
-          </button>
-        </tds-side-menu-item>
-
-        ${collapsible
-  ? `<tds-side-menu-collapse-button slot="sticky-end">
-          Collapse  
-        </tds-side-menu-collapse-button>`
-  : ''}
-
-      </tds-side-menu>
-
-      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
-        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
-        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
-
-        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
-
-        <p><i>Note: The collapse button is optional.</i></p>
-        <button id="test">Toggle the collapsed state programatically</button>
-      </main>
-    </div>
-  </div>
-  <script>
-    sideMenu = document.querySelector('tds-side-menu')
-    document.querySelector('#test')?.addEventListener('click', ()=> {
-      sideMenu.collapsed = !sideMenu.collapsed;
-    })
-
-    document.querySelector('tds-side-menu-collapse-button')?.addEventListener('tdsCollapse', (event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-export const Default = Template.bind({});