feat(HelperClasses): add breakpoint helper classes

packages/react/src/components/Helpers/HelperClasses.stories.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+import { usePrefix } from '../../internal/usePrefix';
+
+export default {
+  title: 'Helpers/BreakpointClasses',
+  component: BreakpointClasses,
+};
+
+export const BreakpointClasses = () => {
+  const prefix = usePrefix();
+  return (
+    <>
+      <div className={`${prefix}__hidden--sm-only`}>Small Only</div>
+      <div className={`${prefix}__hidden--md-only`}>Medium Only</div>
+      <div className={`${prefix}__hidden--lg-only`}>Large Only</div>
+      <div className={`${prefix}__hidden--xlg-only`}>XL Only</div>
+      <div className={`${prefix}__hidden--max-only`}>Max Only</div>
+    </>
+  );
+};

packages/styles/scss/utilities/_helper-classes.scss

@@ -0,0 +1,43 @@
+@use '../breakpoint' as *;
+@use '../config';
+
+div[class*='hidden--'] {
+  padding: 2rem 1rem;
+}
+
+// Classes that are used to hide elements only at specific breakpoints.
+// Helpful for when you would like to hide elements outside of a Grid
+.#{config.$prefix}__hidden--sm-only {
+  background: #8a3ffc;
+  @include breakpoint-between('sm', 'md') {
+    display: none;
+  }
+}
+
+.#{config.$prefix}__hidden--md-only {
+  background: #4589ff;
+  @include breakpoint-between('md', 'lg') {
+    display: none;
+  }
+}
+
+.#{config.$prefix}__hidden--lg-only {
+  background: #42be65;
+  @include breakpoint-between('lg', 'xlg') {
+    display: none;
+  }
+}
+
+.#{config.$prefix}__hidden--xlg-only {
+  background: #f1c21b;
+  @include breakpoint-between('xlg', 'max') {
+    display: none;
+  }
+}
+
+.#{config.$prefix}__hidden--max-only {
+  background: #da1e28;
+  @include breakpoint-up('max') {
+    display: none;
+  }
+}

packages/styles/scss/utilities/_index.scss

@@ -10,6 +10,7 @@
 @forward 'component-reset' as component-*;
 @forward 'convert' show em, rem;
 @forward 'focus-outline';
+@forward 'helper-classes';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
 @forward 'placeholder-colors';