@scania/tegel 0.0.33 → 0.0.51

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

@@ -1 +1 @@
-{"version":3,"file":"modal-native.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-native.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,eAAe;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;KACrD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;KAC9B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,oBAAoB;MACjC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CACpE,iBAAiB,CACf;;;;;;;;;;;;;;;;;;oDAkBgD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;0CAEvE,UAAU,CAAC,IAAI,CACjB,wBAAwB,OAAO,CAAC,WAAW,EAAE;;4CAEP,QAAQ;;;;;;+CAML,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAExC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Size of modal',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggle if the modal is displayed',\n      control: {\n        type: 'boolean',\n      },\n    },\n    actions: {\n      name: 'Actions',\n      description: 'Behaviour of modal actions',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Customize headline',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Customize body text',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      '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.',\n    actions: 'Static',\n    size: 'Large',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst Template = ({ headline, bodyText, size, actions, showModal }) =>\n  formatHtmlPreview(\n    `    <style>\n  /* demo-wrapper and demo-styles is for demonstration purposes only*/\n  .demo-wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    height: 100vh;\n  }\n  .demo-styles {\n    position: absolute;\n    margin-bottom: 20px;\n  }\n  </style>\n\n  <div class=\"demo-wrapper\">\n    <button id=\"modal-button\" class=\"sdds-btn sdds-btn-primary sdds-btn-lg\">\n      <span class=\"sdds-btn-text\">Open modal</span>\n    </button>\n    <div id=\"my-modal\" class=\"sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles\">\n      <div class=\"sdds-modal sdds-modal-${\n        sizeLookUp[size]\n      } sdds-modal__actions-${actions.toLowerCase()}\">\n        <div class=\"sdds-modal-header\">\n          <h5 class=\"sdds-modal-headline\">${headline}</h5>\n          <button class=\"sdds-modal-close\" aria-label=\"close\">\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n          <div class=\"sdds-modal-body\">\n            <p class=\"sdds-u-mb0 sdds-u-mt0\">${bodyText}</p>\n          </div>\n          <div class=\"sdds-modal-actions\">\n              <button class=\"sdds-btn sdds-btn-primary sdds-btn-md\">Save</button>\n              <button class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  modal = document.getElementById('my-modal');\n  buttons = modal.getElementsByTagName('button');\n  for (const button of buttons) {\n    button.addEventListener('click', () => {\n      modal.classList.replace('show', 'hide')\n    })\n  }\n\n  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {\n    modal.classList.replace('show', 'hide');\n  })\n\n  document.getElementById('modal-button').addEventListener('click', () => {\n    modal.classList.replace('hide', 'show')\n  })\n  </script>\n  `,\n  );\n\nexport const Native = Template.bind({});\n\nNative.args = {};\n"]}
+{"version":3,"file":"modal-native.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-native.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EAAE,wNAAwN;IAClO,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACV,EAAE,EAAE,CACH,iBAAiB,CACf;;;;;;;;;;;;;;;;;;oDAkBgD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;0CAEvE,UAAU,CAAC,IAAI,CACjB,wBAAwB,OAAO,CAAC,WAAW,EAAE;;4CAEP,QAAQ;;;;;;+CAML,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    actions: {\n      name: 'Actions',\n      description: 'Defines the behaviour of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n      table: {\n        defaultValue: { summary: 'Static' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Sets the headline of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Sets the body text of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggles if the modal is displayed.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n  },\n  args: {\n    actions: 'Static',\n    size: 'Large',\n    headline: 'The buttons for the modal only works in the canvas tab',\n    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.',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst Template = ({ \n  actions, \n  size, \n  headline, \n  bodyText, \n  showModal \n}) =>\n  formatHtmlPreview(\n    `    <style>\n  /* demo-wrapper and demo-styles is for demonstration purposes only*/\n  .demo-wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    height: 100vh;\n  }\n  .demo-styles {\n    position: absolute;\n    margin-bottom: 20px;\n  }\n  </style>\n\n  <div class=\"demo-wrapper\">\n    <button id=\"modal-button\" class=\"sdds-btn sdds-btn-primary sdds-btn-lg\">\n      <span class=\"sdds-btn-text\">Open modal</span>\n    </button>\n    <div id=\"my-modal\" class=\"sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles\">\n      <div class=\"sdds-modal sdds-modal-${\n        sizeLookUp[size]\n      } sdds-modal__actions-${actions.toLowerCase()}\">\n        <div class=\"sdds-modal-header\">\n          <h5 class=\"sdds-modal-headline\">${headline}</h5>\n          <button class=\"sdds-modal-close\" aria-label=\"close\">\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n          <div class=\"sdds-modal-body\">\n            <p class=\"sdds-u-mb0 sdds-u-mt0\">${bodyText}</p>\n          </div>\n          <div class=\"sdds-modal-actions\">\n              <button class=\"sdds-btn sdds-btn-primary sdds-btn-md\">Save</button>\n              <button class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  modal = document.getElementById('my-modal');\n  buttons = modal.getElementsByTagName('button');\n  for (const button of buttons) {\n    button.addEventListener('click', () => {\n      modal.classList.replace('show', 'hide')\n    })\n  }\n\n  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {\n    modal.classList.replace('show', 'hide');\n  })\n\n  document.getElementById('modal-button').addEventListener('click', () => {\n    modal.classList.replace('hide', 'show')\n  })\n  </script>\n  `,\n  );\n\nexport const Native = Template.bind({});"]}

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

