docs: Various fixes for missing references and general clean-up (#1574)

.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/components/ButtonProps/index.js

@@ -18,6 +18,7 @@ export const ButtonProps = () => (
             options: [
               'ButtonColor.primary',
               'ButtonColor.secondary',
+              'ButtonColor.success',
               'ButtonColor.danger',
               'ButtonColor.marketing',
             ],

website/react-magma-docs/src/components/IconButtonProps/index.js

@@ -27,6 +27,7 @@ export function IconButtonProps() {
             options: [
               'ButtonColor.primary',
               'ButtonColor.secondary',
+              'ButtonColor.success',
               'ButtonColor.danger',
               'ButtonColor.marketing',
             ],

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

@@ -25,7 +25,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 An accordion is made up of four components: `Accordion`, `AccordionItem`, `AccordionButton` and `AccordionPanel`. The `Accordion` is the wrapper for all of the items. It can contain one or more `AccordionItems`, each of which should contain one `AccordionButton` and one `AccordionPanel`. An `AccordionButton` can be wrapped in an element with the role of heading (such as an h1-h6) to provide semantic structure to the document.
 
-By default, multiple items will can be expanded. The `defaultIndex` prop, which takes an array of zero-based indices, can be used to set panels open by default.
+By default, multiple items are expandable. The `defaultIndex` prop which takes a zero-based array can be used to set panels open by default.
 
 ```typescript
 import React from 'react';
@@ -38,7 +38,7 @@ import {
 
 export function Example() {
   return (
-    <Accordion defaultIndex={[0]}>
+    <Accordion isMulti defaultIndex={[1]}>
       <AccordionItem>
         <h3>
           <AccordionButton>Section 1</AccordionButton>

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

@@ -26,7 +26,7 @@ If you do not want to have your checkbox be in a controlled state, but need the
 <Link to="/api/indeterminate">Indeterminate Checkboxes</Link> are similar to standard
 checkboxes but with three available statuses.
 
-See also: <Link to="/api/radio">Radio Buttons</Link>, <Link to="/api/toggle">Toggle Switches</Link>, and the <Link to="/design/selection-controls">Design Guidelines</Link> for selection controls in general.
+See also: <Link to="/api/radio">Radio Buttons</Link> and <Link to="/api/toggle">Toggle Switches</Link>.
 
 ```tsx
 import React from 'react';

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

@@ -643,12 +643,12 @@ 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,8 +1042,9 @@ export function Example() {
     const { value } = item;
 
     return {
-      id: uuid(),
+      id: uuidv4(),
       name: value,
+      hex: item.hex,
       representation: value.charAt(0).toUpperCase() + value.slice(1),
     };
   }
@@ -1100,6 +1102,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,8 +1144,8 @@ export function Example() {
     const { value } = item;
 
     return {
-      id: uuid(),
-      name: value,
+      id: uuidv4(),
+      actual: value,
       representation: value.charAt(0).toUpperCase() + value.slice(1),
     };
   }
@@ -1272,7 +1275,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 +1294,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={new Date(2000, 1, 0)} />
   );
 }
 ```
@@ -65,8 +65,8 @@ export function Example() {
   const [chosenDate, setChosenDate] = React.useState<Date | undefined>(
     undefined
   );
-  const minDate = '01/09/2024';
-  const maxDate = '02/10/2024';
+  const minDate = new Date(2025, 1, 2);
+  const maxDate = new Date(2025, 1, 20);
 
   function handleDateChange(newChosenDate: Date) {
     setChosenDate(newChosenDate);
@@ -111,7 +111,7 @@ export function Example() {
     undefined
   );
 
-  function handleDateChange(newChosenDate: Date) {
+  function handleDateChange(newChosenDate: Date | null) {
     setChosenDate(newChosenDate);
   }
 
@@ -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
@@ -575,7 +575,7 @@ import {
 } from 'react-magma-dom';
 
 export function Example() {
-  const OptionalDropdownMenuItem = ({ toggle, dropdownMenuItemProps }) => {
+  const OptionalDropdownMenuItem = ({ toggle, ...dropdownMenuItemProps }) => {
     return toggle ? (
       <DropdownMenuItem {...dropdownMenuItemProps}>
         Hello There
@@ -614,6 +614,8 @@ export function Example() {
     </Dropdown>
   );
 }
+
+
 ```
 
 ### Leading Icons
@@ -752,6 +754,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" />
@@ -135,7 +132,7 @@ export function Example() {
 
 ```tsx
 import React from 'react';
-import { FormGroup, Checkbox, Toggle, Card, CardBody } from 'react-magma-dom';
+import { FormGroup, Checkbox, Card, CardBody } from 'react-magma-dom';
 
 export function Example() {
   return (

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,18 +112,20 @@ import React from 'react';
 import {
   Hyperlink,
   HyperlinkIconPosition,
+  magma,
   Spacer,
   SpacerAxis,
-  ButtonTextTransform,
+  Paragraph,
   Flex,
   FlexBehavior,
   FlexJustify,
+  TypographyVisualStyle,
 } from 'react-magma-dom';
 import {
   KeyboardArrowLeftIcon,
   KeyboardArrowRightIcon,
   CalendarTodayIcon,
-  OpenInNewIcon
+  OpenInNewIcon,
 } from 'react-magma-icons';
 
 export function Example() {