style(HelperClasses): change from class to mixin

packages/react/src/components/Helpers/HelperClasses-story.scss

@@ -0,0 +1,21 @@
+@use '../../../../styles/scss/utilities/helper-classes' as *;
+
+.hide-at-sm {
+  @include hide-at-sm;
+}
+
+.hide-at-md {
+  @include hide-at-md;
+}
+
+.hide-at-lg {
+  @include hide-at-lg;
+}
+
+.hide-at-xlg {
+  @include hide-at-xlg;
+}
+
+.hide-at-max {
+  @include hide-at-max;
+}

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

@@ -5,35 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable no-console */
-
+import './HelperClasses-story.scss';
 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`}>
-        Only hidden on sm breakpoint
-      </div>
-      <div className={`${prefix}__hidden--md-only`}>
-        Only hidden on md breakpoint
-      </div>
-      <div className={`${prefix}__hidden--lg-only`}>
-        Only hidden on lg breakpoint
-      </div>
-      <div className={`${prefix}__hidden--xlg-only`}>
-        Only hidden on xlg breakpoint
-      </div>
-      <div className={`${prefix}__hidden--max-only`}>
-        Only hidden on max breakpoint
-      </div>
+      <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>
     </>
   );
 };

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

@@ -1,41 +1,43 @@
 @use '../breakpoint' as *;
 @use '../config';
 
-div[class*='hidden--'] {
-  padding: 2rem 1rem;
-}
+// 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
 
-// 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 {
+@mixin hide-at-sm {
+  padding: 2rem 1rem;
   background: #8a3ffc;
   @include breakpoint-between('sm', 'md') {
     display: none;
   }
 }
 
-.#{config.$prefix}__hidden--md-only {
+@mixin hide-at-md {
+  padding: 2rem 1rem;
   background: #4589ff;
   @include breakpoint-between('md', 'lg') {
     display: none;
   }
 }
 
-.#{config.$prefix}__hidden--lg-only {
+@mixin hide-at-lg {
+  padding: 2rem 1rem;
   background: #42be65;
   @include breakpoint-between('lg', 'xlg') {
     display: none;
   }
 }
 
-.#{config.$prefix}__hidden--xlg-only {
+@mixin hide-at-xlg {
+  padding: 2rem 1rem;
   background: #f1c21b;
   @include breakpoint-between('xlg', 'max') {
     display: none;
   }
 }
 
-.#{config.$prefix}__hidden--max-only {
+@mixin hide-at-max {
+  padding: 2rem 1rem;
   background: #da1e28;
   @include breakpoint-up('max') {
     display: none;