Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Part of #18714: Replace deprecated constants with enums in: AvatarBase and Text #19242

Merged
merged 1 commit into from
Jun 5, 2023
Merged

Part of #18714: Replace deprecated constants with enums in: AvatarBase and Text #19242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions ui/components/component-library/avatar-base/avatar-base.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import {
AlignItems,
DISPLAY,
Display,
TextColor,
BackgroundColor,
BorderColor,
Expand Down Expand Up @@ -60,7 +60,7 @@ export default {
control: 'select',
},
display: {
options: Object.values(DISPLAY),
options: Object.values(Display),
control: 'select',
table: { category: 'box props' },
},
Expand Down Expand Up @@ -92,14 +92,14 @@ export default {
borderColor: BorderColor.borderDefault,
children: 'B',
},
} as ComponentMeta<typeof AvatarBase>;
} as Meta<typeof AvatarBase>;

export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;

DefaultStory.storyName = 'Default';

export const Size = (args: AvatarBaseProps) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<AvatarBase {...args} size={AvatarBaseSize.Xs} />
<AvatarBase {...args} size={AvatarBaseSize.Sm} />
<AvatarBase {...args} size={AvatarBaseSize.Md} />
Expand All @@ -109,7 +109,7 @@ export const Size = (args: AvatarBaseProps) => (
);

export const Children = (args: AvatarBaseProps) => (
<Box display={DISPLAY.FLEX} gap={1}>
<Box display={Display.Flex} gap={1}>
<AvatarBase {...args}>
<img src="./images/eth_logo.png" />
</AvatarBase>
Expand All @@ -131,7 +131,7 @@ export const Children = (args: AvatarBaseProps) => (
);

export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
<Box display={DISPLAY.FLEX} gap={1}>
<Box display={Display.Flex} gap={1}>
<AvatarBase {...args}>B</AvatarBase>
<AvatarBase
{...args}
Expand Down
4 changes: 2 additions & 2 deletions ui/components/component-library/avatar-base/avatar-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
BackgroundColor,
BorderColor,
TextColor,
DISPLAY,
Display,
JustifyContent,
AlignItems,
BorderRadius,
Expand Down Expand Up @@ -48,7 +48,7 @@ export const AvatarBase = forwardRef(
)}
ref={ref}
as={ValidTag.Div}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
borderRadius={BorderRadius.full}
Expand Down
42 changes: 21 additions & 21 deletions ui/components/component-library/text/text.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import {
DISPLAY,
Display,
BackgroundColor,
BorderColor,
FontWeight,
Expand All @@ -10,8 +10,8 @@ import {
TextAlign,
OverflowWrap,
TextTransform,
FRACTIONS,
FLEX_DIRECTION,
BlockSize,
FlexDirection,
TextVariant,
Color,
} from '../../../helpers/constants/design-system';
Expand All @@ -30,7 +30,7 @@ export default {
page: README,
},
},
} as ComponentMeta<typeof Text>;
} as Meta<typeof Text>;

function renderBackgroundColor(color) {
let bgColor;
Expand Down Expand Up @@ -70,7 +70,7 @@ function renderBackgroundColor(color) {
return bgColor;
}

const Template: ComponentStory<typeof Text> = (args) => (
const Template: StoryFn<typeof Text> = (args) => (
<Text {...args}>{args.children}</Text>
);

Expand All @@ -92,7 +92,7 @@ export const Variant = (args) => (
</>
);

export const ColorStory: ComponentStory<typeof Text> = (args) => {
export const ColorStory: StoryFn<typeof Text> = (args) => {
// Index of last valid color in TextColor array
return (
<>
Expand All @@ -113,7 +113,7 @@ export const ColorStory: ComponentStory<typeof Text> = (args) => {
};
ColorStory.storyName = 'Color';

export const FontWeightStory: ComponentStory<typeof Text> = (args) => (
export const FontWeightStory: StoryFn<typeof Text> = (args) => (
<>
{Object.values(FontWeight).map((weight) => (
<Text {...args} fontWeight={weight} key={weight}>
Expand All @@ -125,7 +125,7 @@ export const FontWeightStory: ComponentStory<typeof Text> = (args) => (

FontWeightStory.storyName = 'Font Weight';

export const FontStyleStory: ComponentStory<typeof Text> = (args) => (
export const FontStyleStory: StoryFn<typeof Text> = (args) => (
<>
{Object.values(FontStyle).map((style) => (
<Text {...args} fontStyle={style} key={style}>
Expand All @@ -137,7 +137,7 @@ export const FontStyleStory: ComponentStory<typeof Text> = (args) => (

FontStyleStory.storyName = 'Font Style';

export const TextTransformStory: ComponentStory<typeof Text> = (args) => (
export const TextTransformStory: StoryFn<typeof Text> = (args) => (
<>
{Object.values(TextTransform).map((transform) => (
<Text {...args} textTransform={transform} key={transform}>
Expand All @@ -149,7 +149,7 @@ export const TextTransformStory: ComponentStory<typeof Text> = (args) => (

TextTransformStory.storyName = 'Text Transform';

export const TextAlignStory: ComponentStory<typeof Text> = (args) => (
export const TextAlignStory: StoryFn<typeof Text> = (args) => (
<>
{Object.values(TextAlign).map((align) => (
<Text {...args} textAlign={align} key={align}>
Expand All @@ -161,10 +161,10 @@ export const TextAlignStory: ComponentStory<typeof Text> = (args) => (

TextAlignStory.storyName = 'Text Align';

export const OverflowWrapStory: ComponentStory<typeof Text> = (args) => (
export const OverflowWrapStory: StoryFn<typeof Text> = (args) => (
<Box
borderColor={BorderColor.warningDefault}
display={DISPLAY.BLOCK}
display={Display.Block}
style={{ width: 200 }}
>
<Text {...args} overflowWrap={OverflowWrap.Normal}>
Expand All @@ -178,11 +178,11 @@ export const OverflowWrapStory: ComponentStory<typeof Text> = (args) => (

OverflowWrapStory.storyName = 'Overflow Wrap';

export const Ellipsis: ComponentStory<typeof Text> = (args) => (
export const Ellipsis: StoryFn<typeof Text> = (args) => (
<Box
borderColor={BorderColor.primaryDefault}
display={DISPLAY.BLOCK}
width={FRACTIONS.ONE_THIRD}
display={Display.Block}
width={BlockSize.OneThird}
>
<Text {...args} ellipsis>
Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
Expand All @@ -193,7 +193,7 @@ export const Ellipsis: ComponentStory<typeof Text> = (args) => (
</Box>
);

export const As: ComponentStory<typeof Text> = (args) => (
export const As: StoryFn<typeof Text> = (args) => (
<>
{Object.keys(ValidTag).map((tag) => {
if (ValidTag[tag] === ValidTag.Input) {
Expand All @@ -217,11 +217,11 @@ export const As: ComponentStory<typeof Text> = (args) => (
</>
);

export const TextDirectionStory: ComponentStory<typeof Text> = (args) => (
export const TextDirectionStory: StoryFn<typeof Text> = (args) => (
<Box
style={{ maxWidth: 300 }}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={4}
>
<Text {...args} textDirection={TextDirection.LeftToRight}>
Expand All @@ -237,7 +237,7 @@ export const TextDirectionStory: ComponentStory<typeof Text> = (args) => (
</Box>
);

export const Strong: ComponentStory<typeof Text> = (args) => (
export const Strong: StoryFn<typeof Text> = (args) => (
<>
<Text {...args} as="strong">
This is an as="strong" demo.
Expand Down