Add Responsive.Visible and Responsive.Hidden utilities to Dark Matter

src/components/Responsive/Hidden/README.md

@@ -0,0 +1,6 @@
+# Responsive.Hidden
+
+**Hide contents based on container width.**
+
+When you use a `Responsive.Container`, it sets up a container width watcher with pre-defined breakpoints.
+You can use those breakpoints to hide this component based on container width.

src/components/Responsive/Hidden/index.js

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import intersection from 'lodash/intersection';
+
+import Context from '../Context';
+
+const Hidden = ({
+  children,
+  responsiveContext: hiddenResponsiveContext,
+  ...passedProps
+}) => {
+  const getIsHidden = useCallback(
+    responsiveContext =>
+      !!intersection(hiddenResponsiveContext, responsiveContext).length,
+    [hiddenResponsiveContext]
+  );
+
+  return (
+    <Context.Consumer>
+      {responsiveContext => {
+        const hidden = getIsHidden(responsiveContext);
+
+        return React.Children.map(children, child => {
+          if (!child || hidden) {
+            return null;
+          }
+
+          if (typeof child === 'string') {
+            return <span>{child}</span>;
+          }
+
+          return React.cloneElement(child, {
+            ...passedProps,
+          });
+        });
+      }}
+    </Context.Consumer>
+  );
+};
+
+Hidden.propTypes = {
+  children: PropTypes.node,
+  container: PropTypes.string,
+  responsiveContext: PropTypes.arrayOf(PropTypes.string),
+};
+
+Hidden.defaultProps = {
+  children: null,
+  container: null,
+  responsiveContext: [],
+};
+
+export default Hidden;

src/components/Responsive/Hidden/story.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// Rover UI dependencies
+import Container from '../Container';
+
+// This component's dependencies
+import Readme from './README.md';
+import Hidden from './';
+
+storiesOf('Dark Matter/Responsive/Hidden', module)
+  .addParameters({
+    readme: {
+      sidebar: Readme,
+    },
+  })
+  .add('Overview', () => (
+    <div>
+      <Container readOnly style={{ resize: 'both' }}>
+        <div>
+          <Hidden
+            responsiveContext={['container-xs-only', 'container-md-only']}
+          >
+            I&apos;ll disappear at certain sizes
+          </Hidden>
+        </div>
+      </Container>
+    </div>
+  ));

src/components/Responsive/Hidden/test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Context from '../Context';
+import Hidden from './';
+
+describe('<Hidden />', () => {
+  it('renders without error', () => {
+    mount(
+      <Hidden>
+        <span>Boom</span>
+      </Hidden>
+    );
+  });
+
+  it('hides by breakpoint', () => {
+    const wrapper = mount(
+      <Context.Provider
+        value={[
+          'container-sm-up',
+          'container-sm-only',
+          'container-sm-down',
+          'container-md-down',
+        ]}
+      >
+        <Hidden responsiveContext={['container-sm-down']}>
+          <span>Boom</span>
+        </Hidden>
+      </Context.Provider>
+    );
+
+    expect(wrapper.text()).toEqual('');
+  });
+
+  it("doesn't hide without breakpoint", () => {
+    const wrapper = mount(
+      <Context.Provider
+        value={[
+          'container-sm-up',
+          'container-sm-only',
+          'container-sm-down',
+          'container-md-down',
+        ]}
+      >
+        <Hidden responsiveContext={['container-md-up']}>
+          <span>Boom</span>
+        </Hidden>
+      </Context.Provider>
+    );
+
+    expect(wrapper.text()).toEqual('Boom');
+  });
+});

src/components/Responsive/Visible/README.md

@@ -0,0 +1,6 @@
+# Responsive.Visible
+
+**Shows contents based on container width.**
+
+When you use a `Responsive.Container`, it sets up a container width watcher with pre-defined breakpoints.
+You can use those breakpoints to show this component based on container width.

src/components/Responsive/Visible/index.js

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import intersection from 'lodash/intersection';
+
+import Context from '../Context';
+
+const Visible = ({
+  children,
+  responsiveContext: VisibleResponsiveContext,
+  ...passedProps
+}) => {
+  const getIsVisible = useCallback(
+    responsiveContext =>
+      !!intersection(VisibleResponsiveContext, responsiveContext).length,
+    [VisibleResponsiveContext]
+  );
+
+  return (
+    <Context.Consumer>
+      {responsiveContext => {
+        const visible = getIsVisible(responsiveContext);
+
+        return React.Children.map(children, child => {
+          if (!child || !visible) {
+            return null;
+          }
+
+          if (typeof child === 'string') {
+            return <span>{child}</span>;
+          }
+
+          return React.cloneElement(child, {
+            ...passedProps,
+          });
+        });
+      }}
+    </Context.Consumer>
+  );
+};
+
+Visible.propTypes = {
+  children: PropTypes.node,
+  container: PropTypes.string,
+  responsiveContext: PropTypes.arrayOf(PropTypes.string),
+};
+
+Visible.defaultProps = {
+  children: null,
+  container: null,
+  responsiveContext: [],
+};
+
+export default Visible;

src/components/Responsive/Visible/story.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// Rover UI dependencies
+import Container from '../Container';
+
+// This component's dependencies
+import Readme from './README.md';
+import Visible from './';
+
+storiesOf('Dark Matter/Responsive/Visible', module)
+  .addParameters({
+    readme: {
+      sidebar: Readme,
+    },
+  })
+  .add('Overview', () => (
+    <div>
+      <Container readOnly style={{ resize: 'both' }}>
+        <div>
+          <Visible
+            responsiveContext={['container-xs-only', 'container-md-only']}
+          >
+            I&apos;ll appear at certain sizes
+          </Visible>
+        </div>
+      </Container>
+    </div>
+  ));

src/components/Responsive/Visible/test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Context from '../Context';
+import Visible from './';
+
+describe('<Visible />', () => {
+  it('renders without error', () => {
+    mount(
+      <Visible>
+        <span>Boom</span>
+      </Visible>
+    );
+  });
+
+  it('shows by breakpoint', () => {
+    const wrapper = mount(
+      <Context.Provider
+        value={[
+          'container-sm-up',
+          'container-sm-only',
+          'container-sm-down',
+          'container-md-down',
+        ]}
+      >
+        <Visible responsiveContext={['container-sm-down']}>
+          <span>Boom</span>
+        </Visible>
+      </Context.Provider>
+    );
+
+    expect(wrapper.text()).toEqual('Boom');
+  });
+
+  it("doesn't show without breakpoint", () => {
+    const wrapper = mount(
+      <Context.Provider
+        value={[
+          'container-sm-up',
+          'container-sm-only',
+          'container-sm-down',
+          'container-md-down',
+        ]}
+      >
+        <Visible responsiveContext={['container-md-up']}>
+          <span>Boom</span>
+        </Visible>
+      </Context.Provider>
+    );
+
+    expect(wrapper.text()).toEqual('');
+  });
+});

src/components/Responsive/index.js

@@ -2,12 +2,14 @@ import Container from './Container';
 import Context from './Context';
 import Element from './Element';
 import Grid from './Grid';
+import Hidden from './Hidden';
 
 const Responsive = {
   Container,
   Context,
   Element,
   Grid,
+  Hidden,
 };
 
 export default Responsive;

src/stories/index.js

@@ -59,6 +59,8 @@ import '../components/Grid/story';
 import '../components/Media/story';
 import '../components/Responsive/story';
 import '../components/Responsive/Grid/story';
+import '../components/Responsive/Hidden/story';
+import '../components/Responsive/Visible/story';
 
 /*
  * NEW & UNCATEGORIZED