diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 4e5e5f744..ce7b9d82a 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -87,12 +87,6 @@ class PagesController < ApplicationController ) end - def crayons - @page = Page.find_by(slug: "crayons") - render :show if @page - set_surrogate_key_header "crayons_page" - end - private def latest_published_thread(tag_name) diff --git a/app/javascript/.storybook/storybook.scss b/app/javascript/.storybook/storybook.scss index c05e6b21b..cf09f8e00 100644 --- a/app/javascript/.storybook/storybook.scss +++ b/app/javascript/.storybook/storybook.scss @@ -7,6 +7,7 @@ body { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; + padding: 2rem; justify-items: center; align-items: center; height: 100vh; diff --git a/app/javascript/designSystem/__stories__/avatarsAndLogos.stories.jsx b/app/javascript/designSystem/__stories__/avatarsAndLogos.stories.jsx new file mode 100644 index 000000000..a662dd3d0 --- /dev/null +++ b/app/javascript/designSystem/__stories__/avatarsAndLogos.stories.jsx @@ -0,0 +1,107 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/react'; + +import './designSystem.scss'; + +storiesOf('Base/Components/HTML/Avatars & Logos', module).add( + 'Description', + () => ( +
+

Avatars & Logos

+

An image representing a user is called an avatar.

+

An image representing a company or organization is called a logo.

+

+ To make a distinction between these two different entities we should + keep them visually different. For Avatars, we gonna use circle shape. + And for Logos we gonna use square shape. This will help recognize what + is what in a heartbeat. +

+

+ Each of these will be available in 5 different sizes (use your best + judgment in picking right size): +

+ +

Remember to use descriptive alt="" values!

+
+ ), +); + +storiesOf('Base/Components/HTML/Avatars & Logos/Avatars') + .add('Default (Small)', () => ( + + Ben + + )) + .add('Large', () => ( + + Ben + + )) + .add('Extra Large', () => ( + + Ben + + )) + .add('2XL', () => ( + + Ben + + )) + .add('3XL', () => ( + + Ben + + )); + +storiesOf('Base/Components/HTML/Avatars & Logos/Logos') + .add('Default (Small)', () => ( + + Acme Inc. + + )) + .add('Large', () => ( + + Acme Inc. + + )) + .add('Extra Large', () => ( + + Acme Inc. + + )) + .add('2XL', () => ( + + Acme Inc. + + )) + .add('3XL', () => ( + + Acme Inc. + + )); diff --git a/app/javascript/designSystem/__stories__/boxes.stories.jsx b/app/javascript/designSystem/__stories__/boxes.stories.jsx new file mode 100644 index 000000000..90c53a0ea --- /dev/null +++ b/app/javascript/designSystem/__stories__/boxes.stories.jsx @@ -0,0 +1,150 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/react'; + +import './designSystem.scss'; +import { defaultChildrenPropTypes } from '../../src/components/common-prop-types'; + +const Grid = ({ children }) => ( +
+ {children} +
+); + +Grid.propTypes = { + children: defaultChildrenPropTypes.isRequired, +}; + +storiesOf('Base/Components/HTML/Boxes', module) + .add('Description', () => ( +
+

Boxes

+

+ “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. +

+

There are:

+ +

+ 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. +

+

+ 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 :). +

+

Elevations should define what kind of element it is:

+ +
+ )) + .add('Level 0', () => ( + +
box, level 0
+
+ filled box, level 0 +
+
box, level 0
+
+ filled box, level 0 +
+
box, level 0
+
+ filled box, level 0 +
+
box, level 0
+
+ filled box, level 0 +
+
box, level 0
+
+ filled box, level 0 +
+ + )) + .add('Level 1', () => ( + +
box, level 1
+
filled box, level 1
+
box, level 1
+
+ filled box, level 1 +
+
box, level 1
+
+ filled box, level 1 +
+
box, level 1
+
+ filled box, level 1 +
+
box, level 1
+
+ filled box, level 1 +
+ + )) + .add('Level 2', () => ( + +
box, level 2
+
filled box, level 2
+
box, level 2
+
+ filled box, level 2 +
+
box, level 2
+
+ filled box, level 2 +
+
box, level 2
+
+ filled box, level 2 +
+
box, level 2
+
+ filled box, level 2 +
+ + )) + .add('Level 3', () => ( + +
box, level 3
+
filled box, level 3
+
box, level 3
+
+ filled box, level 3 +
+
box, level 3
+
+ filled box, level 3 +
+
box, level 3
+
+ filled box, level 3 +
+
box, level 3
+
+ filled box, level 3 +
+ + )); diff --git a/app/javascript/designSystem/__stories__/buttons.stories.jsx b/app/javascript/designSystem/__stories__/buttons.stories.jsx new file mode 100644 index 000000000..540fe3ea7 --- /dev/null +++ b/app/javascript/designSystem/__stories__/buttons.stories.jsx @@ -0,0 +1,88 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/react'; + +import './designSystem.scss'; + +storiesOf('Base/Components/HTML/Buttons', module) + .add('Description', () => ( +
+

