From 9b847ae2689c66fe0fa85d2898e5bd53766a0010 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Thu, 12 Aug 2021 16:09:52 +0200
Subject: [PATCH] refactor: update examples

---
 .../buttons/button-groups/ButtonGroups.js     | 30 ++++---------
 .../forms/checks-radios/ChecksRadios.js       | 45 +++++++++----------
 2 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/views/components/buttons/button-groups/ButtonGroups.js b/src/views/components/buttons/button-groups/ButtonGroups.js
index fb3a0fe..c6aeb54 100644
--- a/src/views/components/buttons/button-groups/ButtonGroups.js
+++ b/src/views/components/buttons/button-groups/ButtonGroups.js
@@ -114,22 +114,19 @@ const ButtonGroups = () => {
             <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
               <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
                 <CFormCheck
-                  button
-                  buttonVariant="outline"
+                  button={{ variant: 'outline' }}
                   id="btncheck1"
                   autoComplete="off"
                   label="Checkbox 1"
                 />
                 <CFormCheck
-                  button
-                  buttonVariant="outline"
+                  button={{ variant: 'outline' }}
                   id="btncheck2"
                   autoComplete="off"
                   label="Checkbox 2"
                 />
                 <CFormCheck
-                  button
-                  buttonVariant="outline"
+                  button={{ variant: 'outline' }}
                   id="btncheck3"
                   autoComplete="off"
                   label="Checkbox 3"
@@ -140,8 +137,7 @@ const ButtonGroups = () => {
               <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
                 <CFormCheck
                   type="radio"
-                  button
-                  buttonVariant="outline"
+                  button={{ variant: 'outline' }}
                   name="btnradio"
                   id="btnradio1"
                   autoComplete="off"
@@ -149,8 +145,7 @@ const ButtonGroups = () => {
                 />
                 <CFormCheck
                   type="radio"
-                  button
-                  buttonVariant="outline"
+                  button={{ variant: 'outline' }}
                   name="btnradio"
                   id="btnradio2"
                   autoComplete="off"
@@ -158,8 +153,7 @@ const ButtonGroups = () => {
                 />
                 <CFormCheck
                   type="radio"
-                  button
-                  buttonVariant="outline"
+                  button={{ variant: 'outline' }}
                   name="btnradio"
                   id="btnradio3"
                   autoComplete="off"
@@ -413,9 +407,7 @@ const ButtonGroups = () => {
               <CButtonGroup vertical role="group" aria-label="Vertical button group">
                 <CFormCheck
                   type="radio"
-                  button
-                  buttonColor="danger"
-                  buttonVariant="outline"
+                  button={{ color: 'danger', variant: 'outline' }}
                   name="vbtnradio"
                   id="vbtnradio1"
                   autoComplete="off"
@@ -424,9 +416,7 @@ const ButtonGroups = () => {
                 />
                 <CFormCheck
                   type="radio"
-                  button
-                  buttonColor="danger"
-                  buttonVariant="outline"
+                  button={{ color: 'danger', variant: 'outline' }}
                   name="vbtnradio"
                   id="vbtnradio2"
                   autoComplete="off"
@@ -434,9 +424,7 @@ const ButtonGroups = () => {
                 />
                 <CFormCheck
                   type="radio"
-                  button
-                  buttonColor="danger"
-                  buttonVariant="outline"
+                  button={{ color: 'danger', variant: 'outline' }}
                   name="vbtnradio"
                   id="vbtnradio3"
                   autoComplete="off"
diff --git a/src/views/components/forms/checks-radios/ChecksRadios.js b/src/views/components/forms/checks-radios/ChecksRadios.js
index 3430d14..84dcd63 100644
--- a/src/views/components/forms/checks-radios/ChecksRadios.js
+++ b/src/views/components/forms/checks-radios/ChecksRadios.js
@@ -281,11 +281,16 @@ const ChecksRadios = () => {
               further be grouped in a button group if needed.
             </p>
             <DocsExample href="forms/checks-radios#toggle-buttons">
-              <CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" />
+              <CFormCheck
+                button={{ color: 'primary ' }}
+                id="btn-check"
+                autoComplete="off"
+                label="Single toggle"
+              />
             </DocsExample>
             <DocsExample href="forms/checks-radios#toggle-buttons">
               <CFormCheck
-                button
+                button={{ color: 'primary ' }}
                 id="btn-check-2"
                 autoComplete="off"
                 label="Checked"
@@ -293,13 +298,18 @@ const ChecksRadios = () => {
               />
             </DocsExample>
             <DocsExample href="forms/checks-radios#toggle-buttons">
-              <CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled />
+              <CFormCheck
+                button={{ color: 'primary ' }}
+                id="btn-check-3"
+                autoComplete="off"
+                label="Disabled"
+                disabled
+              />
             </DocsExample>
             <h3>Radio toggle buttons</h3>
             <DocsExample href="forms/checks-radios#toggle-buttons">
               <CFormCheck
-                button
-                buttonColor="secondary"
+                button={{ color: 'secondary' }}
                 type="radio"
                 name="options"
                 id="option1"
@@ -308,8 +318,7 @@ const ChecksRadios = () => {
                 defaultChecked
               />
               <CFormCheck
-                button
-                buttonColor="secondary"
+                button={{ color: 'secondary' }}
                 type="radio"
                 name="options"
                 id="option2"
@@ -317,8 +326,7 @@ const ChecksRadios = () => {
                 label="Radio"
               />
               <CFormCheck
-                button
-                buttonColor="secondary"
+                button={{ color: 'secondary' }}
                 type="radio"
                 name="options"
                 id="option3"
@@ -327,8 +335,7 @@ const ChecksRadios = () => {
                 disabled
               />
               <CFormCheck
-                button
-                buttonColor="secondary"
+                button={{ color: 'secondary' }}
                 type="radio"
                 name="options"
                 id="option4"
@@ -343,9 +350,7 @@ const ChecksRadios = () => {
             <DocsExample href="forms/checks-radios#toggle-buttons">
               <div>
                 <CFormCheck
-                  button
-                  buttonColor="primary"
-                  buttonVariant="outline"
+                  button={{ color: 'primary', variant: 'outline' }}
                   id="btn-check-outlined"
                   autoComplete="off"
                   label="Single toggle"
@@ -353,9 +358,7 @@ const ChecksRadios = () => {
               </div>
               <div>
                 <CFormCheck
-                  button
-                  buttonColor="secondary"
-                  buttonVariant="outline"
+                  button={{ color: 'secondary', variant: 'outline' }}
                   id="btn-check-2-outlined"
                   autoComplete="off"
                   label="Checked"
@@ -364,9 +367,7 @@ const ChecksRadios = () => {
               </div>
               <div>
                 <CFormCheck
-                  button
-                  buttonColor="success"
-                  buttonVariant="outline"
+                  button={{ color: 'success', variant: 'outline' }}
                   type="radio"
                   name="options-outlined"
                   id="success-outlined"
@@ -375,9 +376,7 @@ const ChecksRadios = () => {
                   defaultChecked
                 />
                 <CFormCheck
-                  button
-                  buttonColor="danger"
-                  buttonVariant="outline"
+                  button={{ color: 'danger', variant: 'outline' }}
                   type="radio"
                   name="options-outlined"
                   id="danger-outlined"