From 6094f1982511d6e186dc1bfc8b0811a6f120ed17 Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Fri, 24 Jan 2025 14:23:38 -0500
Subject: [PATCH 1/3] Initial commit, broken link and styling fixes throughout
 doc site

---
 .changeset/fix-docs-links-and-styling.md                    | 5 +++++
 .../src/pages/api-intro/styles-and-themes.mdx               | 2 ++
 website/react-magma-docs/src/pages/api-intro/usage.mdx      | 2 +-
 website/react-magma-docs/src/pages/api/button.mdx           | 4 ++--
 website/react-magma-docs/src/pages/api/dropdown.mdx         | 2 +-
 website/react-magma-docs/src/pages/api/formgroup.mdx        | 2 +-
 website/react-magma-docs/src/pages/api/global-styles.mdx    | 2 +-
 website/react-magma-docs/src/pages/api/tooltip.mdx          | 6 ++++--
 website/react-magma-docs/src/pages/api/transition.mdx       | 4 ++--
 .../react-magma-docs/src/pages/design-intro/get-started.mdx | 2 +-
 website/react-magma-docs/src/pages/design/icon.mdx          | 4 +---
 11 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/fix-docs-links-and-styling.md

diff --git a/.changeset/fix-docs-links-and-styling.md b/.changeset/fix-docs-links-and-styling.md
new file mode 100644
index 000000000..fa47ef7a4
--- /dev/null
+++ b/.changeset/fix-docs-links-and-styling.md
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix: Repointed a few broken links and fixed some styling bugs throughout the examples.
diff --git a/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx b/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
index a8c78d5c1..74dec16a1 100644
--- a/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
+++ b/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
@@ -1025,6 +1025,7 @@ export function Example() {
                               aria-label="Right"
                               icon={<InfoIcon />}
                               isInverse
+                              style={{ marginLeft: magma.spaceScale.spacing03 }}
                               variant={ButtonVariant.link}
                             />
                           </Tooltip>
@@ -1047,6 +1048,7 @@ export function Example() {
                               aria-label="Right"
                               icon={<InfoIcon />}
                               isInverse
+                              style={{ marginLeft: magma.spaceScale.spacing03 }}
                               variant={ButtonVariant.link}
                             />
                           </Tooltip>
diff --git a/website/react-magma-docs/src/pages/api-intro/usage.mdx b/website/react-magma-docs/src/pages/api-intro/usage.mdx
index 1f334a884..987bb96d3 100644
--- a/website/react-magma-docs/src/pages/api-intro/usage.mdx
+++ b/website/react-magma-docs/src/pages/api-intro/usage.mdx
@@ -46,7 +46,7 @@ to insure consistency across products.
 
 To use the `GlobalStyles` object, simply import it from `react-magma-dom` and include it in your App.
 
-The `GlobalStyles` component can be nested inside the <Link to="/api/theme">ThemeContext.Provider</Link> to inherit styles from the theme.
+The `GlobalStyles` component can be nested inside the <Link to="/api-intro/styles-and-themes/#using_themes">ThemeContext.Provider</Link> to inherit styles from the theme.
 
 ```jsx noRender startExpanded
 import React from 'react';
diff --git a/website/react-magma-docs/src/pages/api/button.mdx b/website/react-magma-docs/src/pages/api/button.mdx
index 97c028134..bdb19b639 100644
--- a/website/react-magma-docs/src/pages/api/button.mdx
+++ b/website/react-magma-docs/src/pages/api/button.mdx
@@ -15,7 +15,7 @@ props:
 
 ## Basic Usage
 
-When using multiple buttons, they should be wrapped in a <Link to="/api/button-group">ButtonGroup</Link>.
+When using multiple buttons, they should be wrapped in a <Link to="/api/buttongroup">ButtonGroup</Link>.
 
 When used with icons, the Button component takes a slightly different set of props. For information on how to use this component with icons, please see documentation on <Link to="/api/icon-button">Icon Buttons</Link>.
 
@@ -205,7 +205,7 @@ export function Example() {
             Solid marketing inverse
           </Button>
         </ButtonGroup>
-        <ButtonGroup>
+        <ButtonGroup style={{ margin: magma.spaceScale.spacing03 }}>
           <Button variant={ButtonVariant.link} isInverse>
             Link inverse
           </Button>
diff --git a/website/react-magma-docs/src/pages/api/dropdown.mdx b/website/react-magma-docs/src/pages/api/dropdown.mdx
index b4c0534e2..630d8c682 100644
--- a/website/react-magma-docs/src/pages/api/dropdown.mdx
+++ b/website/react-magma-docs/src/pages/api/dropdown.mdx
@@ -31,7 +31,7 @@ The `DropdownButton` is a button that handles the opening and closing of the men
 
 The `DropdownContent` component contains the content that appears when the button is clicked. That content may contain individual menu items, represented in `DropdownMenuItem` components, or it may contain other markup.
 
-When using multiple dropdowns, they should be wrapped in a <Link to="/api/button-group">ButtonGroup</Link>.
+When using multiple dropdowns, they should be wrapped in a <Link to="/api/buttongroup">ButtonGroup</Link>.
 
 ```tsx
 import React from 'react';
diff --git a/website/react-magma-docs/src/pages/api/formgroup.mdx b/website/react-magma-docs/src/pages/api/formgroup.mdx
index 57bc3aaf8..8adb17fec 100644
--- a/website/react-magma-docs/src/pages/api/formgroup.mdx
+++ b/website/react-magma-docs/src/pages/api/formgroup.mdx
@@ -12,7 +12,7 @@ props:
   <Link to="/api/checkboxes">Checkbox</Link> and{' '}
   <Link to="/api/toggle">Toggle</Link> components. For{' '}
   <Link to="/api/radio">Radio Buttons</Link>, you should use the{' '}
-  <Link to="/api/radio/#labeling_radio%20groups">Radio Group</Link> component.
+  <Link to="/api/radio/#radio_group_props">Radio Group</Link> component.
 </LeadParagraph>
 
 ## Basic Usage
diff --git a/website/react-magma-docs/src/pages/api/global-styles.mdx b/website/react-magma-docs/src/pages/api/global-styles.mdx
index 4288dc047..998794ae5 100644
--- a/website/react-magma-docs/src/pages/api/global-styles.mdx
+++ b/website/react-magma-docs/src/pages/api/global-styles.mdx
@@ -13,7 +13,7 @@ title: Global Styles
 
 ## Usage
 
-The `GlobalStyles` component can be nested inside the <Link to="/api/theme">ThemeContext.Provider</Link> to inherit styles from the theme.
+The `GlobalStyles` component can be nested inside the <Link to="/api-intro/styles-and-themes/#using_themes">ThemeContext.Provider</Link> to inherit styles from the theme.
 
 ```tsx
 import React from 'react';
diff --git a/website/react-magma-docs/src/pages/api/tooltip.mdx b/website/react-magma-docs/src/pages/api/tooltip.mdx
index 10a771af0..cd46680c8 100644
--- a/website/react-magma-docs/src/pages/api/tooltip.mdx
+++ b/website/react-magma-docs/src/pages/api/tooltip.mdx
@@ -60,6 +60,8 @@ The `Tooltip` component takes a `position` property, that accepts the following
 ```tsx
 import React from 'react';
 import {
+  Flex,
+  FlexBehavior,
   Tooltip,
   EnumTooltipPosition,
   IconButton,
@@ -74,7 +76,7 @@ import {
 
 export function Example() {
   return (
-    <>
+    <Flex behavior={FlexBehavior.container} spacing={2}>
       <Tooltip position={EnumTooltipPosition.right} content="Tooltip right">
         <IconButton
           aria-label="Right"
@@ -106,7 +108,7 @@ export function Example() {
           variant={ButtonVariant.solid}
         />
       </Tooltip>
-    </>
+    </Flex>
   );
 }
 ```
diff --git a/website/react-magma-docs/src/pages/api/transition.mdx b/website/react-magma-docs/src/pages/api/transition.mdx
index decf1bad4..15395d1b8 100644
--- a/website/react-magma-docs/src/pages/api/transition.mdx
+++ b/website/react-magma-docs/src/pages/api/transition.mdx
@@ -86,7 +86,7 @@ The Nudge transitions (`nudgeLeft`, `nudgeRight`, `nudgeTop`, `nudgeBottom`) mov
 ```tsx
 import React from 'react';
 import styled from '@emotion/styled';
-import { Button, Transition } from 'react-magma-dom';
+import { Button, Card, CardBody, Transition } from 'react-magma-dom';
 
 export function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -99,7 +99,7 @@ export function Example() {
 
   return (
     <>
-      <Transition isOpen={isOpen} nudgeLeft>
+      <Transition isOpen={isOpen} nudgeLeft style={{ margin: '0 0 10px 50px' }}>
         <Box />
       </Transition>
       <Button onClick={() => setIsOpen(!isOpen)}>
diff --git a/website/react-magma-docs/src/pages/design-intro/get-started.mdx b/website/react-magma-docs/src/pages/design-intro/get-started.mdx
index 0ef628225..c71960b72 100644
--- a/website/react-magma-docs/src/pages/design-intro/get-started.mdx
+++ b/website/react-magma-docs/src/pages/design-intro/get-started.mdx
@@ -15,7 +15,7 @@ order: 1
 
 ## Designing with React Magma
 
-The React Magma team strives to provide detailed usage and style documentation. It's important to become familiar with this guidance when you are designing with our components. Consider starting with the foundations of [color](/design-intro/colors/), [typography](/design-intro/typography/), [spacing](/design-intro/spacing/), and [icons](/design-intro/icons/), and then continue with the components.
+The React Magma team strives to provide detailed usage and style documentation. It's important to become familiar with this guidance when you are designing with our components. Consider starting with the foundations of [color](/design-intro/colors/), [typography](/design-intro/typography/), [spacing](/design-intro/spacing/), and [icons](/design/icon/), and then continue with the components.
 
 We also welcome contributions from people outside the React Magma team. This includes both designers within Cengage as well as outside. Join us over on our [Github](https://github.com/cengage/react-magma) page to start contributing today.
 
diff --git a/website/react-magma-docs/src/pages/design/icon.mdx b/website/react-magma-docs/src/pages/design/icon.mdx
index 27c426095..b21b3105e 100644
--- a/website/react-magma-docs/src/pages/design/icon.mdx
+++ b/website/react-magma-docs/src/pages/design/icon.mdx
@@ -16,9 +16,7 @@ order: 2
 
 ## Icon Resources
 
-React Magma primarily uses the beautiful icons from Material Design. Specifically we use the [rounded variant](https://material.io/resources/icons/?style=round). We also have a group of custom icons when Material doesn't have what we need, but we take great care to design those icons with the same [principles](https://material.io/design/iconography/system-icons.html#design-principles) that Google does.
-
-We do our best to keep up with any updates that happen to Material Design's icons, and that includes updating the [Sketch icon library you can download](https://www.dropbox.com/sh/kt8oaf7am443794/AAArcOLft67q5Fk90wcXSmida?dl=0). If you are a designer at Cengage, and you are a current Abstract user, then you'll find the Sketch libraries there instead.
+React Magma primarily uses the beautiful icons from Material Design. Specifically we use the [rounded variant](https://material.io/resources/icons/?style=round). We also have a group of custom icons when Material doesn't have what we need, but we take great care to design those icons with the same [principles](https://material.io/design/iconography/system-icons.html#design-principles) that Google does. Cengage designers can find these icons built into the Figma component libraries.
 
 ---
 

From 2d472f6529c9310b9f92cc99fc89de07ed74ebf4 Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Fri, 24 Jan 2025 14:44:47 -0500
Subject: [PATCH 2/3] Link fix in Transition for motion

---
 website/react-magma-docs/src/pages/api/transition.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/react-magma-docs/src/pages/api/transition.mdx b/website/react-magma-docs/src/pages/api/transition.mdx
index 15395d1b8..5df74ba13 100644
--- a/website/react-magma-docs/src/pages/api/transition.mdx
+++ b/website/react-magma-docs/src/pages/api/transition.mdx
@@ -559,7 +559,7 @@ export function Example() {
 
 ## Transition Props
 
-**Any other props supplied will be provided to the wrapping [`motion.div`](https://www.framer.com/api/motion/component/) element.**
+**Any other props supplied will be provided to the wrapping [`motion.div`](https://motion.dev/) element.**
 
 <TransitionProps />
 

From bab5c8b6ee9cba744c157cf18abb70fe6bea7ef8 Mon Sep 17 00:00:00 2001
From: Chris Cedrone <chris.cedrone@cengage.com>
Date: Fri, 31 Jan 2025 09:26:31 -0500
Subject: [PATCH 3/3] Removing Card and CardBody inclusions in transition.mdx

---
 website/react-magma-docs/src/pages/api/transition.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/react-magma-docs/src/pages/api/transition.mdx b/website/react-magma-docs/src/pages/api/transition.mdx
index 5df74ba13..0be590372 100644
--- a/website/react-magma-docs/src/pages/api/transition.mdx
+++ b/website/react-magma-docs/src/pages/api/transition.mdx
@@ -86,7 +86,7 @@ The Nudge transitions (`nudgeLeft`, `nudgeRight`, `nudgeTop`, `nudgeBottom`) mov
 ```tsx
 import React from 'react';
 import styled from '@emotion/styled';
-import { Button, Card, CardBody, Transition } from 'react-magma-dom';
+import { Button, Transition } from 'react-magma-dom';
 
 export function Example() {
   const [isOpen, setIsOpen] = React.useState(false);