From 1f8b8fd6026d6cadc87263406c98c9202e5874ba Mon Sep 17 00:00:00 2001
From: Nasreddine Bac Ali <nasreddine.bacali95@gmail.com>
Date: Sun, 13 Mar 2022 12:36:23 +0100
Subject: [PATCH] feat: add Button group component

---
 public/images/button-group-dark.svg  |  10 +++
 public/images/button-group-light.svg |  10 +++
 src/Root.tsx                         |  10 ++-
 src/components/Button.tsx            |  19 +++-
 src/components/ButtonGroup.tsx       |  29 +++++++
 src/components/index.ts              |   1 +
 src/pages/ButtonGroupPage.tsx        | 124 +++++++++++++++++++++++++++
 src/pages/DashboardPage.tsx          |   6 ++
 8 files changed, 204 insertions(+), 5 deletions(-)
 create mode 100644 public/images/button-group-dark.svg
 create mode 100644 public/images/button-group-light.svg
 create mode 100644 src/components/ButtonGroup.tsx
 create mode 100644 src/pages/ButtonGroupPage.tsx

diff --git a/public/images/button-group-dark.svg b/public/images/button-group-dark.svg
new file mode 100644
index 000000000..930100393
--- /dev/null
+++ b/public/images/button-group-dark.svg
@@ -0,0 +1,10 @@
+<svg width="370" height="48" viewBox="0 0 370 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 11C3 6.58172 6.58172 3 11 3H124V45H11C6.58172 45 3 41.4183 3 37V11Z" fill="#1C64F2"/>
+    <rect x="25" y="17.5" width="77" height="13" rx="2" fill="white"/>
+    <line x1="123.5" y1="45.0664" x2="123.5" y2="3.00003" stroke="#1A56DB"/>
+    <rect width="121" height="42" transform="translate(124 3)" fill="#1C64F2"/>
+    <rect x="146" y="17.5" width="77" height="13" rx="2" fill="white"/>
+    <line x1="244.5" y1="45.0664" x2="244.5" y2="3.00003" stroke="#1A56DB"/>
+    <path d="M245 3H358C362.418 3 366 6.58172 366 11V37C366 41.4183 362.418 45 358 45H245V3Z" fill="#1C64F2"/>
+    <rect x="267" y="17.5" width="77" height="13" rx="2" fill="white"/>
+</svg>
diff --git a/public/images/button-group-light.svg b/public/images/button-group-light.svg
new file mode 100644
index 000000000..a2c301a83
--- /dev/null
+++ b/public/images/button-group-light.svg
@@ -0,0 +1,10 @@
+<svg width="370" height="48" viewBox="0 0 370 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 11C3 6.58172 6.58172 3 11 3H124V45H11C6.58172 45 3 41.4183 3 37V11Z" fill="#1A56DB"/>
+    <rect x="25" y="17.5" width="77" height="13" rx="2" fill="white"/>
+    <line x1="123.5" y1="45.0664" x2="123.5" y2="3.00003" stroke="#1E429F"/>
+    <rect width="121" height="42" transform="translate(124 3)" fill="#1A56DB"/>
+    <rect x="146" y="17.5" width="77" height="13" rx="2" fill="white"/>
+    <line x1="244.5" y1="45.0664" x2="244.5" y2="3.00003" stroke="#1E429F"/>
+    <path d="M245 3H358C362.418 3 366 6.58172 366 11V37C366 41.4183 362.418 45 358 45H245V3Z" fill="#1A56DB"/>
+    <rect x="267" y="17.5" width="77" height="13" rx="2" fill="white"/>
+</svg>
diff --git a/src/Root.tsx b/src/Root.tsx
index 50ef524a7..bd9842cdb 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -10,7 +10,7 @@ import {
   HiHome,
   HiMenuAlt1,
 } from 'react-icons/hi';
-import { BsGithub, BsImages } from 'react-icons/bs';
+import { BsCreditCard2FrontFill, BsGithub, BsImages } from 'react-icons/bs';
 import { FaSpinner } from 'react-icons/fa';
 import { Route, Routes } from 'react-router-dom';
 
@@ -22,6 +22,7 @@ const AccordionPage = lazy(() => import('./pages/AccordionPage'));
 const BadgesPage = lazy(() => import('./pages/BadgesPage'));
 const BreadcrumbPage = lazy(() => import('./pages/BreadcrumbPage'));
 const ButtonsPage = lazy(() => import('./pages/ButtonsPage'));
