@scania/tegel 0.0.51 → 0.0.52

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

@@ -1,98 +1,98 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'Sets the divider type.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Horizontal', 'Vertical'],
-    },
-    direction: {
-      name: 'Direction',
-      description: 'Sets the direction of the divider.',
-      control: {
-        type: 'select',
-      },
-      options: ['Top', 'Right', 'Bottom', 'Left'],
-    },
-    width: {
-      name: 'Width',
-      description: 'Sets the divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'type', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Sets the divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'type', eq: 'Vertical' },
-    },
-  },
-  args: {
-    type: 'Horizontal',
-    direction: 'Top',
-    width: 150,
-    height: 150,
-  },
-};
-const Template = ({ type, width, height }) => {
-  const classLookup = {
-    Horizontal: `sdds-divider`,
-    Vertical: `sdds-divider-vertical`,
-  };
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Divider',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+    ],
+  },
+  argTypes: {
+    orientation: {
+      name: 'Orientation',
+      description: 'Choose divider orientation.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Horizontal', 'Vertical'],
+    },
+    direction: {
+      name: 'Direction',
+      description: 'Sets the direction of the divider.',
+      control: {
+        type: 'select',
+      },
+      options: ['Top', 'Right', 'Bottom', 'Left'],
+    },
+    width: {
+      name: 'Width',
+      description: 'Sets the divider width.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'orientation', eq: 'Horizontal' },
+    },
+    height: {
+      name: 'Height',
+      description: 'Sets the divider height.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'orientation', eq: 'Vertical' },
+    },
+  },
+  args: {
+    orientation: 'Horizontal',
+    direction: 'Top',
+    width: 150,
+    height: 150,
+  },
+};
+const Template = ({ orientation, width, height }) => {
+  const classLookup = {
+    Horizontal: `sdds-divider`,
+    Vertical: `sdds-divider-vertical`,
+  };
   return formatHtmlPreview(`
       <style>
-         ${height
+         ${height
     ? `/* demo-div is for demonstration purposes only*/
         .demo-div {
           height: ${height}px;
           width: 1px;
           padding: 0px;
-        }`
-    : ''}    ${width
+        }`
+    : ''}    ${width
     ? `/* demo-div is for demonstration purposes only*/
             .demo-div {
               width: ${width}px;
               height: 1px;
               padding: 0px;
-            }`
+            }`
     : ''}
       </style>
      
       
       <div
-  class="demo-div ${classLookup[type]}"></div>
-  `);
-};
-const BorderTemplate = ({ direction }) => {
-  const directionLookup = {
-    Top: 'top',
-    Right: 'right',
-    Bottom: 'bottom',
-    Left: 'left',
-  };
+  class="demo-div ${classLookup[orientation]}"></div>
+  `);
+};
+const BorderTemplate = ({ direction }) => {
+  const directionLookup = {
+    Top: 'top',
+    Right: 'right',
+    Bottom: 'bottom',
+    Left: 'left',
+  };
   return formatHtmlPreview(`
       <style>
       #demo-wrapper{
@@ -115,17 +115,17 @@ const BorderTemplate = ({ direction }) => {
       <div
   class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
   <H4>DEMO</H4></div></div>
-  `);
-};
-export const Native = Template.bind({});
-Native.argTypes = {
-  direction: { table: { disable: true } }
-};
-export const Border = BorderTemplate.bind({});
-Border.args = {
-  direction: 'Top'
-};
-Border.argTypes = {
-  type: { table: { disable: true } }
-};
-//# sourceMappingURL=divider.stories.js.map
+  `);
+};
+export const Native = Template.bind({});
+Native.argTypes = {
+  direction: { table: { disable: true } }
+};
+export const Border = BorderTemplate.bind({});
+Border.args = {
+  direction: 'Top'
+};
+Border.argTypes = {
+  orientation: { table: { disable: true } }
+};
+//# sourceMappingURL=divider.stories.js.map

