Merge pull request #19 from input-output-hk/chore/updates-from-lace-fork

feat: add toggle button group small variant
feat: add color schema decorator layout prop
feat: add card image variant
feat: add height prop to divider

Author: Lucas

src/design-system/cards/base-card.css.ts

@@ -27,6 +27,11 @@ export const card = recipe({
         borderStyle: 'solid',
         borderWidth: vars.spacing.$2,
       },
+      [Scheme.Img]: {
+        borderColor: vars.colors.$card_img_borderColor,
+        backgroundColor: vars.colors.$card_img_bgColor,
+        borderRadius: vars.radius.$large,
+      },
     },
   },
 });

src/design-system/cards/cards.stories.tsx

@@ -41,6 +41,10 @@ export const Overview = (): JSX.Element => {
       Component: Card.Outlined,
       variant: Scheme.Outlined,
     },
+    {
+      Component: Card.Img,
+      variant: Scheme.Img,
+    },
   ];
 
   const renderTable = (showHeader = false): JSX.Element => (

src/design-system/cards/img.component.tsx

@@ -0,0 +1,8 @@
+import { createCardVariantComponent } from './create-card-variant-component.util';
+import { Scheme } from './types';
+
+import type { VariantCardProps } from './create-card-variant-component.util';
+
+export type ElevatedProps = VariantCardProps;
+
+export const Img = createCardVariantComponent<ElevatedProps>(Scheme.Img);

src/design-system/cards/index.ts

@@ -1,3 +1,4 @@
 export { Elevated } from './elevated.component';
 export { Greyed } from './greyed.component';
 export { Outlined } from './outlined.component';
+export { Img } from './img.component';

src/design-system/cards/types.ts

@@ -2,4 +2,5 @@ export enum Scheme {
   Elevated = 'Elevated',
   Greyed = 'Greyed',
   Outlined = 'Outlined',
+  Img = 'Img',
 }

src/design-system/decorators/color-schema/color-schema.css.ts

@@ -14,6 +14,4 @@ export const storyContainer = style([
 export const root = style({
   minHeight: '100%',
   height: '100%',
-  display: 'flex',
-  flexDirection: 'row',
 });

src/design-system/decorators/color-schema/color-schema.decorator.tsx

@@ -4,13 +4,22 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
 import type { ReactFramework } from '@storybook/react';
 
 import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
+import { Flex } from '../../flex';
 
 import * as styles from './color-schema.css';
 
-export const colorSchemaDecorator: DecoratorFunction<
-  ReactFramework
-> = Story => (
-  <div className={styles.root}>
+export const colorSchemaDecorator: DecoratorFunction<ReactFramework> = (
+  Story,
+  {
+    parameters: {
+      decorators: { layout = 'horizontal' },
+    },
+  },
+) => (
+  <Flex
+    className={styles.root}
+    flexDirection={layout === 'horizontal' ? 'row' : 'column'}
+  >
     <LocalThemeProvider
       colorScheme={ThemeColorScheme.Light}
       className={styles.storyContainer}
@@ -23,5 +32,5 @@ export const colorSchemaDecorator: DecoratorFunction<
     >
       <Story />
     </LocalThemeProvider>
-  </div>
+  </Flex>
 );

src/design-system/divider/divider.component.tsx

@@ -9,6 +9,9 @@ import type { BoxProps } from '../box';
 
 export type Props = PropsWithChildren<Readonly<Omit<BoxProps, 'className'>>>;
 
-export const Divider = (props: Readonly<BoxProps>): JSX.Element => (
-  <Box {...props} h="$1" className={cx.divider} />
+export const Divider = ({
+  h = '$1',
+  ...props
+}: Readonly<BoxProps>): JSX.Element => (
+  <Box {...props} h={h} className={cx.divider} />
 );

src/design-system/toggle-button-group/toggle-button-group-item.component.tsx

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import { Text } from '../text';
 
 import * as cx from './toggle-button-group-item.css';
+import { useToggleButtonGroupContext } from './toggle-button-group-root.component';
 
 import type { ToggleGroupItemProps } from '@radix-ui/react-toggle-group';
 
@@ -20,20 +21,27 @@ export const Item = forwardRef<HTMLButtonElement, ToggleButtonGroupItemProps>(
   (
     { icon: IconComponent, children, ...props },
     forwardReference,
-  ): JSX.Element => (
-    <ToggleGroup.Item
-      className={cn(cx.root, cx.rootHandle)}
-      ref={forwardReference}
-      {...props}
-    >
-      {IconComponent && <IconComponent className={cx.icon} />}
-      {Boolean(children) && (
-        <Text.Button weight="$semibold" className={cx.label}>
-          {children}
-        </Text.Button>
-      )}
-    </ToggleGroup.Item>
-  ),
+  ): JSX.Element => {
+    const variant = useToggleButtonGroupContext();
+
+    return (
+      <ToggleGroup.Item
+        className={cn(cx.root, cx.rootHandle, {
+          [cx.smallVariant]: variant === 'small',
+          [cx.commonVariant]: variant !== 'small',
+        })}
+        ref={forwardReference}
+        {...props}
+      >
+        {IconComponent && <IconComponent className={cx.icon} />}
+        {Boolean(children) && (
+          <Text.Button weight="$semibold" className={cx.label}>
+            {children}
+          </Text.Button>
+        )}
+      </ToggleGroup.Item>
+    );
+  },
 );
 
 Item.displayName = 'Item';

src/design-system/toggle-button-group/toggle-button-group-item.css.ts

@@ -9,7 +9,6 @@ export const root = style([
     padding: '$8',
     color: '$toggle_button_group_item_label_color',
     backgroundColor: '$toggle_button_group_item_bgColor',
-    borderRadius: '$small',
     gap: '$6',
   }),
   {
@@ -71,3 +70,11 @@ export const icon = sx({
   width: '$24',
   height: '$24',
 });
+
+export const commonVariant = sx({
+  borderRadius: '$small',
+});
+
+export const smallVariant = sx({
+  borderRadius: '$tiny',
+});