style(HelperMixins): renamed to helper mixins, hide-at-breakpoint

carbon-design-system · Jul 19, 2022 · 6ca4ba2 · 6ca4ba2
1 parent b586d9f
commit 6ca4ba2
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 29 deletions.
diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js
diff --git a/...mponents/Helpers/HelperClasses-story.scss → ...eAtBreakpoint/HideAtBreakpoint-story.scss b/...mponents/Helpers/HelperClasses-story.scss → ...eAtBreakpoint/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
@@ -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/...tyles/scss/utilities/_helper-classes.scss → ...s/scss/utilities/_hide-at-breakpoint.scss b/...tyles/scss/utilities/_helper-classes.scss → ...s/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
@@ -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';