From 00c3c229a96a89c5919baf9078816d3fc97e49d7 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@protonmail.com>
Date: Fri, 16 Sep 2022 15:34:41 -0500
Subject: [PATCH] docs(grid): updated with API docs and example (#3136)

* docs(grid): updated with API docs and example

* docs(grid): better description

* docs(grid): progressive disclosure and helpers
---
 .../guidelines/2x-grid/implementation.mdx     | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx
index fa38493cf05..ef8e0be4b48 100644
--- a/src/pages/guidelines/2x-grid/implementation.mdx
+++ b/src/pages/guidelines/2x-grid/implementation.mdx
@@ -30,6 +30,7 @@ guide to start building.
 <AnchorLink>Incorporating the shell</AnchorLink>
 <AnchorLink>Alignments</AnchorLink>
 <AnchorLink>Techniques</AnchorLink>
+<AnchorLink>API & Helpers</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
 
 </AnchorLinks>
@@ -1343,6 +1344,39 @@ Image size can change ratios when the breakpoint changes.
   </DoDont>
 </DoDontRow>
 
+## API & Helpers
+
+There are many ways to make the 2x Grid work for your application using our API.
+The example below illustrates removing visibility of a given component based on
+the maximum width of the `md` breakpoint.
+
+```css
+.component {
+  display: inline;
+
+  /* applies styles inside mixin on md breakpoint or below, like max-width */
+  @include carbon--breakpoint-down('md') {
+    display: none;
+  }
+}
+```
+
+In addition, you can also use Helpers to control what is being displayed on the
+screen at a given breakpoint.
+
+```css
+@use '@carbon/styles/scss/utilities/helper-classes';
+
+.my-class {
+  @include helper-classes.hide-at-sm();
+}
+```
+
+Checkout the [resources](#resources) section for links to
+[the helpers on storybook](https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint)
+and the full
+[API list on Github](https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api).
+
 ## Resources
 
 <Row className="resource-card-group">
@@ -1374,6 +1408,26 @@ Image size can change ratios when the breakpoint changes.
 
 <MdxIcon name="bee" />
 
+  </ResourceCard>
+  </Column>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Carbon grid docs API"
+      href="https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api"
+    >
+
+<MdxIcon name="github" />
+
+  </ResourceCard>
+  </Column>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Hide at Breakpoint Helpers on Storybook"
+      href="https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint"
+    >
+
+<MdxIcon name="storybook" />
+
   </ResourceCard>
   </Column>
 </Row>