Merge pull request #702 from WestpacGEL/fixes/removing-children-map

Fixes/removing some cloneElements/Children.map
WestpacGEL · Jan 31, 2024 · 782a8de · 782a8de
2 parents e8da3f8 + 2e500e4
commit 782a8de
Show file tree

Hide file tree

Showing 43 changed files with 1,047 additions and 697 deletions.
diff --git a/...t/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc b/...t/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
@@ -51,17 +51,23 @@ The button dropdown menus come in three sizes or widths. They are triggered by t
 <div className="flex gap-1">
   <ButtonDropdown text="Checkboxes" look="primary">
     <ButtonDropdownHeading>Checkboxes</ButtonDropdownHeading>
-    <CheckboxGroup defaultValue={['Option 1']}>
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-    </CheckboxGroup>
+    <CheckboxGroup 
+      defaultValue={['Option 1']}
+      checkboxes={[
+        { value: "Option 1", label: "Option 1" },
+        { value: "Option 2", label: "Option 2" },
+        { value: "Option 3", label: "Option 3" },
+      ]}
+    />
     <ButtonDropdownHeading>Options</ButtonDropdownHeading>
-    <CheckboxGroup defaultValue={['Option 1']}>
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-    </CheckboxGroup>
+    <CheckboxGroup 
+      defaultValue={['Option 1']}
+      checkboxes={[
+        { value: "Option 1", label: "Option 1" },
+        { value: "Option 2", label: "Option 2" },
+        { value: "Option 3", label: "Option 3" },
+      ]}
+    />
   </ButtonDropdown>
 
   <ButtonDropdown text="Switches" look="primary">

diff --git a/.../src/content/design-system/components/button-group/code/development-examples/content.mdoc b/.../src/content/design-system/components/button-group/code/development-examples/content.mdoc
@@ -1,11 +1,14 @@
 ### ButtonGroup sizes
 
 ```jsx
-<ButtonGroup>
-  <ButtonGroupButton value="Left">Left</ButtonGroupButton>
-  <ButtonGroupButton value="Middle">Middle</ButtonGroupButton>
-  <ButtonGroupButton value="Right">Right</ButtonGroupButton>
-</ButtonGroup>
+<ButtonGroup 
+  buttons={[
+    { value: "Left", label: "Left"}, 
+    { value: "Middle", label: "Middle" }, 
+    { value: "Right", label: "Right"}
+  ]} 
+/>
+
 ```
 
 ### ButtonGroup looks
@@ -15,19 +18,21 @@
   <ButtonGroup
     defaultValue={0}
     label={<p className="typography-body-10 text-muted italic mb-[0.875rem]">Index (integer)</p>}
-  >
-    <ButtonGroupButton value={0}>Left</ButtonGroupButton>
-    <ButtonGroupButton value={1}>Middle</ButtonGroupButton>
-    <ButtonGroupButton value={2}>Right</ButtonGroupButton>
-  </ButtonGroup>
+    buttons={[
+      { value: 0, label: "Left" }, 
+      { value: 1, label: "Middle" }, 
+      { value: 2, label: "Right"}
+    ]}
+  />
   <ButtonGroup
     defaultValue="right"
     label={<p className="typography-body-10 text-muted italic mb-[0.875rem]">Key (string)</p>}
-  >
-    <ButtonGroupButton value="left">Left</ButtonGroupButton>
-    <ButtonGroupButton value="middle">Middle</ButtonGroupButton>
-    <ButtonGroupButton value="right">Right</ButtonGroupButton>
-  </ButtonGroup>
+    buttons={[
+      { value: "left", label: "Left" }, 
+      { value: "middle", label: "Middle" }, 
+      { value: "right", label: "Right"}
+    ]}
+  />
 </div>
 ```
 
@@ -53,11 +58,15 @@
           reset
         </Button>
       </div>
-      <ButtonGroup look="hero" value={controlled}>
-        <ButtonGroupButton value="yes">Yes</ButtonGroupButton>
-        <ButtonGroupButton value="maybe">Maybe</ButtonGroupButton>
-        <ButtonGroupButton value="no">No</ButtonGroupButton>
-      </ButtonGroup>
+      <ButtonGroup 
+        look="hero" 
+        value={controlled}
+        buttons={[
+          { value: "yes", label: "Yes"}, 
+          { value: "maybe", label: "Maybe" }, 
+          { value: "no", label: "No"}
+        ]}
+      />
     </div>
   );
 };

diff --git a/.../site/src/content/design-system/components/button-group/design/button-groups/content.mdoc b/.../site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
@@ -2,49 +2,72 @@
 
 ```tsx
 <div className="grid gap-3">
-  <ButtonGroup size="small">
-    <ButtonGroupButton value="sm">Sm - 30px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup size="medium">
-    <ButtonGroupButton value="md">Md - 36px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup size="large">
-    <ButtonGroupButton value="lg">Lg - 42px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup size="xlarge">
-    <ButtonGroupButton value="xl">Xl - 48px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
+  <ButtonGroup 
+    size="small"
+    buttons={[
+      { value: "sm", label: "Sm - 30px"}, 
+      { value: "Label", label: "Label" }
+    ]}
+  />
+  <ButtonGroup 
+    size="medium"
+    buttons={[
+      { value: "md", label: "Md - 36px"}, 
+      { value: "Label", label: "Label" }
+    ]}
+    />
+  <ButtonGroup 
+    size="large"
+    buttons={[
+      { value: "lg", label: "Lg - 42px"}, 
+      { value: "Label", label: "Label" }
+    ]}
+  />
+  <ButtonGroup 
+    size="xlarge"
+    buttons={[
+      { value: "xl", label: "Xl - 48px"}, 
+      { value: "Label", label: "Label" }
+    ]}
+  />
 </div>
 ```
 
 **Multiple items:** We recommend only using up to 3 items in a button group, any more can become too difficult to scan and can become problematic at smaller viewports. Is also best to keep the labels short.
 
 ```tsx
 <div className="grid gap-3">
-  <ButtonGroup look="hero">
-    <ButtonGroupButton value="Yes">Yes</ButtonGroupButton>
-    <ButtonGroupButton value="No">No</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup look="hero">
-    <ButtonGroupButton value="Email">Email</ButtonGroupButton>
-    <ButtonGroupButton value="Phone">Phone</ButtonGroupButton>
-    <ButtonGroupButton value="SMS">SMS</ButtonGroupButton>
-  </ButtonGroup>
+  <ButtonGroup 
+    look="hero"
+    buttons={[
+      { value: "Yes", label: "Yes"}, 
+      { value: "No", label: "No" }
+    ]}
+  />
+
+  <ButtonGroup 
+    look="hero"
+    buttons={[
+      { value: "Email", label: "Email"}, 
+      { value: "Phone", label: "Phone" },
+      { value: "SMS", label: "SMS" }
+    ]}
+  />
 </div>
 ```
 
 **Block level:** Using block level button groups will allow the group to stretch the full width of the view port. This is useful for smaller viewports.
 
 ```jsx
 <div className="grid gap-3">
-  <ButtonGroup look="hero" block>
-    <ButtonGroupButton value="Email">Email</ButtonGroupButton>
-    <ButtonGroupButton value="Phone">Phone</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
+  <ButtonGroup 
+    look="hero" 
+    block
+    buttons={[
+      { value: "Email", label: "Email"}, 
+      { value: "Phone", label: "Phone" },
+      { value: "SMS", label: "SMS" }
+    ]}
+  />
 </div>
 ```