feat(a11y): support "prefers-reduce-motion"

Also add "transitionEnabled" in theme

Also add documentation about accessiblity.

Closes #39

Author: gregberge

docs/basics/Accessibility.mdx

@@ -0,0 +1,48 @@
+---
+name: Accessiblity
+menu: 1. Basics
+order: 6
+---
+
+import { Playground } from 'docz'
+
+# Accessiblity
+
+Smooth UI takes accessibility seriously. We do our best to ensure that all components are the most accessible for everyone and on all devices.
+
+## Reduce motion preference
+
+All components implement [reduced motion media query](https://css-tricks.com/introduction-reduced-motion-media-query/), it means they respect settings of users.
+
+`transition` mixin automatically adds the reduced motion media query.
+
+```js
+import { mixin } from '@smooth-ui/core-sc'
+
+const AccessibleButton = styled.button`
+  background-color: red;
+  ${mixin('transition', 'background-color 200ms')};
+
+  &:hover {
+    background-color: blue;
+  }
+`
+
+/* 
+  CSS injected in the page will be:
+
+  background-color: red;
+  transition: background-color 200ms;
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &:hover {
+    background-color: blue;
+  }
+*/
+```
+
+## Turn off all transitions
+
+You can also choose to turn off all transitions by setting `transitionEnabled` to `false` in theme. See [theming guide](http://localhost:3000/docs-basics-theming).

src/Button.js

@@ -26,7 +26,7 @@ const Button = createComponent(() => ({
     line-height: ${th('lineHeightBase')};
     border-width: ${th('btnBorderWidth')};
     cursor: pointer;
-    transition: ${th('transitionBase')};
+    ${th('transitionBase')};
 
     /* When used as link */
     text-decoration: none;

src/Checkbox.js

@@ -79,7 +79,7 @@ const Checkbox = createComponent(() => ({
       border-style: solid;
       border-width: ${th('inputBorderWidth')};
       border-color: ${th('inputBorderColor')};
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
 
       &.checked {
         background-color: ${th('primary')};
@@ -103,7 +103,7 @@ const Checkbox = createComponent(() => ({
       width: 80%;
       pointer-events: none;
       transform: scale(0);
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
     }
 
     &.sui-checkbox-sm {

src/Input.js

@@ -29,7 +29,7 @@ const Input = createComponent(() => ({
     font-size: ${th('fontSizeBase')};
     line-height: ${th('inputLineHeight')};
     color: ${th('inputTextColor')};
-    transition: ${th('transitionBase')};
+    ${th('transitionBase')};
     background-color: ${th('inputBgColor')};
 
     &[type='number'] {

src/Modal.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import { css, withTheme } from './styled-engine'
-import { th } from './utils/system'
+import { th, mixin } from './utils/system'
 import Transition from './Transition'
 import createComponent from './utils/createComponent'
 
@@ -93,7 +93,10 @@ const Modal = createComponent(() => ({
     visibility: hidden;
     overflow: hidden;
     outline: 0;
-    transition: opacity ${th('modalTransitionDuration')}ms ease-in-out;
+    ${mixin(
+      'transition',
+      css`opacity ${th('modalTransitionDuration')}ms ease-in-out`,
+    )};
 
     &.sui-modal-opened {
       visibility: visible;

src/Radio.js

@@ -74,7 +74,7 @@ const ModalHeader = createComponent(() => ({
       border-width: ${th('inputBorderWidth')};
       border-style: solid;
       border-color: ${th('inputBorderColor')};
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
 
       &.checked {
         border-color: ${th('primary')};
@@ -96,7 +96,7 @@ const ModalHeader = createComponent(() => ({
     .sui-radio-circle {
       width: 10px;
       height: 10px;
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
       border-radius: 50%;
       background-color: ${th('primary')};
       transform: scale(0);

src/Select.js

@@ -75,7 +75,7 @@ const Select = createComponent(() => ({
       padding: ${th('inputPaddingY')} ${th('inputPaddingX')};
       font-size: ${th('fontSizeBase')};
       line-height: ${th('lineHeightBase')};
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
       color: ${th('inputTextColor')};
       ${props => props.arrow && !props.multiple && 'padding-right: 1.6rem;'};
 

src/Switch.js

@@ -65,7 +65,7 @@ const Switch = createComponent(() => ({
       border-width: ${th('inputBorderWidth')};
       border-color: ${th('inputBorderColor')};
       border-style: solid;
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
       font-size: 9px;
       font-weight: 800;
 
@@ -97,14 +97,14 @@ const Switch = createComponent(() => ({
       border-radius: 50%;
       width: 18px;
       height: 18px;
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
     }
 
     .sui-switch-content {
       display: flex;
       align-items: center;
       height: 22px;
-      transition: ${th('transitionBase')};
+      ${th('transitionBase')};
       transform: translateX(-25px);
     }
 

src/theme.js

@@ -257,6 +257,18 @@ export const zIndexModal = 1050
 export const zIndexModalBackdrop = 1071
 
 // Transitions
+export const transitionEnabled = true
+export const transition = p => value =>
+  p.theme.transitionEnabled
+    ? css`
+        transition: ${value};
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      `
+    : ''
+
 const safeTransitionProperties = [
   'color',
   'border-style',
@@ -267,9 +279,11 @@ const safeTransitionProperties = [
   'box-shadow',
   'transform',
 ]
-export const transitionBase = safeTransitionProperties
-  .map(prop => `${prop} .2s ease-in-out`)
-  .join(',')
+
+export const transitionBase = mixin(
+  'transition',
+  safeTransitionProperties.map(prop => `${prop} .2s ease-in-out`).join(','),
+)
 
 // Breakpoints