feat(components/atom/tag/demo): tagGroup demo

components/atom/tag/demo/articles/ArticleTagGroup1.js

@@ -0,0 +1,64 @@
+import {useState} from 'react'
+
+import AtomTag, {atomTagDesigns} from 'components/atom/tag/src/index.js'
+import PropTypes from 'prop-types'
+
+import {Article, H2, Paragraph} from '@s-ui/documentation-library'
+
+const options = [
+ {id: 0, value: 'Autónomo'},
+ {id: 1, value: 'De duración determinada'},
+ {id: 2, value: 'De relevo'},
+ {id: 3, value: 'Fijo discontinuo'},
+ {id: 4, value: 'Formativo'},
+ {id: 5, value: 'Indefinido'},
+ {id: 6, value: 'A tiempo parcial'},
+ {id: 7, value: 'Otros contratos'}
+]
+
+const ArticleTagGroup1 = ({className}) => {
+ const [values, setValues] = useState([])
+ const handleClick = (ev, {value}) => {
+ const selectedValues = new Set(values)
+ selectedValues.has(value)
+ ? selectedValues.delete(value)
+ : selectedValues.add(value)
+ setValues(Array.from(selectedValues))
+ }
+ return (
+ <Article className={className}>
+ <H2>TagGroup 1</H2>
+ <Paragraph>Actionable tags can be used as selectable tags.</Paragraph>
+ <br />
+ <Paragraph>
+ Substitutes OUTLINE design for SOLID design to mark a tag as selected
+ and vice versa to unselect a tag.
+ </Paragraph>
+ <br />
+ <div style={{width: '500px'}}>
+ {options?.map((opt, pos) => (
+ <AtomTag
+ key={opt.key || pos}
+ label={opt.value}
+ value={opt.id}
+ design={
+ values?.includes(opt.id)
+ ? atomTagDesigns.SOLID
+ : atomTagDesigns.OUTLINE
+ }
+ onClick={(ev, {value}) => handleClick(ev, {value})}
+ />
+ ))}
+ </div>
+ <Paragraph>–––––</Paragraph>
+ </Article>
+ )
+}
+
+ArticleTagGroup1.displayName = 'ArticleTagGroup'
+
+ArticleTagGroup1.propTypes = {
+ className: PropTypes.string
+}
+
+export default ArticleTagGroup1

components/atom/tag/demo/articles/ArticleTagGroup2.js

@@ -0,0 +1,61 @@
+import {useState} from 'react'
+
+import AtomTag, {atomTagDesigns} from 'components/atom/tag/src/index.js'
+import PropTypes from 'prop-types'
+
+import {Article, H2, Paragraph} from '@s-ui/documentation-library'
+
+const options = [
+ {id: 0, value: 'Autónomo'},
+ {id: 1, value: 'De duración determinada'},
+ {id: 2, value: 'De relevo'},
+ {id: 3, value: 'Fijo discontinuo'},
+ {id: 4, value: 'Formativo'},
+ {id: 5, value: 'Indefinido'},
+ {id: 6, value: 'A tiempo parcial'},
+ {id: 7, value: 'Otros contratos'}
+]
+
+const ArticleTagGroup2 = ({className}) => {
+ const [values, setValues] = useState([])
+ const handleClick = (ev, {value}) => {
+ const selectedValues = new Set(values)
+ selectedValues.has(value)
+ ? selectedValues.delete(value)
+ : selectedValues.add(value)
+ setValues(Array.from(selectedValues))
+ }
+ return (
+ <Article className={className}>
+ <H2>TagGroup 2</H2>
+ <Paragraph>Actionable tags can be used as selectable tags.</Paragraph>
+ <br />
+ <Paragraph>
+ Substitutes SOLID design for 'special' tag type to mark a tag as
+ selected and vice versa to unselect a tag.
+ </Paragraph>
+ <br />
+ <div style={{width: '500px'}}>
+ {options?.map((opt, pos) => (
+ <AtomTag
+ key={opt.key || pos}
+ label={opt.value}
+ value={opt.id}
+ design={!values?.includes(opt.id) ? atomTagDesigns.OUTLINE : null}
+ type={values?.includes(opt.id) ? 'special' : null}
+ onClick={(ev, {value}) => handleClick(ev, {value})}
+ />
+ ))}
+ </div>
+ <Paragraph>–––––</Paragraph>
+ </Article>
+ )
+}
+
+ArticleTagGroup2.displayName = 'ArticleTagGroup'
+
+ArticleTagGroup2.propTypes = {
+ className: PropTypes.string
+}
+
+export default ArticleTagGroup2

components/atom/tag/demo/index.js

@@ -5,6 +5,8 @@ import ArticleDesign from './articles/ArticleDesign.js'
 import ArticleIcons from './articles/ArticleIcons.js'
 import ArticleIsFitted from './articles/ArticleIsFitted.js'
 import ArticleSize from './articles/ArticleSize.js'
+import ArticleTagGroup1 from './articles/ArticleTagGroup1.js'
+import ArticleTagGroup2 from './articles/ArticleTagGroup2.js'
 import ArticleTypes from './articles/ArticleTypes.js'
 import {CLASS_SECTION, closeIcon, icon} from './settings.js'
 
@@ -30,5 +32,9 @@ export default () => (
  <ArticleTypes className={CLASS_SECTION} icon={icon} closeIcon={closeIcon} />
  <br />
  <ArticleIsFitted className={CLASS_SECTION} icon={icon} />
+ <br />
+ <ArticleTagGroup1 className={CLASS_SECTION} />
+ <br />
+ <ArticleTagGroup2 className={CLASS_SECTION} />
  </div>
 )