52c2f40256
* Renabled building Storybook. * Explicitly added webpack style loaders for Storybook custom webpack config. * Upgraded Storybook configuration. * Added mixin/function to handle SASS compilation for Sprockets and Storybook's webpack. * Readded stylesheets/js required for crayons to run. * Added a custom title to Storybook. * Fixed custom Storybook CSS. * Migrated Search storybook stories. * Migrated crayons' box stories. * Migrated crayons' modal stories. * Migrated crayons' button stories. * Changed title a bit until we get a logo. * Migrated crayons' notice stories. * Migrated crayons' dropdown stories. * Migrated crayons' indicator stories. * Migrated crayons' typography stories. * Migrated crayons' form element stories. * Migrated crayons' navigation stories. * Migrated crayons' avatar & logo stories. * Migrated fatured article stories. * Migrated article loading stories. * Migrated today's podcast episodes stories. * Migrated podcast episode stories. * Migrated rest of article stories. * Update app/javascript/.storybook/manager.js Co-Authored-By: rhymes <rhymesete@gmail.com> * Commented new SASS function and mixin. Co-authored-by: rhymes <rhymesete@gmail.com>
83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
import { h } from 'preact';
|
||
|
||
import './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',
|
||
};
|
||
|
||
export const Default = () => (
|
||
<div className="crayons-modal">
|
||
Hey, I'm a Default Modal content! Lorem ipsum dolor sit amet,
|
||
consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur
|
||
temporibus.
|
||
</div>
|
||
);
|
||
|
||
Default.story = {
|
||
name: 'default',
|
||
};
|
||
|
||
export const Small = () => (
|
||
<div className="crayons-modal crayons-modal--s">
|
||
Hey, I'm a Small Modal content! Lorem ipsum dolor sit amet, consectetur
|
||
adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||
</div>
|
||
);
|
||
|
||
Small.story = {
|
||
name: 'small',
|
||
};
|
||
|
||
export const Large = () => (
|
||
<div className="crayons-modal crayons-modal--l">
|
||
Hey, I'm a Large Modal 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-modal crayons-modal--padding-0">
|
||
Hey, I'm a modal content with no padding! Lorem ipsum dolor sit amet,
|
||
consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur
|
||
temporibus.
|
||
</div>
|
||
);
|
||
|
||
NoPadding.story = {
|
||
name: 'no padding',
|
||
};
|