Restructure Storybook stories in sidebar (#6915)

* Renamed designSystem to crayons.

* Restructured how Storybook stories are laid out in Storybook's sidebar.

* wip

* More folder restructuring for Storybook sidebar.

* Fixed Dropdown description story.

* There no longer is a Dropdown for no padding. Just add additional utility classes.

* Showing dropdowns by default in Storybook as they are hidden by default.

app/javascript/crayons/Box/__stories__/box.description.stories.jsx

@@ -0,0 +1,49 @@
+import { h } from 'preact';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Boxes',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Boxes</h2>
+    <p>
+      “Box” will be a background element used for many other components, for
+      example banners, dropdowns, modals. This component does not have any
+      guidelines in terms of placement or spacing, since it’s supposed to be
+      used to build other components.
+    </p>
+    <p>There are:</p>
+    <ul>
+      <li>2 types: outlined & filled,</li>
+      <li>5 styles: default, danger, warning, info, success,</li>
+      <li>4 eleveations: 0, 1, 2, 3.</li>
+    </ul>
+    <p>
+      By default use “outlined” type unless you really have to make something
+      stand out - then use “filled”. But double check if it makes sense since
+      “filled” style really steals attention.
+    </p>
+    <p>
+      Use style that makes the most sense for you current use case. It’s pretty
+      obvious when to use Danger, Warning and Success. But for Default and Info
+      - it’s more up to designer to make a good call :).
+    </p>
+    <p>Elevations should define what kind of element it is:</p>
+    <ul>
+      <li>0: something inside content.</li>
+      <li>
+        1: that can also be used in content but for elements that need more
+        attention, like notices...
+      </li>
+      <li>2: dropdowns</li>
+      <li>3: modals</li>
+    </ul>
+  </div>
+);
+
+Description.story = {
+  name: 'description',
+};

