feat(ui): buttongroup component

.changeset/eight-birds-knock.md

@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': minor
+---
+
+add buttongroup component

packages/libs/kode-ui/src/components/Button/Button.css.ts

@@ -316,9 +316,11 @@ export const button = recipe({
         },
       },
       outlined: {
-        boxShadow: `0px 0px 0px 1px ${token(
-          'color.border.base.default',
-        )} inset`,
+        border: token('border.hairline'),
+        borderColor: token('color.border.base.default'),
+        // boxShadow: `0px 0px 0px 1px ${token(
+        //   'color.border.base.default',
+        // )} inset`,
         vars: {
           [backgroundColor]: 'transparent',
           [hoverBackgroundColor]: token('color.background.base.@hover'),

packages/libs/kode-ui/src/components/ButtonGroup/ButtonGroup.css.ts

@@ -0,0 +1,58 @@
+import { globalStyle, recipe, style, token } from './../../../styles';
+
+export const buttonGroupClass = style({});
+
+export const buttonGroupRecipe = recipe({
+  base: {},
+  variants: {
+    variant: {
+      primary: {},
+      transparent: {},
+      info: {},
+      warning: {},
+      positive: {},
+      negative: {},
+      outlined: {},
+    },
+  },
+});
+
+globalStyle(
+  `${buttonGroupClass} button:not(:first-child):not(:last-child), ${buttonGroupClass} a:not(:first-child):not(:last-child)`,
+  {
+    borderRadius: 0,
+  },
+);
+
+globalStyle(
+  `${buttonGroupClass} button:first-child, ${buttonGroupClass} a:first-child`,
+  {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0,
+  },
+);
+globalStyle(
+  `${buttonGroupClass} button:last-child, ${buttonGroupClass} a:last-child`,
+  {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0,
+  },
+);
+
+//variants
+globalStyle(
+  `${buttonGroupClass}[data-variant="primary"] button:not(:first-child), ${buttonGroupClass}[data-variant="primary"] a:not(:first-child)`,
+  {
+    border: 0,
+    borderInlineStartWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'yellow',
+  },
+);
+
+globalStyle(
+  `${buttonGroupClass} button:not(:last-child), ${buttonGroupClass} a:not(:last-child)`,
+  {
+    borderInlineEndWidth: '0',
+  },
+);

packages/libs/kode-ui/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,77 @@
+import { MonoChevronLeft, MonoChevronRight } from '@kadena/kode-icons';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Avatar, Badge, Button, Link, Stack } from '..';
+import { getVariants } from '../../storyDecorators/getVariants';
+import { Box } from '../Layout/Box/Box';
+import type { IButtonGroupProps } from './ButtonGroup';
+import { ButtonGroup } from './ButtonGroup';
+import { buttonGroupRecipe } from './ButtonGroup.css';
+
+const variants = getVariants(buttonGroupRecipe);
+
+const meta: Meta<IButtonGroupProps> = {
+  title: 'Components/ButtonGroup',
+  parameters: {
+    controls: {
+      hideNoControlsWarning: true,
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component:
+          'The ButtonGroup is a component that will group a set of buttons (some small style changes on the buttons). ',
+      },
+    },
+  },
+  argTypes: {
+    onPress: {
+      action: 'clicked',
+      description: 'callback when button is clicked',
+      table: {
+        disable: true,
+      },
+    },
+    variant: {
+      options: variants.variant,
+      control: {
+        type: 'select',
+      },
+      description: 'button style variant',
+    },
+    isCompact: {
+      description: 'compact button style',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+type ButtonGroupStory = StoryObj<IButtonGroupProps>;
+
+export const Primary: ButtonGroupStory = {
+  args: {
+    variant: 'primary',
+    onPress: () => undefined,
+  },
+  render: (props: IButtonGroupProps) => {
+    return (
+      <Stack gap="lg" flexDirection="column">
+        <ButtonGroup {...props}>
+          <Button>option1</Button>
+          <Button>option2</Button>
+          <Button endVisual={<MonoChevronLeft />} />
+        </ButtonGroup>
+        <ButtonGroup {...props}>
+          <Link>option1</Link>
+          <Link>option2</Link>
+          <Link endVisual={<MonoChevronLeft />} />
+        </ButtonGroup>
+      </Stack>
+    );
+  },
+};
+
+export default meta;

packages/libs/kode-ui/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+import type { IButtonProps } from '../Button/Button';
+import { Stack } from '../Layout';
+import { buttonGroupClass, buttonGroupRecipe } from './ButtonGroup.css';
+
+interface IBUttonGroupProps extends PropsWithChildren {
+  variant: IButtonProps['variant'];
+  isCompact: IButtonProps['isCompact'];
+}
+
+export const ButtonGroup: FC<IBUttonGroupProps> = ({
+  children,
+  variant,
+  isCompact,
+}) => {
+  return (
+    <Stack
+      as="section"
+      data-variant={variant}
+      className={classNames(
+        buttonGroupClass,
+        buttonGroupRecipe({
+          variant,
+        }),
+      )}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return null;
+        return React.cloneElement(child, {
+          ...child.props,
+          variant,
+          isCompact,
+        });
+      })}
+    </Stack>
+  );
+};