diff --git a/app/javascript/Search/__stories__/SearchForm.stories.jsx b/app/javascript/Search/__stories__/SearchForm.stories.jsx index 0d6fcadac..7b1285e0c 100644 --- a/app/javascript/Search/__stories__/SearchForm.stories.jsx +++ b/app/javascript/Search/__stories__/SearchForm.stories.jsx @@ -25,7 +25,7 @@ class FocusedForm extends Component { export default { component: SearchForm, - title: 'App Components/Search/Search Form', + title: 'App Components/Search', }; export const NoSearchTerm = () => ; diff --git a/app/javascript/crayons/Button/__stories__/Button.stories.jsx b/app/javascript/crayons/Button/__stories__/Button.stories.jsx index e56c0d039..b1cf16605 100644 --- a/app/javascript/crayons/Button/__stories__/Button.stories.jsx +++ b/app/javascript/crayons/Button/__stories__/Button.stories.jsx @@ -7,7 +7,7 @@ import { select, } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; -import notes from './buttons.md'; +import notes from './buttons.mdx'; import { Button } from '@crayons'; import '../../storybook-utilities/designSystem.scss'; @@ -20,7 +20,7 @@ const commonProps = { }; export default { - title: 'Components/Buttons', + title: 'Deprecated/Buttons', decorator: [withKnobs], parameters: { notes, diff --git a/app/javascript/crayons/Button/__stories__/buttons.md b/app/javascript/crayons/Button/__stories__/buttons.mdx similarity index 100% rename from app/javascript/crayons/Button/__stories__/buttons.md rename to app/javascript/crayons/Button/__stories__/buttons.mdx diff --git a/app/javascript/crayons/Buttons/__stories__/Buttons.stories.jsx b/app/javascript/crayons/Buttons/__stories__/Buttons.stories.jsx index 653a0df14..d52a59ff1 100644 --- a/app/javascript/crayons/Buttons/__stories__/Buttons.stories.jsx +++ b/app/javascript/crayons/Buttons/__stories__/Buttons.stories.jsx @@ -5,7 +5,7 @@ import CogIcon from '@images/cog.svg'; export default { component: Button, - title: 'BETA/Buttons', + title: 'Components/Buttons', parameters: { docs: { page: ButtonsDoc, diff --git a/app/javascript/crayons/CTAs/__stories__/CTAs.stories.jsx b/app/javascript/crayons/CTAs/__stories__/CTAs.stories.jsx index 18eedb200..e8921f9c6 100644 --- a/app/javascript/crayons/CTAs/__stories__/CTAs.stories.jsx +++ b/app/javascript/crayons/CTAs/__stories__/CTAs.stories.jsx @@ -5,7 +5,7 @@ import CogIcon from '@images/cog.svg'; export default { component: CTA, - title: 'BETA/Navigation/CTAs', + title: 'Components/Navigation/CTAs', parameters: { docs: { page: CTAsDoc, diff --git a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx index 273de9b5a..7b016a6e0 100644 --- a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx +++ b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx @@ -1,24 +1,29 @@ import { h } from 'preact'; -import { withKnobs, text } from '@storybook/addon-knobs'; import './dropdown-css-helper.scss'; -import notes from './dropdowns.md'; -import { ButtonNew as Button, Dropdown } from '@crayons'; +import notes from './dropdowns.mdx'; +import { Dropdown, ButtonNew as Button } from '@crayons'; export default { title: 'Components/Dropdowns', - decorators: [withKnobs], - parameters: { notes }, + parameters: { + docs: { + page: notes, + }, + }, }; export const Default = () => (
-

Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, diff --git a/app/javascript/crayons/Dropdown/__stories__/dropdowns.md b/app/javascript/crayons/Dropdown/__stories__/dropdowns.mdx similarity index 100% rename from app/javascript/crayons/Dropdown/__stories__/dropdowns.md rename to app/javascript/crayons/Dropdown/__stories__/dropdowns.mdx diff --git a/app/javascript/crayons/Icons/__stories__/Icons.mdx b/app/javascript/crayons/Icons/__stories__/Icons.mdx index 8ee96e44f..2730994da 100644 --- a/app/javascript/crayons/Icons/__stories__/Icons.mdx +++ b/app/javascript/crayons/Icons/__stories__/Icons.mdx @@ -1,9 +1,13 @@ +Please disregard generated HTML output in one of the tabs in the panel below. This one is a special snowflake for which you should use the below rails helper instead. + # Icons -This component is supposed to make it easy to add icons to your JSX code. +This component is supposed to make it easy to add icons to the user interface. ## How? +### JSX + You can pass an object as `src` prop: ``` @@ -11,20 +15,42 @@ import Twitter from '@images/twitter.svg'; ``` -Yes, we have an alias `@images` that should make it easier to access `/app/assets/images` folder. +Yes, we have an alias `@images` that should make it easier to access `/app/assets/images` folder while importing. + +### Rails + +For Rails world, we have a helper which injects our icons similarly: + +``` +crayons_icon_tag(file_name, css_class: nil, native: false, **opts) +``` + +Keep in mind there's no need to provide the folder path - the helper handles that. + +#### Parameters: + +- **`name`** (String|Symbol) - The icon name from `/app/assets/images` folder. The `.svg` file extensions will be added automatically if missing. +- **`css_class`** (String) - additional CSS classes. +- **`native`** (Boolean) - when set to true, icon will not inherit its parent's color. +- **`opts`** - additional keyword arguments to be passed through to the [`inline_svg_tag` helper](https://github.com/jamesmartin/inline_svg). ## Colors -If asset (SVG file) was exported correctly (see Rules section below) and `` component was used correctly, +If asset (SVG file) was exported correctly (see Rules section below) and the component was used correctly, icon should inherit some Crayons styling that will, for example, automatically apply container's color to the icon itself. For example, icon will automatically inherit link color whenever it's placed inside a link element. ### Native colors -By adding `native` prop we tell icon to NOT inherit its parent color. +By adding `native` prop/parameter we tell icon to NOT inherit its parent color. Instead it will keep whatever colors were defined in the SVG code. This is helpful for branded icons that come with their own specific color (logos like Twitter, Facebook, etc.) or for multicolor icons. +``` +JSX: +Rails: <%= crayons_icon_tag("twitter", native: true) %> +``` + ## Rules Most of the icons you would ever need should already be inside `/app/assets/images` folder. If you can't find one, ask your designer. diff --git a/app/javascript/crayons/Icons/__stories__/Icons.stories.jsx b/app/javascript/crayons/Icons/__stories__/Icons.stories.jsx index 741da1d4b..dedd8876d 100644 --- a/app/javascript/crayons/Icons/__stories__/Icons.stories.jsx +++ b/app/javascript/crayons/Icons/__stories__/Icons.stories.jsx @@ -1,11 +1,11 @@ import { h } from 'preact'; import { Icon } from '..'; import IconsDoc from './Icons.mdx'; -import CogIcon from '@images/twitter.svg'; +import TwitterIcon from '@images/twitter.svg'; export default { component: Icon, - title: 'BETA/Icons', + title: 'Components/Icons', parameters: { docs: { page: IconsDoc, @@ -22,12 +22,12 @@ export default { }, }; -export const Default = (args) => ; +export const Default = (args) => ; Default.args = { native: false, }; -export const NativeColors = (args) => ; +export const NativeColors = (args) => ; NativeColors.args = { native: true, }; diff --git a/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx b/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx index 91e48f966..c6743181e 100644 --- a/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx +++ b/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx @@ -1,11 +1,12 @@ import { h } from 'preact'; -import '../../storybook-utilities/designSystem.scss'; -import notes from './indicators.md'; +import notes from './indicators.mdx'; export default { - title: 'Components/Indicators/HTML', + title: 'Components/Indicators', parameters: { - notes, + docs: { + page: notes, + }, }, }; diff --git a/app/javascript/crayons/Indicator/__stories__/indicators.md b/app/javascript/crayons/Indicator/__stories__/indicators.mdx similarity index 100% rename from app/javascript/crayons/Indicator/__stories__/indicators.md rename to app/javascript/crayons/Indicator/__stories__/indicators.mdx diff --git a/app/javascript/crayons/Links/__stories__/Links.stories.jsx b/app/javascript/crayons/Links/__stories__/Links.stories.jsx index d64c9179e..2a912b0f6 100644 --- a/app/javascript/crayons/Links/__stories__/Links.stories.jsx +++ b/app/javascript/crayons/Links/__stories__/Links.stories.jsx @@ -5,7 +5,7 @@ import CogIcon from '@images/cog.svg'; export default { component: Link, - title: 'BETA/Navigation/Links', + title: 'Components/Navigation/Links', parameters: { docs: { page: LinksDoc, diff --git a/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx b/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx index 49101476a..406af206b 100644 --- a/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx +++ b/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx @@ -2,7 +2,7 @@ import { h } from 'preact'; import { MarkdownToolbar } from '@crayons'; export default { - title: 'App Components/MarkdownToolbar', + title: 'App Components/Markdown Toolbar', }; export const Default = () => { diff --git a/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/MentionAutocompleteTextArea.stories.jsx b/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/MentionAutocompleteTextArea.stories.jsx index 14677db9b..c710f929c 100644 --- a/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/MentionAutocompleteTextArea.stories.jsx +++ b/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/MentionAutocompleteTextArea.stories.jsx @@ -1,9 +1,9 @@ import { h, createRef, render } from 'preact'; import { MentionAutocompleteTextArea } from '../MentionAutocompleteTextArea'; -import notes from './mention-autocomplete.md'; +import notes from './mention-autocomplete.mdx'; export default { - title: 'App Components/MentionAutocompleteTextArea', + title: 'App Components/Mention Autocomplete Textarea', parameters: { notes }, }; diff --git a/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/mention-autocomplete.md b/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/mention-autocomplete.mdx similarity index 100% rename from app/javascript/crayons/MentionAutocompleteTextArea/__stories__/mention-autocomplete.md rename to app/javascript/crayons/MentionAutocompleteTextArea/__stories__/mention-autocomplete.mdx diff --git a/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx b/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx index 76f1f45a5..82b76a845 100644 --- a/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx +++ b/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx @@ -1,11 +1,15 @@ import { h } from 'preact'; import { useState } from 'preact/hooks'; -import notes from './drawers.md'; -import { MobileDrawer, Button } from '@crayons'; +import Notes from './drawers.mdx'; +import { MobileDrawer, ButtonNew as Button } from '@crayons'; export default { - title: 'Components/MobileDrawer', - parameters: { notes }, + title: 'BETA/MobileDrawer', + parameters: { + docs: { + page: Notes, + }, + }, }; export const Default = () => { diff --git a/app/javascript/crayons/MobileDrawer/__stories__/drawers.md b/app/javascript/crayons/MobileDrawer/__stories__/drawers.mdx similarity index 95% rename from app/javascript/crayons/MobileDrawer/__stories__/drawers.md rename to app/javascript/crayons/MobileDrawer/__stories__/drawers.mdx index 6387c5feb..f4f3c0582 100644 --- a/app/javascript/crayons/MobileDrawer/__stories__/drawers.md +++ b/app/javascript/crayons/MobileDrawer/__stories__/drawers.mdx @@ -1,4 +1,4 @@ -## MobileDrawers +# Mobile Drawers MobileDrawers are intended to be used in small screen sizes only (i.e. for mobile UI variants), and always appear from the bottom of the viewport. The @@ -7,7 +7,7 @@ button which triggers the MobileDrawer may be located anywhere on the page. MobileDrawer content should always include at least one interactive item (e.g. button, link) to make sure focus may be transferred to the new content. -### MobileDrawer accessibility +## MobileDrawer accessibility The MobileDrawer is essentially a [modal dialog](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). diff --git a/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx b/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx index 6cfa1420f..4dbe8300b 100644 --- a/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx +++ b/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx @@ -1,38 +1,53 @@ import { h } from 'preact'; import { useState } from 'preact/hooks'; -import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; -import notes from './modals.md'; -import { Modal, Button } from '@crayons'; -import '../../storybook-utilities/designSystem.scss'; +import notes from './modals.mdx'; +import { Modal, ButtonNew as Button } from '@crayons'; export default { title: 'Components/Modals', - decorator: [withKnobs], - parameters: { notes }, + parameters: { + docs: { + page: notes, + }, + }, + argTypes: { + size: { + control: { + type: 'select', + options: { + default: 'default', + small: 's', + medium: 'm', + }, + }, + table: { + defaultValue: { summary: 'default' }, + }, + }, + overlay: { + table: { + defaultValue: { summary: true }, + }, + }, + title: { + control: { + type: 'text', + }, + table: { + defaultValue: { summary: 'Modal title' }, + }, + }, + }, }; -export const Default = () => { +export const Default = (args) => { const [isModalOpen, setIsModalOpen] = useState(false); return (

{isModalOpen && ( - setIsModalOpen(false)} - size={select( - 'size', - { - Small: 's', - Medium: 'm', - Default: 'default', - }, - 'default', - )} - className={text('className')} - title={text('title', 'This is my Modal title')} - overlay={boolean('overlay', true)} - > + setIsModalOpen(false)} {...args}>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio est, ultricies vel euismod ut, fringilla quis tellus. Sed at @@ -44,6 +59,8 @@ export const Default = () => { ); }; -Default.story = { - name: 'Modals', +Default.args = { + size: 'default', + title: 'My modal', + overlay: true, }; diff --git a/app/javascript/crayons/Modal/__stories__/modals.md b/app/javascript/crayons/Modal/__stories__/modals.mdx similarity index 100% rename from app/javascript/crayons/Modal/__stories__/modals.md rename to app/javascript/crayons/Modal/__stories__/modals.mdx diff --git a/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx b/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx index 4efae07ba..05cfc6263 100644 --- a/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx +++ b/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx @@ -1,10 +1,13 @@ import { h } from 'preact'; -import '../../storybook-utilities/designSystem.scss'; -import notes from './notices.md'; +import notes from './notices.mdx'; export default { - title: 'Components/Notices/HTML', - parameters: { notes }, + title: 'Components/Notices', + parameters: { + docs: { + page: notes, + }, + }, }; export const Default = () => ( diff --git a/app/javascript/crayons/Notice/__stories__/notices.md b/app/javascript/crayons/Notice/__stories__/notices.mdx similarity index 100% rename from app/javascript/crayons/Notice/__stories__/notices.md rename to app/javascript/crayons/Notice/__stories__/notices.mdx diff --git a/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx b/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx index ab81a0c04..4d5d1e448 100644 --- a/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx +++ b/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx @@ -1,11 +1,12 @@ import { h } from 'preact'; -import '../../../storybook-utilities/designSystem.scss'; -import notes from '../../avatars-and-logos.md'; +import notes from '../../avatars-and-logos.mdx'; export default { - title: 'Components/Avatars & Logos/Avatars/HTML', + title: 'Components/Avatars & Logos/Avatars', parameters: { - notes, + docs: { + page: notes, + }, }, }; diff --git a/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx b/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx index cd6fcc329..c1d73df1c 100644 --- a/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx +++ b/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx @@ -1,10 +1,13 @@ import { h } from 'preact'; -import '../../../storybook-utilities/designSystem.scss'; -import notes from '../../avatars-and-logos.md'; +import notes from '../../avatars-and-logos.mdx'; export default { - title: 'Components/Avatars & Logos/Logos/HTML', - parameters: { notes }, + title: 'Components/Avatars & Logos/Logos', + parameters: { + docs: { + page: notes, + }, + }, }; export const Default = () => ( diff --git a/app/javascript/crayons/avatarsAndLogos/avatars-and-logos.md b/app/javascript/crayons/avatarsAndLogos/avatars-and-logos.mdx similarity index 100% rename from app/javascript/crayons/avatarsAndLogos/avatars-and-logos.md rename to app/javascript/crayons/avatarsAndLogos/avatars-and-logos.mdx diff --git a/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx b/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx index 23be48bb0..68d577dfc 100644 --- a/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx +++ b/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx @@ -1,10 +1,10 @@ import { h } from 'preact'; import { Fieldset } from '../../../storybook-utilities/Fieldset'; import '../../../storybook-utilities/designSystem.scss'; -import notes from '../../form-elements.md'; +import notes from '../../form-elements.mdx'; export default { - title: 'Components/Form Components/Checkbox/HTML', + title: 'Components/Form Elements/Checkbox', parameters: { notes }, }; diff --git a/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx b/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx index 0d5472d3c..0fbe2dbe9 100644 --- a/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx +++ b/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx @@ -1,10 +1,10 @@ import { h } from 'preact'; import { action } from '@storybook/addon-actions'; -import notes from '../../form-elements.md'; +import notes from '../../form-elements.mdx'; import { FormField, RadioButton } from '@crayons'; export default { - title: 'Components/Form Components/Form Field', + title: 'Components/Form Elements/Form Field', parameters: { notes }, }; diff --git a/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx b/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx index 4947921cb..428b320df 100644 --- a/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx +++ b/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx @@ -1,11 +1,11 @@ import { h } from 'preact'; import { withKnobs, text, boolean } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; -import notes from '../../form-elements.md'; +import notes from '../../form-elements.mdx'; import { RadioButton } from '@crayons'; export default { - title: 'Components/Form Components/Radio Button', + title: 'Components/Form Elements/Radio Button', decorators: [withKnobs], parameters: { notes }, }; diff --git a/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx b/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx index 36de55043..fe815495a 100644 --- a/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx +++ b/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx @@ -2,7 +2,7 @@ import { h } from 'preact'; import { Fieldset } from '../../../storybook-utilities/Fieldset'; import '../../../storybook-utilities/designSystem.scss'; -export default { title: 'Components/Form Components/Radio Button/HTML' }; +export default { title: 'Components/Form Elements/Radio Button/HTML' }; export const Default = () => ( diff --git a/app/javascript/crayons/Select/__stories__/Select.stories.jsx b/app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx similarity index 92% rename from app/javascript/crayons/Select/__stories__/Select.stories.jsx rename to app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx index d6367f54d..5a32b8c0f 100644 --- a/app/javascript/crayons/Select/__stories__/Select.stories.jsx +++ b/app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx @@ -12,7 +12,7 @@ export const Select = () => ( export default { component: Select, - title: 'Components/Select', + title: 'Components/Form Elements/Select', }; export const Default = () => { diff --git a/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx b/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx index bee14d039..b84343ad8 100644 --- a/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx +++ b/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx @@ -3,7 +3,7 @@ import { h } from 'preact'; import '../../../storybook-utilities/designSystem.scss'; export default { - title: 'Components/Form Components/Multiline Text Field/HTML', + title: 'Components/Form Elements/Multiline Text Field', }; export const Default = () => ( diff --git a/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx b/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx index 502e12ca7..a8f121cd2 100644 --- a/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx +++ b/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx @@ -2,7 +2,7 @@ import { h } from 'preact'; import '../../../storybook-utilities/designSystem.scss'; -export default { title: 'Components/Form Components/Text Field/HTML' }; +export default { title: 'Components/Form Elements/Text Field' }; export const Default = () => ( Hello` +`` Crayons offers different variants for a button. A button can be one of the -following variants: primary, secondary, outlined, danger, ghost, with icon, and +following variants: default, primary, secondary, with icon, and so on. All of the components and its variations are described in the Components -section. +section in the Storybook. -Imagine you need a small (size **s** ), **secondary** type. In this case you -will need to apply specific modifier class for that: - -`` +`` ## Preact Components The same button above that was created with pure HTML using modifying classes is also a Preact component. -`import { Button } from '@crayons'; //...

- - {isDrawerOpen && ( - setIsDrawerOpen(false)} - > - - - - )} - - ); -}; - -MobileDrawerNavigation.propTypes = { - headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired, - navigationTitle: PropTypes.string.isRequired, - navigationLinks: PropTypes.arrayOf( - PropTypes.shape({ - url: PropTypes.string, - isCurrentPage: PropTypes.bool, - displayName: PropTypes.string, - }), - ).isRequired, -}; diff --git a/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/MobileDrawerNavigation.stories.jsx b/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/MobileDrawerNavigation.stories.jsx deleted file mode 100644 index 64f62baa4..000000000 --- a/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/MobileDrawerNavigation.stories.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import { h, Fragment } from 'preact'; -import notes from './mobileDrawerNavigation.md'; -import { MobileDrawerNavigation } from '@crayons'; - -export default { - title: 'App Components/MobileDrawerNavigation', - parameters: { notes }, -}; - -export const Default = () => { - const { href, hash } = window.location; - const indexOfHash = href.indexOf(hash) || href.length; - const baseStoryUrl = href.substr(0, indexOfHash); - - const links = [ - { - url: baseStoryUrl, - displayName: 'Drawer Navigation', - isCurrentPage: href === baseStoryUrl, - }, - { - url: `${baseStoryUrl}/#2`, - displayName: 'Example link 2', - isCurrentPage: `#2` === hash, - }, - { - url: `${baseStoryUrl}/#3`, - displayName: 'Example link 3', - isCurrentPage: `#3` === hash, - }, - { - url: `${baseStoryUrl}/#4`, - displayName: 'Example link 4', - isCurrentPage: `#4` === hash, - }, - ]; - - return ( - - -

- Click on the button to view and select navigation links. -

- - ); -}; - -Default.story = { - name: 'MobileDrawerNavigation', -}; diff --git a/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/mobileDrawerNavigation.html.stories.jsx b/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/mobileDrawerNavigation.html.stories.jsx deleted file mode 100644 index 8c446509a..000000000 --- a/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/mobileDrawerNavigation.html.stories.jsx +++ /dev/null @@ -1,139 +0,0 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -// Disabled for the file due to issues disabling for individual JSX lines. -// These are disabled to allow the "click outside to close" functionality -import { h } from 'preact'; -import { useState, useEffect } from 'preact/hooks'; -import notes from './mobileDrawerNavigation.md'; - -export default { - title: 'App Components/MobileDrawerNavigation/HTML', - parameters: { notes }, -}; - -export const Default = () => { - const [isNavOpen, setIsNavOpen] = useState(false); - - const { href, hash } = window.location; - const indexOfHash = href.indexOf(hash) || href.length; - const baseStoryUrl = href.substr(0, indexOfHash); - - useEffect(() => { - const keyupListener = (e) => { - if (e.key === 'Escape') { - setIsNavOpen(false); - } - }; - document.addEventListener('keyup', keyupListener); - return () => document.removeEventListener('keyup', keyupListener); - }, []); - - return ( -
-
-

Link 1

- -
- {isNavOpen && ( -
-
setIsNavOpen(false)} - /> - -
- )} -
- ); -}; - -Default.story = { - name: 'MobileDrawerNavigation', -}; diff --git a/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/mobileDrawerNavigation.md b/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/mobileDrawerNavigation.md deleted file mode 100644 index f9e081c2a..000000000 --- a/app/javascript/crayons/navigation/MobileDrawerNavigation/__stories__/mobileDrawerNavigation.md +++ /dev/null @@ -1,29 +0,0 @@ -## MobileDrawerNavigation - -The MobileDrawerNavigation component is intended to be used on small -(mobile-sized) screens only. It can be used as an alternative to the larger -navigation tab component. - -The component is responsible for showing: - -- The heading of the currently selected page -- A navigation dialog with the given links - -This component is best placed at the top of a page. The dialog utilizes -``, and will appear from the bottom of the screen. - -### MobileDrawerNavigation Accessibility - -The MobileDrawerNavigation component requires a `navigationTitle` prop which -will be used for: - -- The activating button for the navigation dialog -- The label of the navigation dialog -- The label of the navigation element containing the links - -This helps ensure accessible element names are surfaced to all users. - -The component also requires a `headingLevel` prop which is used to determine the -HTML element used for the displayed current page title (e.g. `1` will render an -`h1`). Appropriate consideration should be given to which heading level is -semantically correct for the location the component is rendered. diff --git a/app/javascript/crayons/navigation/MobileDrawerNavigation/__tests__/MobileDrawerNavigation.test.js b/app/javascript/crayons/navigation/MobileDrawerNavigation/__tests__/MobileDrawerNavigation.test.js deleted file mode 100644 index fab8b94e6..000000000 --- a/app/javascript/crayons/navigation/MobileDrawerNavigation/__tests__/MobileDrawerNavigation.test.js +++ /dev/null @@ -1,85 +0,0 @@ -import { h } from 'preact'; -import { axe } from 'jest-axe'; -import '@testing-library/jest-dom'; -import { render, waitFor } from '@testing-library/preact'; -import { MobileDrawerNavigation } from '../MobileDrawerNavigation'; - -describe('', () => { - const testLinks = [ - { url: '/#1', displayName: 'Link 1', isCurrentPage: true }, - { url: '/#2', displayName: 'Link 2', isCurrentPage: false }, - { url: '/#3', displayName: 'Link 3', isCurrentPage: false }, - ]; - - it('should have no a11y violations when closed', async () => { - const { container } = render( - , - ); - - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); - - it('should have no a11y violations when open', async () => { - const { container, getByRole } = render( - , - ); - - getByRole('button', { name: 'Test navigation' }).click(); - await waitFor(() => getByRole('navigation', { name: 'Test navigation' })); - - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); - - it('should render a heading with a button when closed', () => { - const { container } = render( - , - ); - - expect(container.innerHTML).toMatchSnapshot(); - }); - - it('should render a navigation with a checkmark for current page when open', async () => { - const { container, getByRole } = render( - , - ); - - getByRole('button', { name: 'Test navigation' }).click(); - await waitFor(() => getByRole('navigation', { name: 'Test navigation' })); - expect(container.innerHTML).toMatchSnapshot(); - }); - - it('should render all links', async () => { - const { getByRole } = render( - , - ); - - getByRole('button', { name: 'Test navigation' }).click(); - await waitFor(() => getByRole('navigation', { name: 'Test navigation' })); - - expect(getByRole('link', { name: 'Link 1' })).toBeInTheDocument(); - expect(getByRole('link', { name: 'Link 2' })).toBeInTheDocument(); - expect(getByRole('link', { name: 'Link 3' })).toBeInTheDocument(); - }); -}); diff --git a/app/javascript/crayons/navigation/MobileDrawerNavigation/__tests__/__snapshots__/MobileDrawerNavigation.test.js.snap b/app/javascript/crayons/navigation/MobileDrawerNavigation/__tests__/__snapshots__/MobileDrawerNavigation.test.js.snap deleted file mode 100644 index 4522fa1f2..000000000 --- a/app/javascript/crayons/navigation/MobileDrawerNavigation/__tests__/__snapshots__/MobileDrawerNavigation.test.js.snap +++ /dev/null @@ -1,5 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render a heading with a button when closed 1`] = `"

Link 1

"`; - -exports[` should render a navigation with a checkmark for current page when open 1`] = `"

Link 1

"`; diff --git a/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigation-tab.md b/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigation-tab.mdx similarity index 100% rename from app/javascript/crayons/navigation/NavigationTabs/__stories__/navigation-tab.md rename to app/javascript/crayons/navigation/NavigationTabs/__stories__/navigation-tab.mdx diff --git a/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx b/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx index 6d4d71097..a9189fd1f 100644 --- a/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx +++ b/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx @@ -1,7 +1,7 @@ import { h } from 'preact'; import '../../../storybook-utilities/designSystem.scss'; import { useState } from 'preact/hooks'; -import notes from './navigation-tab.md'; +import notes from './navigation-tab.mdx'; export default { title: 'Components/Navigation/Tabs/HTML', diff --git a/app/javascript/crayons/navigation/index.js b/app/javascript/crayons/navigation/index.js deleted file mode 100644 index f002afbeb..000000000 --- a/app/javascript/crayons/navigation/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './MobileDrawerNavigation/MobileDrawerNavigation'; diff --git a/app/javascript/crayons/navigation/mainNavigation/__stories__/main-navigation.md b/app/javascript/crayons/navigation/mainNavigation/__stories__/main-navigation.md deleted file mode 100644 index 8f2089fa5..000000000 --- a/app/javascript/crayons/navigation/mainNavigation/__stories__/main-navigation.md +++ /dev/null @@ -1,4 +0,0 @@ - ## Navigation: Main nav - - Used as main nav in left sidebar or dropdowns... - Can contain icons. diff --git a/app/javascript/crayons/navigation/mainNavigation/__stories__/mainNavigation.html.stories.jsx b/app/javascript/crayons/navigation/mainNavigation/__stories__/mainNavigation.html.stories.jsx deleted file mode 100644 index e73ffe22d..000000000 --- a/app/javascript/crayons/navigation/mainNavigation/__stories__/mainNavigation.html.stories.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import { h } from 'preact'; -import '../../../storybook-utilities/designSystem.scss'; -import notes from './main-navigation.md'; - -export default { - title: 'Components/Navigation/Main Navigation/HTML', - parameters: { notes }, -}; - -export const Default = () => ( - -); - -Default.story = { - name: 'default', -}; diff --git a/app/javascript/crayons/typography/__stories__/accented-typography.md b/app/javascript/crayons/typography/__stories__/accented-typography.mdx similarity index 100% rename from app/javascript/crayons/typography/__stories__/accented-typography.md rename to app/javascript/crayons/typography/__stories__/accented-typography.mdx diff --git a/app/javascript/crayons/typography/__stories__/typography.md b/app/javascript/crayons/typography/__stories__/typography.mdx similarity index 100% rename from app/javascript/crayons/typography/__stories__/typography.md rename to app/javascript/crayons/typography/__stories__/typography.mdx diff --git a/app/javascript/crayons/typography/__stories__/typography.stories.jsx b/app/javascript/crayons/typography/__stories__/typography.stories.jsx index c138a5fc8..51c0a257a 100644 --- a/app/javascript/crayons/typography/__stories__/typography.stories.jsx +++ b/app/javascript/crayons/typography/__stories__/typography.stories.jsx @@ -3,7 +3,7 @@ import { h } from 'preact'; import '../../storybook-utilities/designSystem.scss'; import './typography.scss'; -import notes from './typography.md'; +import notes from './typography.mdx'; export default { title: 'Fundamentals/Typography/1_Main', diff --git a/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx b/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx index d16863ac4..aa2fbde61 100644 --- a/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx +++ b/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx @@ -3,7 +3,7 @@ import { h } from 'preact'; import '../../storybook-utilities/designSystem.scss'; import './typography.scss'; -import notes from './accented-typography.md'; +import notes from './accented-typography.mdx'; export default { title: 'Fundamentals/Typography/2_Accent', diff --git a/app/javascript/icons/CogIcon.jsx b/app/javascript/icons/CogIcon.jsx deleted file mode 100644 index ab99eafd3..000000000 --- a/app/javascript/icons/CogIcon.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import { h } from 'preact'; - -export const CogIcon = () => ( - - Preferences - - -); diff --git a/app/javascript/icons/__stories__/CogIcon.stories.jsx b/app/javascript/icons/__stories__/CogIcon.stories.jsx deleted file mode 100644 index 5103630a0..000000000 --- a/app/javascript/icons/__stories__/CogIcon.stories.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { h } from 'preact'; -import { CogIcon } from '../CogIcon'; - -export default { - title: 'Components/Icons', -}; - -export const Default = () => ; - -Default.story = { - name: 'cog icon', -}; diff --git a/app/javascript/icons/__tests__/CogIcon.test.jsx b/app/javascript/icons/__tests__/CogIcon.test.jsx deleted file mode 100644 index fec608ee0..000000000 --- a/app/javascript/icons/__tests__/CogIcon.test.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import { h } from 'preact'; -import { render } from '@testing-library/preact'; -import { axe } from 'jest-axe'; -import { CogIcon } from '../CogIcon'; - -describe('', () => { - it('should have no a11y violations', async () => { - const { container } = render(); - const results = await axe(container); - - expect(results).toHaveNoViolations(); - }); - it('should render', () => { - const { container } = render(); - - expect(container.innerHTML).toMatchSnapshot(); - }); -}); diff --git a/app/javascript/icons/__tests__/__snapshots__/CogIcon.test.jsx.snap b/app/javascript/icons/__tests__/__snapshots__/CogIcon.test.jsx.snap deleted file mode 100644 index 7b1fffca0..000000000 --- a/app/javascript/icons/__tests__/__snapshots__/CogIcon.test.jsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render 1`] = `"Preferences"`; diff --git a/app/javascript/icons/index.js b/app/javascript/icons/index.js deleted file mode 100644 index 7f878f2ad..000000000 --- a/app/javascript/icons/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './CogIcon'; diff --git a/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx b/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx index d496fa0b0..0aec971c2 100644 --- a/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx +++ b/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx @@ -2,7 +2,7 @@ import { h } from 'preact'; import { Meta } from '@storybook/addon-docs/blocks'; - + # Media Queries