app/javascript/crayons/Box/__stories__/box.html.stories.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
-import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';
+import '../../storybook-utiltiies/designSystem.scss';
+import { defaultChildrenPropTypes } from '../../../src/components/common-prop-types';
 
 const Grid = ({ children }) => (
   <div
@@ -20,49 +20,7 @@ Grid.propTypes = {
 };
 
 export default {
-  title: 'Components/HTML/Boxes',
-};
-
-export const Description = () => (
-  <div className="container">
-    <h2>Boxes</h2>
-    <p>
-      “Box” will be a background element used for many other components, for
-      example banners, dropdowns, modals. This component does not have any
-      guidelines in terms of placement or spacing, since it’s supposed to be
-      used to build other components.
-    </p>
-    <p>There are:</p>
-    <ul>
-      <li>2 types: outlined & filled,</li>
-      <li>5 styles: default, danger, warning, info, success,</li>
-      <li>4 eleveations: 0, 1, 2, 3.</li>
-    </ul>
-    <p>
-      By default use “outlined” type unless you really have to make something
-      stand out - then use “filled”. But double check if it makes sense since
-      “filled” style really steals attention.
-    </p>
-    <p>
-      Use style that makes the most sense for you current use case. It’s pretty
-      obvious when to use Danger, Warning and Success. But for Default and Info
-      - it’s more up to designer to make a good call :).
-    </p>
-    <p>Elevations should define what kind of element it is:</p>
-    <ul>
-      <li>0: something inside content.</li>
-      <li>
-        1: that can also be used in content but for elements that need more
-        attention, like notices...
-      </li>
-      <li>2: dropdowns</li>
-      <li>3: modals</li>
-    </ul>
-  </div>
-);
-
-Description.story = {
-  name: 'description',
+  title: 'Components/Boxes/HTML',
 };
 
 export const Level0 = () => (

app/javascript/crayons/Button/__stories__/button.description.stories.jsx

@@ -0,0 +1,33 @@
+import { h } from 'preact';
+
+export default {
+  title: 'Components/Buttons',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Buttons</h2>
+    <p>
+      Use Danger style only for destructive actions like removing something. Do
+      not use it for, for example “unfollow” action.
+    </p>
+    <p>
+      If you have to use several buttons together, keep in mind you should
+      always have ONE Primary button. Rest of them should be Secondary and/or
+      Outlined and/or Text buttons.
+    </p>
+    <p>
+      It is ok to use ONLY Secondary or outlined button without being
+      accompanied by Primary one.
+    </p>
+    <p>
+      For Stacking buttons (vertically or horizontally) please use 8px spacing
+      unit for default size buttons (no matter if stacking horizontally or
+      vertically).
+    </p>
+  </div>
+);
+
+Description.story = {
+  name: 'description',
+};

app/javascript/crayons/Button/__stories__/button.html.stories.jsx

@@ -1,37 +1,9 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Buttons',
-};
-
-export const Description = () => (
-  <div className="container">
-    <h2>Buttons</h2>
-    <p>
-      Use Danger style only for destructive actions like removing something. Do
-      not use it for, for example “unfollow” action.
-    </p>
-    <p>
-      If you have to use several buttons together, keep in mind you should
-      always have ONE Primary button. Rest of them should be Secondary and/or
-      Outlined and/or Text buttons.
-    </p>
-    <p>
-      It is ok to use ONLY Secondary or outlined button without being
-      accompanied by Primary one.
-    </p>
-    <p>
-      For Stacking buttons (vertically or horizontally) please use 8px spacing
-      unit for default size buttons (no matter if stacking horizontally or
-      vertically).
-    </p>
-  </div>
-);
-
-Description.story = {
-  name: 'description',
+  title: 'Components/Buttons/HTML',
 };
 
 export const Default = () => (

app/javascript/crayons/Dropdown/__stories__/dropdown.description.stories.jsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Dropdowns',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Dropdowns</h2>
+    <p>
+      Dropdowns should have position relative to it’s trigger. They can be used
+      for some 2nd level navigations, contextual configurations, etc...
+    </p>
+    <p>Dropdowns should not be bigger than 320px.</p>
+    <p>Dropdown default padding should be dependent on width:</p>
+    <ul>
+      <li>&lt;250px: 16px</li>
+      <li>251 - 320px: 24px</li>
+    </ul>
+    <p>
+      If you need to utilize entire dropdown area and you have to get rid of
+      default padding, please use modifier class
+      <code>crayons-dropdown--padding-0</code>
+      .
+    </p>
+    <p>
+      FYI: Dropdowns use “Box” component as background, with Level 3 elevation.
+    </p>
+  </div>
+);
+
+Description.story = {
+  name: 'description',
+};

app/javascript/crayons/Dropdown/__stories__/dropdown.html.stories.jsx

@@ -0,0 +1,32 @@
+import { h } from 'preact';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Dropdowns/HTML',
+};
+
+export const Default = () => (
+  <div className="crayons-dropdown" style={{ display: 'block' }}>
+    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
+    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+  </div>
+);
+
+Default.story = {
+  name: 'default',
+};
+
+export const Large = () => (
+  <div
+    className="crayons-dropdown crayons-dropdown--l"
+    style={{ display: 'block' }}
+  >
+    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
+    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+  </div>
+);
+
+Large.story = {
+  name: 'large',
+};

app/javascript/crayons/Indicator/__stories__/indicator.description.stories.jsx

@@ -0,0 +1,49 @@
+import { h } from 'preact';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Indicators',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Indicators</h2>
+    <p>
+      Indicators are meant to be used to inform user about, for example, unread
+      notifications. They supposed to steal user&apos;s attention and make him
+      notice or click specific element.
+    </p>
+    <p>
+      We should keep in mind to never show too many indicators at the same time.
+      Use your best judgment.
+    </p>
+    <p>There&apos;re two types of indicators:</p>
+    <ul>
+      <li>Rectangle with label (text or number)</li>
+      <li>Bullet - just a circle without any text on it.</li>
+    </ul>
+    <p>And there&apos;re four styles to pick from:</p>
+    <ul>
+      <li>
+        Default (grey) - nothing really crucial, basic information about
+        something.
+      </li>
+      <li>
+        Accent (blueish) - something we want user to be aware of but it&apos;s
+        also not crucial information
+      </li>
+      <li>
+        Critical (red) - something super important, don&apos;t overuse it!!
+      </li>
+      <li>
+        Inverted (dark grey) - alternative to the default one, especially when
+        we need to show two defautl indicators next to each other.
+      </li>
+    </ul>
+  </div>
+);
+
+Description.story = {
+  name: 'description',
+};