@@ -1,87 +1,98 @@
-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',
-      },
-    },
-    bodyText: {
-      name: 'Modal body text',
-      description: 'Customize body text',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    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.',
-    actions: 'Static',
-    size: 'Large',
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const ModalTemplate = ({ size, headline, bodyText, actions }) => formatHtmlPreview(`
+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 open id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
+  <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 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>
+      <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>
-
-    document.getElementById('my-modal-button').addEventListener('click', () => {
-      document.getElementById('my-modal').open = true;
+    modal = document.querySelector('sdds-modal')
+    modal.addEventListener('sddsClose', (event) => {
+      console.log(event)
     })
   </script>
-
-  `);
-export const WebComponent = ModalTemplate.bind({});
-WebComponent.args = {};
-//# sourceMappingURL=modal-webcomponent.stories.js.map
+  `);
+export const WebComponent = ModalTemplate.bind({});
+//# sourceMappingURL=modal-webcomponent.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,eAAe;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;KACrD;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;KAC9B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,oBAAoB;MACjC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAC9D,iBAAiB,CACf;;;yCAGqC,UAAU,CAAC,IAAI,CAAC,cAAc,OAAO,CAAC,WAAW,EAAE;mEACzB,QAAQ;;YAE/D,QAAQ;;;;;;;;;;;;GAYjB,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnD,YAAY,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Size of modal',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n    },\n    actions: {\n      name: 'Actions',\n      description: 'Behaviour of modal actions',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Customize headline',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Customize body text',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      '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.',\n    actions: 'Static',\n    size: 'Large',\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst ModalTemplate = ({ size, headline, bodyText, actions }) =>\n  formatHtmlPreview(\n    `\n  <button id=\"my-modal-button\" class=\"sdds-btn sdds-btn-primary\">Open modal</button>\n\n  <sdds-modal open id=\"my-modal\" size=\"${sizeLookUp[size]}\" actions=\"${actions.toLowerCase()}\">\n      <h5 class=\"sdds-modal-headline\" slot=\"sdds-modal-headline\">${headline}</h5>\n      <span slot=\"sdds-modal-body\">\n          ${bodyText}\n      </span>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal onclick=\"console.log('delete')\" class=\"sdds-btn sdds-btn-danger sdds-btn-md\">Delete</button>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal onclick=\"console.log('cancel')\" class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n  </sdds-modal>\n  <script>\n\n    document.getElementById('my-modal-button').addEventListener('click', () => {\n      document.getElementById('my-modal').open = true;\n    })\n  </script>\n\n  `,\n  );\n\nexport const WebComponent = ModalTemplate.bind({});\n\nWebComponent.args = {};\n"]}
+{"version":3,"file":"modal-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CACzE,iBAAiB,CACf;;4CAEwC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,wBAC7D,UAAU,CAAC,IAAI,CACjB,cAAc,OAAO,CAAC,WAAW,EAAE;mEAC4B,QAAQ;;YAE/D,QAAQ;;;;;;;;;;;GAWjB,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    actions: {\n      name: 'Actions',\n      description: 'Defines the behaviour of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n      table: {\n        defaultValue: { summary: 'static' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'md' },\n      },\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Sets the headline of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Sets the body text of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggles if the modal is displayed.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    actions: 'Static',\n    size: 'Large',\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      '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.',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst ModalTemplate = ({ actions, size, headline, bodyText, showModal }) =>\n  formatHtmlPreview(\n    `\n  <button id=\"my-modal-button\" class=\"sdds-btn sdds-btn-primary\">Open modal</button>\n  <sdds-modal selector=\"#my-modal-button\" ${showModal ? 'show' : ''} id=\"my-modal\" size=\"${\n      sizeLookUp[size]\n    }\" actions=\"${actions.toLowerCase()}\">\n      <h5 class=\"sdds-modal-headline\" slot=\"sdds-modal-headline\">${headline}</h5>\n      <span slot=\"sdds-modal-body\">\n          ${bodyText}\n      </span>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal class=\"sdds-btn sdds-btn-danger sdds-btn-md\">Delete</button>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n  </sdds-modal>\n  <script>\n    modal = document.querySelector('sdds-modal')\n    modal.addEventListener('sddsClose', (event) => {\n      console.log(event)\n    })\n  </script>\n  `,\n  );\n\nexport const WebComponent = ModalTemplate.bind({});\n"]}