From 6ca4ba28d213f24065b5188a660b99447804d4bf Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 19 Jul 2022 12:28:32 -0400
Subject: [PATCH] style(HelperMixins): renamed to helper mixins,
 hide-at-breakpoint

---
 .../Helpers/HelperClasses.stories.js          | 26 -----------
 .../HideAtBreakpoint-story.scss}              |  2 +-
 .../HideAtBreakpoint.stories.js               | 46 +++++++++++++++++++
 ...-classes.scss => _hide-at-breakpoint.scss} |  1 -
 packages/styles/scss/utilities/_index.scss    |  2 +-
 5 files changed, 48 insertions(+), 29 deletions(-)
 delete mode 100644 packages/react/src/components/Helpers/HelperClasses.stories.js
 rename packages/react/src/components/{Helpers/HelperClasses-story.scss => HideAtBreakpoint/HideAtBreakpoint-story.scss} (75%)
 create mode 100644 packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js
 rename packages/styles/scss/utilities/{_helper-classes.scss => _hide-at-breakpoint.scss} (99%)

diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js
deleted file mode 100644
index 8e452ebd5b84..000000000000
--- a/packages/react/src/components/Helpers/HelperClasses.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * 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.
- */
-
-import './HelperClasses-story.scss';
-import React from 'react';
-
-export default {
-  title: 'Helpers/BreakpointClasses',
-  component: BreakpointClasses,
-};
-
-export const BreakpointClasses = () => {
-  return (
-    <>
-      <div className="hide-at-sm">Only hidden on sm breakpoint</div>
-      <div className="hide-at-md">Only hidden on md breakpoint</div>
-      <div className="hide-at-lg">Only hidden on lg breakpoint</div>
-      <div className="hide-at-xlg">Only hidden on xlg breakpoint</div>
-      <div className="hide-at-max">Only hidden on max breakpoint</div>
-    </>
-  );
-};
diff --git a/packages/react/src/components/Helpers/HelperClasses-story.scss b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss
similarity index 75%
rename from packages/react/src/components/Helpers/HelperClasses-story.scss
rename to packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss
index a61808030fe7..a5d7f83777e8 100644
--- a/packages/react/src/components/Helpers/HelperClasses-story.scss
+++ b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss
@@ -1,4 +1,4 @@
-@use '../../../../styles/scss/utilities/helper-classes' as *;
+@use '../../../../styles/scss/utilities/hide-at-breakpoint' as *;
 
 .hide-at-sm {
   @include hide-at-sm;
diff --git a/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js
new file mode 100644
index 000000000000..d4d16683f595
--- /dev/null
+++ b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+import './HideAtBreakpoint-story.scss';
+import React from 'react';
+
+export default {
+  title: 'Helpers/HideAtBreakpoint',
+  component: HideAtBreakpoint,
+};
+
+export const HideAtBreakpoint = () => {
+  return (
+    <>
+      <div className="hide-at-sm">
+        <code>@include hide-at-sm</code> <br />
+        <br />
+        Only hidden on sm breakpoint
+      </div>
+      <div className="hide-at-md">
+        <code>@include hide-at-md</code> <br />
+        <br />
+        Only hidden on md breakpoint
+      </div>
+      <div className="hide-at-lg">
+        <code>@include hide-at-lg</code> <br />
+        <br />
+        Only hidden on lg breakpoint
+      </div>
+      <div className="hide-at-xlg">
+        <code>@include hide-at-xlg</code> <br />
+        <br />
+        Only hidden on xlg breakpoint
+      </div>
+      <div className="hide-at-max">
+        <code>@include hide-at-max</code> <br />
+        <br />
+        Only hidden on max breakpoint
+      </div>
+    </>
+  );
+};
diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_hide-at-breakpoint.scss
similarity index 99%
rename from packages/styles/scss/utilities/_helper-classes.scss
rename to packages/styles/scss/utilities/_hide-at-breakpoint.scss
index 60177b2d840e..59850cd1ab07 100644
--- a/packages/styles/scss/utilities/_helper-classes.scss
+++ b/packages/styles/scss/utilities/_hide-at-breakpoint.scss
@@ -3,7 +3,6 @@
 
 // Mixins that can be used to hide elements only at specific breakpoints.
 // Helpful for when you would like to hide elements outside of a Grid context
-
 @mixin hide-at-sm {
   padding: 2rem 1rem;
   background: #8a3ffc;
diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss
index a8e369b99add..67b33137817d 100644
--- a/packages/styles/scss/utilities/_index.scss
+++ b/packages/styles/scss/utilities/_index.scss
@@ -10,7 +10,7 @@
 @forward 'component-reset' as component-*;
 @forward 'convert' show em, rem;
 @forward 'focus-outline';
-@forward 'helper-classes';
+@forward 'hide-at-breakpoint';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
 @forward 'placeholder-colors';