Skip to content

Commit

Permalink
feat: migrate to new typescale (#755)
Browse files Browse the repository at this point in the history
  • Loading branch information
krzysztofzuraw committed Feb 23, 2024
1 parent 92f5f36 commit 0484be7
Show file tree
Hide file tree
Showing 34 changed files with 285 additions and 539 deletions.
34 changes: 34 additions & 0 deletions .storybook/components/FontWeights.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Unstyled } from "@storybook/blocks";
import { Box, Text } from "~/components";
import { useTheme } from "~/theme";

export const FontWeightsPresentation = () => {
const { themeValues: vars } = useTheme();

return (
<Unstyled>
<Box display="flex" flexDirection="row" flexWrap="wrap" rowGap={7}>
{Object.entries(vars.fontWeight)
.sort(([_aKey, aValue], [_bKey, bValue]) =>
aValue.localeCompare(bValue, undefined, { numeric: true })
)
.map(([key, value]) => {
return (
<Box width="100%" key={key}>
<Box __fontSize="14px" __minWidth="100px">
<Box
display="inline-block"
color="default1"
__fontSize="15px"
>
{key}
</Box>
</Box>
<Text fontWeight={key}>Some text</Text>
</Box>
);
})}
</Box>
</Unstyled>
);
};
36 changes: 36 additions & 0 deletions .storybook/components/Typography.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Unstyled } from "@storybook/blocks";
import { Box, Text } from "~/components";
import { useTheme } from "~/theme";

export const TypographyPresentation = () => {
const { themeValues: vars } = useTheme();

return (
<Unstyled>
<Box display="flex" flexDirection="row" flexWrap="wrap" rowGap={7}>
{Object.entries(vars.fontSize)
.sort(([_aKey, aValue], [_bKey, bValue]) =>
aValue.localeCompare(bValue, undefined, { numeric: true })
)
.map(([key, value]) => {
return (
<Box width="100%" key={key}>
<Box __fontSize="14px" __minWidth="100px">
<Box
display="inline-block"
color="default1"
__fontSize="15px"
>
size: {key}
</Box>
</Box>
<Text fontSize={key} lineHeight={key} letterSpacing={key}>
Some text
</Text>
</Box>
);
})}
</Box>
</Unstyled>
);
};
6 changes: 4 additions & 2 deletions .storybook/components/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export { BorderRadiusPresentation } from "./BorderRadius";
export { ColorPresentation } from "./Colors";
export { SpacingsPresentation } from "./Spacings";
export { FontWeightsPresentation } from "./FontWeights";
export { IconsPresentation } from "./Icons";
export { BorderRadiusPresentation } from "./BorderRadius";
export { ShadowPresentation } from "./Shadow";
export { SpacingsPresentation } from "./Spacings";
export { TypographyPresentation } from "./Typography";
8 changes: 6 additions & 2 deletions src/components/Avatar/Store/Store.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types";
import { classNames } from "~/utils";

import { Box, PropsWithBox } from "../../Box";
import { Text } from "../../Text";
import { convertSizeToScale, Text } from "../../Text";

import { storeAvatar, StoreAvatarVariants } from "./Store.css";

