Added basic responsive utility components and classes

src-docs/src/routes.js

@@ -174,6 +174,9 @@ import { PortalExample }
 import { ProgressExample }
   from './views/progress/progress_example';
 
+  import { ResponsiveExample }
+    from './views/responsive/responsive_example';
+
 import { SearchBarExample }
   from './views/search_bar/search_bar_example';
 
@@ -341,6 +344,7 @@ const navigation = [{
   name: 'Utilities',
   items: [
     AccessibilityExample,
+    ResponsiveExample,
     DelayHideExample,
     ErrorBoundaryExample,
     HighlightExample,

src-docs/src/views/responsive/responsive.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {
+  EuiCode,
+  EuiHideFrom,
+  EuiShowFor,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiHideFrom sizes={['xs']}>
+      Hiding from <EuiCode>xs</EuiCode> screens only
+    </EuiHideFrom>
+    <br/>
+    <EuiHideFrom sizes={['xs','s']}>
+      Hiding from <EuiCode>xs, s</EuiCode> screens
+    </EuiHideFrom>
+    <br/>
+    <EuiHideFrom sizes={['xs','s','m']}>
+      Hiding from <EuiCode>xs, s, m</EuiCode> screens
+    </EuiHideFrom>
+    <br/>
+    <EuiHideFrom sizes={['l']}>
+      Hiding from <EuiCode>l</EuiCode> screens only
+    </EuiHideFrom>
+
+    <br/>
+    <br/>
+
+    <EuiShowFor sizes={['xs']}>
+      Showing for <EuiCode>xs</EuiCode> screens only
+    </EuiShowFor>
+    <br/>
+    <EuiShowFor sizes={['xs','s']}>
+      Showing for <EuiCode>xs, s</EuiCode> screens
+    </EuiShowFor>
+    <br/>
+    <EuiShowFor sizes={['xs','s','m']}>
+      Showing for <EuiCode>xs, s, m</EuiCode> screens
+    </EuiShowFor>
+    <br/>
+    <EuiShowFor sizes={['l']}>
+      Showing for <EuiCode>l</EuiCode> screen only
+    </EuiShowFor>
+  </div>
+);

src-docs/src/views/responsive/responsive_example.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiShowFor,
+  EuiHideFrom,
+} from '../../../../src/components';
+
+import Responsive from './responsive';
+const responsiveSource = require('!!raw-loader!./responsive');
+const responsiveHtml = renderToHtml(Responsive);
+
+export const ResponsiveExample = {
+  title: 'Responsive',
+  sections: [{
+    title: 'EuiShowFor and EuiHideFrom',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: responsiveSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: responsiveHtml,
+    }],
+    text: (
+      <p>
+        Pass an array of screen widths <EuiCode>[xs, s, m, l]</EuiCode> to either
+        the <EuiCode>EuiShowFor</EuiCode> or <EuiCode>EuiHideFrom</EuiCode> components
+        to make them responsive.
+      </p>
+    ),
+    props: { EuiShowFor, EuiHideFrom },
+    demo: <Responsive />,
+  }],
+};

src-docs/src/views/utility_classes/utility_classes.js

@@ -93,5 +93,26 @@ export default () => (
 
     <EuiCode className="eui-displayInlineBlock">.eui-displayInlineBlock</EuiCode>
 
+    <h4>Responsive</h4>
+
+    <EuiCode className="euiHideFrom--xsmall">.euiHideFrom--xsmall</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="euiHideFrom--small">.euiHideFrom--small</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="euiHideFrom--medium">.euiHideFrom--medium</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="euiHideFrom--large">.euiHideFrom--large</EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="euiShowFor--xsmall">.euiShowFor--xsmall</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="euiShowFor--small">.euiShowFor--small</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="euiShowFor--medium">.euiShowFor--medium</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="euiShowFor--large">.euiShowFor--large</EuiCode>
+
+
   </EuiText>
 );

src/components/index.js

@@ -307,3 +307,9 @@ export {
   EuiIconTip,
   EuiToolTip,
 } from './tool_tip';
