Update Provider mode and density site examples (#3883)

jpmorganchase · Aug 2, 2024 · 6583d24 · 6583d24
1 parent 4906584
commit 6583d24
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx
@@ -199,7 +199,7 @@ interface SaltProviderBaseProps {
   mode?: Mode;
   /**
    * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.
-   * Determins breakpoints used in responsive calulation for layout components.
+   * Determines breakpoints used in responsive calculation for layout components.
    */
   breakpoints?: Breakpoints;
   /**
@@ -291,7 +291,7 @@ function InternalSaltProvider({
       headingFont: headingFont,
       accent: accent,
       actionFont: actionFont,
-      // Backward compatilibty
+      // Backward compatibility
       UNSTABLE_corner: corner,
       UNSTABLE_headingFont: headingFont,
       UNSTABLE_accent: accent,

diff --git a/site/docs/components/salt-provider/index.mdx b/site/docs/components/salt-provider/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Salt provider
 data:
-  description: "`SaltProvider` is a required component used to change the theme, mode, density and breakpoints of your application."
+  description: "`SaltProvider` is a required component used to change the theme, mode, density and breakpoints of your application. Refer to the [getting started](/salt/getting-started/developing) page for a full step-by-step implementation guide."
 
   # Fill in the info from the content template's "Metadata" table below.
   # To omit optional items, comment them out with #

diff --git a/site/docs/getting-started/developing.mdx b/site/docs/getting-started/developing.mdx
@@ -108,7 +108,7 @@ If you prefer not to use Google Fonts or Fontsource, you can use any other metho
 
 ### 3. Integrate Salt into your app
 
-To integrate Salt into your project, import the CSS theme and Salt Provider component—and then wrap your application in it.
+To integrate Salt into your project, import the CSS theme and [Salt Provider](../components/salt-provider) component—and then wrap your application in it.
 
 For example, in a typical React project, you can do this in your `src/index.js` as follows:
 

diff --git a/site/src/examples/salt-provider/Density.tsx b/site/src/examples/salt-provider/Density.tsx
@@ -1,4 +1,11 @@
-import { StackLayout, Text, capitalize, useDensity } from "@salt-ds/core";
+import {
+  FlexLayout,
+  SaltProvider,
+  StackLayout,
+  Text,
+  capitalize,
+  useDensity,
+} from "@salt-ds/core";
 import type { ReactElement } from "react";
 import styles from "./Density.module.css";
 
@@ -10,14 +17,16 @@ export const Density = (): ReactElement => {
   const density = useDensity();
 
   return (
-    <div>
-      <Text>{capitalize(density)} Density</Text>
-      <StackLayout direction="row" className={styles.squares}>
-        <Square />
-        <Square />
-        <Square />
-        <Square />
-      </StackLayout>
-    </div>
+    <SaltProvider density={density}>
+      <FlexLayout direction="column">
+        <Text>{capitalize(density)} Density</Text>
+        <StackLayout direction="row" className={styles.squares}>
+          <Square />
+          <Square />
+          <Square />
+          <Square />
+        </StackLayout>
+      </FlexLayout>
+    </SaltProvider>
   );
 };
diff --git a/site/src/examples/salt-provider/Modes.tsx b/site/src/examples/salt-provider/Modes.tsx
@@ -1,8 +1,12 @@
-import { Card, capitalize, useTheme } from "@salt-ds/core";
+import { Card, SaltProvider, capitalize, useTheme } from "@salt-ds/core";
 import type { ReactElement } from "react";
 
 export const Modes = (): ReactElement => {
   const { mode } = useTheme();
 
-  return <Card style={{ minHeight: "unset" }}>{capitalize(mode)} mode</Card>;
+  return (
+    <SaltProvider mode={mode}>
+      <Card style={{ minHeight: "unset" }}>{capitalize(mode)} mode</Card>
+    </SaltProvider>
+  );
 };