From 55f1e2a5bb0455af36c181247e063a05c8172551 Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Wed, 2 Aug 2023 13:01:47 +0800
Subject: [PATCH] In storybook, I see a ButtonIconGroup component (#1039)

Add ButtonIconGroup storybook components

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
---
 .../ui/button/components/IconButtonGroup.tsx  | 35 ++++++++++++
 .../__stories__/IconButtonGroup.stories.tsx   | 57 +++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 front/src/modules/ui/button/components/IconButtonGroup.tsx
 create mode 100644 front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx

diff --git a/front/src/modules/ui/button/components/IconButtonGroup.tsx b/front/src/modules/ui/button/components/IconButtonGroup.tsx
new file mode 100644
index 0000000000..d5fd8d5337
--- /dev/null
+++ b/front/src/modules/ui/button/components/IconButtonGroup.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { IconButtonSize, IconButtonVariant } from './IconButton';
+const StyledIconButtonGroupContainer = styled.div`
+  align-items: flex-start;
+  background: ${({ theme }) => theme.background.transparent.primary};
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+type IconButtonGroupProps = {
+  variant: IconButtonVariant;
+  size: IconButtonSize;
+  children: React.ReactElement[];
+};
+
+export function IconButtonGroup({
+  children,
+  variant,
+  size,
+}: IconButtonGroupProps) {
+  return (
+    <StyledIconButtonGroupContainer>
+      {React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+          ...(variant ? { variant } : {}),
+          ...(size ? { size } : {}),
+        }),
+      )}
+    </StyledIconButtonGroupContainer>
+  );
+}
diff --git a/front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx b/front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx
new file mode 100644
index 0000000000..d7a16768a1
--- /dev/null
+++ b/front/src/modules/ui/button/components/__stories__/IconButtonGroup.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from '@tabler/icons-react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { IconButton } from '../IconButton';
+import { IconButtonGroup } from '../IconButtonGroup';
+
+const meta: Meta<typeof IconButtonGroup> = {
+  title: 'UI/Button/IconButtonGroup',
+  component: IconButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButtonGroup>;
+
+const args = {
+  children: [
+    <IconButton icon={<IconBell />} />,
+    <IconButton icon={<IconBell />} />,
+  ],
+};
+
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args,
+  argTypes: {
+    size: { control: false },
+    variant: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'variants',
+          values: ['transparent', 'border', 'shadow', 'white'],
+          props: (variant: string) => ({
+            variant,
+          }),
+        },
+        {
+          name: 'sizes',
+          values: ['large', 'medium', 'small'],
+          props: (size: string) => ({
+            size,
+          }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};