Skip to content

Commit

Permalink
🚚 rename Label to Tag
Browse files Browse the repository at this point in the history
  • Loading branch information
ulricden committed Jul 9, 2024
1 parent 9016fb2 commit 3f3aa0a
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 104 deletions.
2 changes: 1 addition & 1 deletion Storybook/.ondevice/storybook.requires.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const getStories = () => {
"./components/DateSelector/DateSelector.stories.tsx": require("../components/DateSelector/DateSelector.stories.tsx"),
"./components/Dialog/Dialog.stories.tsx": require("../components/Dialog/Dialog.stories.tsx"),
"./components/Divider/Divider.stories.tsx": require("../components/Divider/Divider.stories.tsx"),
"./components/Label/Label.stories.tsx": require("../components/Label/Label.stories.tsx"),
"./components/NumberField/NumberField.stories.tsx": require("../components/NumberField/NumberField.stories.tsx"),
"./components/Tag/Tag.stories.tsx": require("../components/Tag/Tag.stories.tsx"),
"./components/TextField/TextField.stories.tsx": require("../components/TextField/TextField.stories.tsx"),
"./components/Toggle/Toggle.stories.tsx": require("../components/Toggle/Toggle.stories.tsx"),
"./components/TopAppBar/TopAppBar.stories.tsx": require("../components/TopAppBar/TopAppBar.stories.tsx"),
Expand Down
91 changes: 0 additions & 91 deletions Storybook/components/Label/Label.stories.tsx

This file was deleted.

91 changes: 91 additions & 0 deletions Storybook/components/Tag/Tag.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import type { Meta, StoryObj } from '@storybook/react-native';
import { Tag } from '../../../src/components/tag/Tag';
import React from 'react';
import { StyleSheet, View } from 'react-native';

type TagProps = React.ComponentProps<typeof Tag>;

export default {
title: 'components/Tag',
component: Tag,
args: {
text: 'text',
},
argTypes: {
text: {
control: { type: 'text' },
},
size: {
control: { type: 'radio' },
options: ['m', 's'],
},
},

decorators: [
(Story) => {
const styles = StyleSheet.create({
container: { padding: 16 },
});
return (
<View style={styles.container}>
<Story />
</View>
);
},
],
} as Meta<TagProps>;

type Story = StoryObj<TagProps>;

export const Default: Story = (args) => {
const rowStyles = {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 12,
} as const;

const columnStyles = {
gap: 8,
};

return (
<View style={rowStyles}>
<View style={columnStyles}>
<Tag {...args} status='neutral' variant='filled' />
<Tag {...args} status='neutral' variant='soft' />
<Tag {...args} status='neutral' variant='outlined' />
</View>
<View style={columnStyles}>
<Tag {...args} status='primary' variant='filled' />
<Tag {...args} status='primary' variant='soft' />
<Tag {...args} status='primary' variant='outlined' />
</View>
<View style={columnStyles}>
<Tag {...args} status='secondary' variant='filled' />
<Tag {...args} status='secondary' variant='soft' />
<Tag {...args} status='secondary' variant='outlined' />
</View>
<View style={columnStyles}>
<Tag {...args} status='information' variant='filled' />
<Tag {...args} status='information' variant='soft' />
<Tag {...args} status='information' variant='outlined' />
</View>
<View style={columnStyles}>
<Tag {...args} status='success' variant='filled' />
<Tag {...args} status='success' variant='soft' />
<Tag {...args} status='success' variant='outlined' />
</View>
<View style={columnStyles}>
<Tag {...args} status='warning' variant='filled' />
<Tag {...args} status='warning' variant='soft' />
<Tag {...args} status='warning' variant='outlined' />
</View>
<View style={columnStyles}>
<Tag {...args} status='error' variant='filled' />
<Tag {...args} status='error' variant='soft' />
<Tag {...args} status='error' variant='outlined' />
</View>
</View>
);
};
Default.parameters = { noSafeArea: false };
4 changes: 2 additions & 2 deletions src/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { TextField } from './fields/TextField';
import { Icon } from './icons/Icon';
import { TopAppBar } from './topAppBar/TopAppBar';
import { Card } from './card/Card';
import { Label } from './label/Label';
import { Tag } from './tag/Tag';
import { Divider } from './divider/Divider';
import { LineChart } from './charts/LineChart';
import { Badge } from './badge/Badge';
Expand All @@ -31,7 +31,7 @@ export {
TextField,
TopAppBar,
Card,
Label,
Tag,
Divider,
LineChart,
Badge,
Expand Down
15 changes: 6 additions & 9 deletions src/components/label/Label.tsx → src/components/tag/Tag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { Theme, useTheme } from '../../styles/themes';

import { Body } from '../typography/Body';

type LabelVariant = 'outlined' | 'filled' | 'soft';
type LabelStatus =
type TagVariant = 'outlined' | 'filled' | 'soft';
type TagStatus =
| 'error'
| 'warning'
| 'success'
Expand All @@ -16,8 +16,8 @@ type LabelStatus =

type Props = {
text: string;
status: LabelStatus;
variant: LabelVariant;
status: TagStatus;
variant: TagVariant;
textStyle?: TextStyle;
style?: ViewStyle;
size?: 'm' | 's';
Expand All @@ -26,7 +26,7 @@ type Props = {
'size' | 'weight' | 'variant' | 'style' | 'children'
>;

export const Label = (props: Props) => {
export const Tag = (props: Props) => {
const {
style,
textStyle,
Expand Down Expand Up @@ -73,10 +73,7 @@ export const Label = (props: Props) => {
);
};

function getColors(
statusVariant: `${LabelStatus}-${LabelVariant}`,
theme: Theme,
) {
function getColors(statusVariant: `${TagStatus}-${TagVariant}`, theme: Theme) {
// TODO: use new tokens
const transparencyValue = '29';
const swColors = theme.sw.color;
Expand Down
2 changes: 1 addition & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export {
useBanner,
TopAppBar,
Card,
Label,
Tag,
Divider,
LineChart,
Badge,
Expand Down

0 comments on commit 3f3aa0a

Please sign in to comment.