+const ButtonGroupPage = lazy(() => import('./pages/ButtonGroupPage'));
 const CardPage = lazy(() => import('./pages/CardPage'));
 const CarouselPage = lazy(() => import('./pages/CarouselPage'));
 const SpinnersPage = lazy(() => import('./pages/SpinnersPage'));
@@ -70,6 +71,12 @@ export const Root: FC = () => {
       {
         group: false,
         icon: HiDuplicate,
+        title: 'Button group',
+        href: '/button-group',
+      },
+      {
+        group: false,
+        icon: BsCreditCard2FrontFill,
         title: 'Card',
         href: '/card',
       },
@@ -133,6 +140,7 @@ export const Root: FC = () => {
               <Route path="badges" element={<BadgesPage />} />
               <Route path="breadcrumb" element={<BreadcrumbPage />} />
               <Route path="buttons" element={<ButtonsPage />} />
+              <Route path="button-group" element={<ButtonGroupPage />} />
               <Route path="card" element={<CardPage />} />
               <Route path="carousel" element={<CarouselPage />} />
               <Route path="spinners" element={<SpinnersPage />} />
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 2131b971e..5cc37f313 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -12,6 +12,7 @@ type GradientDuoTone =
   | 'tealToLime'
   | 'redToYellow';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type PositionInGroup = 'start' | 'middle' | 'end';
 
 export type ButtonProps = ComponentProps<'button'> & {
   pill?: boolean;
@@ -22,6 +23,7 @@ export type ButtonProps = ComponentProps<'button'> & {
   icon?: FC<ComponentProps<'svg'>>;
   gradientMonochrome?: GradientMonochrome;
   gradientDuoTone?: GradientDuoTone;
+  positionInGroup?: PositionInGroup;
 };
 
 const colorClasses: Record<Color, string> = {
@@ -88,6 +90,7 @@ const iconSizeClasses: Record<Size, string> = {
 
 export const Button: FC<ButtonProps> = ({
   children,
+  className,
   pill,
   outline,
   disabled = false,
@@ -96,30 +99,38 @@ export const Button: FC<ButtonProps> = ({
   color = 'blue',
   gradientMonochrome,
   gradientDuoTone,
+  positionInGroup,
   ...props
 }) => {
   return (
     <button
       disabled={disabled}
       className={classNames(
-        'group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium',
+        'group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
         pill ? 'rounded-full' : 'rounded-lg',
         !gradientMonochrome && !gradientDuoTone && colorClasses[color],
         !gradientDuoTone && gradientMonochrome && gradientMonochromeClasses[gradientMonochrome],
         gradientDuoTone && gradientDuoToneClasses[gradientDuoTone],
         {
+          'border border-gray-900 dark:border-white': color === 'alternative' && outline,
           'cursor-not-allowed opacity-50': disabled,
+          'focus:!ring-2': !!positionInGroup,
+          'rounded-r-none': positionInGroup === 'start',
+          'rounded-none border-l-0 pl-0': positionInGroup === 'middle',
+          'rounded-l-none border-l-0 pl-0': positionInGroup === 'end',
         },
+        className,
       )}
       type="button"
       {...props}
     >
       <span
-        className={classNames('flex items-center', sizeClasses[size], {
+        className={classNames('flex items-center', sizeClasses[size], outline && pill ? 'rounded-full' : 'rounded-md', {
           'bg-white text-gray-900 transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit dark:bg-gray-900 dark:text-white':
             outline,
-          'rounded-md': outline && !pill,
-          'rounded-full': outline && pill,
+          'rounded-r-none': positionInGroup === 'start',
+          'rounded-none': positionInGroup === 'middle',
+          'rounded-l-none': positionInGroup === 'end',
           [iconSizeClasses[size]]: !!Icon,
         })}
       >
diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
new file mode 100644
index 000000000..f45bb8c55
--- /dev/null
+++ b/src/components/ButtonGroup.tsx
@@ -0,0 +1,29 @@
+import { Children, cloneElement, FC, ReactElement, useMemo } from 'react';
+
+import { ButtonProps } from './Button';
+
+export type ButtonGroupProps = {
+  pill?: boolean;
+  outline?: boolean;
+};
+
+export const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) => {
+  const items = useMemo(
+    () =>
+      Children.map(children as ReactElement<ButtonProps>[], (child, index) =>
+        cloneElement(child, {
+          pill,
+          outline,
+          positionInGroup:
+            index === 0 ? 'start' : index === (children as ReactElement<ButtonProps>[]).length - 1 ? 'end' : 'middle',
+        }),
+      ),
+    [children, outline, pill],
+  );
+
+  return (
+    <div className="inline-flex" role="group">
+      {items}
+    </div>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 796f78d0f..90b68a927 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './Accordion';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './Button';
+export * from './ButtonGroup';
 export * from './Card';
 export * from './Carousel';
 export * from './DarkThemeToggle';
diff --git a/src/pages/ButtonGroupPage.tsx b/src/pages/ButtonGroupPage.tsx
new file mode 100644
index 000000000..8a7927e8b
--- /dev/null
+++ b/src/pages/ButtonGroupPage.tsx
@@ -0,0 +1,124 @@
+import { FC } from 'react';
+import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';
+
+import { CodeExample, DemoPage } from './DemoPage';
+import { Button, ButtonGroup } from '../components';
+
+const ButtonGroupPage: FC = () => {
+  const examples: CodeExample[] = [
+    {
+      title: 'Default example',
+      code: (
+        <ButtonGroup>
+          <Button color="alternative">Profile</Button>
+          <Button color="alternative">Settings</Button>
+          <Button color="alternative">Messages</Button>
+        </ButtonGroup>
+      ),
+    },
+    {
+      title: 'Group buttons with icons',
+      code: (
+        <ButtonGroup>
+          <Button color="alternative">
+            <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+          </Button>
+          <Button color="alternative">
+            <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+          </Button>
+          <Button color="alternative">
+            <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+          </Button>
+        </ButtonGroup>
+      ),
+    },
+    {
+      title: 'All colors',
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <ButtonGroup>
+            <Button color="blue">Profile</Button>
+            <Button color="blue">Settings</Button>
+            <Button color="blue">Messages</Button>
+          </ButtonGroup>
+          <ButtonGroup>
+            <Button gradientMonochrome="blue">Profile</Button>
+            <Button gradientMonochrome="blue">Settings</Button>
+            <Button gradientMonochrome="blue">Messages</Button>
+          </ButtonGroup>
+          <ButtonGroup>
+            <Button gradientDuoTone="greenToBlue">Profile</Button>
+            <Button gradientDuoTone="greenToBlue">Settings</Button>
+            <Button gradientDuoTone="greenToBlue">Messages</Button>
+          </ButtonGroup>
+        </div>
+      ),
+    },
+    {
+      title: 'Outline',
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <ButtonGroup outline>
+            <Button color="alternative">Profile</Button>
+            <Button color="alternative">Settings</Button>
+            <Button color="alternative">Messages</Button>
+          </ButtonGroup>
+          <ButtonGroup outline>
+            <Button gradientMonochrome="blue">Profile</Button>
+            <Button gradientMonochrome="blue">Settings</Button>
+            <Button gradientMonochrome="blue">Messages</Button>
+          </ButtonGroup>
+          <ButtonGroup outline>
+            <Button gradientDuoTone="cyanToBlue">Profile</Button>
+            <Button gradientDuoTone="cyanToBlue">Settings</Button>
+            <Button gradientDuoTone="cyanToBlue">Messages</Button>
+          </ButtonGroup>
+        </div>
+      ),
+    },
+    {
+      title: 'Outline with icons',
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <ButtonGroup outline>
+            <Button color="alternative">
+              <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+            </Button>
+            <Button color="alternative">
+              <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+            </Button>
+            <Button color="alternative">
+              <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup outline>
+            <Button gradientMonochrome="blue">
+              <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+            </Button>
+            <Button gradientMonochrome="blue">
+              <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+            </Button>
+            <Button gradientMonochrome="blue">
+              <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup outline>
+            <Button gradientDuoTone="cyanToBlue">
+              <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+            </Button>
+            <Button gradientDuoTone="cyanToBlue">
+              <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+            </Button>
+            <Button gradientDuoTone="cyanToBlue">
+              <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+            </Button>
+          </ButtonGroup>
+        </div>
+      ),
+    },
+  ];
+
+  return <DemoPage examples={examples} />;
+};
+
+export default ButtonGroupPage;
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 18051c460..b452f25dc 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -43,6 +43,12 @@ const DashboardPage: FC = () => {
       className: 'w-24',
       images: { light: 'buttons.svg', dark: 'buttons.svg' },
     },
+    {
+      title: 'Button group',
+      href: '/button-group',
+      className: 'w-56',
+      images: { light: 'button-group-light.svg', dark: 'button-group-dark.svg' },
+    },
     {
       title: 'Card',
       href: '/card',