Expand Down Expand Up @@ -37,7 +37,11 @@ export const Store = (props: StoreAvatarProps) => {
data-macaw-ui-component="Avatar.Store"
{...rest}
>
<Text variant="bodyEmp" size={size} color="buttonDefaultPrimary">
<Text
size={convertSizeToScale(size)}
color="buttonDefaultPrimary"
fontWeight="medium"
>
{initials}
</Text>
</Box>
Expand Down
8 changes: 6 additions & 2 deletions src/components/Avatar/User/User.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types";
import { classNames } from "~/utils";

import { Box, PropsWithBox } from "../../Box";
import { Text } from "../../Text";
import { convertSizeToScale, Text } from "../../Text";

import { userAvatar, UserAvatarVariants } from "./User.css";

Expand Down Expand Up @@ -37,7 +37,11 @@ export const User = (props: UserAvatarProps) => {
data-macaw-ui-component="Avatar.User"
{...rest}
>
<Text variant="bodyEmp" size={size} color="buttonDefaultPrimary">
<Text
size={convertSizeToScale(size)}
color="buttonDefaultPrimary"
fontWeight="medium"
>
{initials}
</Text>
</Box>
Expand Down
22 changes: 11 additions & 11 deletions src/components/BaseInput/BaseInput.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,13 @@ export const spanRecipe = recipe({
variants: {
size: {
small: sprinkles({
typeSize: "bodySmall",
typeSize: 1,
}),
medium: sprinkles({
typeSize: "bodyMedium",
typeSize: 2,
}),
large: sprinkles({
typeSize: "bodyLarge",
typeSize: 3,
}),
},
disabled: {
Expand Down Expand Up @@ -179,8 +179,8 @@ export const inputRecipe = recipe({
sprinkles({
width: "100%",
backgroundColor: "transparent",
fontSize: "bodyLarge",
lineHeight: "bodyLarge",
fontSize: 3,
lineHeight: 3,
borderWidth: 0,
outlineStyle: "none",
padding: 0,
Expand Down Expand Up @@ -225,16 +225,16 @@ export const inputRecipe = recipe({
variants: {
size: {
small: sprinkles({
fontSize: "bodySmall",
lineHeight: "captionMedium",
fontSize: 1,
lineHeight: 1,
}),
medium: sprinkles({
fontSize: "bodyMedium",
lineHeight: "bodySmall",
fontSize: 2,
lineHeight: 2,
}),
large: sprinkles({
fontSize: "bodyLarge",
lineHeight: "bodyLarge",
fontSize: 3,
lineHeight: 3,
}),
},
error: {
Expand Down
5 changes: 2 additions & 3 deletions src/components/BaseInput/HelperText.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactNode } from "react";
import { Box, Text } from "..";
import { Box, Text, convertSizeToScale } from "..";
import { helperTextRecipe } from "./BaseInput.css";

type HelperTextProps = {
Expand All @@ -12,8 +12,7 @@ export const HelperText = ({ size, error, children }: HelperTextProps) => {
return (
<Box className={helperTextRecipe({ size })}>
<Text
variant="caption"
size={size}
size={convertSizeToScale(size)}
color={error ? "critical1" : "default2"}
>
{children}
Expand Down
4 changes: 2 additions & 2 deletions src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactNode } from "react";
import { List, Spinner, Text } from "~/components";
import { List, Spinner, Text, convertSizeToScale } from "~/components";

import { listItemStyle } from "../BaseSelect.css";

Expand All @@ -18,7 +18,7 @@ export const LoadingListItem = ({
gap={1.5}
color="default2"
>
<Text size={size} color="default2">
<Text size={convertSizeToScale(size)} color="default2">
{children}
</Text>
<Spinner />
Expand Down
4 changes: 2 additions & 2 deletions src/components/BaseSelect/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export const getListTextSize = (
switch (size) {
case "small":
case "medium":
return "medium";
return 2;
case "large":
return "large";
return 3;
}
};
12 changes: 6 additions & 6 deletions src/components/Button/Button.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export const button = recipe({
width: 6,
borderRadius: 2,
padding: 0.5,
typeSize: "buttonSmall",
typeSize: 1,
gap: 1,
}),
},
Expand All @@ -131,7 +131,7 @@ export const button = recipe({
width: 8,
borderRadius: 3,
padding: 1,
typeSize: "buttonMedium",
typeSize: 2,
gap: 1,
}),
},
Expand All @@ -145,7 +145,7 @@ export const button = recipe({
width: 10,
borderRadius: 3,
padding: 2,
typeSize: "buttonLarge",
typeSize: 3,
gap: 2,
}),
},
Expand All @@ -159,7 +159,7 @@ export const button = recipe({
borderRadius: 2,
paddingX: 2,
paddingY: 0,
typeSize: "buttonSmall",
typeSize: 1,
gap: 1,
}),
},
Expand All @@ -173,7 +173,7 @@ export const button = recipe({
borderRadius: 3,
paddingX: 3,
paddingY: 1,
typeSize: "buttonMedium",
typeSize: 2,
gap: 1,
}),
},
Expand All @@ -187,7 +187,7 @@ export const button = recipe({
borderRadius: 3,
paddingX: 4,
paddingY: 2,
typeSize: "buttonLarge",
typeSize: 3,
gap: 2,
}),
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/Checkbox/Checkbox.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type Story = StoryObj<typeof Checkbox>;
export const Primary: Story = {
args: {
children: [
<Text variant="body">Option 1</Text>, // eslint-disable-line react/jsx-key
<Text size={2}>Option 1</Text>, // eslint-disable-line react/jsx-key
],
},
};
Expand All @@ -32,7 +32,7 @@ export const Disabled: Story = {
disabled: true,
children: [
// eslint-disable-next-line react/jsx-key
<Text variant="body" color="defaultDisabled">
<Text size={2} color="defaultDisabled">
Option 1
</Text>,
],
Expand Down
8 changes: 4 additions & 4 deletions src/components/Chip/Chip.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const Primary: Story = {
<Box display="grid" gridTemplateColumns={2} gap={5}>
{/* Neutral */}
<Chip {...props} color="default1" backgroundColor="default1">
<Text variant="caption" size="small" color="default1">
<Text size={1} color="default1">
Example
</Text>
</Chip>
Expand All @@ -32,7 +32,7 @@ export const Primary: Story = {
backgroundColor="critical1"
borderColor="critical1"
>
<Text color="critical1" size="small" variant="caption">
<Text color="critical1" size={1}>
Example
</Text>
</Chip>
Expand All @@ -43,13 +43,13 @@ export const Primary: Story = {
backgroundColor="success1"
borderColor="success1"
>
<Text color="success1" size="small" variant="caption">
<Text color="success1" size={1}>
Example
</Text>
</Chip>
{/* Blue */}
<Chip {...props} backgroundColor="info1" borderColor="info1">
<Text color="info1" size="small" variant="caption">
<Text color="info1" size={1}>
Example
</Text>
</Chip>
Expand Down
14 changes: 7 additions & 7 deletions src/components/DropdownButton/DropdownButton.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,27 +53,27 @@ export const dropdownButton = recipe({
borderRadius: 2,
paddingX: 2,
paddingY: 1,
typeSize: "buttonSmall",
fontWeight: "bodyMedium",
lineHeight: "captionMedium",
typeSize: 1,
fontWeight: "medium",
lineHeight: 2,
gap: 3,
}),
medium: sprinkles({
height: 8,
borderRadius: 3,
paddingX: 2,
paddingY: 1.5,
typeSize: "buttonMedium",
fontWeight: "bodyMedium",
typeSize: 2,
fontWeight: "medium",
gap: 1,
}),
large: sprinkles({
height: 10,
borderRadius: 3,
paddingX: 3,
paddingY: 2,
typeSize: "buttonLarge",
fontWeight: "bodyMedium",
typeSize: 3,
fontWeight: "medium",
gap: 2,
}),
},
Expand Down
6 changes: 3 additions & 3 deletions src/components/Input/Input.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const InputNumberTemplate: Story = {
type="number"
value={value}
onChange={(e) => setValue(e.target.value)}
endAdornment={<Text variant="caption">USD</Text>}
endAdornment={<Text size={1}>USD</Text>}
/>
</Box>
);
Expand All @@ -156,7 +156,7 @@ export const Number: Story = {
type="number"
value={value}
onChange={(e) => setValue(e.target.value)}
endAdornment={<Text variant="caption">USD</Text>}
endAdornment={<Text size={1}>USD</Text>}
/>`,
},
},
Expand All @@ -180,7 +180,7 @@ export const NumberWithLabel: Story = {
type="number"
value={value}
onChange={(e) => setValue(e.target.value)}
endAdornment={<Text variant="caption">USD</Text>}
endAdornment={<Text size={1}>USD</Text>}
/>`,
},
},
Expand Down

0 comments on commit 0484be7

Please sign in to comment.