... | ... | @@ -79,7 +79,7 @@ A PubSweet component, whether a server or client component, is an npm package an |
|
|
|
|
|
Things to keep in mind when creating a new component:
|
|
|
* Start with reusability in mind;
|
|
|
* Follow the principles of DRY ("Don't repeat yourself (https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)"), KISS, YAGNI;
|
|
|
* Follow the principles of DRY ("[Don't repeat yourself](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)"), KISS, YAGNI;
|
|
|
* Use variables, theme variables for styling, React props, etc., instead of hardcoded values;
|
|
|
* Follow [Conventional Commits](https://www.conventionalcommits.o rg/en/v1.0.0-beta.2/) or keep a healthy changelog;
|
|
|
* Write documentation;
|
... | ... | @@ -108,7 +108,7 @@ As PubSweet provides a set of tools to easily change the look and feel of any UI |
|
|
For example, the primary button atom is set to use the primary color for its background color:
|
|
|
```const Button = styled.button`background: ${props => props.theme.colorPrimary};````
|
|
|
|
|
|
For a complete list of variables, you can check the pubsweet/design repo regarding variables (https://gitlab.coko.foundation/pubsweet/design/blo b/master/OnTheming.md#variables).
|
|
|
For a complete list of variables, you can check the `pubsweet/design` [repo regarding variables](https://gitlab.coko.foundation/pubsweet/design/blob/master/OnTheming.md#variables).
|
|
|
### Accessibility
|
|
|
Accessibility must be an important consideration in the choices of design and UI/UX made for PubSweet. As a minimum, all PubSweet components must comply with the Web Content Accessibility Guidelines (WCAG) version 2.0 at level AA. There is no simple checklist or automated test for this but here are some things to keep in mind:
|
|
|
* Ensure that all forms and controls can be operated using the keyboard only. This includes having a recognisable style on the currently-focused element.
|
... | ... | @@ -116,9 +116,9 @@ Accessibility must be an important consideration in the choices of design and UI |
|
|
* Use the Accessible Rich Internet Applications (ARIA) specification to your advantage. It provides a number of attributes that allow custom UI components to be imparted with the same accessibility features as native components such as <button> or <select>.
|
|
|
* Colors should be chosen with contrast in mind and ratio should pass at least the AA grade for the WCAG 2.0 test.
|
|
|
#### Further reading
|
|
|
* [W3C Accessibility homepage](https://www.w3.org/standards/webde sign/accessibility)
|
|
|
* [W3C Accessibility homepage](https://www.w3.org/standards/webdesign/accessibility)
|
|
|
* [WCAG Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
|
|
|
* [Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/ WAI/standards-guidelines/atag/)
|
|
|
* [Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/standards-guidelines/atag/)
|
|
|
* [The A11Y project](https://a11yproject.com)
|
|
|
* [Inclusive Components](https://inclusive-components.design)
|
|
|
## Setting the vertical rhythm
|
... | ... | |