@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/collection/components/utility/colour/text-color.stories.js

@@ -0,0 +1,95 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Utilities/Colours',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    colour: {
+      name: 'Colour',
+      description: 'The colour of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'colour', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'colour', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The colour scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'colour', eq: 'blue' },
+    },
+  },
+};
+const Template = ({ colour, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (colour) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
+  return formatHtmlPreview(`
+  <style>
+    .demo-wrapper h1 {
+      margin: 0;
+      width: 300px;
+    }
+  </style>
+  <div class="demo-wrapper">
+  <h1 class="sdds-text-${colour}-${scale}">A text ${colour} heading</h1>
+  <p class="sdds-text-${colour}-${scale}">A text ${colour} paragraph</p>
+  </div>
+  `);
+};
+export const textColor = Template.bind({});
+textColor.args = {
+  colour: 'blue',
+  blueScale: '500',
+  redScale: '500',
+  greyScale: '958',
+};
+//# sourceMappingURL=text-color.stories.js.map

package/dist/collection/components/utility/colour/text-color.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-color.stories.js","sourceRoot":"","sources":["../../../../src/components/utility/colour/text-color.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;GACnB;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;KACpD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,IAAI;QACJ,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;OACN;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE;KAClC;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE;KACjC;IACD,SAAS,EAAE;MACT,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE;KAClC;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;EAC9D,IAAI,KAAK,GAAG,GAAG,CAAC;EAChB,QAAQ,MAAM,EAAE;IACd,KAAK,MAAM;MACT,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;IACR,KAAK,MAAM;MACT,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;IACR,KAAK,KAAK;MACR,KAAK,GAAG,QAAQ,CAAC;MACjB,MAAM;IACR;MACE,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;GACT;EACD,OAAO,iBAAiB,CACtB;;;;;;;;yBAQqB,MAAM,IAAI,KAAK,YAAY,MAAM;wBAClC,MAAM,IAAI,KAAK,YAAY,MAAM;;GAEtD,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,KAAK;EAChB,QAAQ,EAAE,KAAK;EACf,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\n\nexport default {\n  title: 'Utilities/Colours',\n  parameters: {\n    layout: 'centered',\n  },\n  argTypes: {\n    colour: {\n      name: 'Colour',\n      description: 'The colour of the text',\n      control: {\n        type: 'select',\n      },\n      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },\n    },\n    greyScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        '50',\n        '100',\n        '200',\n        '300',\n        '400',\n        '500',\n        '600',\n        '700',\n        '800',\n        '846',\n        '868',\n        '900',\n        '958',\n      ],\n      if: { arg: 'colour', eq: 'grey' },\n    },\n    redScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n      if: { arg: 'colour', eq: 'red' },\n    },\n    blueScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n      if: { arg: 'colour', eq: 'blue' },\n    },\n  },\n};\n\nconst Template = ({ colour, greyScale, blueScale, redScale }) => {\n  let scale = 100;\n  switch (colour) {\n    case 'blue':\n      scale = blueScale;\n      break;\n    case 'grey':\n      scale = greyScale;\n      break;\n    case 'red':\n      scale = redScale;\n      break;\n    default:\n      scale = blueScale;\n      break;\n  }\n  return formatHtmlPreview(\n    `\n  <style>\n    .demo-wrapper h1 {\n      margin: 0;\n      width: 300px;\n    }\n  </style>\n  <div class=\"demo-wrapper\">\n  <h1 class=\"sdds-text-${colour}-${scale}\">A text ${colour} heading</h1>\n  <p class=\"sdds-text-${colour}-${scale}\">A text ${colour} paragraph</p>\n  </div>\n  `,\n  );\n};\n\nexport const textColor = Template.bind({});\ntextColor.args = {\n  colour: 'blue',\n  blueScale: '500',\n  redScale: '500',\n  greyScale: '958',\n};\n"]}

package/dist/collection/foundations-stories/colour/colour-brand.stories.js

