-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2808 from SUI-Components/label-doc-article-change
docs(components/atom/label): label documentation articles
- Loading branch information
Showing
6 changed files
with
148 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library' | ||
| import AtomInput from '@s-ui/react-atom-input' | ||
|
|
||
| import AtomLabel, {type FontSize, AtomLabelFontSizes} from '../../src/index' | ||
| import {flexCenteredStyle} from '../settings.js' | ||
|
|
||
| const ArticleFontSize = ({className}: {className?: string}) => { | ||
| const labelFontSizes = [['default', undefined], ...Object.entries(AtomLabelFontSizes)] as Array<[string, FontSize]> | ||
| return ( | ||
| <Article> | ||
| <H2>FontSize</H2> | ||
| <Paragraph> | ||
| The component provides 4 different sizes provided using the <Code>fontSize</Code> prop | ||
| </Paragraph> | ||
| <Grid cols={5} gutter={[8, 8]}> | ||
| {labelFontSizes.map(([key, value], index) => ( | ||
| <Cell key={index} style={flexCenteredStyle}> | ||
| <Box> | ||
| <AtomLabel | ||
| name={`atomLabelName-${key}`} | ||
| htmlFor={`labelName-${key}`} | ||
| text={`Size ${value as string}`} | ||
| fontSize={value} | ||
| /> | ||
| <AtomInput /> | ||
| </Box> | ||
| </Cell> | ||
| ))} | ||
| </Grid> | ||
| </Article> | ||
| ) | ||
| } | ||
|
|
||
| export default ArticleFontSize |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library' | ||
| import AtomButton from '@s-ui/react-atom-button' | ||
| import AtomCheckbox from '@s-ui/react-atom-checkbox' | ||
| import AtomInput from '@s-ui/react-atom-input' | ||
|
|
||
| import AtomLabel, {type Inline} from '../../src/index' | ||
| import {CheckedIcon, flexCenteredStyle, IndeterminateIcon} from '../settings.js' | ||
|
|
||
| const ArticleInline = ({className}: {className?: string}) => { | ||
| return ( | ||
| <Article className={className}> | ||
| <H2>Inline</H2> | ||
| <Paragraph> | ||
| <Code>inline</Code> prop can be used to define where teh element is going to be inline positioned. The value | ||
| options are 'left' and 'right' | ||
| </Paragraph> | ||
| <Grid cols={3} gutter={[8, 8]}> | ||
| {[ | ||
| <AtomInput key={0} />, | ||
| <AtomCheckbox key={1} checkedIcon={CheckedIcon} intermediateIcon={IndeterminateIcon} />, | ||
| <AtomButton key={2}>Button</AtomButton> | ||
| ].map((component, index) => | ||
| ['left', undefined, 'right'].map((value, index) => ( | ||
| <Cell key={index} style={flexCenteredStyle}> | ||
| <Box> | ||
| {value === 'right' && component} | ||
| <AtomLabel | ||
| name={`atomLabelName-${value as string}`} | ||
| htmlFor={`labelName-${value as string}`} | ||
| text={`Label ${value as string}`} | ||
| optionalText="(Optional)" | ||
| inline={value as Inline} | ||
| /> | ||
| {value !== 'right' && component} | ||
| </Box> | ||
| </Cell> | ||
| )) | ||
| )} | ||
| </Grid> | ||
| </Article> | ||
| ) | ||
| } | ||
|
|
||
| export default ArticleInline |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library' | ||
| import AtomInput from '@s-ui/react-atom-input' | ||
|
|
||
| import AtomLabel, {type Type, AtomLabelTypes} from '../../src/index' | ||
| import {flexCenteredStyle} from '../settings.js' | ||
|
|
||
| const ArticleType = ({className}: {className?: string}) => { | ||
| const labelTypes = [['default', undefined], ...Object.entries(AtomLabelTypes)] as Array<[string, Type]> | ||
|
|
||
| return ( | ||
| <Article className={className}> | ||
| <H2>Type</H2> | ||
| <Paragraph> | ||
| You can select any of the available predefined types using the <Code>type</Code> prop. | ||
| </Paragraph> | ||
| <Grid cols={labelTypes.length} gutter={[8, 8]}> | ||
| {labelTypes.map(([key, value]: [string, Type], index) => ( | ||
| <Cell key={index} style={flexCenteredStyle}> | ||
| <Box mode={value === AtomLabelTypes.CONTRAST ? 'dark' : 'light'}> | ||
| <AtomLabel | ||
| name={`atomLabelName-${key}`} | ||
| htmlFor={`labelName-${key}`} | ||
| text={`Label ${value as string}`} | ||
| optionalText="(Optional)" | ||
| type={value} | ||
| /> | ||
| <AtomInput /> | ||
| </Box> | ||
| </Cell> | ||
| ))} | ||
| </Grid> | ||
| </Article> | ||
| ) | ||
| } | ||
|
|
||
| export default ArticleType |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import {AntDesignIcon} from '@s-ui/documentation-library' | ||
| import AtomIcon from '@s-ui/react-atom-icon' | ||
|
|
||
| export const BASE_CLASS_DEMO = `DemoAtomLabel` | ||
| export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` | ||
|
|
||
| export const flexCenteredStyle = { | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| wrap: 'nowrap', | ||
| alignItems: 'center', | ||
| alignContent: 'center' | ||
| } | ||
|
|
||
| export const CheckedIcon = () => ( | ||
| <AtomIcon> | ||
| <AntDesignIcon icon="AiOutlineCheck" style={{color: 'currentColor'}} /> | ||
| </AtomIcon> | ||
| ) | ||
|
|
||
| export const IndeterminateIcon = () => ( | ||
| <AtomIcon> | ||
| <AntDesignIcon icon="AiOutlineLine" style={{color: 'currentColor'}} /> | ||
| </AtomIcon> | ||
| ) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.