From 7879790a3565d4ce7cebec8732618300899fbf1d Mon Sep 17 00:00:00 2001
From: Gavin He <hscgavin@gmail.com>
Date: Tue, 26 Feb 2019 10:58:05 +1100
Subject: [PATCH] fix(Hidden): Add Hidden component (#103)

---
 docs/src/App/App.tsx                     | 206 ++++++++++++-----------
 lib/components/Hidden/Hidden.css.js      |   7 +
 lib/components/Hidden/Hidden.css.js.d.ts |   3 +
 lib/components/Hidden/Hidden.docs.tsx    |  97 +++++++++++
 lib/components/Hidden/Hidden.tsx         |  42 +++++
 lib/components/index.ts                  |   1 +
 6 files changed, 255 insertions(+), 101 deletions(-)
 create mode 100644 lib/components/Hidden/Hidden.css.js
 create mode 100644 lib/components/Hidden/Hidden.css.js.d.ts
 create mode 100644 lib/components/Hidden/Hidden.docs.tsx
 create mode 100644 lib/components/Hidden/Hidden.tsx

diff --git a/docs/src/App/App.tsx b/docs/src/App/App.tsx
index e120c2f29d..ca35539f49 100644
--- a/docs/src/App/App.tsx
+++ b/docs/src/App/App.tsx
@@ -9,7 +9,7 @@ import ComponentRoute from './ComponentRoute/ComponentRoute';
 import { Link, ExternalLink } from './Link';
 import styles from './App.css.js';
 
-const { ThemeProvider, Text, Box, BulletList, Bullet } = components;
+const { ThemeProvider, Text, Box, BulletList, Bullet, Hidden } = components;
 
 interface AppProps extends RouteComponentProps {
   sourceUrlPrefix: string;
@@ -59,122 +59,126 @@ export default withRouter(
                   <Logo />
                 </Link>
 
-                <button
-                  className={classnames({
-                    [styles.menuButton]: true,
-                    [styles.menuButton__isHidden]: isHome,
-                    [styles.menuButton__isOpen]: isMenuOpen && !isHome
-                  })}
-                  onClick={this.toggleMenu}
-                  aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
-                >
-                  <div
-                    className={classnames(
-                      styles.menuButton__bar,
-                      styles.menuButton__bar1
-                    )}
-                  />
-                  <div
-                    className={classnames(
-                      styles.menuButton__bar,
-                      styles.menuButton__bar2
-                    )}
-                  />
-                  <div
-                    className={classnames(
-                      styles.menuButton__bar,
-                      styles.menuButton__bar3
-                    )}
-                  />
-                </button>
+                <Hidden print>
+                  <button
+                    className={classnames({
+                      [styles.menuButton]: true,
+                      [styles.menuButton__isHidden]: isHome,
+                      [styles.menuButton__isOpen]: isMenuOpen && !isHome
+                    })}
+                    onClick={this.toggleMenu}
+                    aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
+                  >
+                    <div
+                      className={classnames(
+                        styles.menuButton__bar,
+                        styles.menuButton__bar1
+                      )}
+                    />
+                    <div
+                      className={classnames(
+                        styles.menuButton__bar,
+                        styles.menuButton__bar2
+                      )}
+                    />
+                    <div
+                      className={classnames(
+                        styles.menuButton__bar,
+                        styles.menuButton__bar3
+                      )}
+                    />
+                  </button>
+                </Hidden>
               </div>
             </Box>
           </div>
           <div className={styles.container}>
-            <div
-              className={classnames({
-                [styles.menu]: true,
-                [styles.menu__isOpen]: isMenuOpen
-              })}
-            >
-              <Box
-                paddingTop="small"
-                paddingBottom="large"
-                paddingLeft="gutter"
-                paddingRight="gutter"
+            <Hidden print>
+              <div
+                className={classnames({
+                  [styles.menu]: true,
+                  [styles.menu__isOpen]: isMenuOpen
+                })}
               >
-                <Box paddingBottom="small">
-                  <Text size="large" weight="strong">
-                    Tools
-                  </Text>
-                </Box>
-                <Box paddingBottom="small">
-                  <BulletList>
-                    <Bullet>
-                      <ExternalLink
-                        href="https://github.com/seek-oss/braid-design-system"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        onClick={this.closeMenu}
-                      >
-                        Source
-                      </ExternalLink>
-                    </Bullet>
-                    <Bullet>
-                      <Link
-                        to="/playroom"
-                        target="_blank"
-                        onClick={this.closeMenu}
-                      >
-                        Playroom
-                      </Link>
-                    </Bullet>
-                  </BulletList>
-                </Box>
-                <Box paddingBottom="small">
-                  <Text size="large" weight="strong">
-                    Components
-                  </Text>
-                </Box>
-                <Box paddingBottom="small">
+                <Box
+                  paddingTop="small"
+                  paddingBottom="large"
+                  paddingLeft="gutter"
+                  paddingRight="gutter"
+                >
+                  <Box paddingBottom="small">
+                    <Text size="large" weight="strong">
+                      Tools
+                    </Text>
+                  </Box>
+                  <Box paddingBottom="small">
+                    <BulletList>
+                      <Bullet>
+                        <ExternalLink
+                          href="https://github.com/seek-oss/braid-design-system"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          onClick={this.closeMenu}
+                        >
+                          Source
+                        </ExternalLink>
+                      </Bullet>
+                      <Bullet>
+                        <Link
+                          to="/playroom"
+                          target="_blank"
+                          onClick={this.closeMenu}
+                        >
+                          Playroom
+                        </Link>
+                      </Bullet>
+                    </BulletList>
+                  </Box>
+                  <Box paddingBottom="small">
+                    <Text size="large" weight="strong">
+                      Components
+                    </Text>
+                  </Box>
+                  <Box paddingBottom="small">
+                    <BulletList>
+                      {Object.keys(components)
+                        .filter(x => !/icon/i.test(x))
+                        .sort()
+                        .map(componentName => (
+                          <Bullet key={componentName}>
+                            <Link
+                              to={`/components/${componentName}`}
+                              onClick={this.closeMenu}
+                            >
+                              {componentName}
+                            </Link>
+                          </Bullet>
+                        ))}
+                    </BulletList>
+                  </Box>
+                  <Box paddingBottom="small">
+                    <Text size="large" weight="strong">
+                      Icons
+                    </Text>
+                  </Box>
                   <BulletList>
                     {Object.keys(components)
-                      .filter(x => !/icon/i.test(x))
+                      .filter(x => /icon/i.test(x) && x !== 'Icon')
                       .sort()
-                      .map(componentName => (
-                        <Bullet key={componentName}>
+                      .map(iconName => (
+                        <Bullet key={iconName}>
                           <Link
-                            to={`/components/${componentName}`}
+                            to={`/icons/${iconName}`}
                             onClick={this.closeMenu}
                           >
-                            {componentName}
+                            {iconName}
                           </Link>
                         </Bullet>
                       ))}
                   </BulletList>
                 </Box>
-                <Box paddingBottom="small">
-                  <Text size="large" weight="strong">
-                    Icons
-                  </Text>
-                </Box>
-                <BulletList>
-                  {Object.keys(components)
-                    .filter(x => /icon/i.test(x) && x !== 'Icon')
-                    .sort()
-                    .map(iconName => (
-                      <Bullet key={iconName}>
-                        <Link
-                          to={`/icons/${iconName}`}
-                          onClick={this.closeMenu}
-                        >
-                          {iconName}
-                        </Link>
-                      </Bullet>
-                    ))}
-                </BulletList>
-              </Box>
-            </div>
+              </div>
+            </Hidden>
             <div className={styles.content}>
               <Box
                 paddingLeft="gutter"
diff --git a/lib/components/Hidden/Hidden.css.js b/lib/components/Hidden/Hidden.css.js
new file mode 100644
index 0000000000..a5d516aeab
--- /dev/null
+++ b/lib/components/Hidden/Hidden.css.js
@@ -0,0 +1,7 @@
+export default {
+  '@media print': {
+    '.hiddenOnPrint': {
+      display: 'none'
+    }
+  }
+};
diff --git a/lib/components/Hidden/Hidden.css.js.d.ts b/lib/components/Hidden/Hidden.css.js.d.ts
new file mode 100644
index 0000000000..9c096fbd24
--- /dev/null
+++ b/lib/components/Hidden/Hidden.css.js.d.ts
@@ -0,0 +1,3 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const hiddenOnPrint: string;
diff --git a/lib/components/Hidden/Hidden.docs.tsx b/lib/components/Hidden/Hidden.docs.tsx
new file mode 100644
index 0000000000..3983e2ae7e
--- /dev/null
+++ b/lib/components/Hidden/Hidden.docs.tsx
@@ -0,0 +1,97 @@
+import React, { Fragment } from 'react';
+import Hidden from './Hidden';
+import Text from '../Text/Text';
+
+export default {
+  component: Hidden,
+  examples: [
+    {
+      label: 'Hidden on Mobile',
+      render: () => (
+        <Fragment>
+          <Text>The following line is hidden on mobile:</Text>
+          <Hidden mobile>
+            <Text>Hidden on mobile.</Text>
+          </Hidden>
+        </Fragment>
+      )
+    },
+    {
+      label: 'Hidden on Desktop',
+      render: () => (
+        <Fragment>
+          <Text>The following line is hidden on desktop:</Text>
+          <Hidden desktop>
+            <Text>Hidden on desktop.</Text>
+          </Hidden>
+        </Fragment>
+      )
+    },
+    {
+      label: 'Hidden on Print',
+      render: () => (
+        <Fragment>
+          <Text>The following line is hidden on print:</Text>
+          <Hidden print>
+            <Text>Hidden on print.</Text>
+          </Hidden>
+        </Fragment>
+      )
+    },
+    {
+      label: 'Hidden on Screen',
+      render: () => (
+        <Fragment>
+          <Text>The following line is hidden on screen:</Text>
+          <Hidden screen>
+            <Text>Hidden on screen.</Text>
+          </Hidden>
+        </Fragment>
+      )
+    },
+    {
+      label: 'Hidden on Mobile (Inline)',
+      render: () => (
+        <Text>
+          The following text node is hidden on mobile:{' '}
+          <Hidden inline mobile>
+            Hidden on mobile.
+          </Hidden>
+        </Text>
+      )
+    },
+    {
+      label: 'Hidden on Desktop (Inline)',
+      render: () => (
+        <Text>
+          The following text node is hidden on desktop:{' '}
+          <Hidden inline desktop>
+            Hidden on desktop.
+          </Hidden>
+        </Text>
+      )
+    },
+    {
+      label: 'Hidden on Print (Inline)',
+      render: () => (
+        <Text>
+          The following text node is hidden on print:{' '}
+          <Hidden inline print>
+            Hidden on print.
+          </Hidden>
+        </Text>
+      )
+    },
+    {
+      label: 'Hidden on Screen (Inline)',
+      render: () => (
+        <Text>
+          The following text node is hidden on screen:{' '}
+          <Hidden inline screen>
+            Hidden on screen.
+          </Hidden>
+        </Text>
+      )
+    }
+  ]
+};
diff --git a/lib/components/Hidden/Hidden.tsx b/lib/components/Hidden/Hidden.tsx
new file mode 100644
index 0000000000..2f2500a24e
--- /dev/null
+++ b/lib/components/Hidden/Hidden.tsx
@@ -0,0 +1,42 @@
+import React, { Component, ReactNode } from 'react';
+import Box from '../Box/Box';
+import styles from './Hidden.css.js';
+
+export interface HiddenProps {
+  children: ReactNode;
+  mobile?: boolean;
+  desktop?: boolean;
+  screen?: boolean;
+  print?: boolean;
+  inline?: boolean;
+}
+
+export default class Hidden extends Component<HiddenProps> {
+  static displayName = 'Hidden';
+
+  render() {
+    const {
+      children,
+      inline = false,
+      mobile: hiddenOnMobile = false,
+      desktop: hiddenOnDesktop = false,
+      screen: hiddenOnScreen = false,
+      print: hiddenOnPrint = false
+    } = this.props;
+
+    const display = inline ? 'inline' : 'block';
+
+    return (
+      <Box
+        display={[
+          hiddenOnMobile || hiddenOnScreen ? 'none' : display,
+          hiddenOnDesktop || hiddenOnScreen ? 'none' : display
+        ]}
+        className={hiddenOnPrint ? styles.hiddenOnPrint : undefined}
+        component={inline ? 'span' : 'div'}
+      >
+        {children}
+      </Box>
+    );
+  }
+}
diff --git a/lib/components/index.ts b/lib/components/index.ts
index f7e71e8b7d..2038dea58d 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -17,6 +17,7 @@ export { default as Divider } from './Divider/Divider';
 export { default as FieldLabel } from './FieldLabel/FieldLabel';
 export { default as FieldMessage } from './FieldMessage/FieldMessage';
 export { default as Heading } from './Heading/Heading';
+export { default as Hidden } from './Hidden/Hidden';
 export { default as Radio } from './Radio/Radio';
 export { default as Reset } from './Reset/Reset';
 export { default as Strong } from './Strong/Strong';