Buttons

+

+ Use Danger style only for destructive actions like removing something. + Do not use it for, for example “unfollow” action. +

+

+ 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. +

+

+ It is ok to use ONLY Secondary or outlined button without being + accompanied by Primary one. +

+

+ For Stacking buttons (vertically or horizontally) please use 8px spacing + unit for default size buttons (no matter if stacking horizontally or + vertically). +

+
+ )) + .add('Default', () => ( + + Button label + + )) + .add('Full', () => ( + + Full Button label + + )) + .add('Secondary', () => ( + + Secondary Button label + + )) + .add('Outlined', () => ( + + Outlined Button label + + )) + .add('Text', () => ( + + Text Button label + + )) + .add('Danger', () => ( + + Danger Button label + + )) + .add('Icon Left', () => ( + + + + + Button + + )) + .add('Secondary/Full/Icon Left', () => ( + + + + + Button + + )); diff --git a/app/javascript/designSystem/__stories__/designSystem.scss b/app/javascript/designSystem/__stories__/designSystem.scss new file mode 100644 index 000000000..1a87d28b1 --- /dev/null +++ b/app/javascript/designSystem/__stories__/designSystem.scss @@ -0,0 +1,49 @@ +// TODO: This should be coming from our own files, not a copy in the stories. +.container { + padding: 48px; + font-size: 16px; + line-height: 1.5; + box-sizing: border-box; +} +.container *, +.container *:before, +.container *:after { + box-sizing: border-box; +} + +.container > * + * { + margin-top: 32px !important; +} + +.container > pre { + padding: 24px; + width: 100%; +} + +.container > .body { + width: 100%; + font-size: 16px; + line-height: 150%; + border-bottom: 1px solid lightgrey; + padding-bottom: 32px; +} + +.container > .body h2 { + padding: 0; + margin: 0; +} + +.container > .body p { + margin: 0; + padding: 0; +} + +.container > .body ul, +.container > .body ol { + margin: 0 0 0 24px; + padding: 0; +} + +.container > .body > * + * { + margin-top: 16px !important; +} diff --git a/app/javascript/designSystem/__stories__/dropdowns.stories.jsx b/app/javascript/designSystem/__stories__/dropdowns.stories.jsx new file mode 100644 index 000000000..0a935f56f --- /dev/null +++ b/app/javascript/designSystem/__stories__/dropdowns.stories.jsx @@ -0,0 +1,49 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/react'; + +import './designSystem.scss'; + +storiesOf('Base/Components/HTML/Dropdowns', module) + .add('Description', () => ( +
+

Dropdowns

+

+ Dropdowns should have position relative to it’s trigger. They can be + used for some 2nd level navigations, contextual configurations, etc... +

+

Dropdowns should not be bigger than 320px.

+

Dropdown default padding should be dependent on width:

+ +

+ If you need to utilize entire dropdown area and you have to get rid of + default padding, please use modifier class + crayons-dropdown--padding-0 + . +

+

+ FYI: Dropdowns use “Box” component as background, with Level 3 + elevation. +

+
+ )) + .add('Default', () => ( +
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+ )) + .add('Large', () => ( +
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+ )) + .add('No Padding', () => ( +
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+ )); diff --git a/app/javascript/designSystem/__stories__/formElements.stories.jsx b/app/javascript/designSystem/__stories__/formElements.stories.jsx new file mode 100644 index 000000000..d8d7496d8 --- /dev/null +++ b/app/javascript/designSystem/__stories__/formElements.stories.jsx @@ -0,0 +1,236 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/react'; + +import './designSystem.scss'; +import { defaultChildrenPropTypes } from '../../src/components/common-prop-types'; + +const Fieldset = ({ children }) => ( +
{children}
+); + +Fieldset.propTypes = { + children: defaultChildrenPropTypes.isRequired, +}; + +storiesOf('Base/Components/HTML/Form Components', module).add( + 'Description', + () => ( +
+

Form elements

+

+ Because of accessibility most (ideally all) fields should have label + above. +

+

+ Fields can also have optional description - between Label and Field + itself. +

+

+ Fields can also have additional optional description, for example + characters count. +

+

Fields with Checkboxes & Radios

+

+ Labels for checkboxes and radios should be placed next to the form + element. +

+

Using additional description is optional.

+

+ It is possible to group checkboxes or radios into logical sections. + Section may require having it’s own label (title). +

+
+ ), +); + +storiesOf('Base/Components/HTML/Form Components/Text Field', module) + .add('Default', () => ( + + )) + .add('Disabled', () => ( + + )) + .add('With