From a955d91e1c99f06790527ff5884392fdfe06a69b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 12 Jul 2022 12:31:09 -0400
Subject: [PATCH] feat(HelperClasses): add breakpoint helper classes

---
 .../Helpers/HelperClasses.stories.js          | 29 +++++++++++++
 .../scss/utilities/_helper-classes.scss       | 43 +++++++++++++++++++
 packages/styles/scss/utilities/_index.scss    |  1 +
 3 files changed, 73 insertions(+)
 create mode 100644 packages/react/src/components/Helpers/HelperClasses.stories.js
 create mode 100644 packages/styles/scss/utilities/_helper-classes.scss

diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js
new file mode 100644
index 000000000000..552e1fda442c
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_helper-classes.scss
new file mode 100644
index 000000000000..220fe6816d23
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss
index 21bbd53494b9..a8e369b99add 100644
--- a/packages/styles/scss/utilities/_index.scss
+++ b/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';