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

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,78 @@
+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 = {};

package/dist/collection/components/modal/modal.css

@@ -0,0 +1,324 @@
+:root,
+html {
+  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
+  --sdds-modal-bg: var(--sdds-white);
+  --sdds-modal-text: var(--sdds-grey-958);
+  --sdds-modal-icon: var(--sdds-black);
+  --sdds-modal-scrollbar: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+}
+
+:root .sdds-theme-light,
+html .sdds-theme-light {
+  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
+  --sdds-modal-bg: var(--sdds-white);
+  --sdds-modal-text: var(--sdds-grey-958);
+  --sdds-modal-icon: var(--sdds-black);
+  --sdds-modal-scrollbar: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+}
+
+:root .sdds-theme-dark,
+html .sdds-theme-dark {
+  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
+  --sdds-modal-bg: var(--sdds-grey-900);
+  --sdds-modal-text: var(--sdds-white);
+  --sdds-modal-icon: var(--sdds-white);
+  --sdds-modal-scrollbar: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+}
+
+/* MIXINS */
+/* MODAL STYLING */
+.sdds-modal {
+  box-sizing: border-box;
+  background-color: var(--sdds-modal-bg);
+  z-index: 4;
+  margin: auto;
+  position: relative;
+  border-radius: 4px;
+  padding: 16px;
+  max-height: 85vh;
+  overflow-y: auto;
+  /* SCROLL STUFF */
+  /* width */
+  /* Track */
+  /* Handle */
+}
+.sdds-modal * {
+  box-sizing: border-box;
+}
+.sdds-modal::-webkit-scrollbar {
+  width: 5px;
+  background-color: var(--sdds-grey-300);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal::-webkit-scrollbar-track {
+  background-color: var(--sdds-grey-300);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-500);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal__actions-sticky {
+  overflow: hidden;
+}
+.sdds-modal__actions-sticky .sdds-modal-body {
+  font: var(--sdds-body-01);
+  letter-spacing: var(--sdds-body-01-ls);
+  padding-bottom: 40px;
+  margin: 0 -16px 0 0;
+  max-height: calc(85vh - 36px);
+  overflow-y: auto;
+}
+.sdds-modal__actions-sticky .sdds-modal-actions {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--sdds-modal-bg);
+  padding: var(--sdds-spacing-element-16);
+  display: flex;
+  gap: 16px;
+}
+.sdds-modal__actions-static .sdds-modal-actions {
+  background-color: var(--sdds-modal-bg);
+  display: flex;
+  gap: 16px;
+}
+
+@media (min-width: 320px) {
+  .sdds-modal-xs {
+    width: 100%;
+  }
+
+  .sdds-modal-sm {
+    width: 100%;
+  }
+
+  .sdds-modal-md {
+    width: 100%;
+  }
+
+  .sdds-modal-lg {
+    width: 100%;
+  }
+}
+@media (min-width: 672px) {
+  .sdds-modal-xs {
+    width: 75%;
+  }
+
+  .sdds-modal-sm {
+    width: 62.5%;
+  }
+
+  .sdds-modal-md {
+    width: 75%;
+  }
+
+  .sdds-modal-lg {
+    width: 100%;
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-xs {
+    width: 31.25%;
+  }
+
+  .sdds-modal-sm {
+    width: 43.75%;
+  }
+
+  .sdds-modal-md {
+    width: 62.5%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1312px) {
+  .sdds-modal-xs {
+    width: 31.25%;
+  }
+
+  .sdds-modal-sm {
+    width: 37.5%;
+  }
+
+  .sdds-modal-md {
+    width: 62.5%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1584px) {
+  .sdds-modal-xs {
+    width: 25%;
+  }
+
+  .sdds-modal-sm {
+    width: 37.5%;
+  }
+
+  .sdds-modal-md {
+    width: 50%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (max-width: 320px) {
+  .sdds-modal-md,
+.sdds-modal-lg,
+.sdds-modal-sm {
+    height: 100%;
+  }
+  .sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),
+.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),
+.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*) {
+    display: flex;
+  }
+}
+/* MODAL SUBELEMENTS */
+.sdds-modal-header {
+  display: flex;
+  padding-bottom: var(--sdds-spacing-element-8);
+  position: sticky;
+  top: 0;
+  background-color: var(--sdds-modal-bg);
+  z-index: 1;
+}
+.sdds-modal-header::before {
+  content: " ";
+  position: absolute;
+  height: 16px;
+  top: -16px;
+  width: 100%;
+  background-color: var(--sdds-modal-bg);
+}
+
+.sdds-modal-headline {
+  font: var(--sdds-headline-05);
+  letter-spacing: var(--sdds-headline-05-ls);
+  margin: 0;
+  flex: 1;
+}
+
+.sdds-modal-body {
+  font: var(--sdds-body-01);
+  letter-spacing: var(--sdds-body-01-ls);
+  padding-bottom: 40px;
+  margin: 0 -16px 0 0;
+  overflow-y: visible;
+  /* SCROLL STUFF */
+  /* width */
+  /* Track */
+  /* Handle */
+}
+.sdds-modal-body::-webkit-scrollbar {
+  width: 5px;
+  background-color: var(--sdds-grey-300);
+}
+.sdds-modal-body::-webkit-scrollbar-track {
+  background-color: var(--sdds-grey-300);
+}
+.sdds-modal-body::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-500);
+}
+@media (min-width: 1056px) {
+  .sdds-modal-body {
+    padding-right: 64px;
+  }
+}
+
+.sdds-modal-backdrop {
+  left: 0;
+  top: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 40000;
+  background-color: var(--sdds-modal-backdrop);
+  padding: 0 16px;
+}
+@media (max-width: 320px) {
+  .sdds-modal-backdrop {
+    padding: 0;
+  }
+}
+.sdds-modal-backdrop.show {
+  display: flex;
+}
+.sdds-modal-backdrop.hide {
+  display: none;
+}
+
+.sdds-modal-btn {
+  display: inline-block;
+  width: 16px;
+  height: auto;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='%23171719'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+@media (min-width: 320px) {
+  .sdds-modal-btn {
+    margin-left: var(--sdds-spacing-element-16);
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-btn {
+    margin-left: var(--sdds-spacing-element-48);
+  }
+}
+
+.sdds-modal-overflow {
+  overflow: hidden;
+}
+
+/* WEB COMPONENT STUFF */
+:host {
+  left: 0;
+  top: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 40000;
+  background-color: var(--sdds-modal-backdrop);
+  padding: 0 16px;
+}
+@media (max-width: 320px) {
+  :host {
+    padding: 0;
+  }
+}
+:host.show {
+  display: flex;
+}
+:host.hide {
+  display: none;
+}
+:host .sdds-modal-btn {
+  border: none;
+  background-color: transparent;
+  /* &:focus {
+    //@include sdds-focus-state; FIXME: THIS INCLUDE IS NOT WORKING
+  } */
+}
+
+:host(.show) {
+  display: flex;
+}
+
+:host(.hide) {
+  display: none;
+}