Add controls to segmented button stories (#79)

* Add controls to segmented button stories * Updated generateButtons() and added `selected` key to object.
US-CBP · Oct 5, 2023 · a216247 · a216247
1 parent d8397bd
commit a216247
Showing 1 changed file with 94 additions and 17 deletions.
diff --git a/packages/vanilla/src/components/segmented-button-group/segmented-button-group.stories.js b/packages/vanilla/src/components/segmented-button-group/segmented-button-group.stories.js
@@ -1,32 +1,43 @@
 export default {
   title: 'Patterns/Segmented Button Group',
-  argTypes: {},
+  argTypes: {
+    selection: {
+      name: 'Selection',
+      description: 'Choose whether a single or multiple selections are allowed.',
+      control: 'radio',
+      options: ['single', 'multi']
+    },
+  },
 };
 
-const SingleSelectTemplate = () => {
+
+function generateButtons(buttons) {
+  const html = buttons.map(({ label, value, selected, disabled}) => {
+    return `<button type="button" class="cbp-btn" value="${value}" ${selected==true ? 'aria-pressed="true"' : ''} ${disabled==true ? 'disabled' : ''}>${label}</button>`
+  })
+  return html.join("")
+};
+
+
+const SingleSelectTemplate = ( {buttons, selection} ) => {
   return `
-    <div class="cbp-btn--segment" data-segmented-button-type="single">
-      <button class="cbp-btn" type="button" value="sm">Small</button>
-      <button class="cbp-btn" type="button" value="md">Medium</button>
-      <button class="cbp-btn" type="button" value="lg">Large</button>
+    <div class="cbp-btn--segment" data-segmented-button-type="${selection}">
+      ${generateButtons(buttons)}
     </div>
   `;
 };
 
-const MultiSelectTemplate = () => {
+const MultiSelectTemplate = ({buttons, selection}) => {
   return `
-    <div class="cbp-btn--segment" data-segmented-button-type="multi">
-      <button class="cbp-btn" type="button" value="sauce">Sauce</button>
-      <button class="cbp-btn" type="button" value="cheese">Cheese</button>
-      <button class="cbp-btn" type="button" value="crust">Crust</button>
-      <button class="cbp-btn" type="button" value="toppings">Toppings</button>
+    <div class="cbp-btn--segment" data-segmented-button-type="${selection}">
+      ${generateButtons(buttons)}
     </div>
   `;
 };
 
-const IconSelectTemplate = () => {
+const IconSelectTemplate = ({buttons, selection}) => {
   return `
-    <div class="cbp-btn--segment" data-segmented-button-type="multi">
+    <div class="cbp-btn--segment" data-segmented-button-type="${selection}">
       <button class="cbp-btn-square" type="button" value="bold" aria-label="bold"><i class="fas fa-bold"></i></button>
       <button class="cbp-btn-square" type="button" value="italic" aria-label="italic"><i class="fas fa-italic"></i></button>
       <button class="cbp-btn-square" type="button" value="underline" aria-label="underline"><i class="fas fa-underline"></i></button>
@@ -40,10 +51,76 @@ const IconSelectTemplate = () => {
 };
 
 export const SingleSelect = SingleSelectTemplate.bind({});
-SingleSelect.args = {};
+SingleSelect.argTypes = {
+  buttons: {
+    name: 'Buttons',
+    description: 'Configure various aspects of the buttons within the segmented button group.',
+    control: 'object'
+  }
+}
+SingleSelect.args = {
+  buttons: [
+      {
+        label: "Small",
+        value: "sm",
+        selected: false,
+        disabled: false
+      },
+      {
+        label: "Medium",
+        value: "md",
+        selected: false,
+        disabled: false
+      },
+      {
+        label: "Large",
+        value: "lg",
+        selected: false,
+        disabled: false
+      }
+    ],
+  selection: "single"
+};
 
 export const MultiSelect = MultiSelectTemplate.bind({});
-MultiSelect.args = {};
+MultiSelect.argTypes = {
+  buttons: {
+    name: 'Buttons',
+    description: 'Configure various aspects of the buttons within the segmented button group.',
+    control: 'object'
+  }
+}
+MultiSelect.args = {
+  buttons: [
+    {
+      label: "Sauce",
+      value: "sauce",
+      selected: false,
+      disabled: false
+    },
+    {
+      label: "Cheese",
+      value: "cheese",
+      selected: false,
+      disabled: false
+    },
+    {
+      label: "Crust",
+      value: "crust",
+      selected: false,
+      disabled: false
+    },
+    {
+      label: "Toppings",
+      value: "toppings",
+      selected: false,
+      disabled: false
+    },
+  ],
+  selection: "multi"
+};
 
 export const IconSelect = IconSelectTemplate.bind({});
-IconSelect.args = {};
+IconSelect.args = {
+  selection: "multi"
+};