From 4f31794d4fd9c6b3d86411529a4f990f21d78f7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vagner=20Jos=C3=A9=20Nicolodi?= <vagnernico@gmail.com>
Date: Wed, 5 Jan 2022 17:00:58 -0300
Subject: [PATCH 1/2] feat(CheckableTag): Added new CheckableTag component
 STC-825

---
 src/components/CheckableTag/CheckableTag.md   |  28 ++++
 .../CheckableTag/CheckableTag.stories.tsx     |  40 ++++++
 .../CheckableTag/CheckableTag.test.tsx        |  63 +++++++++
 src/components/CheckableTag/CheckableTag.tsx  | 128 ++++++++++++++++++
 src/components/Checkbox/Checkbox.stories.tsx  |   1 +
 src/components/Checkbox/Checkbox.tsx          |   6 +-
 .../CheckableTag/Default/chrome.png           | Bin 0 -> 279 bytes
 .../CheckableTag/Default/firefox.png          | Bin 0 -> 192 bytes
 .../CheckableTag/Disabled/chrome.png          | Bin 0 -> 1242 bytes
 .../CheckableTag/Disabled/firefox.png         | Bin 0 -> 949 bytes
 .../CheckableTag/Labeled/chrome.png           | Bin 0 -> 1412 bytes
 .../CheckableTag/Labeled/firefox.png          | Bin 0 -> 1088 bytes
 12 files changed, 264 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CheckableTag/CheckableTag.md
 create mode 100644 src/components/CheckableTag/CheckableTag.stories.tsx
 create mode 100644 src/components/CheckableTag/CheckableTag.test.tsx
 create mode 100644 src/components/CheckableTag/CheckableTag.tsx
 create mode 100644 tests/images/Design System/CheckableTag/Default/chrome.png
 create mode 100644 tests/images/Design System/CheckableTag/Default/firefox.png
 create mode 100644 tests/images/Design System/CheckableTag/Disabled/chrome.png
 create mode 100644 tests/images/Design System/CheckableTag/Disabled/firefox.png
 create mode 100644 tests/images/Design System/CheckableTag/Labeled/chrome.png
 create mode 100644 tests/images/Design System/CheckableTag/Labeled/firefox.png