@@ -0,0 +1,39 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Colour',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+  /* Demo code for presentation purposes */
+  .demo-wrapper {
+    height: 90px;
+  }
+  .demo-wrapper span {
+    color: white;
+    background-color: black;
+    border: 1px solid white;
+    padding: 4px;
+    position: absolute;
+  }
+</style>
+
+  <div class="demo-wrapper" style="background-color: var(--sdds-black)">
+    <span>--sdds-black</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--sdds-white)">
+    <span>--sdds-white</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--sdds-blue)">
+    <span>--sdds-blue</span>
+  </div>
+  `);
+export const Brand = Template.bind({});
+//# sourceMappingURL=colour-brand.stories.js.map

package/dist/collection/foundations-stories/colour/colour-brand.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-brand.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/colour/colour-brand.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBjB,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Colour',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(`\n  <style>\n  /* Demo code for presentation purposes */\n  .demo-wrapper {\n    height: 90px;\n  }\n  .demo-wrapper span {\n    color: white;\n    background-color: black;\n    border: 1px solid white;\n    padding: 4px;\n    position: absolute;\n  }\n</style>\n\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-black)\">\n    <span>--sdds-black</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-white)\">\n    <span>--sdds-white</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-blue)\">\n    <span>--sdds-blue</span>\n  </div>\n  `);\n\nexport const Brand = Template.bind({});\n"]}

package/dist/collection/foundations-stories/colour/colour-scales.stories.js

@@ -0,0 +1,72 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Colour',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
+const Template = ({ colour }) => {
+  const scale = {
+    grey: [
+      '50',
+      '100',
+      '200',
+      '300',
+      '400',
+      '500',
+      '600',
+      '700',
+      '800',
+      '846',
+      '868',
+      '900',
+      '958',
+    ],
+    blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  };
+  const picked = scale[colour];
+  let div = '';
+  picked.forEach((num) => {
+    div += `<div id="test" class="demo-wrapper" style="background-color: var(--sdds-${colour}-${num})">
+      <span>--sdds-${colour}-${num}</span>
+      </div>`;
+  });
+  return formatHtmlPreview(`
+  <style>
+  /* Demo code for presentation purposes */
+  .demo-wrapper {
+    height: 90px;
+  }
+  .demo-wrapper span {
+    color: white;
+    background-color: black;
+    border: 1px solid white;
+    padding: 4px;
+    position: absolute;
+  }
+  </style>
+
+    ${div}
+    `);
+};
+export const Scales = Template.bind({});
+Scales.argTypes = {
+  colour: {
+    name: 'Colour',
+    description: 'Choose colour scale to display',
+    control: {
+      type: 'select',
+    },
+    options: { Grey: 'grey', Blue: 'blue', Red: 'red' },
+  },
+};
+Scales.args = {
+  colour: 'grey',
+};
+//# sourceMappingURL=colour-scales.stories.js.map

