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

@@ -637,18 +637,18 @@ export function Example() {
 ## Async
 
 ```tsx
-import React from 'react';
-import { Combobox } from 'react-magma-dom';
+import React from "react";
+import { Combobox } from "react-magma-dom";
 
 export function Example() {
   const [isLoading, updateIsLoading] = React.useState<boolean>(false);
 
-  function loadItems(inputValue) {
-    return new Promise(resolve =>
+  function loadItems() {
+    return new Promise((resolve) =>
       resolve([
-        { label: 'Yellow', value: 'yellow' },
-        { label: 'Pink', value: 'pink' },
-        { label: 'Periwinkle', value: 'periwinkle' },
+        { label: "Yellow", value: "yellow" },
+        { label: "Pink", value: "pink" },
+        { label: "Periwinkle", value: "periwinkle" },
       ])
     );
   }
@@ -662,9 +662,9 @@ export function Example() {
 
     setTimeout(() => {
       updateIsLoading(false);
-      loadItems(inputValue).then(items => {
+      loadItems().then((items: any) => {
         setInputItems(
-          items.filter(item =>
+          items.filter((item) =>
             item.label.toLowerCase().startsWith(inputValue.toLowerCase())
           )
         );
@@ -678,9 +678,9 @@ export function Example() {
       labelText="Async"
       isLoading={isLoading}
       defaultItems={[
-        { label: 'Red', value: 'red' },
-        { label: 'Blue', value: 'blue' },
-        { label: 'Green', value: 'green' },
+        { label: "Red", value: "red" },
+        { label: "Blue", value: "blue" },
+        { label: "Green", value: "green" },
       ]}
       onInputValueChange={handleInputValueChange}
     />
@@ -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' },
@@ -1021,6 +1021,7 @@ custom `type`](/api/combobox#custom_items_typescript).
 ```tsx
 import React from 'react';
 import { Combobox } from 'react-magma-dom';
+import { v4 as uuidv4 } from "uuid";
 
 export function Example() {
   const [controlledSelectedItem, updateControlledSelectedItem] =
@@ -1041,7 +1042,7 @@ export function Example() {
     const { value } = item;
 
     return {
-      id: uuid(),
+      id: uuidv4(),
       name: value,
       representation: value.charAt(0).toUpperCase() + value.slice(1),
     };
@@ -1100,6 +1101,7 @@ element with the shape of the `items` you are passing in.
 ```tsx
 import React from 'react';
 import { Combobox } from 'react-magma-dom';
+import { v4 as uuidv4 } from "uuid";
 
 interface CustomComboboxItem {
   id: number;
@@ -1141,7 +1143,7 @@ export function Example() {
     const { value } = item;
 
     return {
-      id: uuid(),
+      id: uuidv4(),
       name: value,
       representation: value.charAt(0).toUpperCase() + value.slice(1),
     };
@@ -1272,7 +1274,7 @@ import { Combobox } from 'react-magma-dom';
 export function Example() {
   const [isLoading, updateIsLoading] = React.useState<boolean>(false);
 
-  function loadItems(inputValue) {
+  function loadItems() {
     return new Promise(resolve =>
       resolve([
         { label: 'Yellow', value: 'yellow' },
@@ -1291,7 +1293,7 @@ export function Example() {
 
     setTimeout(() => {
       updateIsLoading(false);
-      loadItems(inputValue).then(items => {
+      loadItems().then((items: any) => {
         setInputItems(
           items.filter(item =>
             item.label.toLowerCase().startsWith(inputValue.toLowerCase())

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

@@ -112,19 +112,21 @@ 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 (