Merge c6a9a30 into 39128ed

textkernel · Jul 8, 2019 · c76a0b5 · c76a0b5
2 parents 39128ed + c6a9a30
commit c76a0b5
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 44 deletions.
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import bem from 'bem';
-import PageWidthRestrictor from '../PageWidthRestrictor';
+import { BlockWidthRestrictor } from '../WidthRestrictor';
 import styles from './Footer.scss';
 import { LogoTextkernel } from '../Icon';
 
@@ -22,10 +22,10 @@ const Footer = props => {
 
     return (
         <footer {...rest} {...block(props)}>
-            <PageWidthRestrictor {...elem('wrapper', props)}>
+            <BlockWidthRestrictor {...elem('wrapper', props)}>
                 {copyright || tkCopyright}
                 <div {...elem('menu', props)}>{children}</div>
-            </PageWidthRestrictor>
+            </BlockWidthRestrictor>
         </footer>
     );
 };

diff --git a/src/components/Footer/__tests__/__snapshots__/Footer.spec.js.snap b/src/components/Footer/__tests__/__snapshots__/Footer.spec.js.snap
@@ -7,12 +7,12 @@ exports[`Footer component that renders a copyright text on the left and optional
   <footer
     className="Footer"
   >
-    <PageWidthRestrictor
+    <BlockWidthRestrictor
       As="div"
       className="Footer__wrapper"
     >
       <div
-        className="PageWidthRestrictor Footer__wrapper"
+        className="BlockWidthRestrictor Footer__wrapper"
       >
         <span>
           © 2019 
@@ -86,7 +86,7 @@ exports[`Footer component that renders a copyright text on the left and optional
           This is a placeholder for children
         </div>
       </div>
-    </PageWidthRestrictor>
+    </BlockWidthRestrictor>
   </footer>
 </Footer>
 `;
@@ -98,19 +98,19 @@ exports[`Footer component that renders a copyright text on the left and optional
   <footer
     className="Footer"
   >
-    <PageWidthRestrictor
+    <BlockWidthRestrictor
       As="div"
       className="Footer__wrapper"
     >
       <div
-        className="PageWidthRestrictor Footer__wrapper"
+        className="BlockWidthRestrictor Footer__wrapper"
       >
         my special copyright
         <div>
           This is a placeholder for children
         </div>
       </div>
-    </PageWidthRestrictor>
+    </BlockWidthRestrictor>
   </footer>
 </Footer>
 `;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import bem from 'bem';
-import PageWidthRestrictor from '../PageWidthRestrictor';
+import { BlockWidthRestrictor } from '../WidthRestrictor';
 import styles from './Header.scss';
 
 const { block, elem } = bem({
@@ -26,10 +26,10 @@ const Header = props => {
 
     return (
         <header {...rest} {...block(props)}>
-            <PageWidthRestrictor {...elem('wrapper', props)}>
+            <BlockWidthRestrictor {...elem('wrapper', props)}>
                 {renderedLogo}
                 <div {...elem('menu', props)}>{children}</div>
-            </PageWidthRestrictor>
+            </BlockWidthRestrictor>
         </header>
     );
 };

diff --git a/src/components/Header/__tests__/__snapshots__/Header.spec.js.snap b/src/components/Header/__tests__/__snapshots__/Header.spec.js.snap
@@ -18,12 +18,12 @@ exports[`Header component that renders a website header with a logo on the left
   <header
     className="Header"
   >
-    <PageWidthRestrictor
+    <BlockWidthRestrictor
       As="div"
       className="Header__wrapper"
     >
       <div
-        className="PageWidthRestrictor Header__wrapper"
+        className="BlockWidthRestrictor Header__wrapper"
       >
         <a
           className="Header__logo"
@@ -70,7 +70,7 @@ exports[`Header component that renders a website header with a logo on the left
           This is a placeholder for children
         </div>
       </div>
-    </PageWidthRestrictor>
+    </BlockWidthRestrictor>
   </header>
 </Header>
 `;
@@ -86,12 +86,12 @@ exports[`Header component that renders a website header with a logo on the left
   <header
     className="Header"
   >
-    <PageWidthRestrictor
+    <BlockWidthRestrictor
       As="div"
       className="Header__wrapper"
     >
       <div
-        className="PageWidthRestrictor Header__wrapper"
+        className="BlockWidthRestrictor Header__wrapper"
       >
         <img
           alt="our logo"
@@ -102,7 +102,7 @@ exports[`Header component that renders a website header with a logo on the left
           This is a placeholder for children
         </div>
       </div>
-    </PageWidthRestrictor>
+    </BlockWidthRestrictor>
   </header>
 </Header>
 `;
@@ -119,12 +119,12 @@ exports[`Header component that renders a website header with a logo on the left
   <header
     className="Header"
   >
-    <PageWidthRestrictor
+    <BlockWidthRestrictor
       As="div"
       className="Header__wrapper"
     >
       <div
-        className="PageWidthRestrictor Header__wrapper"
+        className="BlockWidthRestrictor Header__wrapper"
       >
         <a
           href="/"
@@ -138,7 +138,7 @@ exports[`Header component that renders a website header with a logo on the left
           This is a placeholder for children
         </div>
       </div>
-    </PageWidthRestrictor>
+    </BlockWidthRestrictor>
   </header>
 </Header>
 `;
diff --git a/src/components/Navigation/NavBar/NavBar.js b/src/components/Navigation/NavBar/NavBar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import bem from 'bem';
-import PageWidthRestrictor from '../../PageWidthRestrictor';
+import { BlockWidthRestrictor } from '../../WidthRestrictor';
 import styles from './NavBar.scss';
 
 const { block, elem } = bem({
@@ -14,9 +14,9 @@ const NavBar = props => {
 
     return (
         <div {...rest} {...block(props)}>
-            <PageWidthRestrictor As="nav" {...elem('wrapper', props)}>
+            <BlockWidthRestrictor As="nav" {...elem('wrapper', props)}>
                 {children}
-            </PageWidthRestrictor>
+            </BlockWidthRestrictor>
         </div>
     );
 };

diff --git a/src/components/Navigation/NavBar/__tests__/__snapshots__/NavBar.spec.js.snap b/src/components/Navigation/NavBar/__tests__/__snapshots__/NavBar.spec.js.snap
@@ -5,12 +5,12 @@ exports[`NavBar that renders a container for navigation should render correctly
   <div
     className="NavBar"
   >
-    <PageWidthRestrictor
+    <BlockWidthRestrictor
       As="nav"
       className="NavBar__wrapper"
     >
       <nav
-        className="PageWidthRestrictor NavBar__wrapper"
+        className="BlockWidthRestrictor NavBar__wrapper"
       >
         <a
           href="/"
@@ -23,7 +23,7 @@ exports[`NavBar that renders a container for navigation should render correctly
           other
         </a>
       </nav>
-    </PageWidthRestrictor>
+    </BlockWidthRestrictor>
   </div>
 </NavBar>
 `;
diff --git a/src/components/WidthRestrictor/BlockWidthRestrictor/BlockWidthRestrictor.js b/src/components/WidthRestrictor/BlockWidthRestrictor/BlockWidthRestrictor.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bem from 'bem';
+import styles from './BlockWidthRestrictor.scss';
+
+const { block } = bem({
+    name: 'BlockWidthRestrictor',
+    classnames: styles
+});
+
+const BlockWidthRestrictor = props => {
+    const { children, As, ...rest } = props;
+
+    return (
+        <As {...rest} {...block(props)}>
+            {children}
+        </As>
+    );
+};
+
+BlockWidthRestrictor.displayName = 'BlockWidthRestrictor';
+
+BlockWidthRestrictor.propTypes = {
+    /** Node(s) to be rendered inside the container */
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    /** HTML tag to be used to render the container */
+    As: PropTypes.string
+};
+
+BlockWidthRestrictor.defaultProps = {
+    As: 'div'
+};
+
+export default BlockWidthRestrictor;
diff --git a/...eWidthRestrictor/PageWidthRestrictor.scss → ...WidthRestrictor/BlockWidthRestrictor.scss b/...eWidthRestrictor/PageWidthRestrictor.scss → ...WidthRestrictor/BlockWidthRestrictor.scss
@@ -1,6 +1,6 @@
-@import '../../themes/oneui/oneui.scss';
+@import '../../../themes/oneui/oneui.scss';
 
-.PageWidthRestrictor {
+.BlockWidthRestrictor {
     min-width: var(--site-container-min-size);
     max-width: var(--site-container-max-size);
     padding: 0 var(--site-container-padding);

diff --git a/src/components/WidthRestrictor/BlockWidthRestrictor/index.js b/src/components/WidthRestrictor/BlockWidthRestrictor/index.js
@@ -0,0 +1 @@
+export { default } from './BlockWidthRestrictor';
diff --git a/...ageWidthRestrictor/PageWidthRestrictor.js → ...ageWidthRestrictor/PageWidthRestrictor.js b/...ageWidthRestrictor/PageWidthRestrictor.js → ...ageWidthRestrictor/PageWidthRestrictor.js
@@ -12,23 +12,17 @@ const PageWidthRestrictor = props => {
     const { children, As, ...rest } = props;
 
     return (
-        <As {...rest} {...block(props)}>
+        <div {...rest} {...block(props)}>
             {children}
-        </As>
+        </div>
     );
 };
 
 PageWidthRestrictor.displayName = 'PageWidthRestrictor';
 
 PageWidthRestrictor.propTypes = {
     /** Node(s) to be rendered inside the container */
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    /** HTML tag to be used to render the container */
-    As: PropTypes.string
-};
-
-PageWidthRestrictor.defaultProps = {
-    As: 'div'
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 };
 
 export default PageWidthRestrictor;
diff --git a/src/components/WidthRestrictor/PageWidthRestrictor/PageWidthRestrictor.scss b/src/components/WidthRestrictor/PageWidthRestrictor/PageWidthRestrictor.scss
@@ -0,0 +1,5 @@
+@import '../../../themes/oneui/oneui.scss';
+
+.PageWidthRestrictor {
+    min-width: calc(var(--site-container-min-size) + 2 * var(--site-container-padding));
+}
diff --git a/src/components/PageWidthRestrictor/index.js → ...thRestrictor/PageWidthRestrictor/index.js b/src/components/PageWidthRestrictor/index.js → ...thRestrictor/PageWidthRestrictor/index.js
diff --git a/src/components/WidthRestrictor/index.js b/src/components/WidthRestrictor/index.js
@@ -0,0 +1,2 @@
+export { default as PageWidthRestrictor } from './PageWidthRestrictor';
+export { default as BlockWidthRestrictor } from './BlockWidthRestrictor';
diff --git a/src/index.js b/src/index.js
@@ -14,7 +14,7 @@ export { default as Link } from './components/Link';
 export { List, ListItem, ListActions, JobResult } from './components/List';
 export { default as LoadingSpinner } from './components/LoadingSpinner';
 export { NavBar, NavItem } from './components/Navigation';
-export { default as PageWidthRestrictor } from './components/PageWidthRestrictor';
+export { PageWidthRestrictor, BlockWidthRestrictor } from './components/WidthRestrictor';
 export { default as Pagination } from './components/Pagination';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RadioButton } from './components/RadioButton';

diff --git a/stories/PageWidthRestrictor.js → stories/WidthRestrictor.js b/stories/PageWidthRestrictor.js → stories/WidthRestrictor.js
@@ -1,17 +1,24 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, withKnobs } from '@storybook/addon-knobs';
-import { PageWidthRestrictor } from '@textkernel/oneui';
+import { PageWidthRestrictor, BlockWidthRestrictor } from '@textkernel/oneui';
 
-storiesOf('PageWidthRestrictor', module)
+storiesOf('WidthRestrictor', module)
     .addDecorator(withKnobs)
     .add('PageWidthRestrictor', () => (
         <div style={{ backgroundColor: 'teal' }}>
-            <PageWidthRestrictor
+            <PageWidthRestrictor style={{ backgroundColor: 'darkturquoise' }}>
+                {text('Content', 'This is a placeholder for children')}
+            </PageWidthRestrictor>
+        </div>
+    ))
+    .add('BlockWidthRestrictor', () => (
+        <div style={{ backgroundColor: 'teal' }}>
+            <BlockWidthRestrictor
                 As={text('Tag for component', 'div')}
                 style={{ backgroundColor: 'darkturquoise' }}
             >
                 {text('Content', 'This is a placeholder for children')}
-            </PageWidthRestrictor>
+            </BlockWidthRestrictor>
         </div>
     ));
diff --git a/stories/index.js b/stories/index.js
@@ -14,7 +14,7 @@ import './Link';
 import './List';
 import './LoadingSpinner';
 import './Navigation';
-import './PageWidthRestrictor';
+import './WidthRestrictor';
 import './Pagination';
 import './ProgressBar';
 import './RadioButton';