package/dist/collection/foundations-stories/colour/colour-scales.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-scales.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/colour/colour-scales.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;EAC9B,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE;MACJ,IAAI;MACJ,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;KACN;IACD,IAAI,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;IAC3E,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;GAC3E,CAAC;EACF,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;EAC7B,IAAI,GAAG,GAAG,EAAE,CAAC;EAEb,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;IACrB,GAAG,IAAI,2EAA2E,MAAM,IAAI,GAAG;qBAC9E,MAAM,IAAI,GAAG;aACrB,CAAC;EACZ,CAAC,CAAC,CAAC;EAEH,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;MAerB,GAAG;KACJ,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAExC,MAAM,CAAC,QAAQ,GAAG;EAChB,MAAM,EAAE;IACN,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,gCAAgC;IAC7C,OAAO,EAAE;MACP,IAAI,EAAE,QAAQ;KACf;IACD,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE;GACpD;CACF,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG;EACZ,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Colour',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n  },\n};\n\nconst Template = ({ colour }) => {\n  const scale = {\n    grey: [\n      '50',\n      '100',\n      '200',\n      '300',\n      '400',\n      '500',\n      '600',\n      '700',\n      '800',\n      '846',\n      '868',\n      '900',\n      '958',\n    ],\n    blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n    red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n  };\n  const picked = scale[colour];\n  let div = '';\n\n  picked.forEach((num) => {\n    div += `<div id=\"test\" class=\"demo-wrapper\" style=\"background-color: var(--sdds-${colour}-${num})\">\n      <span>--sdds-${colour}-${num}</span>\n      </div>`;\n  });\n\n  return formatHtmlPreview(`\n  <style>\n  /* Demo code for presentation purposes */\n  .demo-wrapper {\n    height: 90px;\n  }\n  .demo-wrapper span {\n    color: white;\n    background-color: black;\n    border: 1px solid white;\n    padding: 4px;\n    position: absolute;\n  }\n  </style>\n\n    ${div}\n    `);\n};\n\nexport const Scales = Template.bind({});\n\nScales.argTypes = {\n  colour: {\n    name: 'Colour',\n    description: 'Choose colour scale to display',\n    control: {\n      type: 'select',\n    },\n    options: { Grey: 'grey', Blue: 'blue', Red: 'red' },\n  },\n};\n\nScales.args = {\n  colour: 'grey',\n};\n"]}

package/dist/collection/foundations-stories/colour/colour-semantic.stories.js

@@ -0,0 +1,41 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Colour',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+  /* Demo code for presentation purposes */
+  .demo-wrapper {
+    height: 90px;
+  }
+  .demo-wrapper span {
+    color: white;
+    background-color: black;
+    border: 1px solid white;
+    padding: 4px;
+    position: absolute;
+  }
+</style>
+
+  <div class="demo-wrapper" style="background-color: var(--sdds-positive)">
+    <span>--sdds-positive</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--sdds-warning)">
+    <span>--sdds-warning</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--sdds-negative)">
+    <span>--sdds-negative</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--sdds-information)">
+    <span>--sdds-information</span>
+  </div>`);
+export const Sematic = Template.bind({});
+//# sourceMappingURL=colour-semantic.stories.js.map

package/dist/collection/foundations-stories/colour/colour-semantic.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-semantic.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/colour/colour-semantic.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BX,CAAC,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Colour',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(`\n  <style>\n  /* Demo code for presentation purposes */\n  .demo-wrapper {\n    height: 90px;\n  }\n  .demo-wrapper span {\n    color: white;\n    background-color: black;\n    border: 1px solid white;\n    padding: 4px;\n    position: absolute;\n  }\n</style>\n\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-positive)\">\n    <span>--sdds-positive</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-warning)\">\n    <span>--sdds-warning</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-negative)\">\n    <span>--sdds-negative</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-information)\">\n    <span>--sdds-information</span>\n  </div>`);\n\nexport const Sematic = Template.bind({});\n"]}

package/dist/collection/foundations-stories/grid/grid.stories.js

