feat(button-group): add size prop, add small example, fix examples on storybook #14

src/tedi/components/buttons/button-group/button-group.module.scss

@@ -11,8 +11,6 @@
       align-items: center;
       justify-content: center;
       height: auto;
-      min-height: 2.5rem;
-      padding: calc(var(--button-md-padding-y) - 1px) var(--button-md-padding-x);
       text-align: center;
       cursor: pointer;
       border-radius: 0;
@@ -38,6 +36,17 @@
       @include breakpoints.media-breakpoint-down(md) {
         flex: 1;
       }
+
+      &--size-default {
+        min-height: var(--button-md-height);
+        padding: calc(var(--button-md-padding-y) - 1px) var(--button-md-padding-x);
+      }
+
+      &--size-small {
+        min-height: var(--button-sm-height);
+        padding: calc(var(--button-sm-padding-y) - 1px) var(--button-sm-padding-x);
+        font-size: var(--button-text-size-sm);
+      }
     }
   }
 
@@ -65,6 +74,12 @@
         background-color: var(--button-group-primary-selected-background);
         border-color: var(--button-group-primary-selected-border);
       }
+
+      &:focus-visible:not(:disabled, .tedi-button-group__item--active) {
+        color: var(--button-group-primary-inactive-text);
+        background-color: var(--button-group-primary-inactive-background);
+        border: 1px solid var(--button-group-primary-inactive-border);
+      }
     }
   }
 
@@ -93,6 +108,12 @@
         outline: 2px solid var(--button-group-secondary-selected-border);
         outline-offset: -2px;
       }
+
+      &:focus-visible:not(:disabled, .tedi-button-group__item--active) {
+        color: var(--button-group-secondary-inactive-text);
+        background-color: var(--button-group-secondary-inactive-background);
+        border: 1px solid var(--button-group-secondary-inactive-border);
+      }
     }
   }
 

src/tedi/components/buttons/button-group/button-group.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Text } from '../../base/typography/text/text';
 import { Col, Row } from '../../layout/grid';
 import { VerticalSpacing } from '../../layout/vertical-spacing';
 import { Button } from '../button/button';
@@ -24,7 +25,8 @@ const meta: Meta<typeof ButtonGroup> = {
 export default meta;
 type Story = StoryObj<typeof ButtonGroup>;
 
-const buttonStates = ['Default', 'Hover', 'Active', 'Disabled'];
+const buttonStates = ['Default', 'Hover', 'Active', 'Focus', 'Disabled'];
+const sizeArray: ButtonGroupProps['size'][] = ['default', 'small'];
 
 const Template: StoryFn<ButtonGroupProps> = (args) => (
   <ButtonGroup {...args} ariaLabel="Button group example">
@@ -36,6 +38,40 @@ const Template: StoryFn<ButtonGroupProps> = (args) => (
   </ButtonGroup>
 );
 
+interface TemplateMultipleProps<Type = ButtonGroupProps['size']> extends ButtonGroupProps {
+  array: Type[];
+  property: keyof ButtonGroupProps;
+}
+
+const TemplateSizes: StoryFn<TemplateMultipleProps> = (args) => {
+  const { array, property, ...buttonGroupProps } = args;
+
+  return (
+    <div className="example-list">
+      {array.map((value, key) => {
+        return (
+          <Row className={`${key === array.length - 1 ? '' : 'border-bottom'} padding-14-16`} key={key}>
+            <Col width={2}>
+              <Text modifiers="bold">{value ? value.charAt(0).toUpperCase() + value.slice(1) : ''}</Text>
+            </Col>
+            <Col>
+              <VerticalSpacing>
+                <ButtonGroup type="primary" {...buttonGroupProps} {...{ [property]: value }}>
+                  <Button id="01">Text</Button>
+                  <Button id="02" isActive>
+                    Text
+                  </Button>
+                  <Button id="03">Text</Button>
+                </ButtonGroup>
+              </VerticalSpacing>
+            </Col>
+          </Row>
+        );
+      })}
+    </div>
+  );
+};
+
 const TemplateTypes: StoryFn<typeof Button> = (args) => {
   return (
     <VerticalSpacing>
@@ -73,6 +109,14 @@ export const Default: Story = {
   },
 };
 
+export const Sizes: StoryObj<TemplateMultipleProps> = {
+  render: TemplateSizes,
+  args: {
+    property: 'size',
+    array: sizeArray,
+  },
+};
+
 export const Types: StoryObj<typeof Button> = {
   render: TemplateTypes,
 };
@@ -130,7 +174,7 @@ export const Primary: StoryObj<{ states: string[] }> = {
     pseudo: {
       hover: ['#Hover-primary'],
       active: ['#Active-primary'],
-      focus: ['#Focus-primary'],
+      focusVisible: ['#Focus-primary'],
     },
   },
 };
@@ -144,7 +188,7 @@ export const Secondary: StoryObj<{ states: string[] }> = {
     pseudo: {
       hover: ['#Hover-secondary'],
       active: ['#Active-secondary'],
-      focus: ['#Focus-secondary'],
+      focusVisible: ['#Focus-secondary'],
     },
   },
 };

src/tedi/components/buttons/button-group/button-group.tsx

@@ -36,10 +36,22 @@ export type ButtonGroupProps = {
    * Additional custom CSS classes to apply to the ButtonGroup container
    */
   className?: string;
+  /**
+   * Size of the buttons in ButtonGroup
+   */
+  size?: 'default' | 'small';
 };
 
 export const ButtonGroup = (props: ButtonGroupProps): JSX.Element => {
-  const { children, className, type = 'primary', onSelectionChange, stretch = false, ariaLabel } = props;
+  const {
+    children,
+    className,
+    type = 'primary',
+    onSelectionChange,
+    stretch = false,
+    ariaLabel,
+    size = 'default',
+  } = props;
 
   return (
     <div
@@ -60,8 +72,9 @@ export const ButtonGroup = (props: ButtonGroupProps): JSX.Element => {
             className: cn(styles['tedi-button-group__item'], {
               [styles['tedi-button-group__item--active']]: child.props.isActive,
               [styles['tedi-button-group__item--disabled']]: child.props.disabled,
+              [styles[`tedi-button-group__item--size-${size}`]]: size,
             }),
-            noStyle: true,
+            size: size,
             onClick: () => {
               if (!child.props.disabled) {
                 child.props.onClick?.();