diff --git a/src/components/CheckableTag/CheckableTag.md b/src/components/CheckableTag/CheckableTag.md
new file mode 100644
index 00000000..82a9493f
--- /dev/null
+++ b/src/components/CheckableTag/CheckableTag.md
@@ -0,0 +1,28 @@
+Default CheckableTag example:
+
+```js
+const [checked, setChecked] = React.useState(false)
+
+;<CheckableTag
+  checked={checked}
+  onChange={() => setChecked((previousState) => !previousState)}
+/>
+```
+
+Labeled CheckableTag example:
+
+```js
+const [checked, setChecked] = React.useState(false)
+
+;<CheckableTag
+  label="Check me"
+  checked={checked}
+  onChange={() => setChecked((previousState) => !previousState)}
+/>
+```
+
+Disabled CheckableTag state example:
+
+```js
+;<CheckableTag label="Uncheckable" disabled={true} />
+```
diff --git a/src/components/CheckableTag/CheckableTag.stories.tsx b/src/components/CheckableTag/CheckableTag.stories.tsx
new file mode 100644
index 00000000..464824b4
--- /dev/null
+++ b/src/components/CheckableTag/CheckableTag.stories.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from "react"
+import { Meta, Story } from "@storybook/react/types-6-0"
+
+import CheckableTag, { CheckableTagProps } from "./CheckableTag"
+
+export default {
+  title: "Design System/CheckableTag",
+  component: CheckableTag,
+} as Meta
+
+const Template: Story<CheckableTagProps> = (props) => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <CheckableTag
+      {...props}
+      id="checkbox"
+      name="checkbox"
+      checked={checked}
+      onChange={() => setChecked((previousState) => !previousState)}
+    />
+  )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {}
+
+export const Labeled = Template.bind({})
+
+Labeled.args = {
+  label: "Check me",
+}
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  label: "I'm disabled",
+  disabled: true,
+}
diff --git a/src/components/CheckableTag/CheckableTag.test.tsx b/src/components/CheckableTag/CheckableTag.test.tsx
new file mode 100644
index 00000000..f3a902f5
--- /dev/null
+++ b/src/components/CheckableTag/CheckableTag.test.tsx
@@ -0,0 +1,63 @@
+import "@testing-library/jest-dom/extend-expect"
+import React, { useState } from "react"
+import { fireEvent, render } from "@testing-library/react"
+
+import CheckableTag, { CheckableTagProps } from "./CheckableTag"
+import { axe } from "jest-axe"
+
+const CheckableTagTemplate = (props: CheckableTagProps) => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <CheckableTag
+      checked={checked}
+      onChange={() => setChecked((previous) => !previous)}
+      {...props}
+    />
+  )
+}
+
+describe("CheckableTag", () => {
+  it("can be checked", () => {
+    const mockedFunction = jest.fn()
+    const { getByRole } = render(
+      <CheckableTagTemplate onChange={mockedFunction} />
+    )
+
+    const checkbox = getByRole("checkbox")
+
+    expect(checkbox).toBeInTheDocument()
+
+    fireEvent.click(checkbox)
+
+    expect(mockedFunction).toHaveBeenCalled()
+  })
+
+  it("renders the label succesfully", () => {
+    const label = "Check me"
+    const { getByText } = render(<CheckableTagTemplate label={label} />)
+
+    expect(getByText(label)).toBeInTheDocument()
+  })
+
+  it("can be disabled", () => {
+    const mockedFunction = jest.fn()
+    const { getByRole } = render(
+      <CheckableTagTemplate disabled={true} onChange={() => mockedFunction()} />
+    )
+
+    const checkbox = getByRole("checkbox")
+
+    fireEvent.click(checkbox)
+
+    expect(mockedFunction).not.toHaveBeenCalled()
+  })
+  it("passes a11y check", async () => {
+    // Arrange
+    const { container } = render(<CheckableTag label="Check me" />)
+    const results = await axe(container)
+
+    // Assert
+    expect(results).toHaveNoViolations()
+  })
+})
diff --git a/src/components/CheckableTag/CheckableTag.tsx b/src/components/CheckableTag/CheckableTag.tsx
new file mode 100644
index 00000000..a593253d
--- /dev/null
+++ b/src/components/CheckableTag/CheckableTag.tsx
@@ -0,0 +1,128 @@
+/** @jsxImportSource theme-ui */
+import React, { forwardRef, HTMLProps } from "react"
+import Icon from "../Icon/Icon"
+
+export interface CheckableTagProps
+  extends Omit<HTMLProps<HTMLInputElement>, "label" | "ref"> {
+  label?: React.ReactNode
+}
+
+const stateStyles = {
+  resting: {
+    backgroundColor: "text.alpha.95",
+    color: "text.40",
+  },
+  hover: {
+    backgroundColor: "text.alpha.90",
+  },
+  active: {
+    backgroundColor: "text.alpha.90",
+    outline: "none",
+  },
+  filled: {
+    backgroundColor: "secondary.alpha.90",
+    color: "secondary",
+  },
+  filledHover: {
+    backgroundColor: "secondary.alpha.85",
+    color: "secondary",
+    outline: "none",
+  },
+}
+
+const CheckableTag = forwardRef<HTMLInputElement, CheckableTagProps>(
+  function CheckableTag(props: CheckableTagProps, ref) {
+    const {
+      checked = false,
+      disabled = false,
+      id,
+      label,
+      name,
+      onChange,
+      ...restProps
+    } = props
+
+    return (
+      <label
+        htmlFor={id}
+        sx={{
+          alignContent: "center",
+          alignItems: "center",
+          borderRadius: 2,
+          cursor: disabled ? "default" : "pointer",
+          display: "inline-flex",
+          gap: 2,
+          opacity: disabled ? 0.4 : 1,
+          position: "relative",
+          px: 3,
+          py: 2,
+          variant: "text.heading4",
+
+          ...(checked ? stateStyles.filled : stateStyles.resting),
+
+          "&:hover": {
+            ...(!disabled &&
+              (checked ? stateStyles.filledHover : stateStyles.hover)),
+          },
+
+          "&:focus-within": {
+            ...(!disabled &&
+              (checked ? stateStyles.filledHover : stateStyles.active)),
+          },
+        }}
+      >
+        {label}
+        <input
+          {...restProps}
+          type="checkbox"
+          id={id}
+          name={name}
+          onChange={(!disabled && onChange) || undefined}
+          ref={(input) => {
+            if (input) {
+              input.checked = checked
+              input.disabled = disabled
+
+              if (ref) {
+                if (typeof ref === "function") {
+                  ref(input)
+                } else {
+                  ref.current = input
+                }
+              }
+            }
+          }}
+          sx={{
+            appearance: "none",
+            border: "none",
+            borderRadius: 1,
+            cursor: disabled ? "default" : "pointer",
+            height: 20,
+            outline: "none",
+            position: "absolute",
+            transition: "all 0.2s",
+            width: 20,
+          }}
+          role="checkbox"
+        />
+        {((checked || !label) && (
+          <div
+            sx={{
+              alignContent: "center",
+              alignItems: "center",
+              display: "flex",
+              minHeight: 20,
+              justifyContent: "center",
+              visibility: !checked ? "hidden" : undefined,
+            }}
+          >
+            <Icon name="IconCheck" size={12} stroke={4} />
+          </div>
+        )) ||
+          null}
+      </label>
+    )
+  }
+)
+
+export default CheckableTag
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 6262848c..c100f38a 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -14,6 +14,7 @@ const Template: Story<ICheckboxProps> = (props) => {
   return (
     <Checkbox
       {...props}
+      id="checkbox"
       name="checkbox"
       checked={checked}
       onChange={() => setChecked((previousState) => !previousState)}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 5a049adc..3317046c 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -6,6 +6,7 @@ export interface ICheckboxProps {
   checked?: boolean
   indeterminate?: boolean
   disabled?: boolean
+  id?: string
   label?: React.ReactNode
   name?: string
   onChange?(event: React.ChangeEvent<HTMLInputElement>): void
@@ -35,6 +36,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
       checked = false,
       disabled = false,
       indeterminate = false,
+      id,
       label,
       name,
       onChange,
@@ -54,7 +56,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
         <input
           {...restProps}
           type="checkbox"
-          id={name}
+          id={id}
           name={name}
           onChange={(!disabled && onChange) || undefined}
           ref={(input) => {
@@ -134,7 +136,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
               width: "auto",
               cursor: disabled ? "auto" : "pointer",
             }}
-            htmlFor={name}
+            htmlFor={id}
           >
             {label}
           </label>
diff --git a/tests/images/Design System/CheckableTag/Default/chrome.png b/tests/images/Design System/CheckableTag/Default/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d57ce3b8502e9d3d52fb8191e39d7f7cf368d16
GIT binary patch
literal 279
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbB7>k44ofy`glX(f`T=aBt42fuc
zdt>*yBMLmO7n|jk{{P?VD3RWkv8XaOa#xTO*ZXN{CmkMd%Dvq-{f=x}n<3jV2@B;k
zHe+WO2bcWxr=nM?-Lv0{9EragwQ$w_1*NfxY15PDb#hEgWn>W8;GZVO#&Cvb?|0cJ
z@21CJULTcRP=4Xe$(ppZ1)J+G)k`Jc5ipVd7}>N)NM!1Q6)di*8d{EloLyc4As`{w
zGd8yij+`-P={%8heB!F64vwwYZi-!r3iP@uzjam8vn4K1ZV28jPyG7k)YN&a7ESq7
b_Kl%WA;Vx&Z23N*=NLR){an^LB{Ts5>mzeO

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Default/firefox.png b/tests/images/Design System/CheckableTag/Default/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..c68e226a0c7c1f95f64a5d342948af61ea149d93
GIT binary patch
literal 192
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbB+C5zyLn2z=-q^@>#DIr6;Q#;k
zY>jF!mo=MhDe&H4DRN<gCjZ2vdim~?Jf#}0N4YZ{P|?k-zgN0<f=ycm_sR4NC*A5Y
z->|*Pc(!)sq$_<t-6mx_Szn*F>ht?Ij1OM9z2VeY(7^P{&w-IuB%qv$>&1VE$Hx{F
rHb2@CSaoMp;uEX1Cx^05dA(<zuUc1E_r$s#=p+VDS3j3^P6<r_ej-nB

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Disabled/chrome.png b/tests/images/Design System/CheckableTag/Disabled/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..209a4e963d1670513bf1de4d93c525bf7159b4a9
GIT binary patch
literal 1242
zcmV<01SR{4P)<h;3K|Lk000e1NJLTq003YB001Ni1^@s6c2Pe<00001b5ch_0Itp)
z=>Px(lu1NERA_<in_F+%NEn8nF&>9g6FF&WLO4ZLTUEX5|Njk0k*KPwwTNN|fpdU@
z6KoFSy<qXiA?<E+s8_0=8)P$nXXbn7q_IatQ512DD2h-@5k(Pq{>peDLI{KqXqtu)
zBKhBK1D4ArN~zyoz&{C1)5zs=@wJFnuvjcoEY_cguIsB_0c5Q{1=cawlv0@iDX^Yr
zwQQnI52e(q2V|r}6h*5!AR`?z1O5kO2Bb`8K+62G0rUBscDv2_`8h!l&~CSxPNz>^
zurFV}aB^~jQi@KeL%-jDl-}|2@lQ3n-7dCmKS*0CMZ4YR^78VRpM6vh&~-iW`y2=%
zFbv~a^MF+l(^wHcs#fbgjoW)0PmK_Qw{PD*n||6n$^an*A3uHs!1FxL&dxYEIAAas
zkjv$0G#Z?rpEDkh$>;Mln@x(v;)c$0xx{r{Mxzk``}_Neo!H~!V=T*}QmHT+jW|0y
zV>X+yy}eDN(LhR>(9kpu(=?e(CKL(<TCElUi^T%lwi%DdNGY)_i~armd+X+T9-ikh
zpU){4i_~g0N~ID2K@i|L4!-XrrR3n?;K4C`(n&aqBF5u!T%d2?zOh&=I6OQ=DMh#2
zz4y7((^IaluGrh#!?G-{uCBPbx!Fj!*4WzGqE@RB1Ob!DB-R*>MjRd<(r7fezP{d=
zn>^1$DMhtfrBEo~I1a<%a3i0Kiwj)WWoKuHdcBSiBCd;43fs1sPN!5V6-?8_ahwOo
z?8yh#qoX6Fln5bk9EWDJNj{%P*L6-#PFO4!iSc|kn=u>?sn_dqYuw%4<<qB6Kg=VS
z%dxYw!^@X15kkZotyYWO-CY1mr4pS^C-GdlT;|Q2Hvm|cg>BpP`+ZE)Or#qO2JG$a
zQLoqI@^m^KE-x?9b)7H_dH?=Bg+c*<VzKzc#`SMJsR2R=q?Euv^TOTh<#L%YAPhqQ
zUc7h_-!lw@t*xyMeNEG7wOaIgJvyBZ#bS|Wvl(xt-yYs{UEk0sm&=LkQmKUR`-yu|
z6cL6YVHj?#YJwm@N{N&*4*uP;|0>VBwD=FKgA@b-`FtK&jn(t{{ND7XQi%^AJ}{k5
z>2|xgu1mAo1mNc8CZQ3AVIoj>gMEE{jbRvxd+SwKp-@PS?NJmVrDQUh#N}HzuE#9H
zQ#Zgc3{2DH^z=0D9fQGu<#M@^HV6VffBuYVnv~1s)o!Au#Tt&|pp-&NNx$FUSXTPJ
z&)2VC+1}p9_kF&9|IX3T(MCR&W#KqZY=rOoOePcFy?cjgn)Lg9Y}=+%si2gi*XupF
z{;3-P&}cMpT^Gl3$mMdFrg^Uc`Fx&gwTkC?42MI?<ubKeEurDMZme<FfLE_x5r!eX
zUJqT@sn_cp<3FrcVL}Kz&*S3a0>dz<R;zJudHwn|j^ohnb}<YiHtZpY*=&}*5J-`1
zFDPX)15ze4AZ0QGQYJGXWikU&CNm&qw7VaRX8b;c5SamK^7j|h*(j72nx?IKKxV@4
zXMI*cgXevxn{hwum}dtxelzzT(72r-JEHXT{OpL*Um9O9ngW2rIsgCw07*qoM6N<$
Ef@YOgYybcN

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Disabled/firefox.png b/tests/images/Design System/CheckableTag/Disabled/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..c027b77618bf6d4dd568a8cbd2ab18aa71b97173
GIT binary patch
literal 949
zcmV;m14{gfP)<h;3K|Lk000e1NJLTq003YB001Ni1^@s6c2Pe<000AgNkl<ZXo2mU
zTXU)~6ovi&zibmBkphC3LCe)!TZ>}lHtRgWl&aHnX{8?H%zA)~%bk3CCz&zn;moJ1
zDwJi3q9~B(xzs<XC<>HiiK?p34K;f2AIh@qJmCLbWm%pFAhZ2?DvF{FKxY2+RaZh!
zW`8%TtDsj^Rp-IntE#F(PiB92DvCk^=o~=TLEO6}014o}B>~(TfHX}(M2MmYyWI{%
zgxA;CFAvNx3``~yWLX9w1U%3CCqGqH;rsr@_R(kr+qVD8`*=Kph!Dr|bpad>2M`g`
zH2qcpmSz1_=l%qM<2V=&hqnbF&vOtFj>qG-0r)Dv{}w>4APAr+3Ovt)s;c0e<LT)M
zwrztk23^;&-EJ>-U^1DY-|s_JRm|t}7J&DIw_dL?7!1G|gKgV591bTQoO8IY3tiV+
z9<J*)@o>%&hT%m3K@dO)0mc{%!@$eSOVgGl35LTV6h#5&9B~}~3;;v~%d!xLA%qYh
zBABMxJP!tgv!3Je7>qHvt_$Dyo9})EkY!mj@U`b+v1mM0RYe@f*lad1P4mQqh%g)u
z;rl*p+XfL~wOXA3h@uEY1lM&D$1zOPgsQ4I91b`hj}SsY(=>RVhuLff#@NpRP-kQq
zh9Dv&NrF7jv0N@&?X~v%J&354jr;u`ilUqapePDPqY?J|{fWnNxoqCOy}f}k*77h-
zv-R7K<KW@p;RJvX0@LZVRiT=u!T0?p+v|Sid5+a;^)mn{iqbqU7K_&Uu-R-tM6H3#
z^Bm95&mbb~cDvU5!C-K93R*6gO@$bSfh0*TdVHLM=JR>0-S>T{s@ejOWf_R*tftc`
z9v>f}X<Eyt-i+KNfI55Ysi4l@e!qVfK)vHik_5W0!?LU|uK><D9LK?SyKN~=Q^au$
zMNwKizd8YK5<s4}=kN7;4a>65t^rAsG=myN5jf|~-u<J;XKR4tI2YG|dir!-7f}>p
zJRU>SG^A<TtO15$V7*>ru~;+}d9wiC?_e}d!)!J?nLg?Y2!a5brhzfmWdHAaxULJw
zaeiwT6h#qqT?b<fLWtJjCP@OzvYNIU*i`^XeXS$_3E;jZ0Z0J%EeW7&0P;`y?j%n|
z`~(2<U{-gks!ASB>`Kki#QHu!*8$y|>iYunczOpqIi4;rXk1ShFKEasO5dZ;t|<Ki
XCz^ABhuLqF00000NkvXXu0mjfZZ@|A

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Labeled/chrome.png b/tests/images/Design System/CheckableTag/Labeled/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..0054f03a668c07dfab6dc5d037c4b7923b2398e6
GIT binary patch
literal 1412
zcmV-~1$+95P)<h;3K|Lk000e1NJLTq002|~001Ni1^@s67fBre00001b5ch_0Itp)
z=>Px)K1oDDRA_<in#)fUT^NU-nRZ%GCasqi0Rv)WLD-1aL?oCrB_WbVMGXlO7w-LU
zSn0+XFhrWN@e(Z?V;d4+Q4NVPVzjLUf=b)is<fTUw`iD9@j~l-pV4og)totV-oEEI
z@4V;IBj~!Wvjt7lD3wZRnue;XSZv2;vmuHik|ZIDVnv;>RnS7AK&e#v&mH`eaX1_}
z91f!_=(?_Jn#PweU-&9mEp~_~iqzHBA&Md*fTAdtn7@FgX();UfT*gf^_iQ%=C~tT
z(P<94u2U+N$`NW|4w|MRYMS=D{rGFpG!60Rk6G*#UDqu^&BhYcWbCyzeE04hPo6v>
znM|T63SO_5lP6Eo+1Uxe)YKG;qHy{0Wz(GfH|?55O%a+(rMP+XCW%CX!-o&k-Q7*0
zP#_!*^Z4;&vwi%ds5(LwMPYh+8d;VZ9UaBxaslNL?*9Gzq|<5s&ohUr1zlQNBA?GQ
zGBRR_3FY-{Fc?G-1mm8fD1^gdmX?-qxm*km4${`v20$j0Args@NF=b^?HoON6u;kZ
z?A|OaEHF1WM?RmYsi}!TAi%+c2P=G8U0vnYty}nfKKlFnE9$1Err6lnprN6GSFc{-
z^?LF9{mjhFu)e-ddwV;<V31wAb^$OyKhOO9Jh@zs0|yQ;Ffc%Kb91%wRR77Zt*rsj
z+S<CUZmXD3P7MHoKmb7y2#3QcibAPWVsdhlbUICce?KQqoM2&LfoL=eKs+Aj(W6Ir
zy<U2IdnptO+`fIA&!0aVwm*IPL?{%Zy}g}4An;9JQ>hdVhlAeUURGCE86O|V<MGhf
z*T<VTZ;bR5kH?8bB6M_gaOTVzY&IK{lam#{w^M2!ly-vK?dHOT3kZUM$KzpQVuJPc
zb=KC_$Ye5HyLQcpa!HbiMx&fQeVW<XS-QHq7#bP^z~}RkPN$7%QdN~uD1_7L<ox;b
z+g{`*`}XZ47z_gCXkK1k=Iq(C2!cR1o8|4>w*bt}&eGl8&A`9_09{>OjE#-)?AbGV
zdU~qrbJc=2HZ}r~OeQ&U<VZ!GrfC%$u6y_HH9ET~MzL5VlgXg#I%8vF+w6b*_>pWj
zThWpF`g&SgT8#4Y@-nKbGCVwt)9L)KuUk`+)9FN(Wy2q*(@C*dMAI~~*(~vRoOnE5
z(LS9{|5%J~P_>{P9UaKBOe7M)<MC7sN_X$xrBEnv>C&Yi+Ss#a4*(-0BkbP28z@Je
z&1OTEW!!Ezi9~{9$BqH8v9ZC24<C#i+Sb;F!{OlJ!-urAv=}yOK@>$?E*FiBjr8^P
z8TVCHMV962?N!^rZnrZuG(;|!<Hn5}ghC-6Jb1wM>(^OaT%@U~Y1`idU(?yyiQDaF
zW@d&|D#h#9ubG~n=EaK_h@!};Q>S?T{5f~-+#wo`GCn@e#KZ*oeBQ8e?%X-*>+6kq
z>95e!)5FV`FM0a(DJv^0%+1Xa3WdI#N`6F5^U&7TR<2&X%ArGtNTpINE-q46SI5PR
z7c1WK_mCusD_5?tfB$}Bu^6#fjOONMd_Et5k<Z@0e@`qH!)~`TIyy>2Lqmm);o)Jj
z*(~?&-K(V=2FH&dXK-+kWHL!45@BU!1;5{4Q-lh+T+Z4IH4$qqZ!(skCSwU|GM1nw
zV+m?9mY^mh)-rju_%?zdApUGsW3h8YQAD)aY`@!&zXqGlhA2r=O>0(*N(4bDA8*{e
zu=q6`4o5kMZWgRuT05JEZ{e#0x5Z+SVzKz!9QzZIB&lMPTd<CVSI>`*g#QB>SRMQn
SR@6}d0000<MNUMnLSTY_1h9wz

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Labeled/firefox.png b/tests/images/Design System/CheckableTag/Labeled/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..62df63e1ced02cda56798204f2a13657b625210f
GIT binary patch
literal 1088
zcmV-G1i$-<P)<h;3K|Lk000e1NJLTq002|~001Ni1^@s67fBre000CBNkl<ZXo2mT
z?Mw1r7{~pu&v3Ie)A^Kz<_&?*i6s>Ynxvp;<r^Uiva-xKVW|}xbIjbEeeV}P+)vB<
zsVprfd|u46opbH8v+Er3(&5ENQ549sj9#w?Q4}@C(ChUe%Q6&2d8rS&;e+Sr=cxz#
z)p&k>el1i{6iAXZ_29lLk|e3KRj19&$uO9yIz>^Y9?W+^Q55K8S)O_z-vwEgq0@5b
z<d7r@x@iaT-Oz+;LT4LIs3vr_d9%<)qk&K;1f$UihGF3Gcu=WS)b>CifVH)?i3j{q
z{Z3Wr`T02*hQa*&JfhJkc6N5)bUHx@K`NEfg#HUW&%<ms!)~{u*=(xc3xa@nJdQ{t
z0znWop?^!IQUM_Zr>Cc{+PdBD$c_7aK7_+z&@>H)!+~nGs<z+W-oo$qgJBpLjYcGs
zNeF_VwigNouq+Fjrm?!Zip$H(S3<9^uR+r^c6WEjiud_^h(sbV7!2@wy{J~JSYBQR
z!!QU00_b!)>iPM69xTg3uh+xl@!;y}>T`sqQYjEZz;WCkXA&U<;cys*LIF;v6DE@h
zJkNvUIN0rWI2;ZXi$(11?SZCgq|<4LqKJco0}w(G2n3MHWU#cf1cqVI>2y?~?RFa$
ziv@naf8;^F9DieD1N-~?(ChUegdi4+A)C#DVHhM5iIMTPx3_V4cnF`*2cywAB77!<
zvMj6K?Ah5F2qCz+xk0&H21QXLDI=H5!C)|;+wH<;vmqLds%;Ms52)2@YQH~z{D9Z%
zh0Eo_)6>&0$9Fg!>TxI(g4t|V<4GhEaJgI%MG-ce4V#;r>bV@p!DKQam&<+LD}Qow
z@~Un4m3^7(8jS`BA-K4>KsucUA!IDgW)l=ep;RjUQq*9!9UmY6_JIzMACJeeva+Hc
zCzDB7tyTzv0E(i<#xgAV!-VoYkHy8sv5QhH7DFHq7`rG93oVz+Y96lF>!{c3sMTty
z*Xs}j0XCZrkw`?n_VMxYRSpe>La<mYXt&$%5-N%!Se8XF7*t~!#B+Cd_whnS@&9ep
z+}s?3!5|We1RM?r2qDO1GJl+*9LIrWSvZ|e<nwuCvsqZJR&~oY$Z3ARADK)BZnqmW
zO{3Lnsr_;s2e;b|kH-U^=ieo?SS*5~C~R$Qp;Rg%7K_1bHsk*O{&R#51O<b^zuwpn
z3l&8X&1Ms!PzWZI2?m1!;cytOR!cp9u*wfs-NALk{WhCTEG#TweSQ61LI)4g<#MSz
zlB1)eH+j*1dQKQks3vr_(S&M3XB$nZCUmyZ{zjf4k|b$`4wFQdWvvuvk|>JuU$I!f
z-=BIgU!8uxKUyEE<<hq!Ns?A@J1NE%+-fD^|Hki1!hZs}0ak|um}&9=0000<MNUMn
GLSTZMF8%WW

literal 0
HcmV?d00001


From 0c03d965c5dbfbd0ce531b58603d52a8ca7b7902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vagner=20Jos=C3=A9=20Nicolodi?= <vagnernico@gmail.com>
Date: Wed, 5 Jan 2022 17:17:29 -0300
Subject: [PATCH 2/2] chore(CheckableTag): Added new storyshots STC-825

---
 .../CheckableTag/CheckableTag.stories.tsx      |  17 +++++++++++++++--
 .../CheckableTag/Default Checked/chrome.png    | Bin 0 -> 438 bytes
 .../CheckableTag/Default Checked/firefox.png   | Bin 0 -> 266 bytes
 .../CheckableTag/Labeled Checked/chrome.png    | Bin 0 -> 1467 bytes
 .../CheckableTag/Labeled Checked/firefox.png   | Bin 0 -> 1198 bytes
 5 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 tests/images/Design System/CheckableTag/Default Checked/chrome.png
 create mode 100644 tests/images/Design System/CheckableTag/Default Checked/firefox.png
 create mode 100644 tests/images/Design System/CheckableTag/Labeled Checked/chrome.png
 create mode 100644 tests/images/Design System/CheckableTag/Labeled Checked/firefox.png

diff --git a/src/components/CheckableTag/CheckableTag.stories.tsx b/src/components/CheckableTag/CheckableTag.stories.tsx
index 464824b4..e16f17c4 100644
--- a/src/components/CheckableTag/CheckableTag.stories.tsx
+++ b/src/components/CheckableTag/CheckableTag.stories.tsx
@@ -8,8 +8,8 @@ export default {
   component: CheckableTag,
 } as Meta
 
-const Template: Story<CheckableTagProps> = (props) => {
-  const [checked, setChecked] = useState(false)
+const Template: Story<CheckableTagProps> = (props: CheckableTagProps) => {
+  const [checked, setChecked] = useState(props?.checked || false)
 
   return (
     <CheckableTag
@@ -26,12 +26,25 @@ export const Default = Template.bind({})
 
 Default.args = {}
 
+export const DefaultChecked = Template.bind({})
+
+DefaultChecked.args = {
+  checked: true,
+}
+
 export const Labeled = Template.bind({})
 
 Labeled.args = {
   label: "Check me",
 }
 
+export const LabeledChecked = Template.bind({})
+
+LabeledChecked.args = {
+  checked: true,
+  label: "Check me",
+}
+
 export const Disabled = Template.bind({})
 
 Disabled.args = {
diff --git a/tests/images/Design System/CheckableTag/Default Checked/chrome.png b/tests/images/Design System/CheckableTag/Default Checked/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6f0dc5bcc54fd761e759ba8a10b5167882d31e5
GIT binary patch
literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px$a7jc#R9J=Wm``fLKop0+dHDlTEOg!O+<AhYKs<r>C_RWhhbNF8#GT8or4<QH
z%uE+!NTjvF%xHxAtp>s*AMec@!cQ4v3^jHd(j2k^at-?6sXL+|5{LsxA_(R1xvC3o
zGx+%OE6^l2h@l_<BD78+-Ca(mP7=a>V%Gw;GF{1l{q{E73+?n}+jNXgX3wvrdDkiy
zZR{{fR&=dWkrg1h?pmWF*C4*{85gwKPuVqb6Kdin)WlhY7AwPI)oy%4&o0cDhUYiU
z;~h+f!O8o*R;ZK#czJ5~>Q=iJE5pNU!F*Y@r7klY3)7KmCFImHD<HMCn+$+@|1_;m
zU%etFt}@_ohNdIMY+P;kAp;H-Dk;Z%GIW>mBIKL@aZ|f+6Kdl6gv8IZdO;LObVW6a
z1SCHF58-UY0Z0<rQgw|e=tUr**hr*n1~CM(pR#^zBayC1!YU*B5m;?9|EbwA{tT>2
gE*a_dBHN}q-+a-LgdMv0od5s;07*qoM6N<$f_KxvY5)KL

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Default Checked/firefox.png b/tests/images/Design System/CheckableTag/Default Checked/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..800d64f2c4de1cc73e7e6091b1f488309aae1781
GIT binary patch
literal 266
zcmV+l0rmcgP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ0002dNkl<ZScUD_
zF%H8Z3<Xdhq^HdV(hG2cUL+e^Z_tH}ih;rKJ5)%73aLt<xDt^(Wb)IGGuVXU;Q&|<
z7zaF_eag6Z4-RE_fbtjX`ypy&eFfArk#7>)fkq@#ONuy*$E4x_kc4#dlxXDalw}-1
zqY-6I&;(7;UxJj5P&&#0ty=^wjLVhBgA#@o#=8A5A*JI-(-xS+pxb@lycOouC(9A7
zFsEmzWim}bX`YV$;$1+kYl0?dg1UpmtwG`zMRBXNxMPFJbBxG?m6Vg-3phzoTmwrt
Q%>V!Z07*qoM6N<$f`yuHuK)l5

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Labeled Checked/chrome.png b/tests/images/Design System/CheckableTag/Labeled Checked/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f5da2c00ce94ba915a81d75a8265aa39d4ed9db
GIT binary patch
literal 1467
zcmV;s1w{IZP)<h;3K|Lk000e1NJLTq003wJ001Ni1^@s6WrlyY00001b5ch_0Itp)
z=>Px)bxA})RA_<in|*8)MHq*lne834^jayD?+S<rNCPM$2#8g%f)E6Zh&4(mAxOkT
zkOVadN{mL0QX?8c8!_Qa1c^`(ksu!d4oQG$K|(BGOB*YM+LqGxt~=u&Q`$SO2v;gy
z<39h~X7=6LnfcB8&d2Qtt+ghEpbeLTP@^EIK!x3PX=<bZkAxTraUSqk;rB(TKxNfX
z5dc?{=0O1QUhuUDNz+>E8U+_Bjn}v|KOPCKV~tlyfXbjNj*|!~qX~cv*l;n>yajTJ
z<YK@$jjRm1V~!KinE8MVx}nXn)F_bd*yCJk6i9cS<6LZAJBxF1F0MchC#JCvo;VL5
z_!avKGyw&@+rZ3$l5sr+0GXQ<)i$h}*tC7%-^$miG^&>VvoLP0&E5jd1Kk7}eFYZ-
zFmsFI-2?8dqbZ5ngQ{xa`R{Bx`C#oNi%ve1ZfltLgW^<)xprw9q84b!Y0V!Mu<Bu1
zCk}um;DdCD2(hiI(ahYU*l}9Z#RqSXlnm`+EPnqBUfZSEe^wJ415c$2<`0utwHbVI
zRI~hu;?Ika+71?uuo&1eyez*I!-TJGruGvo91$K2GB+tot2OOf33i^*^l1z8hg!V8
z$0qLr3{Md(Ntd*aHTKy@HJ=?;6xY7*%`}Vt9inZWhS`>9dhF;P;u@BbL>=OOJ+BeK
z;LedRyE4UJXnq$Amq-D#wkWD<pt1&@-e{9wrdc>bGHrk)`=}=Cpb3wwb2STgDS9Od
zUKk{~6oe_?*j%Wr&->gZ$jq@Bo+4Oqf5X-A7n<GS+4o3(E`}%8+w@8j%pD@xcUJSx
zf%^9?+NDUpP4L!360Zdr8*NIeqHUc>)*aVO->g`)yK$kv(UXMh;nqa>bgc2Jo^2#g
zZcyZv7?JbKz@J$kBI7)gB?lFAhrrT9ipP2hJ{e;ge%b(wQzej8+uMUS%*e4x@WRJq
zjQ9=FGYQ@sW%9^9Cpc83$$G@t=a&k8Dl|QN=^;f%s$g-Nv7OM{VsN(2SI0EZ4UE3m
zUuNBL&7AE<n3sk$Zc-DqKz-T@G#Y=Q=D}{^g|{_zAqt@TEuzk=+QyoziU6D`)z}&a
zW!n+?7nMUnDa;CKn8cQFS4em}RAgq3E5=LWy;m=5XJ36DJ}<P7r%ud-7Elp1WiBX%
zRi&C$x#8tGRicTE3z2NgGhVVJT{8JjV;?F`XnM3nEzqd$f{yX9Xt&~yB#X`oCf(LB
z=X*s(5SEWKz2#~}>Y6AJXjV>;B*z)6fDK*?+P8v~MA&y$^GrW;ue=&gUZ8Fax-UiG
z^TMk?Dh710NRErP7WG&Hx+Fqsvf#yg>w9^?HiAZj5k!Vu-<UYih%u;T3@jaOQB)2i
zSK7?TQM|lUk@ls{h7+39WD({?4KeO^K}sULu}9%A((K9C%-m|THBS*EVfG-&=98MK
z-zu{Fnn~+zCU3AQt}xFFAS+$cx+P?8vZ;=A#Hg5cw`ALIn$^b?M~XGe4lAbT*jEjm
zS2DVXnQ(v+rm4h%Mvg&4x<Jkpi}(GC{RNt88~U_`Wn=3Xs{cf+2i8Asv3RfI!-Hnw
znbuV>wV$bEMyjAHC|Q0)u{U4SHyPGUv}oTdJdYLQEgoHCGjF@%qcM$NxIWuo5MxO`
zKcZNhtLfx}SB6PCMBzb32-&3K0Eoge?XFsykQ<p&H-syY!})(~X#IzA1#&p9Kn}+h
z$l<sGIUISdMWsvgVF{2|eyr`{96T0Cj~nD1i${Wt^IXq<t;@|u3UeGqS~C2&gNrlp
zdBM7Tx*^_c+{wimcqFu{{hurB09Sdn`KsRCoNFEgMwo;v4{(JVxkn&xF4sB&`8Q1G
V3Mh^=BK`mX002ovPDHLkV1g0*u4(`P

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/CheckableTag/Labeled Checked/firefox.png b/tests/images/Design System/CheckableTag/Labeled Checked/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..370cf494e73247ecbe7452823a05b671c30f8cfd
GIT binary patch
literal 1198
zcmV;f1X25mP)<h;3K|Lk000e1NJLTq003wJ001Ni1^@s6WrlyY000DaNkl<ZXo2mU
zZD>_x9Ki1kbdwd5MP)Y0Qlp{|ks$QJAZ1~*AR(v_f`UHyA$x<M{Bqsywx(@Yw`}Di
zbMyTzk&%~FS|&PK8)hr(ZqV{N-Slp|b2{PwJik6X-ko!|JLm4M-UB@cesH<xoagzU
z|L;662cE~rutOB|UxSMS(Af`>nB`W|*>7^)f6e56_~DEH&>EswG9U2&o#++gB0-QS
z=(?Qw;4Fr&%b>JNP|wxO2W3g5=jwGqqTrkd0<t7>E@pZ*Uu-b*!B~<L8w6kXK;{Fn
zB&T}-e0D1BT{`>0m+2rZH^vI`I98Cyv4T8K%7PBH!;4!K(@KS@#lq8H3Dr${=zM;y
z;<-&K?E&Aaa=l7Qf_Aq;PC&S;RCsy2;_dy4xs`&?FT8tDSwWc;)E0&N*9woU7fwc;
z|2z8N)m@6E+Y}vrR*;*TW=&1APU+rp3#x9?`20fMsgV_)9hS%iHA2BwMRq`VbiJ^%
z)w$<b2R#3sA}1i+{h6?$-iVE#FKp1{1%>P);hC?6{bxoB`r&WL4hZiY7%41X|4Z8x
zxh2B<jl!;0c=AgjCm<}|tT=tax!&KPd8k5|Txh!M`oGd6r~J6d*USpJJ%UyqRAl*u
z@TIZebf4b{Ds0fqtrYGl6WXE>j>5x1VNRt`d{py6NRu59-Vd2XmmM<?wRp4QqmbtD
zFU&ai+XY8Z%XyelE-c!t__uHL`d{Cp`1nW7lp-O^FD%=k_~fu=YO%0<pHp9!UwCW3
zV$Ctlf*N63sc^b0J#u`0q5Sx5YC+=>loyntR<-?i6Ktprf+sY0tWNAAR~^yhmYC~j
z1<lwNKiAp?2V5=a*>4o{Hwuqc31=>jUjLj*=dCT+s<>~h49Q%+S23^3oSzjG-q_>R
z7mmX8GGWz`n@eg<vmPNK9dc3<6z}3{lXP+JE-JrPvCuVE9BK!jU)cKxycbeK!4Ib~
z0+akg$<gEwm0zovTxhQSwq^7OA3j#Swp;O3wIggry<%pC(9vh=OBRb;+Kt%RnkXY(
za#9l17KH~sH<N_Mvx#z+?NGc>mwb}o7F2P<bSZVGG@&qr!ls3U!thV8d83zZbMF1K
zn}jiF;U-1FR>h2Rq2>I<1Vv(y7ZjFkQA4rB<8im}v2aUCmz<OYMPkl0`_2;cV9WO@
zX0J0reHhY76XX^YzGRXzw^HyoXg)oxd9Ykqc`$JdS`;6HHVD}P;nz;5-0&rMVuKmb
z+j}M^sQ72iB){<H_lnYAG|P6F?y%|H`0|p@mNOwi@q{nA{-K%^82dxjEhrL$#<ONz
zm|iC2mYB&zbEi}O>YvQ4YD$qQJAR+L+>;Twca8AM_T;m;n-vs)Ddts~S>x<=LPd%R
zp2(Cst%5AK2P??qSV11g3i3EskjJrtJdRy7;$b@b!DpBJdYA42yKvFd#0KrsU(YhM
z^cSGlE}r)sy;ohk8??6DPrO9;fU`%)Zs775NjGrWEs&XGtSylL0d<7&%#pX06aWAK
M07*qoM6N<$g6CRV+W-In

literal 0
HcmV?d00001