In storybook, I see a ButtonIconGroup component (twentyhq#1039)

Add ButtonIconGroup storybook components

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: RubensRafael <[email protected]>

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>
+  );
+}

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],
+};