package/dist/collection/components/divider/divider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Sets the divider type.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Horizontal', 'Vertical'],\n    },\n    direction: {\n      name: 'Direction',\n      description: 'Sets the direction of the divider.',\n      control: {\n        type: 'select',\n      },\n      options: ['Top', 'Right', 'Bottom', 'Left'],\n    },\n    width: {\n      name: 'Width',\n      description: 'Sets the divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'type', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Sets the divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'type', eq: 'Vertical' },\n    },\n  },\n  args: {\n    type: 'Horizontal',\n    direction: 'Top',\n    width: 150,\n    height: 150,\n  },\n};\n\n\nconst Template = ({ type, width, height }) => {\n  const classLookup = {\n    Horizontal: `sdds-divider`,\n    Vertical: `sdds-divider-vertical`,\n  };\n  \n  return formatHtmlPreview(\n    `\n      <style>\n         ${\n      height\n        ? `/* demo-div is for demonstration purposes only*/\n        .demo-div {\n          height: ${height}px;\n          width: 1px;\n          padding: 0px;\n        }`\n        : ''\n    }    ${\n      width\n        ? `/* demo-div is for demonstration purposes only*/\n            .demo-div {\n              width: ${width}px;\n              height: 1px;\n              padding: 0px;\n            }`\n        : ''\n    }\n      </style>\n     \n      \n      <div\n  class=\"demo-div ${classLookup[type]}\"></div>\n  `,\n);\n};\n\nconst BorderTemplate= ({ direction }) => {\n  const directionLookup = {\n    Top: 'top',\n    Right: 'right',\n    Bottom: 'bottom',\n    Left: 'left',\n  };\n  return formatHtmlPreview(\n    `\n      <style>\n      #demo-wrapper{\n        padding: 50px;\n        background-color: var(--sdds-grey-958)\n      }\n       /* border-demo-div is for demonstration purposes only*/\n        .border-demo-div {\n          height: 200px;\n          width: 200px;\n          background-color: var(--sdds-grey-868);\n          color: var(--sdds-grey-50);\n          text-align: center;\n          padding: 10px;\n        }\n           \n      </style>\n     <div id= \"demo-wrapper\">\n      \n      <div\n  class=\"border-demo-div sdds-divider-border-${directionLookup[direction]}\">\n  <H4>DEMO</H4></div></div>\n  `,\n);\n};\n\n\nexport const Native = Template.bind({});\nNative.argTypes={\n  direction: { table:  { disable: true } }  \n }\nexport const Border = BorderTemplate.bind({});\nBorder.args={\n  direction: 'Top'\n} \n \nBorder.argTypes={\n type: { table:  { disable: true } }  \n}\n\n\n"]}
+{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    orientation: {\n      name: 'Orientation',\n      description: 'Choose divider orientation.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Horizontal', 'Vertical'],\n    },\n    direction: {\n      name: 'Direction',\n      description: 'Sets the direction of the divider.',\n      control: {\n        type: 'select',\n      },\n      options: ['Top', 'Right', 'Bottom', 'Left'],\n    },\n    width: {\n      name: 'Width',\n      description: 'Sets the divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Sets the divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Vertical' },\n    },\n  },\n  args: {\n    orientation: 'Horizontal',\n    direction: 'Top',\n    width: 150,\n    height: 150,\n  },\n};\n\n\nconst Template = ({ orientation, width, height }) => {\n  const classLookup = {\n    Horizontal: `sdds-divider`,\n    Vertical: `sdds-divider-vertical`,\n  };\n  \n  return formatHtmlPreview(\n    `\n      <style>\n         ${\n      height\n        ? `/* demo-div is for demonstration purposes only*/\n        .demo-div {\n          height: ${height}px;\n          width: 1px;\n          padding: 0px;\n        }`\n        : ''\n    }    ${\n      width\n        ? `/* demo-div is for demonstration purposes only*/\n            .demo-div {\n              width: ${width}px;\n              height: 1px;\n              padding: 0px;\n            }`\n        : ''\n    }\n      </style>\n     \n      \n      <div\n  class=\"demo-div ${classLookup[orientation]}\"></div>\n  `,\n);\n};\n\nconst BorderTemplate= ({ direction }) => {\n  const directionLookup = {\n    Top: 'top',\n    Right: 'right',\n    Bottom: 'bottom',\n    Left: 'left',\n  };\n  return formatHtmlPreview(\n    `\n      <style>\n      #demo-wrapper{\n        padding: 50px;\n        background-color: var(--sdds-grey-958)\n      }\n       /* border-demo-div is for demonstration purposes only*/\n        .border-demo-div {\n          height: 200px;\n          width: 200px;\n          background-color: var(--sdds-grey-868);\n          color: var(--sdds-grey-50);\n          text-align: center;\n          padding: 10px;\n        }\n           \n      </style>\n     <div id= \"demo-wrapper\">\n      \n      <div\n  class=\"border-demo-div sdds-divider-border-${directionLookup[direction]}\">\n  <H4>DEMO</H4></div></div>\n  `,\n);\n};\n\n\nexport const Native = Template.bind({});\nNative.argTypes={\n  direction: { table:  { disable: true } }  \n }\nexport const Border = BorderTemplate.bind({});\nBorder.args={\n  direction: 'Top'\n} \n \nBorder.argTypes={\n orientation: { table:  { disable: true } }  \n}\n\n\n"]}