+
+export {
+  EuiHideFrom,
+  EuiShowFor,
+} from './responsive';
+

src/components/responsive/__snapshots__/hide_from.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiHideFrom is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiHideFrom euiHideFrom--xsmall euiHideFrom--small euiHideFrom--medium euiHideFrom--large testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/responsive/__snapshots__/show_for.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiShowFor is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiShowFor euiShowFor--xsmall euiShowFor--small euiShowFor--medium euiShowFor--large testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/responsive/hide_from.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const responsiveSizesToClassNameMap = {
+  xs: 'euiHideFrom--xsmall',
+  s:  'euiHideFrom--small',
+  m:  'euiHideFrom--medium',
+  l:  'euiHideFrom--large',
+}
+
+const RESPONSIVE_SIZES = Object.keys(responsiveSizesToClassNameMap);
+
+export const EuiHideFrom = ({
+  children,
+  className,
+  sizes,
+  ...rest,
+}) => {
+
+  const sizingClasses = sizes.map(function(item){
+    return responsiveSizesToClassNameMap[item];
+  });
+
+  const classes = classNames(
+    'euiHideFrom',
+    sizingClasses,
+    className
+  );
+
+  return (
+    <span
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};
+
+EuiHideFrom.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * List of all the responsive sizes to hide the children from
+   */
+  sizes: PropTypes.arrayOf(PropTypes.oneOf(RESPONSIVE_SIZES)).isRequired,
+};

src/components/responsive/hide_from.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiHideFrom } from './hide_from';
+
+describe('EuiHideFrom', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiHideFrom sizes={['xs', 's', 'm', 'l']} {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});

src/components/responsive/index.js

@@ -0,0 +1,7 @@
+export {
+  EuiHideFrom,
+} from './hide_from';
+
+export {
+  EuiShowFor,
+} from './show_for';

src/components/responsive/show_for.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const responsiveSizesToClassNameMap = {
+  xs: 'euiShowFor--xsmall',
+  s:  'euiShowFor--small',
+  m:  'euiShowFor--medium',
+  l:  'euiShowFor--large',
+}
+
+const RESPONSIVE_SIZES = Object.keys(responsiveSizesToClassNameMap);
+
+export const EuiShowFor = ({
+  children,
+  className,
+  sizes,
+  ...rest,
+}) => {
+
+  const sizingClasses = sizes.map(function(item){
+    return responsiveSizesToClassNameMap[item];
+  });
+
+  const classes = classNames(
+    'euiShowFor',
+    sizingClasses,
+    className
+  );
+
+  return (
+    <span
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};
+
+EuiShowFor.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * List of all the responsive sizes to show the children for
+   */
+  sizes: PropTypes.arrayOf(PropTypes.oneOf(RESPONSIVE_SIZES)).isRequired,
+};

src/components/responsive/show_for.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiShowFor } from './show_for';
+
+describe('EuiShowFor', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiShowFor sizes={['xs', 's', 'm', 'l']} {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});

src/global_styling/utility/_utility.scss

@@ -40,3 +40,39 @@
   white-space: nowrap !important;
   word-wrap: normal !important; /* 2 */
 }
+
+/**
+ *  Responsive
+ *
+ *  3. Be sure to hide/show the element initially
+ */
+[class*="euiHideFrom"] {
+  display: initial !important; /* 3 */
+}
+[class*="euiShowFor"] {
+ display: none !important; /* 3 */
+}
+.euiHideFrom--xsmall {
+  @include screenXSmall() { display: none !important; }
+}
+.euiHideFrom--small {
+  @include screenSmall() { display: none !important; }
+}
+.euiHideFrom--medium {
+  @include screenMedium() { display: none !important; }
+}
+.euiHideFrom--large {
+  @include screenLarge() { display: none !important; }
+}
+.euiShowFor--xsmall {
+  @include screenXSmall() { display: initial !important; }
+}
+.euiShowFor--small {
+  @include screenSmall() { display: initial !important; }
+}
+.euiShowFor--medium {
+  @include screenMedium() { display: initial !important; }
+}
+.euiShowFor--large {
+  @include screenLarge() { display: initial !important; }
+}