[CssBaseline] Add "cursor" feature and its documentation

CHANGELOG.md

@@ -12,6 +12,7 @@
   
 ### New features
 
+- **[CssBaseline]** Add "cursor" feature (!7 by @chapa)
 - **[CssBaseline]** Add "text" feature (!6 by @chapa)
 
 ## v1.2.0 (August 27, 2019) and below

src/CssBaseline/CssBaseline.js

@@ -21,7 +21,7 @@ const components = Object.assign(
  */
 const CssBaseline = props => {
   const {
-    features = ['color', 'reboot', 'spacing', 'text', 'typography']
+    features = ['color', 'cursor', 'reboot', 'spacing', 'text', 'typography']
   } = props;
 
   return (
@@ -46,7 +46,14 @@ CssBaseline.propTypes = {
    * Liste des fonctionnalités à activer, toutes activées par défaut
    */
   features: PropTypes.arrayOf(
-    PropTypes.oneOf(['color', 'reboot', 'spacing', 'text', 'typography'])
+    PropTypes.oneOf([
+      'color',
+      'cursor',
+      'reboot',
+      'spacing',
+      'text',
+      'typography'
+    ])
   )
 };
 

src/CssBaseline/CssBaseline.styles.cursor.js

+export const cursors = [
+  'alias',
+  'all-scroll',
+  'auto',
+  'cell',
+  'col-resize',
+  'context-menu',
+  'copy',
+  'crosshair',
+  'default',
+  'e-resize',
+  'ew-resize',
+  'grab',
+  'grabbing',
+  'help',
+  'move',
+  'n-resize',
+  'ne-resize',
+  'nesw-resize',
+  'no-drop',
+  'none',
+  'not-allowed',
+  'ns-resize',
+  'nw-resize',
+  'nwse-resize',
+  'pointer',
+  'progress',
+  'row-resize',
+  's-resize',
+  'se-resize',
+  'sw-resize',
+  'text',
+  'vertical-text',
+  'w-resize',
+  'wait',
+  'zoom-in',
+  'zoom-out'
+];
+
+export default () => ({
+  '@global': Object.assign(
+    ...cursors.map(cursor => ({
+      [`.cursor-${cursor}`]: {
+        cursor
+      }
+    }))
+  )
+});

src/CssBaseline/CssBaseline.styles.js

 export { default as color } from './CssBaseline.styles.color';
+export { default as cursor } from './CssBaseline.styles.cursor';
 export { default as reboot } from './CssBaseline.styles.reboot';
 export { default as spacing } from './CssBaseline.styles.spacing';
 export { default as text } from './CssBaseline.styles.text';

src/CssBaseline/demos/Cursor.js

+import React from 'react';
+
+import { cursors } from '../CssBaseline.styles.cursor';
+
+const Cursor = () => (
+  <>
+    <h3>
+      Fonctionnalité <em>cursor</em>
+    </h3>
+    <ul>
+      {cursors.map(cursor => (
+        <li className={`cursor-${cursor}`} key={cursor}>
+          <code>.cursor-{cursor}</code>
+        </li>
+      ))}
+    </ul>
+  </>
+);
+
+export default Cursor;