Skip to content

Commit de50474

Browse files
veejveej
committed
Extract brand tokens step
1 parent 505d4c4 commit de50474

File tree

4 files changed

+156
-114
lines changed

4 files changed

+156
-114
lines changed

‎packages/configuration-builder/src/TokensSection/BrandTokens.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import {
2+
AreaLoader,
3+
BentoThemeProvider,
4+
BentoTokens,
5+
Body,
6+
Box,
7+
Column,
8+
Columns,
9+
SliderField,
10+
Stack,
11+
unsafeLocalizedString,
12+
DecorativeDivider,
13+
Headline,
14+
} from "@buildo/bento-design-system";
15+
import { ColorTokenField } from "./ColorTokenField";
16+
import { useTranslation } from "react-i18next";
17+
18+
type Props = {
19+
tokens: BentoTokens;
20+
onChange: (value: BentoTokens["brandColor"]) => void;
21+
};
22+
23+
export function BrandTokens(props: Props) {
24+
const { t } = useTranslation();
25+
26+
return (
27+
<Stack space={40}>
28+
<Headline size="small">{t("TokensSection.Step.brand")}</Headline>
29+
<Columns space={40} alignY="stretch">
30+
<Column width="1/4">
31+
<Stack space={16}>
32+
<ColorTokenField
33+
label={t("Tokens.Color.primary")}
34+
value={props.tokens.brandColor.brandPrimary}
35+
onChange={(value) =>
36+
props.onChange({ ...props.tokens.brandColor, brandPrimary: value })
37+
}
38+
/>
39+
<ColorTokenField
40+
label={t("Tokens.Color.secondary")}
41+
value={props.tokens.brandColor.brandSecondary}
42+
onChange={(value) =>
43+
props.onChange({
44+
...props.tokens.brandColor,
45+
brandSecondary: value,
46+
})
47+
}
48+
/>
49+
<ColorTokenField
50+
label={t("Tokens.Color.tertiary")}
51+
value={props.tokens.brandColor.brandTertiary}
52+
onChange={(value) =>
53+
props.onChange({
54+
...props.tokens.brandColor,
55+
brandTertiary: value,
56+
})
57+
}
58+
/>
59+
</Stack>
60+
</Column>
61+
<Box
62+
borderRadius={24}
63+
padding={40}
64+
background="backgroundSecondary"
65+
display="flex"
66+
flexDirection="column"
67+
flexGrow={1}
68+
>
69+
<BentoThemeProvider theme={props.tokens}>
70+
<Stack space={40}>
71+
<Stack space={12}>
72+
<Body size="medium" color="secondary">
73+
{t("Component.decorativeDivider")}
74+
</Body>
75+
<DecorativeDivider />
76+
</Stack>
77+
<Stack space={12}>
78+
<Body size="medium" color="secondary">
79+
{t("Component.areaLoader")}
80+
</Body>
81+
<Box position="relative" style={{ height: 240 }}>
82+
<AreaLoader />
83+
</Box>
84+
</Stack>
85+
<Stack space={12}>
86+
<Body size="medium" color="secondary">
87+
{t("Component.sliderField")}
88+
</Body>
89+
<SliderField
90+
type="single"
91+
label={unsafeLocalizedString("")}
92+
value={50}
93+
minValue={0}
94+
maxValue={100}
95+
onChange={() => {}}
96+
/>
97+
</Stack>
98+
</Stack>
99+
</BentoThemeProvider>
100+
</Box>
101+
</Columns>
102+
</Stack>
103+
);
104+
}

‎packages/configuration-builder/src/TokensSection/ColorTokenField.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Box, Column, Columns, LocalizedString, Stack, Title } from "@buildo/bento-design-system";
2+
import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
3+
import { useTranslation } from "react-i18next";
4+
import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
5+
6+
export function ColorTokenField(props: {
7+
label: LocalizedString;
8+
value: string;
9+
onChange: (value: string) => void;
10+
}) {
11+
const { theme } = useConfiguratorStatusContext();
12+
const { t } = useTranslation();
13+
return (
14+
<Columns space={24} alignY="stretch">
15+
<Column width="content">
16+
<Box borderRadius={16} height="full" style={{ background: props.value, width: 64 }} />
17+
</Column>
18+
<Stack space={8}>
19+
<Title size="medium">{props.label}</Title>
20+
<ColorPickerField
21+
colors={theme.colors}
22+
label={t("Tokens.Color.label")}
23+
value={props.value}
24+
onChange={props.onChange}
25+
/>
26+
</Stack>
27+
</Columns>
28+
);
29+
}

‎packages/configuration-builder/src/TokensSection/TokensSection.tsx

