Merge branch '25-cssbaseline-add-overflow-feature' into 'master'

Resolve "[CssBaseline] Add "overflow" feature"

Closes #25

See merge request !8

CHANGELOG.md

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

src/CssBaseline/CssBaseline.js

@@ -21,7 +21,15 @@ const components = Object.assign(
  */
 const CssBaseline = props => {
   const {
-    features = ['color', 'cursor', 'reboot', 'spacing', 'text', 'typography']
+    features = [
+      'color',
+      'cursor',
+      'overflow',
+      'reboot',
+      'spacing',
+      'text',
+      'typography'
+    ]
   } = props;
 
   return (
@@ -49,6 +57,7 @@ CssBaseline.propTypes = {
     PropTypes.oneOf([
       'color',
       'cursor',
+      'overflow',
       'reboot',
       'spacing',
       'text',

src/CssBaseline/CssBaseline.styles.js

 export { default as color } from './CssBaseline.styles.color';
 export { default as cursor } from './CssBaseline.styles.cursor';
+export { default as overflow } from './CssBaseline.styles.overflow';
 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/CssBaseline.styles.overflow.js

+const values = ['auto', 'hidden', 'scroll'];
+
+export default () => ({
+  '@global': Object.assign(
+    ...values.map(value => ({
+      [`.overflow-${value}`]: { overflow: value },
+      [`.overflow-x-${value}`]: { overflowX: value },
+      [`.overflow-y-${value}`]: { overflowY: value }
+    }))
+  )
+});

src/CssBaseline/demos/Overflow.js

+import React from 'react';
+
+const Text = () => (
+  <>
+    <h3>
+      Fonctionnalité <em>overflow</em>
+    </h3>
+    <p>
+      Lorsque cette fonctionnalité est activée, les classes présente dans cette
+      documentation sont disponibles (à quelques différences près, voir
+      ci-dessous) :{' '}
+      <a href='https://getbootstrap.com/docs/4.3/utilities/overflow/'>
+        https://getbootstrap.com/docs/4.3/utilities/overflow/
+      </a>
+    </p>
+
+    <h5>Différences à noter</h5>
+    <p>Les classes suivantes ont été ajoutées :</p>
+    <ul>
+      <li>
+        <code>.overflow-x-auto</code>
+      </li>
+      <li>
+        <code>.overflow-y-auto</code>
+      </li>
+      <li>
+        <code>.overflow-x-hidden</code>
+      </li>
+      <li>
+        <code>.overflow-y-hidden</code>
+      </li>
+      <li>
+        <code>.overflow-scroll</code>
+      </li>
+      <li>
+        <code>.overflow-x-scroll</code>
+      </li>
+      <li>
+        <code>.overflow-y-scroll</code>
+      </li>
+    </ul>
+  </>
+);
+
+export default Text;