v5.2.3 (#612)

* Add storybook case for ButtonGroup

* v5.2.3

Author: kapantzak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/button/button.stories.js

@@ -1,5 +1,5 @@
-import React, { useState } from "react"
-import { Button, IconButton, ButtonGroup } from "."
+import React from "react"
+import { Button, IconButton } from "."
 import { iconsList } from "@/components/icon"
 
 const icons = Object.keys(iconsList)
@@ -17,26 +17,6 @@ export const BaseIconButton = args => (
   />
 )
 
-const radioButtonItems = [
-  { label: "One", value: 1 },
-  { label: "Two", value: 2 },
-  { label: "Three", value: 3 },
-]
-
-export const RadioButtonGroup = args => {
-  const [checked, setChecked] = useState(1)
-  const onChange = value => setChecked(value)
-
-  return (
-    <ButtonGroup
-      items={radioButtonItems.map(item => ({ ...args, ...item }))}
-      checked={checked}
-      buttonProps={args}
-      onChange={onChange}
-    />
-  )
-}
-
 export default {
   component: Button,
   tags: ["autodocs"],

src/components/button/buttonGroup.js

@@ -1,4 +1,4 @@
-import React, { Children, isValidElement, cloneElement } from "react"
+import React, { Children, isValidElement, cloneElement, useCallback } from "react"
 import Flex from "@/components/templates/flex"
 import { Button } from "./button"
 
@@ -30,24 +30,28 @@ const Content = ({ children }) => {
   )
 }
 
-const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => (
-  <>
-    {items.map(({ label, value, title }, index) => {
-      const buttonGroupProps = getButtonGroupProps(index, items.length)
-      return (
-        <Button
-          key={value}
-          label={label}
-          onClick={() => onChange(value)}
-          {...(title ? { title } : {})}
-          {...(checked != value ? { flavour: "hollow" } : {})}
-          {...buttonGroupProps}
-          {...buttonProps}
-        />
-      )
-    })}
-  </>
-)
+const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => {
+  return (
+    <>
+      {items.map(({ label, value, title }, index) => {
+        const buttonGroupProps = getButtonGroupProps(index, items.length)
+        const isChecked = checked === value || (Array.isArray(checked) && checked.includes(value))
+
+        return (
+          <Button
+            key={value}
+            label={label}
+            onClick={() => onChange(value)}
+            {...(title ? { title } : {})}
+            {...(!isChecked ? { flavour: "hollow" } : {})}
+            {...buttonGroupProps}
+            {...buttonProps}
+          />
+        )
+      })}
+    </>
+  )
+}
 
 export const ButtonGroup = ({ items, checked, onChange, children, buttonProps, ...props }) => (
   <Flex alignItems="center" {...props}>

src/components/button/buttonGroup.stories.js

@@ -0,0 +1,55 @@
+import React, { useCallback, useState } from "react"
+import { ButtonGroup } from "."
+
+export const RadioButtonGroup = args => {
+  const [checked, setChecked] = useState(args.checked)
+
+  return (
+    <ButtonGroup
+      items={args.items.map(item => ({ ...item }))}
+      checked={checked}
+      buttonProps={args}
+      onChange={setChecked}
+    />
+  )
+}
+
+export const MultiButtonGroup = args => {
+  const [checked, setChecked] = useState([args.checked])
+
+  const onChange = useCallback(
+    value => {
+      setChecked(prev => {
+        if (prev.includes(value)) return prev.filter(v => v !== value)
+        return [...prev, value]
+      })
+    },
+    [setChecked]
+  )
+
+  return (
+    <ButtonGroup
+      items={args.items.map(item => ({ ...item }))}
+      checked={checked}
+      buttonProps={args}
+      onChange={onChange}
+    />
+  )
+}
+
+export default {
+  component: ButtonGroup,
+  tags: ["autodocs"],
+  args: {
+    items: [
+      { label: "One", value: 1 },
+      { label: "Two", value: 2 },
+      { label: "Three", value: 3 },
+    ],
+    checked: 1,
+    buttonProps: {},
+  },
+  argTypes: {
+    checked: { control: "text" },
+  },
+}