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>
 )