FIxes > Various Docs site issues

.changeset/fix-docs-examples.md

@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix(Docs): Within the Docs site, these components have had fixes for missing references and general clean-up for CodeSandbox examples: Grid, Container, Stepper, Combobox, Hyperlink, IconButton, Toast, DatePicker, Dropdown, Form, FormGroup, useFocusLock

website/react-magma-docs/src/pages/api/combobox.mdx

@@ -944,7 +944,7 @@ import { Combobox, LabelPosition } from 'react-magma-dom';
 export function Example() {
   return (
     <Combobox
-      labelPosition={LabelPosition.top}
+      labelPosition={LabelPosition.left}
       labelText="Left-aligned label"
       defaultItems={[
         { label: 'Red', value: 'red' },

website/react-magma-docs/src/pages/api/container.mdx

@@ -23,7 +23,7 @@ import { Container, Heading, Hyperlink, Paragraph } from 'react-magma-dom';
 export function Example() {
   return (
     <Container>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>
@@ -43,7 +43,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom';
 export function Example() {
   return (
     <Container isInverse>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>
@@ -63,7 +63,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom';
 export function Example() {
   return (
     <Container isInverse maxWidth={600}>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>
@@ -83,7 +83,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom';
 export function Example() {
   return (
     <Container isInverse gutterWidth={80}>
-      <Heading level="3">Basic Container</Heading>
+      <Heading level={3}>Basic Container</Heading>
       <Paragraph>
         Paragraph with <Hyperlink to="#">hyperlink</Hyperlink>
       </Paragraph>

website/react-magma-docs/src/pages/api/date-pickers.mdx

@@ -34,7 +34,7 @@ import React from 'react';
 import { DatePicker } from 'react-magma-dom';
 
 export function Example() {
-  return <DatePicker defaultDate="07/23/2024" labelText="Date" />;
+  return <DatePicker defaultDate={new Date(2025, 1, 0)} labelText="Date" />;
 }
 ```
 
@@ -48,7 +48,7 @@ import { DatePicker } from 'react-magma-dom';
 
 export function Example() {
   return (
-    <DatePicker defaultDate="07/23/2024" labelText="Date" value="03/12/2024" />
+    <DatePicker defaultDate={new Date(2025, 1, 0)} labelText="Date" value="03/12/2024" />
   );
 }
 ```
@@ -187,7 +187,7 @@ export function Example() {
 
 ```tsx
 import React from 'react';
-import { DatePicker, Card, CardBody, magma } from 'react-magma-dom';
+import { DatePicker, Card, CardBody } from 'react-magma-dom';
 
 export function Example() {
   return (
@@ -352,7 +352,7 @@ export function Example() {
 
 ## Keyboard Navigation
 
-The `DatePicker` is keyboard navigable for allowing the user to navigate between days, weeks, and months. If you would like to see all of the options for keyboard navigation click on the `?` button in the bottom right corner of the `DatePicker` or press the `?` key.
+The `DatePicker` is keyboard navigable for allowing the user to navigate between days, weeks, and months. 
 
 ```tsx
 import React from 'react';

website/react-magma-docs/src/pages/api/dropdown.mdx

@@ -77,7 +77,7 @@ export function Example() {
 
   return (
     <Dropdown>
-      <DropdownSplitButton onClick={handleSplitButtonClick}>
+      <DropdownSplitButton aria-label="Split Button" onClick={handleSplitButtonClick}>
         Split Button
       </DropdownSplitButton>
       <DropdownContent>
@@ -465,7 +465,7 @@ export function Example() {
     <Dropdown width={240}>
       <DropdownButton>Expandable Items Dropdown</DropdownButton>
       <DropdownContent>
-        <DropdownExpandableMenuGroup defaultIndex={[0]}>
+        <DropdownExpandableMenuGroup isMulti defaultIndex={[0]}>
           <DropdownExpandableMenuItem>
             <DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
               Pasta
@@ -566,33 +566,37 @@ that returns a `DropdownMenuItem`.
 For a custom component you'll receive a `dropdownMenuItemProps` prop that you must spread in to the `DropdownMenuItem` component in your renderer.
 
 ```tsx
-import React from 'react';
+import React from "react";
 import {
   Dropdown,
   DropdownButton,
   DropdownContent,
   DropdownMenuItem,
-} from 'react-magma-dom';
+} from "react-magma-dom";
 
 export function Example() {
-  const OptionalDropdownMenuItem = ({ toggle, dropdownMenuItemProps }) => {
+  const showItem2 = true;
+
+  const OptionalDropdownMenuItem = ({
+    toggle,
+    children,
+    dropdownMenuItemProps,
+  }) => {
     return toggle ? (
-      <DropdownMenuItem {...dropdownMenuItemProps}>
-        Hello There
-      </DropdownMenuItem>
+      <DropdownMenuItem {...dropdownMenuItemProps}>{children}</DropdownMenuItem>
     ) : null;
   };
 
   function handleMenuItem1Click() {
-    alert('Item 1 clicked');
+    alert("Item 1 clicked");
   }
 
   function handleMenuItem2Click() {
-    alert('Item 2 clicked');
+    alert("Item 2 clicked");
   }
 
   function handleMenuItem3Click() {
-    alert('Item 3 clicked');
+    alert("Item 3 clicked");
   }
 
   return (
@@ -602,8 +606,11 @@ export function Example() {
         <DropdownMenuItem onClick={handleMenuItem1Click}>
           Menu item 1
         </DropdownMenuItem>
-        <OptionalDropdownMenuItem toggle onClick={handleMenuItem2Click}>
-          Menu item 2
+        <OptionalDropdownMenuItem
+          toggle={showItem2}
+          onClick={handleMenuItem2Click}
+        >
+          Menu item 2 (optional)
         </OptionalDropdownMenuItem>
         <div>
           <DropdownMenuItem onClick={handleMenuItem3Click}>
@@ -614,6 +621,7 @@ export function Example() {
     </Dropdown>
   );
 }
+
 ```
 
 ### Leading Icons
@@ -752,6 +760,7 @@ import {
   ButtonColor,
   ButtonSize,
   ButtonGroup,
+  ButtonVariant,
   Dropdown,
   DropdownButton,
   DropdownContent,

website/react-magma-docs/src/pages/api/form.mdx

@@ -103,7 +103,7 @@ export function Example() {
 }
 ```
 
-# Form Props
+## Form Props
 
 **Any other props supplied will be provided to the wrapping `form` element.**
 

website/react-magma-docs/src/pages/api/formgroup.mdx

@@ -69,12 +69,11 @@ export function Example() {
             Labelled by <i>label</i>
           </>
         }
-        name="labelledByGroup"
       >
         <Checkbox labelText="Label" />
         <Checkbox labelText="Label" />
       </FormGroup>
-      <FormGroup labelledById="h3Label" name="labelledByGroup">
+      <FormGroup labelledById="h3Label" >
         <Heading id="h3Label" level={3}>
           Labelled by H3
         </Heading>
@@ -100,7 +99,6 @@ export function Example() {
       containerStyle={{ border: '1px solid gray', padding: '10px' }}
       labelStyle={{ fontWeight: '500', color: 'red' }}
       labelText="Group label"
-      name="labelledByGroup"
     >
       <Checkbox labelText="Checkbox label" />
       <Checkbox labelText="Checkbox label" />
@@ -121,7 +119,6 @@ export function Example() {
   return (
     <FormGroup
       labelText="Group Label"
-      name="labelledByGroup"
       isTextVisuallyHidden
     >
       <Checkbox labelText="Checkbox label" />

website/react-magma-docs/src/pages/api/grid.mdx

@@ -20,7 +20,6 @@ Child elements can be added as they are, or inside of `<GridItem></GridItem>`. `
 
 ```typescript
 import React from 'react';
-import styled from '@emotion/styled';
 import {
   Grid,
   GridItem,
@@ -148,15 +147,15 @@ export function Example() {
 
 ```typescript
 import React from 'react';
-import { Grid, GridItem } from 'react-magma-dom';
+import { Grid, GridItem, gridAlignItems, GridJustifyContent } from 'react-magma-dom';
 
 export function Example() {
   return (
     <Grid
       gridTemplateColumns="repeat(4, 1fr)"
       gridGap="1em"
-      gridJustifyContent="center"
-      gridAlignItems="center"
+      gridJustifyContent={GridJustifyContent.center}
+      gridAlignItems={gridAlignItems.center}
     >
       <GridItem
         gridRow="1 / 4"

website/react-magma-docs/src/pages/api/hyperlink.mdx

@@ -108,23 +108,25 @@ export function Example() {
 ## Icon
 
 ```tsx
-import React from 'react';
+import React from "react";
 import {
   Hyperlink,
   HyperlinkIconPosition,
+  magma,
   Spacer,
   SpacerAxis,
-  ButtonTextTransform,
+  Paragraph,
   Flex,
   FlexBehavior,
   FlexJustify,
-} from 'react-magma-dom';
+  TypographyVisualStyle,
+} from "react-magma-dom";
 import {
   KeyboardArrowLeftIcon,
   KeyboardArrowRightIcon,
   CalendarTodayIcon,
-  OpenInNewIcon
-} from 'react-magma-icons';
+  OpenInNewIcon,
+} from "react-magma-icons";
 
 export function Example() {
   return (

website/react-magma-docs/src/pages/api/icon-button.mdx

@@ -382,16 +382,39 @@ import React from 'react';
 import {
   IconButton,
   ButtonVariant,
-  ButtonColor,
   ButtonGroup,
+  Card,
+  CardBody,
 } from 'react-magma-dom';
 import {
   PriorityHighIcon,
   NotificationsIcon,
-  Card,
-  CardBody,
 } from 'react-magma-icons';
 
+export function Example() {
+  return (
+    <Card isInverse>
+      <CardBody>
+        <ButtonGroup>
+          <IconButton
+            aria-label="Alert"
+            variant={ButtonVariant.solid}
+            icon={<PriorityHighIcon />}
+            isInverse
+          />
+          <IconButton
+            aria-label="Notifications"
+            variant={ButtonVariant.solid}
+            icon={<NotificationsIcon />}
+            isInverse
+          />
+        </ButtonGroup>
+      </CardBody>
+    </Card>
+  );
+}
+
+
 export function Example() {
   return (
     <Card isInverse>

website/react-magma-docs/src/pages/api/stepper.mdx

@@ -99,7 +99,7 @@ When using `layout` with `StepperLayout.summaryView`, the option to change the s
 
 ```typescript
 import React from 'react';
-import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom';
+import { Container, Stepper, Step, StepperLayout, Button, ButtonGroup } from 'react-magma-dom';
 
 export function Example() {
   const [currentStep, setCurrentStep] = React.useState(0);
@@ -161,13 +161,13 @@ export function Example() {
 }
 ```
 
-## Completed Step Description
+## Completion Label
 
-When using layout `StepperLayout.summaryView`, after all of the steps are complete, the `completedStepDescription` prop takes a string and changes the title.
+When using layout `StepperLayout.summaryView`, after all of the steps are complete, the `completionLabel` prop takes a string and changes the title.
 
 ```typescript
 import React from 'react';
-import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom';
+import { Container, Stepper, Step, StepperLayout, Button, ButtonGroup } from 'react-magma-dom';
 
 export function Example() {
   const [currentStep, setCurrentStep] = React.useState(4);
@@ -192,7 +192,7 @@ export function Example() {
     <>
       <Stepper
         ariaLabel="progress"
-        completedStepDescription="Steps Complete!"
+        completionLabel="Steps Complete!"
         layout={StepperLayout.summaryView}
         currentStep={currentStep}
       >

website/react-magma-docs/src/pages/api/toast.mdx

@@ -168,7 +168,7 @@ Toasts are intended to be small interruptions to users, so when a `Toast` compon
 read the new content. One way to do this is to use the <Link to="/api/announce">Announce component</Link>, which employs the `aria-live` attribute. Be sure to place
 the conditional logic to display the Toast _inside_ the Announce component.
 
-While toasts appear visually in centered at bottom of the screen, they will exist in the dom where ever they are placed. Keep this in mind when you are structuring your
+While toasts appear visually at the bottom left of the screen, they will exist in the dom wherever they are placed. Keep this in mind when you are structuring your
 markup, to ensure that they have the expected tab order.
 
 ```tsx

website/react-magma-docs/src/pages/api/use-focus-lock.mdx

@@ -85,7 +85,7 @@ If your container has no focusable elements you can pass a ref that is on an ele
 
 ```tsx codesandbox=magma
 import React from 'react';
-import { useFocusLock, Toggle, Input, Button, Heading } from 'react-magma-dom';
+import { useFocusLock, Toggle } from 'react-magma-dom';
 
 export function Example() {
   const bodyRef = React.useRef<HTMLDivElement>();