Skip to content

Commit cfd1e0c

Browse files
author
Lucas
authored
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
2 parents bc3bb57 + b6aac9a commit cfd1e0c

16 files changed

+138
-39
lines changed

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

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export const card = recipe({
2727
borderStyle: 'solid',
2828
borderWidth: vars.spacing.$2,
2929
},
30+
[Scheme.Img]: {
31+
borderColor: vars.colors.$card_img_borderColor,
32+
backgroundColor: vars.colors.$card_img_bgColor,
33+
borderRadius: vars.radius.$large,
34+
},
3035
},
3136
},
3237
});

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

+4
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ export const Overview = (): JSX.Element => {
4141
Component: Card.Outlined,
4242
variant: Scheme.Outlined,
4343
},
44+
{
45+
Component: Card.Img,
46+
variant: Scheme.Img,
47+
},
4448
];
4549

4650
const renderTable = (showHeader = false): JSX.Element => (

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { createCardVariantComponent } from './create-card-variant-component.util';
2+
import { Scheme } from './types';
3+
4+
import type { VariantCardProps } from './create-card-variant-component.util';
5+
6+
export type ElevatedProps = VariantCardProps;
7+
8+
export const Img = createCardVariantComponent<ElevatedProps>(Scheme.Img);

‎src/design-system/cards/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { Elevated } from './elevated.component';
22
export { Greyed } from './greyed.component';
33
export { Outlined } from './outlined.component';
4+
export { Img } from './img.component';

‎src/design-system/cards/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ export enum Scheme {
22
Elevated = 'Elevated',
33
Greyed = 'Greyed',
44
Outlined = 'Outlined',
5+
Img = 'Img',
56
}

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

-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,4 @@ export const storyContainer = style([
1414
export const root = style({
1515
minHeight: '100%',
1616
height: '100%',
17-
display: 'flex',
18-
flexDirection: 'row',
1917
});

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

+14-5
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,22 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
44
import type { ReactFramework } from '@storybook/react';
55

66
import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
7+
import { Flex } from '../../flex';
78

89
import * as styles from './color-schema.css';
910

10-
export const colorSchemaDecorator: DecoratorFunction<
11-
ReactFramework
12-
> = Story => (
13-
<div className={styles.root}>
11+
export const colorSchemaDecorator: DecoratorFunction<ReactFramework> = (
12+
Story,
13+
{
14+
parameters: {
15+
decorators: { layout = 'horizontal' },
16+
},
17+
},
18+
) => (
19+
<Flex
20+
className={styles.root}
21+
flexDirection={layout === 'horizontal' ? 'row' : 'column'}
22+
>
1423
<LocalThemeProvider
1524
colorScheme={ThemeColorScheme.Light}
1625
className={styles.storyContainer}
@@ -23,5 +32,5 @@ export const colorSchemaDecorator: DecoratorFunction<
2332
>
2433
<Story />
2534
</LocalThemeProvider>
26-
</div>
35+
</Flex>
2736
);

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import type { BoxProps } from '../box';
99

1010
export type Props = PropsWithChildren<Readonly<Omit<BoxProps, 'className'>>>;
1111

12-
export const Divider = (props: Readonly<BoxProps>): JSX.Element => (
13-
<Box {...props} h="$1" className={cx.divider} />
12+
export const Divider = ({
13+
h = '$1',
14+
...props
15+
}: Readonly<BoxProps>): JSX.Element => (
16+
<Box {...props} h={h} className={cx.divider} />
1417
);

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

+22-14
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import cn from 'classnames';
66
import { Text } from '../text';
77

88
import * as cx from './toggle-button-group-item.css';
9+
import { useToggleButtonGroupContext } from './toggle-button-group-root.component';
910

1011
import type { ToggleGroupItemProps } from '@radix-ui/react-toggle-group';
1112

@@ -20,20 +21,27 @@ export const Item = forwardRef<HTMLButtonElement, ToggleButtonGroupItemProps>(
2021
(
2122
{ icon: IconComponent, children, ...props },
2223
forwardReference,
23-
): JSX.Element => (
24-
<ToggleGroup.Item
25-
className={cn(cx.root, cx.rootHandle)}
26-
ref={forwardReference}
27-
{...props}
28-
>
29-
{IconComponent && <IconComponent className={cx.icon} />}
30-
{Boolean(children) && (
31-
<Text.Button weight="$semibold" className={cx.label}>
32-
{children}
33-
</Text.Button>
34-
)}
35-
</ToggleGroup.Item>
36-
),
24+
): JSX.Element => {
25+
const variant = useToggleButtonGroupContext();
26+
27+
return (
28+
<ToggleGroup.Item
29+
className={cn(cx.root, cx.rootHandle, {
30+
[cx.smallVariant]: variant === 'small',
31+
[cx.commonVariant]: variant !== 'small',
32+
})}
33+
ref={forwardReference}
34+
{...props}
35+
>
36+
{IconComponent && <IconComponent className={cx.icon} />}
37+
{Boolean(children) && (
38+
<Text.Button weight="$semibold" className={cx.label}>
39+
{children}
40+
</Text.Button>
41+
)}
42+
</ToggleGroup.Item>
43+
);
44+
},
3745
);
3846

3947
Item.displayName = 'Item';

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const root = style([
99
padding: '$8',
1010
color: '$toggle_button_group_item_label_color',
1111
backgroundColor: '$toggle_button_group_item_bgColor',
12-
borderRadius: '$small',
1312
gap: '$6',
1413
}),
1514
{
@@ -71,3 +70,11 @@ export const icon = sx({
7170
width: '$24',
7271
height: '$24',
7372
});
73+
74+
export const commonVariant = sx({
75+
borderRadius: '$small',
76+
});
77+
78+
export const smallVariant = sx({
79+
borderRadius: '$tiny',
80+
});

‎src/design-system/toggle-button-group/toggle-button-group-root.component.tsx

+28-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback } from 'react';
1+
import React, { useCallback, createContext } from 'react';
22

33
import * as ToggleGroup from '@radix-ui/react-toggle-group';
44
import classNames from 'classnames';
@@ -7,6 +7,10 @@ import * as cx from './toggle-button-group-root.css';
77

88
import type { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
99

10+
type Variant = 'compact' | 'wide' | 'small';
11+
12+
const ToggleButtonGroupContext = createContext<Variant>('wide');
13+
1014
type ToggleGroupSingleOptionalProps = Pick<
1115
ToggleGroupSingleProps,
1216
'loop' | 'rovingFocus'
@@ -18,10 +22,16 @@ type ToggleGroupSingleRequiredProps = Required<
1822

1923
export type ToggleButtonGroupRootProps = ToggleGroupSingleOptionalProps &
2024
ToggleGroupSingleRequiredProps & {
21-
variant?: 'compact' | 'wide';
25+
variant?: Variant;
2226
disabled?: boolean;
2327
};
2428

29+
export const useToggleButtonGroupContext = (): Variant => {
30+
const context = React.useContext(ToggleButtonGroupContext);
31+
32+
return context;
33+
};
34+
2535
export const Root = ({
2636
children,
2737
onValueChange,
@@ -37,17 +47,21 @@ export const Root = ({
3747
);
3848

3949
return (
40-
<ToggleGroup.Root
41-
className={classNames(cx.root, {
42-
[cx.rootCompact]: variant === 'compact',
43-
[cx.rootDisabled]: disabled,
44-
})}
45-
type="single"
46-
onValueChange={handleValueChange}
47-
disabled={disabled}
48-
{...props}
49-
>
50-
{children}
51-
</ToggleGroup.Root>
50+
<ToggleButtonGroupContext.Provider value={variant}>
51+
<ToggleGroup.Root
52+
className={classNames(cx.root, {
53+
[cx.rootCompact]: variant === 'compact',
54+
[cx.rootSmall]: variant === 'small',
55+
[cx.rootDisabled]: disabled,
56+
[cx.defaultRadius]: variant !== 'small',
57+
})}
58+
type="single"
59+
onValueChange={handleValueChange}
60+
disabled={disabled}
61+
{...props}
62+
>
63+
{children}
64+
</ToggleGroup.Root>
65+
</ToggleButtonGroupContext.Provider>
5266
);
5367
};

‎src/design-system/toggle-button-group/toggle-button-group-root.css.ts

+15-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { style, sx } from '../../design-tokens';
33
export const root = style([
44
sx({
55
backgroundColor: '$toggle_button_group_bgColor',
6-
borderRadius: '$medium',
76
padding: '$8',
87
gap: '$8',
98
}),
@@ -19,3 +18,18 @@ export const rootCompact = style({
1918
});
2019

2120
export const rootDisabled = style({});
21+
22+
export const defaultRadius = sx({
23+
borderRadius: '$medium',
24+
});
25+
26+
export const rootSmall = style([
27+
sx({
28+
height: '$40',
29+
borderRadius: '$extraSmall',
30+
boxSizing: 'border-box',
31+
}),
32+
{
33+
padding: '5px',
34+
},
35+
]);

‎src/design-system/toggle-button-group/toggle-button-group-root.stories.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,24 @@ export const Overview = (): JSX.Element => {
238238
</Variants.Cell>
239239
</Variants.Row>
240240
</Variants.Table>
241+
<Variants.Table headers={['(Small) Label']}>
242+
<Variants.Row>
243+
<Variants.Cell>
244+
<ToggleButtonGroup.Root
245+
variant="small"
246+
value={activeVariants}
247+
onValueChange={handleVariantsValueChange}
248+
>
249+
<ToggleButtonGroup.Item value={ToggleGroupItemType.grid}>
250+
Label
251+
</ToggleButtonGroup.Item>
252+
<ToggleButtonGroup.Item value={ToggleGroupItemType.list}>
253+
Label
254+
</ToggleButtonGroup.Item>
255+
</ToggleButtonGroup.Root>
256+
</Variants.Cell>
257+
</Variants.Row>
258+
</Variants.Table>
241259
</Section>
242260
<Divider my="$64" />
243261
<Section title="Main components">

‎src/design-tokens/colors.data.ts

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export const colors = {
3838
$card_greyed_backgroundColor: '',
3939
$card_outlined_backgroundColor: '',
4040
$card_outlined_borderColor: '',
41+
$card_img_bgColor: '',
42+
$card_img_borderColor: '',
4143

4244
$control_buttons_label_color: '',
4345
$control_buttons_label_color_danger: '',
@@ -202,6 +204,7 @@ export const colors = {
202204
$data_green: '',
203205
$data_yellow: '',
204206
$data_orange: '',
207+
$white: '',
205208

206209
$educational_card_root_container_bgColor: '',
207210
$educational_card_root_container_borderColor: '',

‎src/design-tokens/theme/dark-theme.css.ts

+3
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ const colors: Colors = {
7373
$card_greyed_backgroundColor: darkColorScheme.$primary_dark_grey_plus,
7474
$card_outlined_backgroundColor: darkColorScheme.$primary_mid_black,
7575
$card_outlined_borderColor: colorTransparent,
76+
$card_img_bgColor: darkColorScheme.$primary_mid_grey,
77+
$card_img_borderColor: darkColorScheme.$primary_light_black,
7678

7779
$control_buttons_label_color: darkColorScheme.$primary_white,
7880
$control_buttons_label_color_hover: darkColorScheme.$primary_light_grey,
@@ -289,6 +291,7 @@ const colors: Colors = {
289291
$data_pink: darkColorScheme.$secondary_data_pink,
290292
$data_yellow: darkColorScheme.$secondary_lace_yellow,
291293
$data_orange: darkColorScheme.$secondary_data_orange,
294+
$white: darkColorScheme.$primary_white,
292295

293296
$educational_card_root_container_bgColor: darkColorScheme.$primary_mid_black,
294297
$educational_card_root_container_borderColor: colorTransparent,

‎src/design-tokens/theme/light-theme.css.ts

+3
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ const colors: Colors = {
7676
$card_greyed_backgroundColor: lightColorScheme.$primary_light_grey,
7777
$card_outlined_backgroundColor: lightColorScheme.$primary_white,
7878
$card_outlined_borderColor: lightColorScheme.$primary_light_grey_plus,
79+
$card_img_bgColor: lightColorScheme.$primary_light_grey_plus_0_56,
80+
$card_img_borderColor: lightColorScheme.$primary_light_grey_0_56,
7981

8082
$control_buttons_label_color: lightColorScheme.$primary_black,
8183
$control_buttons_label_color_hover: lightColorScheme.$primary_black,
@@ -309,6 +311,7 @@ const colors: Colors = {
309311
$data_pink: lightColorScheme.$secondary_data_pink,
310312
$data_yellow: lightColorScheme.$secondary_lace_yellow,
311313
$data_orange: lightColorScheme.$secondary_data_orange,
314+
$white: lightColorScheme.$primary_white,
312315

313316
$educational_card_root_container_bgColor: lightColorScheme.$primary_white,
314317
$educational_card_root_container_borderColor:

0 commit comments

Comments
 (0)