@@ -0,0 +1,387 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Foundations/Grid',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    fluidContainer: false,
+    padding: true,
+  },
+  argTypes: {
+    fluidContainer: {
+      name: 'Fluid container',
+      description: 'Set container to fluid or not',
+      control: {
+        type: 'boolean',
+      },
+    },
+    padding: {
+      name: 'Fluid container',
+      description: 'Toggle padding on columns',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+// Styling for grid templates
+const style = formatHtmlPreview(`
+  <style>
+    /* Demo code for presentation purposes */
+    .sdds-container,
+    .sdds-container-fluid {
+      background-color: #ff00009e;
+      color: black;
+      outline: 1px solid red;
+    }
+
+    .sdds-row > div {
+      outline: 1px solid #ef1919;
+      background: #fbc5c5;
+      min-height: 50px;
+    }
+
+    .sdds-sidebar {
+      background-color: rgba(255, 0, 0, 0.1);
+    }
+
+    .inside-demo {
+      background: #ef9191;
+      height: 100%;
+      word-break: break-word;
+    }
+
+    .container-demo {
+      margin-top: 16px;
+    }
+
+  </style>`);
+const GridTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+  ${style}
+  <h4>Grid</h4>
+
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+        <div class="inside-demo">12</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-11 sdds-col-xxlg-11 sdds-col-xlg-11 sdds-col-lg-11 sdds-col-md-11 sdds-col-sm-11 sdds-col-xs-11">
+        <div class="inside-demo">11</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-10 sdds-col-xxlg-10 sdds-col-xlg-10 sdds-col-lg-10 sdds-col-md-10 sdds-col-sm-10 sdds-col-xs-10">
+        <div class="inside-demo">10</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-9 sdds-col-xxlg-9 sdds-col-xlg-9 sdds-col-lg-9 sdds-col-md-9 sdds-col-sm-9 sdds-col-xs-9">
+        <div class="inside-demo">9</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8">
+        <div class="inside-demo">8</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-7 sdds-col-xxlg-7 sdds-col-xlg-7 sdds-col-lg-7 sdds-col-md-7 sdds-col-sm-7 sdds-col-xs-7">
+        <div class="inside-demo">7</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6">
+        <div class="inside-demo">6</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-5 sdds-col-xxlg-5 sdds-col-xlg-5 sdds-col-lg-5 sdds-col-md-5 sdds-col-sm-5 sdds-col-xs-5">
+        <div class="inside-demo">5</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-4 sdds-col-xxlg-4 sdds-col-xlg-4 sdds-col-lg-4 sdds-col-md-4 sdds-col-sm-4 sdds-col-xs-4">
+        <div class="inside-demo">4</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-3 sdds-col-xxlg-3 sdds-col-xlg-3 sdds-col-lg-3 sdds-col-md-3 sdds-col-sm-3 sdds-col-xs-3">
+        <div class="inside-demo">3</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-2 sdds-col-xxlg-2 sdds-col-xlg-2 sdds-col-lg-2 sdds-col-md-2 sdds-col-sm-2 sdds-col-xs-2">
+        <div class="inside-demo">2</div>
+      </div>
+    </div>
+
+    <div class="sdds-row">
+      <div class="sdds-col-max-1 sdds-col-xxlg-1 sdds-col-xlg-1 sdds-col-lg-1 sdds-col-md-1 sdds-col-sm-1 sdds-col-xs-1">
+        <div class="inside-demo">1</div>
+      </div>
+    </div>
+  </div>
+  `);
+// Controls for the grid
+export const Default = GridTemplate.bind({});
+const GridAutoColTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+  ${style}
+
+  <h4>Grid Auto columns</h4>
+  <h5>Container 1</h5>
+
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <div class="sdds-col">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+    </div>
+  </div>
+
+  <h5>Container 2</h5>
+
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+    </div>
+  </div>
+
+  <h5>Container 3</h5>
+
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+    <div class="sdds-row">
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+      <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+        <div class="inside-demo">.sdds-col</div>
+      </div>
+    </div>
+  </div>
+  `);
+export const Auto = GridAutoColTemplate.bind({});
+const GridPushTemplate = ({ fluidContainer, collapse, padding }) => formatHtmlPreview(`
+  ${style}
+
+  <h4>Grid Push</h4>
+
+  <div class="sdds-push">
+    <div class="sdds-sidebar ${collapse ? 'sdds-sidebar-collapse' : ''}">
+    </div>
+    <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+      <div class="sdds-row">
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+        <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs">
+          <div class="inside-demo">1</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `);
+export const Push = GridPushTemplate.bind({});
+Push.args = {
+  collapse: false,
+};
+const GridOffsetTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+  ${style}
+
+  <h4>Grid Offset</h4>
+
+    <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''}">
+      <div class="sdds-row">
+        <div class="sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset">
+          <div class="inside-demo">Offset</div>
+        </div>
+        <div class="sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset">
+          <div class="inside-demo">Offset</div>
+        </div>
+        <div class="sdds-col-max-2 sdds-col-max-2-offset sdds-col-xxlg-2 sdds-col-xxlg-2-offset sdds-col-xlg-2 sdds-col-xlg-2-offset sdds-col-lg-2 sdds-col-lg-2-offset sdds-col-md-2 sdds-col-md-2-offset sdds-col-sm-2 sdds-col-sm-2-offset sdds-col-xs-2 sdds-col-xs-2-offset">
+          <div class="inside-demo">Offset</div>
+        </div>
+      </div>
+    </div>
+  `);
+export const Offset = GridOffsetTemplate.bind({});
+const GridNoPaddingTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+    ${style}
+
+    <h4>Grid no-padding</h4>
+
+    <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} demo-example-cols">
+      <div class="sdds-row">
+        <div class="sdds-no-padding sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8">
+          <div class="inside-demo">no padding</div>
+        </div>
+        <div class="sdds-no-padding sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+          <div class="inside-demo">no padding</div>
+        </div>
+        <div class="${padding ? '' : 'sdds-no-padding'} sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+          <div class="inside-demo">padding</div>
+        </div>
+        <div class="${padding ? '' : 'sdds-no-padding'} sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8">
+          <div class="inside-demo">padding</div>
+        </div>
+      </div>
+    </div>
+  `);
+export const NoPadding = GridNoPaddingTemplate.bind({});
+NoPadding.args = {
+  padding: true,
+};
+const GridFluidTemplate = ({ fluidContainer = true, padding }) => formatHtmlPreview(`
+    ${style}
+
+    <h4>Grid fluid</h4>
+
+    <div class="sdds-container-fluid ${padding === false ? 'sdds-no-padding' : ''}">
+      <div class="sdds-row">
+        <div class="sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+          <div class="inside-demo">container fluid</div>
+        </div>
+      </div>
+    </div>
+    <div class="${fluidContainer ? 'sdds-container-fluid' : 'sdds-container'} ${padding === false ? 'sdds-no-padding' : ''} container-demo">
+      <div class="sdds-row">
+        <div class="sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+          <div class="inside-demo">container</div>
+        </div>
+      </div>
+    </div>
+  `);
+export const Fluid = GridFluidTemplate.bind({});
+const GridNestedTemplate = ({ fluidContainer, padding }) => formatHtmlPreview(`
+ ${style}
+
+ <h4>Nested</h4>
+
+ <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}">
+   <div class="sdds-row">
+     <div class="${padding === false ? 'sdds-no-padding' : ''} sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+       <div class="inside-demo">12</div>
+     </div>
+   </div>
+   <div class="sdds-row">
+     <div class="sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6">
+      <div class="sdds-row">
+        <div class="${padding === false ? 'sdds-no-padding' : ''} sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6">
+          <div class="inside-demo">6 nested</div>
+        </div>
+        <div class=" ${padding === false ? 'sdds-no-padding' : ''} sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6">
+          <div class="inside-demo">6 nested</div>
+        </div>
+      </div>
+     </div>
+     <div class="${padding === false ? 'sdds-no-padding' : ''} sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6">
+       <div class="inside-demo">6</div>
+     </div>
+   </div>
+  </div>
+ `);
+export const Nested = GridNestedTemplate.bind({});
+const GridHideShow = ({ fluidContainer }) => formatHtmlPreview(`
+  ${style}
+
+  <h4>Hide/show element</h4>
+
+  <div class="${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}">
+    <div class="sdds-row">
+      <div class="sdds-hide-xlg sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+        <div class="inside-demo">Hide on xlg and wider</div>
+      </div>
+    </div>
+    <div class="sdds-row">
+      <div class="sdds-hide-xs sdds-show-md sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+        <div class="inside-demo">Show on md and wider</div>
+      </div>
+    </div>
+  </div>
+  `);
+export const ShowHide = GridHideShow.bind({});
+//# sourceMappingURL=grid.stories.js.map