@scania/tegel 0.0.6 → 0.0.8

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

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

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

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

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

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

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

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