From 3f3aa0a0f7884f0a2fdf1646ea7270dcf7e8714c Mon Sep 17 00:00:00 2001 From: ulric denis Date: Mon, 8 Jul 2024 11:17:39 +0200 Subject: [PATCH] :truck: rename Label to Tag --- Storybook/.ondevice/storybook.requires.js | 2 +- Storybook/components/Label/Label.stories.tsx | 91 ------------------- Storybook/components/Tag/Tag.stories.tsx | 91 +++++++++++++++++++ src/components/index.tsx | 4 +- .../{label/Label.tsx => tag/Tag.tsx} | 15 ++- src/index.tsx | 2 +- 6 files changed, 101 insertions(+), 104 deletions(-) delete mode 100644 Storybook/components/Label/Label.stories.tsx create mode 100644 Storybook/components/Tag/Tag.stories.tsx rename src/components/{label/Label.tsx => tag/Tag.tsx} (96%) diff --git a/Storybook/.ondevice/storybook.requires.js b/Storybook/.ondevice/storybook.requires.js index fc767235..74bcecd2 100644 --- a/Storybook/.ondevice/storybook.requires.js +++ b/Storybook/.ondevice/storybook.requires.js @@ -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"), diff --git a/Storybook/components/Label/Label.stories.tsx b/Storybook/components/Label/Label.stories.tsx deleted file mode 100644 index 04c2ba94..00000000 --- a/Storybook/components/Label/Label.stories.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-native'; -import { Label } from '../../../src/components/label/Label'; -import React from 'react'; -import { StyleSheet, View } from 'react-native'; - -type LabelProps = React.ComponentProps; - -export default { - title: 'components/Label', - component: Label, - 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 ( - - - - ); - }, - ], -} as Meta; - -type Story = StoryObj; - -export const Default: Story = (args) => { - const rowStyles = { - flexDirection: 'row', - flexWrap: 'wrap', - gap: 12, - } as const; - - const columnStyles = { - gap: 8, - }; - - return ( - - - - - - - - - - - - - - - - - ); -}; -Default.parameters = { noSafeArea: false }; diff --git a/Storybook/components/Tag/Tag.stories.tsx b/Storybook/components/Tag/Tag.stories.tsx new file mode 100644 index 00000000..c6842d07 --- /dev/null +++ b/Storybook/components/Tag/Tag.stories.tsx @@ -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; + +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 ( + + + + ); + }, + ], +} as Meta; + +type Story = StoryObj; + +export const Default: Story = (args) => { + const rowStyles = { + flexDirection: 'row', + flexWrap: 'wrap', + gap: 12, + } as const; + + const columnStyles = { + gap: 8, + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +Default.parameters = { noSafeArea: false }; diff --git a/src/components/index.tsx b/src/components/index.tsx index b44d47f6..0780f8fc 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -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'; @@ -31,7 +31,7 @@ export { TextField, TopAppBar, Card, - Label, + Tag, Divider, LineChart, Badge, diff --git a/src/components/label/Label.tsx b/src/components/tag/Tag.tsx similarity index 96% rename from src/components/label/Label.tsx rename to src/components/tag/Tag.tsx index a1e06126..8e316ecc 100644 --- a/src/components/label/Label.tsx +++ b/src/components/tag/Tag.tsx @@ -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' @@ -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'; @@ -26,7 +26,7 @@ type Props = { 'size' | 'weight' | 'variant' | 'style' | 'children' >; -export const Label = (props: Props) => { +export const Tag = (props: Props) => { const { style, textStyle, @@ -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; diff --git a/src/index.tsx b/src/index.tsx index 816f8f8c..c492aa4b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,7 +14,7 @@ export { useBanner, TopAppBar, Card, - Label, + Tag, Divider, LineChart, Badge,