feat(mobile-header): add mobileOnly prop to Header (#433)

sumup-oss · Jul 15, 2019 · 0467571 · 0467571
1 parent 9370c30
commit 0467571
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 10 deletions.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -29,16 +29,20 @@ const baseStyles = ({ theme }) => css`
   padding: ${theme.spacings.mega};
   z-index: ${theme.zIndex.header};
   position: sticky;
-  top: 0;
-  ${theme.mq.giga} {
-    display: none;
-  }
 `;
 
-const Container = styled('div')(baseStyles);
+const mobileOnlyStyles = ({ theme, mobileOnly }) =>
+  mobileOnly &&
+  css`
+    ${theme.mq.giga} {
+      display: none;
+    }
+  `;
 
-const Header = ({ title, children }) => (
-  <Container>
+const Container = styled('div')(baseStyles, mobileOnlyStyles);
+
+const Header = ({ title, mobileOnly, children }) => (
+  <Container mobileOnly={mobileOnly}>
     {children}
     <Title>{title}</Title>
   </Container>
@@ -49,6 +53,11 @@ Header.propTypes = {
    * The page title for the Header.
    */
   title: PropTypes.string,
+  /**
+   * If the Header should appear only on
+   * mobile screens (useful for when using together with the Sidebar).
+   */
+  mobileOnly: PropTypes.bool,
   /**
    * The child component of Header.
    */

diff --git a/src/components/Header/Header.spec.js b/src/components/Header/Header.spec.js
@@ -30,6 +30,12 @@ describe('Header', () => {
       expect(actual).toMatchSnapshot();
     });
 
+    it('should render and match snapshot for mobileOnly styles', () => {
+      const mobileProps = { ...props, mobileOnly: true };
+      const actual = create(<Header {...mobileProps} />);
+      expect(actual).toMatchSnapshot();
+    });
+
     it('should render children', () => {
       const wrapper = shallow(
         <Header>

diff --git a/src/components/Header/Header.story.js b/src/components/Header/Header.story.js
@@ -17,6 +17,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
+import { boolean } from '@storybook/addon-knobs';
 
 import { GROUPS } from '../../../.storybook/hierarchySeparators';
 import withTests from '../../util/withTests';
@@ -34,7 +35,7 @@ storiesOf(`${GROUPS.COMPONENTS}|Header`, module)
     'Header',
     withInfo()(() => (
       <HeaderContainer>
-        <Header title="Title">
+        <Header title="Title" mobileOnly={boolean('mobileOnly')}>
           <Hamburguer light />
         </Header>
       </HeaderContainer>

diff --git a/src/components/Header/__snapshots__/Header.spec.js.snap b/src/components/Header/__snapshots__/Header.spec.js.snap
@@ -1,6 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header styles should render with default styles 1`] = `
+exports[`Header styles should render and match snapshot for mobileOnly styles 1`] = `
+.circuit-0 {
+  font-size: 17px;
+  line-height: 24px;
+  font-weight: 700;
+  color: #FAFBFC;
+  margin-left: 16px;
+}
+
 .circuit-2 {
   width: 100%;
   display: -webkit-box;
@@ -17,7 +25,6 @@ exports[`Header styles should render with default styles 1`] = `
   z-index: 600;
   position: -webkit-sticky;
   position: sticky;
-  top: 0;
 }
 
 @media (min-width:960px) {
@@ -26,6 +33,37 @@ exports[`Header styles should render with default styles 1`] = `
   }
 }
 
+<div
+  className="circuit-2 circuit-3"
+>
+  
+  <h1
+    className="circuit-0 circuit-1"
+  >
+    Title
+  </h1>
+</div>
+`;
+
+exports[`Header styles should render with default styles 1`] = `
+.circuit-2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 64px;
+  background-color: #212933;
+  padding: 16px;
+  z-index: 600;
+  position: -webkit-sticky;
+  position: sticky;
+}
+
 .circuit-0 {
   font-size: 17px;
   line-height: 24px;