diff --git a/src/components/Tag/Tag.mdx b/src/components/Tag/Tag.mdx new file mode 100644 index 000000000..b2d820f7d --- /dev/null +++ b/src/components/Tag/Tag.mdx @@ -0,0 +1,78 @@ +import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; +import Tag from './Tag'; +import SectionHeader from '../../storybook/SectionHeader'; +import * as TagStories from './Tag.stories'; + + + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +A universal Tag that is used to highlight system-generated metadata. + +## Props + + + +## Usage + + + + + +### Read-only Tag + +Read-only Tag comes in 5 colors: `neutral`, `blue`, `red`, `purple` and `teal`. + + + +### Read-only Tag with icon + +An leading icon can be added to the read-only Tag. + + + +### Selectable Tag + +Tag can also be selectable. To enable this functionality, provide the `onSelect` prop to the component.
+The `isSelected` prop indicates whether the Tag is selected or not. + + + +### Clearable Tag + +Tag can also be clearable. To enable this functionality, provide the `onClear` prop to the component + + + Tags cannot be selectable and clearable at the same time. If the onClear prop is provided, it + overrides the selectable functionality + + + + +### Tag sizes + +There are two Tag sizes: `normal` and `small`. + + + +### Playground + + diff --git a/src/components/Tag/Tag.stories.mdx b/src/components/Tag/Tag.stories.mdx deleted file mode 100644 index 82ced33a1..000000000 --- a/src/components/Tag/Tag.stories.mdx +++ /dev/null @@ -1,285 +0,0 @@ -import { Meta, Preview, Props, Story } from '@storybook/addon-docs'; -import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; -import Tag from './Tag'; -import Typography from '../Typography'; -import Stack from '../storyUtils/Stack'; -import { FIGMA_URL, Function } from '../../utils/common'; -import SectionHeader from '../../storybook/SectionHeader'; -import TagShowcase from '../../storybook/Showcases/TagShowcase'; -import { getIconSelectorKnob } from '../../utils/stories'; -import Overview from '../../storybook/Overview'; -import { useState } from 'react'; - - - - - -- [Overview](#overview) -- [Props](#props) -- [Usage](#usage) -- [Variants](#variants) - -## Overview - - - A universal Tag that is used to highlight system-generated metadata. - - -## Props - - - -## Usage - - - - - -### Read-only Tag - -Read-only Tag comes in 5 colors: `neutral`, `blue`, `red`, `purple` and `teal`. - - - - - Label - Label - Label - Label - Label - - - - -### Read-only Tag with icon - -An leading icon can be added to the read-only Tag. - - - - - Label - - Label - - - Label - - - Label - - - Label - - - - - -### Selectable Tag - -Tag can also be selectable. To enable this functionality, provide the `onSelect` prop to the component.
-The `isSelected` prop indicates whether the Tag is selected or not. - - - - - - {() => { - const [isSelected, setIsSelected] = useState(false); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Label - - ); - }} - - - {() => { - const [isSelected, setIsSelected] = useState(true); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Label - - ); - }} - - - - - -### Clearable Tag - -Tag can also be clearable. To enable this functionality, provide the `onClear` prop to the component - - - Tags cannot be selectable and clearable at the same time. If the onClear prop is provided, it - overrides the selectable functionality - - - - - - console.log('clear')}>Label - - - - -### Tag sizes - -There are two Tag sizes: `normal` and `small`. - - - - - Read-only Tag - - - Normal - Normal - Normal - Normal - Normal - - - Small - - Small - - - Small - - - Small - - - Small - - - - Selectable Tag - - - - {() => { - const [isSelected, setIsSelected] = useState(false); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Normal - - ); - }} - - - {() => { - const [isSelected, setIsSelected] = useState(true); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Normal - - ); - }} - - - - - {() => { - const [isSelected, setIsSelected] = useState(false); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Small - - ); - }} - - - {() => { - const [isSelected, setIsSelected] = useState(true); - return ( - setIsSelected((isSelected) => !isSelected)} - > - Small - - ); - }} - - - - Clearable Tag - - - console.log('clear')}>Normal - - - console.log('clear')}> - Small - - - - - -### Playground - - - - - - - - diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx new file mode 100644 index 000000000..e586328a7 --- /dev/null +++ b/src/components/Tag/Tag.stories.tsx @@ -0,0 +1,216 @@ +import Tag from './Tag'; + +import { FIGMA_URL, Function } from '../../utils/common'; +import Stack from 'components/storyUtils/Stack'; +import { useState } from 'react'; +import TagShowcase from '../../storybook/Showcases/TagShowcase'; +import { boolean, select, text } from '@storybook/addon-knobs'; +import Typography from '../Typography'; +import { getIconSelectorKnob } from '../../utils/stories'; + +export default { + title: 'Updated Components/Tag', + component: Tag, + parameters: { + design: [ + { + type: 'figma', + name: 'Tag', + url: `${FIGMA_URL}?node-id=3325%3A58246`, + }, + ], + chromatic: { diffThreshold: 0.3 }, + }, +}; + +export const ReadOnlyTag = { + render: () => ( + + Label + Label + Label + Label + Label + + ), + name: 'Read-only Tag', +}; + +export const ReadOnlyTagWithIcon = { + render: () => ( + + Label + + Label + + + Label + + + Label + + + Label + + + ), + name: 'Read-only Tag with icon', +}; + +export const SelectableTag = { + render: () => ( + + + {() => { + const [isSelected, setIsSelected] = useState(false); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Label + + ); + }} + + + {() => { + const [isSelected, setIsSelected] = useState(true); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Label + + ); + }} + + + ), + name: 'Selectable Tag', +}; + +export const ClearableTag = { + render: () => console.log('clear')}>Label, + name: 'Clearable Tag', +}; + +export const TagSizes = { + render: () => ( + <> + + Read-only Tag + + + Normal + Normal + Normal + Normal + Normal + + + Small + + Small + + + Small + + + Small + + + Small + + + + Selectable Tag + + + + {() => { + const [isSelected, setIsSelected] = useState(false); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Normal + + ); + }} + + + {() => { + const [isSelected, setIsSelected] = useState(true); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Normal + + ); + }} + + + + + {() => { + const [isSelected, setIsSelected] = useState(false); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Small + + ); + }} + + + {() => { + const [isSelected, setIsSelected] = useState(true); + return ( + setIsSelected((isSelected) => !isSelected)} + > + Small + + ); + }} + + + + Clearable Tag + + + console.log('clear')}>Normal + + + console.log('clear')}> + Small + + + + ), + name: 'Tag sizes', +}; + +export const Playground = { + render: () => ( + + ), + name: 'Playground', +}; diff --git a/src/components/TextArea/TextArea.mdx b/src/components/TextArea/TextArea.mdx new file mode 100644 index 000000000..87c1fb5a8 --- /dev/null +++ b/src/components/TextArea/TextArea.mdx @@ -0,0 +1,72 @@ +import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; +import TextArea from './TextArea'; +import SectionHeader from '../../storybook/SectionHeader'; +import * as TextAreaStories from './TextArea.stories'; +import Overview from '../../storybook/Overview'; + + + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +# Overview + +A universal TextArea component used for the case where large string of text is needed as an input. + +## Props + + + +## Usage + + + + + +### TextArea with placeholder + +TextArea with or without placeholder + + + +### TextArea with resizing option + +TextArea and how to change size with cols and rows + + + +### TextArea with counter + +TextArea with maximum characters indicated by a counter. + + + TextArea is a controlled component, so in order for the counter to work, the value prop must be + passed to the component. + + + + +### TextArea statuses + +TextArea with 3 available statuses: Normal, Error and Read-only. + + + +### Disabled TextArea + +Regular TextArea disabled with label + + + +### Playground + + diff --git a/src/components/TextArea/TextArea.stories.mdx b/src/components/TextArea/TextArea.stories.tsx similarity index 63% rename from src/components/TextArea/TextArea.stories.mdx rename to src/components/TextArea/TextArea.stories.tsx index 448db0228..f47af8270 100644 --- a/src/components/TextArea/TextArea.stories.mdx +++ b/src/components/TextArea/TextArea.stories.tsx @@ -1,15 +1,15 @@ -import { Meta, Preview, Props, Story } from '@storybook/addon-docs'; import { boolean, select, text, withKnobs, number } from '@storybook/addon-knobs'; import TextArea from './TextArea'; import Stack from '../storyUtils/Stack'; import { FIGMA_URL, Function } from '../../utils/common'; -import Overview from '../../storybook/Overview'; +import SectionHeader from '../../storybook/SectionHeader'; import { useState } from 'react'; - - - - -- [Overview](#overview) -- [Props](#props) -- [Usage](#usage) -- [Variants](#variants) - -# Overview - - - - A universal TextArea component used for the case where large string of text is needed as an - input. - - - -## Props - - - -## Usage - - - - - -### TextArea with placeholder + }, +}; -TextArea with or without placeholder - - - +export const TextAreaWithPlaceholder = { + render: () => (