+21-113
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,34 @@
1-
import {
2-
AreaLoader,
3-
BentoThemeProvider,
4-
Body,
5-
Box,
6-
Column,
7-
Columns,
8-
DecorativeDivider,
9-
LocalizedString,
10-
SliderField,
11-
Stack,
12-
Title,
13-
unsafeLocalizedString,
14-
} from "@buildo/bento-design-system";
151
import { ConfiguratorSection } from "../ConfiguratorSection/ConfiguratorSection";
162
import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
17-
import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
183
import { useTranslation } from "react-i18next";
19-
20-
function ColorTokenField(props: {
21-
label: LocalizedString;
22-
value: string;
23-
onChange: (value: string) => void;
24-
}) {
25-
const { theme } = useConfiguratorStatusContext();
26-
const { t } = useTranslation();
27-
return (
28-
<Columns space={24} alignY="stretch">
29-
<Column width="content">
30-
<Box borderRadius={16} height="full" style={{ background: props.value, width: 64 }} />
31-
</Column>
32-
<Stack space={8}>
33-
<Title size="medium">{props.label}</Title>
34-
<ColorPickerField
35-
colors={theme.colors}
36-
label={t("Tokens.Color.label")}
37-
value={props.value}
38-
onChange={props.onChange}
39-
/>
40-
</Stack>
41-
</Columns>
42-
);
43-
}
4+
import { useState } from "react";
5+
import { BrandTokens } from "./BrandTokens";
6+
import { match } from "ts-pattern";
447

458
export function TokensSection() {
469
const { theme, setTheme } = useConfiguratorStatusContext();
4710
const { t } = useTranslation();
4811

49-
const tokens = theme.tokens;
50-
const setTokens = (tokens: typeof theme.tokens) => setTheme({ ...theme, tokens });
12+
const steps = ["brand" as const];
13+
const [currentStep] = useState<(typeof steps)[0]>("brand");
14+
const currentStepIndex = steps.indexOf(currentStep);
5115

5216
return (
53-
<ConfiguratorSection title={t("Tokens.title")} steps={[]} currentStep={0}>
54-
<Columns space={40} alignY="stretch">
55-
<Column width="1/4">
56-
<Stack space={16}>
57-
<ColorTokenField
58-
label={t("Tokens.Color.primary")}
59-
value={tokens.brandColor.brandPrimary}
60-
onChange={(value) =>
61-
setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandPrimary: value } })
62-
}
63-
/>
64-
<ColorTokenField
65-
label={t("Tokens.Color.secondary")}
66-
value={tokens.brandColor.brandSecondary}
67-
onChange={(value) =>
68-
setTokens({
69-
...tokens,
70-
brandColor: { ...tokens.brandColor, brandSecondary: value },
71-
})
72-
}
73-
/>
74-
<ColorTokenField
75-
label={t("Tokens.Color.tertiary")}
76-
value={tokens.brandColor.brandTertiary}
77-
onChange={(value) =>
78-
setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandTertiary: value } })
79-
}
80-
/>
81-
</Stack>
82-
</Column>
83-
<Box
84-
borderRadius={24}
85-
padding={40}
86-
background="backgroundSecondary"
87-
display="flex"
88-
flexDirection="column"
89-
flexGrow={1}
90-
>
91-
<BentoThemeProvider theme={tokens}>
92-
<Stack space={40}>
93-
<Stack space={12}>
94-
<Body size="medium" color="secondary">
95-
{t("Component.decorativeDivider")}
96-
</Body>
97-
<DecorativeDivider />
98-
</Stack>
99-
<Stack space={12}>
100-
<Body size="medium" color="secondary">
101-
{t("Component.areaLoader")}
102-
</Body>
103-
<Box position="relative" style={{ height: 240 }}>
104-
<AreaLoader />
105-
</Box>
106-
</Stack>
107-
<Stack space={12}>
108-
<Body size="medium" color="secondary">
109-
{t("Component.sliderField")}
110-
</Body>
111-
<SliderField
112-
type="single"
113-
label={unsafeLocalizedString("")}
114-
value={50}
115-
minValue={0}
116-
maxValue={100}
117-
onChange={() => {}}
118-
/>
119-
</Stack>
120-
</Stack>
121-
</BentoThemeProvider>
122-
</Box>
123-
</Columns>
17+
<ConfiguratorSection
18+
title={t("Tokens.title")}
19+
steps={steps.map((step) => ({ label: t(`TokensSection.Step.${step}`) }))}
20+
currentStep={currentStepIndex}
21+
>
22+
{match(currentStep)
23+
.with("brand", () => (
24+
<BrandTokens
25+
tokens={theme.tokens}
26+
onChange={(brandTokens) =>
27+
setTheme({ ...theme, tokens: { ...theme.tokens, brandColor: brandTokens } })
28+
}
29+
/>
30+
))
31+
.exhaustive()}
12432
</ConfiguratorSection>
12533
);
12634
}

‎packages/configuration-builder/src/locales/en.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"Tokens.Color.label": "Color",
9494
"Component.decorativeDivider": "Decorative Divider",
9595
"Component.areaLoader": "Area Loader",
96-
"Component.sliderField": "Slider Field"
96+
"Component.sliderField": "Slider Field",
97+
"TokensSection.Step.brand": "Brand"
9798
}
9899
}

0 commit comments

Comments
 (0)