app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx

@@ -1,51 +1,9 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Indicators',
-};
-
-export const Description = () => (
-  <div className="container">
-    <h2>Indicators</h2>
-    <p>
-      Indicators are meant to be used to inform user about, for example, unread
-      notifications. They supposed to steal user&apos;s attention and make him
-      notice or click specific element.
-    </p>
-    <p>
-      We should keep in mind to never show too many indicators at the same time.
-      Use your best judgment.
-    </p>
-    <p>There&apos;re two types of indicators:</p>
-    <ul>
-      <li>Rectangle with label (text or number)</li>
-      <li>Bullet - just a circle without any text on it.</li>
-    </ul>
-    <p>And there&apos;re four styles to pick from:</p>
-    <ul>
-      <li>
-        Default (grey) - nothing really crucial, basic information about
-        something.
-      </li>
-      <li>
-        Accent (blueish) - something we want user to be aware of but it&apos;s
-        also not crucial information
-      </li>
-      <li>
-        Critical (red) - something super important, don&apos;t overuse it!!
-      </li>
-      <li>
-        Inverted (dark grey) - alternative to the default one, especially when
-        we need to show two defautl indicators next to each other.
-      </li>
-    </ul>
-  </div>
-);
-
-Description.story = {
-  name: 'description',
+  title: 'Components/Indicators/HTML',
 };
 
 export const Default = () => <span className="crayons-indicator">Label</span>;

app/javascript/crayons/Modal/__stories__/modal.description.stories.jsx

@@ -0,0 +1,37 @@
+import { h } from 'preact';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Modals',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Modals</h2>
+    <p>
+      Modals should be positioned centered in relation to entire viewport. So
+      relation to its tirgger doesn’t really matter.
+    </p>
+    <p>There are 3 sizes of modals:</p>
+    <ul>
+      <li>S(mall): 480px width with 24px padding</li>
+      <li>Default: 640px width with 32px padding</li>
+      <li>L(arge): 800px width with 48px padding</li>
+    </ul>
+    <p>Use your best judgements when choosing the right size.</p>
+    <p>
+      If you need to utilize entire modal area and you have to get rid of
+      default padding, please use modifier class
+      <code>crayons-modal--padding-0</code>
+      .
+    </p>
+    <p>
+      FYI: Modals use “Box” component as background, with Level 3 elevation.
+    </p>
+  </div>
+);
+
+Description.story = {
+  name: 'description',
+};

app/javascript/crayons/Modal/__stories__/modal.html.stories.jsx

@@ -1,39 +1,9 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Modals',
-};
-
-export const Description = () => (
-  <div className="container">
-    <h2>Modals</h2>
-    <p>
-      Modals should be positioned centered in relation to entire viewport. So
-      relation to its tirgger doesn’t really matter.
-    </p>
-    <p>There are 3 sizes of modals:</p>
-    <ul>
-      <li>S(mall): 480px width with 24px padding</li>
-      <li>Default: 640px width with 32px padding</li>
-      <li>L(arge): 800px width with 48px padding</li>
-    </ul>
-    <p>Use your best judgements when choosing the right size.</p>
-    <p>
-      If you need to utilize entire modal area and you have to get rid of
-      default padding, please use modifier class
-      <code>crayons-modal--padding-0</code>
-      .
-    </p>
-    <p>
-      FYI: Modals use “Box” component as background, with Level 3 elevation.
-    </p>
-  </div>
-);
-
-Description.story = {
-  name: 'description',
+  title: 'Components/Modals/HTML',
 };
 
 export const Default = () => (

app/javascript/crayons/Notice/__stories__/notice.description.stories.jsx

@@ -0,0 +1,31 @@
+import { h } from 'preact';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Notices',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Notices</h2>
+    <p>
+      Use Notices to focus user on specific piece of content, for example (but
+      not limited to):
+    </p>
+    <ul>
+      <li>alerts after form submission, </li>
+      <li>box with tip like “Did you know..?”</li>
+      <li>etc...</li>
+    </ul>
+    <p>
+      This should be simple message. And this is exactly what this Figma
+      component let you do.
+    </p>
+    <p>By default, this component has 16px padding.</p>
+  </div>
+);
+
+Description.story = {
+  name: 'description',
+};

