@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,182 @@
+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({});

package/dist/collection/components/slider/slider.css

@@ -0,0 +1,297 @@
+:root,
+.sdds-mode-light {
+  --sdds-slider-label-color: var(--sdds-grey-958);
+  --sdds-slider-label-color-disabled: var(--sdds-grey-400);
+  --sdds-slider-thumb-color: var(--sdds-blue-800);
+  --sdds-slider-divider-color: var(--sdds-grey-400);
+  --sdds-slider-track-color: var(--sdds-grey-400);
+  --sdds-slider-track-fill-color: var(--sdds-blue-800);
+  --sdds-slider-input-inputfield-color: var(--sdds-grey-700);
+  --sdds-slider-inputfield-color: var(--sdds-grey-400);
+  --sdds-slider-controls-color: var(--sdds-grey-958);
+  --sdds-slider-inputfield-background: var(--sdds-white);
+  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-400);
+  --sdds-slider-divider-values-color: var(--sdds-grey-958) ;
+}
+
+.sdds-mode-dark {
+  --sdds-slider-label-color: var(--sdds-grey-100);
+  --sdds-slider-label-color-disabled: var(--sdds-grey-700);
+  --sdds-slider-thumb-color: var(--sdds-grey-100);
+  --sdds-slider-divider-color: var(--sdds-grey-700);
+  --sdds-slider-track-color: var(--sdds-grey-700);
+  --sdds-slider-track-fill-color: var(--sdds-grey-100);
+  --sdds-slider-inputfield-color: var(--sdds-grey-700);
+  --sdds-slider-input-inputfield-color: var(--sdds-grey-400);
+  --sdds-slider-controls-color: var(--sdds-grey-100);
+  --sdds-slider-inputfield-background: var(--sdds-grey-900);
+  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-800);
+  --sdds-slider-divider-values-color: var(--sdds-grey-100) ;
+}
+
+sdds-slider {
+  box-sizing: border-box;
+  width: 100%;
+}
+sdds-slider * {
+  box-sizing: border-box;
+}
+sdds-slider input[type=range].sdds-slider-native-element {
+  display: none;
+}
+
+.sdds-slider-wrapper {
+  width: 100%;
+}
+.sdds-slider-wrapper.read-only {
+  pointer-events: none;
+}
+
+.sdds-slider {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  padding-top: 65px;
+}
+.sdds-slider .sdds-slider-inner {
+  width: 100%;
+  height: 20px;
+  position: relative;
+}
+.sdds-slider .sdds-slider__controls {
+  position: relative;
+  top: -25px;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control {
+  cursor: pointer;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus {
+  padding: 18px 18px 18px 0;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus {
+  padding: 18px 0 18px 18px;
+}
+.sdds-slider .sdds-slider__input-values {
+  position: relative;
+  top: -25px;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-value {
+  user-select: none;
+  padding: 18px;
+  color: var(--sdds-grey-700);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
+  background-color: var(--sdds-slider-inputfield-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--sdds-slider-input-inputfield-color);
+  border: 0;
+  background-color: transparent;
+  text-align: center;
+  padding: 12px;
+  box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);
+  border-radius: 4px 4px 0 0;
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover {
+  box-shadow: inset 0 -1px 0 var(--sdds-grey-600);
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus {
+  box-shadow: inset 0 -2px 0 var(--sdds-blue-400);
+  outline: 0;
+}
+.sdds-slider label {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  user-select: none;
+  position: absolute;
+  color: var(--sdds-slider-label-color);
+  top: -16px;
+  transform: translateY(-100%);
+}
+.sdds-slider label.offset {
+  top: -35px;
+}
+.sdds-slider .sdds-slider__value {
+  font: var(--sdds-detail-01);
+  letter-spacing: var(--sdds-detail-01-ls);
+  user-select: none;
+  border-radius: 4px;
+  padding: 8px;
+  position: absolute;
+  transform: translate(-50%, -100%);
+  top: -24px;
+  background-color: var(--sdds-grey-800);
+  color: var(--sdds-white);
+}
+.sdds-slider .sdds-slider__value svg {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 34px;
+}
+.sdds-slider .sdds-slider__scrubber {
+  position: absolute;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background-color: var(--sdds-slider-thumb-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  content: " ";
+  display: none;
+  width: 48px;
+  height: 48px;
+  background-color: var(--sdds-slider-thumb-color);
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before {
+  display: block;
+  opacity: 0.08;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
+  width: 24px;
+  height: 24px;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before {
+  display: block;
+  opacity: 0.16 !important;
+}
+.sdds-slider .sdds-slider__value-dividers-wrapper {
+  position: relative;
+  width: 100%;
+  pointer-events: none;
+}
+.sdds-slider .sdds-slider__value-dividers {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider {
+  transform: translateY(-50%);
+  height: 16px;
+  background-color: var(--sdds-slider-divider-color);
+  color: var(--sdds-slider-divider-values-color);
+  width: 1px;
+}
+.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span {
+  display: block;
+  user-select: none;
+  color: var(-sdds-grey-700);
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  position: relative;
+  top: -7px;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  width: 50px;
+  text-align: center;
+}
+.sdds-slider .sdds-slider__track {
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  background-color: var(--sdds-slider-track-color);
+  position: relative;
+}
+.sdds-slider .sdds-slider__track:focus {
+  outline: 0;
+}
+.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  width: 24px;
+  height: 24px;
+}
+.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  display: block;
+  opacity: 0.08;
+}
+.sdds-slider .sdds-slider__track .sdds-slider__track-fill {
+  background-color: var(--sdds-slider-track-fill-color);
+  border-radius: 2px;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: -1px;
+}
+.sdds-slider.disabled {
+  cursor: not-allowed;
+}
+.sdds-slider.disabled > * {
+  pointer-events: none;
+}
+.sdds-slider.disabled label {
+  color: var(--sdds-slider-label-color-disabled);
+}
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
+  fill: var(--sdds-slider-controls-color);
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
+  color: var(--sdds-slider-controls-color);
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
+  color: var(--sdds-slider-controls-color);
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__value {
+  display: none;
+}
+.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
+  background-color: var(--sdds-slider-track-fill-color);
+}
+.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
+  color: var(--sdds-slider-track-fill-color);
+}
+.sdds-slider.disabled .sdds-slider__scrubber {
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  background: var(--sdds-slider-track-color);
+  cursor: default;
+}
+.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  width: 16px;
+  height: 16px;
+}
+.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  width: 40px;
+  height: 40px;
+}
+.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
+  width: 20px;
+  height: 20px;
+}
+
+.sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
+  fill: var(--sdds-slider-controls-color);
+}