app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx

@@ -1,33 +1,9 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Notices',
-};
-
-export const Description = () => (
-  <div className="container">
-    <h2>Notices</h2>
-    <p>
-      Use Notices to focus user on specific piece of content, for example (but
-      not limited to):
-    </p>
-    <ul>
-      <li>alerts after form submission, </li>
-      <li>box with tip like “Did you know..?”</li>
-      <li>etc...</li>
-    </ul>
-    <p>
-      This should be simple message. And this is exactly what this Figma
-      component let you do.
-    </p>
-    <p>By default, this component has 16px padding.</p>
-  </div>
-);
-
-Description.story = {
-  name: 'description',
+  title: 'Components/Notices/HTML',
 };
 
 export const Default = () => (

app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact';
 
-import '../designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Avatars & Logos/Avatars',
+  title: 'Components/Avatars & Logos/Avatars/HTML',
 };
 
 export const Default = () => (

app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
 
-import '../designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
-export default { title: 'Components/HTML/Avatars & Logos/Logos' };
+export default { title: 'Components/Avatars & Logos/Logos/HTML' };
 
 export const Default = () => (
   <span className="crayons-logo">

app/javascript/crayons/avatarsAndLogos/__stories__/description.stories.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
 
-import '../designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 
-export default { title: 'Components/HTML/Avatars & Logos' };
+export default { title: 'Components/Avatars & Logos' };
 
 export const Description = () => (
   <div className="container">

app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact';
-import { Fieldset } from './Fieldset';
+import { Fieldset } from '../../../storybook-utiltiies/Fieldset';
 
-import '../designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
-export default { title: 'Components/HTML/Form Components/Checkbox' };
+export default { title: 'Components/Form Components/Checkbox/HTML' };
 
 export const Default = () => (
   <input type="checkbox" className="crayons-checkbox" />

app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact';
-import { Fieldset } from './Fieldset';
+import { Fieldset } from '../../../storybook-utiltiies/Fieldset';
 
-import '../designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
-export default { title: 'Components/HTML/Form Components/Radio Button' };
+export default { title: 'Components/Form Components/Radio Button/HTML' };
 
 export const Default = () => (
   <input type="radio" name="n1" className="crayons-radio" />

app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact';
 
-import '../designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Form Components/Multiline Text Field',
+  title: 'Components/Form Components/Multiline Text Field/HTML',
 };
 
 export const Default = () => (

app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
 
-import '../designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
-export default { title: 'Components/HTML/Form Components/Text Field' };
+export default { title: 'Components/Form Components/Text Field/HTML' };
 
 export const Default = () => (
   <input

app/javascript/crayons/formElements/__stories__/description.stories.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact';
 
-import '../designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Form Components',
+  title: 'Components/Form Components',
 };
 
 export const Description = () => (

app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.description.stories.jsx

@@ -0,0 +1,14 @@
+import { h } from 'preact';
+
+import '../../../storybook-utiltiies/designSystem.scss';
+
+export default { title: 'Components/Navigation/Tabs' };
+
+export const Description = () => (
+  <div className="container">
+    <h2>Navigation: Tabs</h2>
+    <p>Use tabs as 2nd level navigation or filtering options.</p>
+  </div>
+);
+
+Description.story = { name: 'description' };

app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx

@@ -1,17 +1,8 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
-export default { title: 'Components/HTML/Navigation/Tabs' };
-
-export const Description = () => (
-  <div className="container">
-    <h2>Navigation: Tabs</h2>
-    <p>Use tabs as 2nd level navigation or filtering options.</p>
-  </div>
-);
-
-Description.story = { name: 'description' };
+export default { title: 'Components/Navigation/Tabs/HTML' };
 
 export const Default = () => (
   <div className="crayons-tabs">

app/javascript/crayons/navigation/mainNavigation/__stories__/mainNavigation.description.stories.jsx

@@ -0,0 +1,17 @@
+import { h } from 'preact';
+
+import '../../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/Navigation/Main Navigation',
+};
+
+export const Description = () => (
+  <div className="container">
+    <h2>Navigation: Main nav</h2>
+    <p>Used as main nav in left sidebar or dropdowns...</p>
+    <p>Can contain icons.</p>
+  </div>
+);
+
+Description.story = { name: 'description' };

app/javascript/crayons/navigation/mainNavigation/__stories__/mainNavigation.html.stories.jsx

@@ -1,21 +1,11 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../../storybook-utiltiies/designSystem.scss';
 
 export default {
-  title: 'Components/HTML/Navigation/Main Navigation',
+  title: 'Components/Navigation/Main Navigation/HTML',
 };
 
-export const Description = () => (
-  <div className="container">
-    <h2>Navigation: Main nav</h2>
-    <p>Used as main nav in left sidebar or dropdowns...</p>
-    <p>Can contain icons.</p>
-  </div>
-);
-
-Description.story = { name: 'description' };
-
 export const Default = () => (
   <div className="p-6 bg-smoke-10">
     <a href="/" className="crayons-nav-block crayons-nav-block--current">

app/javascript/crayons/storybook-utiltiies/Fieldset.jsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { defaultChildrenPropTypes } from '../../../src/components/common-prop-types';
+import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';
 
 export const Fieldset = ({ children }) => (
   <fieldset style={{ border: 'none' }}>{children}</fieldset>

app/javascript/crayons/typography/__stories__/typography.stories.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 import './typography.scss';
 
 export default {

app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-import './designSystem.scss';
+import '../../storybook-utiltiies/designSystem.scss';
 import './typography.scss';
 
 export default {

app/javascript/designSystem/__stories__/dropdowns.stories.jsx

@@ -1,69 +0,0 @@
-import { h } from 'preact';
-
-import './designSystem.scss';
-
-export default {
-  title: 'Components/HTML/Dropdowns',
-};
-
-export const Description = () => (
-  <div className="container">
-    <h2>Dropdowns</h2>
-    <p>
-      Dropdowns should have position relative to it’s trigger. They can be used
-      for some 2nd level navigations, contextual configurations, etc...
-    </p>
-    <p>Dropdowns should not be bigger than 320px.</p>
-    <p>Dropdown default padding should be dependent on width:</p>
-    <ul>
-      <li>&lt;250px: 16px</li>
-      <li>251 - 320px: 24px</li>
-    </ul>
-    <p>
-      If you need to utilize entire dropdown area and you have to get rid of
-      default padding, please use modifier class
-      <code>crayons-dropdown--padding-0</code>
-      .
-    </p>
-    <p>
-      FYI: Dropdowns use “Box” component as background, with Level 3 elevation.
-    </p>
-  </div>
-);
-
-Description.story = {
-  name: 'description',
-};
-
-export const Default = () => (
-  <div className="crayons-dropdown">
-    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
-    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
-  </div>
-);
-
-Default.story = {
-  name: 'default',
-};
-
-export const Large = () => (
-  <div className="crayons-dropdown crayons-dropdown--l">
-    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
-    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
-  </div>
-);
-
-Large.story = {
-  name: 'large',
-};
-
-export const NoPadding = () => (
-  <div className="crayons-dropdown crayons-dropdown--padding-0">
-    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
-    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
-  </div>
-);
-
-NoPadding.story = {
-  name: 'no paddding',
-};