docs(design-guidelines): move "Switch vs. Checkbox" to Design Guidelines

Author: Kiarokh

guides.ts

@@ -15,6 +15,7 @@ export default [
             'src/design-guidelines/declutter/declutter.md',
             'src/design-guidelines/disabled-hidden/disabled-hidden.md',
             'src/design-guidelines/disabled-vs-readonly/disabled-vs-readonly.md',
+            'src/design-guidelines/boolean/switch-vs-checkbox.md',
         ],
     },
 ] as Guide[];

src/components/checkbox/checkbox.tsx

@@ -29,7 +29,10 @@ import { CheckboxTemplate } from './checkbox.template';
  * that have hierarchical relationships or when the group contains sub-items.
  * This state is used to indicate that that some, but not all, of the items in a group are selected.
  *
- * <limel-example-switch-vs-checkbox />
+ * :::important
+ * Checkboxes are sometimes used interchangeably with switches in user interfaces.
+ * But there is an important difference between the two! Please read our guidelines about
+ * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
  *
  * @exampleComponent limel-example-checkbox
  * @exampleComponent limel-example-checkbox-helper-text

src/components/switch/switch.tsx

@@ -25,7 +25,10 @@ import {
  * The Switch component is widely used in user interfaces to enable users to
  * quickly and intuitively change binary settings.
  *
- * <limel-example-switch-vs-checkbox />
+ * :::important
+ * Checkboxes are sometimes used interchangeably with switches in user interfaces.
+ * But there is an important difference between the two! Please read our guidelines about
+ * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
  *
  * @exampleComponent limel-example-switch
  * @exampleComponent limel-example-switch-helper-text

src/components/switch/examples/switch-vs-checkbox.scss renamed to src/design-guidelines/boolean/examples/switch-vs-checkbox.scss

@@ -8,22 +8,6 @@ import { Component, h } from '@stencil/core';
 export class SwitchVsCheckboxExample {
     public render() {
         return [
-            <h3>Switch vs. Checkbox</h3>,
-            <p>
-                A checkbox and a switch both control binary options like On/Off
-                or Enable/Disable. They are very similar in that sense, and many
-                developers use them interchangeably.
-            </p>,
-            <p>
-                However, there is a difference between these two components when
-                it comes to usability and interaction design!
-            </p>,
-            <p>
-                The rule of thumb is to use a <b>Switch</b>, whenever toggling
-                the setting is instantly applied and does not required further
-                explicit actions from the user. And use a <b>Checkbox</b> when
-                the user has to confirm their choices for them to take effect.
-            </p>,
             <div class="do-dont-container">
                 <div class="do-not">
                     <limel-header icon="brake_warning" heading="Don't" />

src/components/switch/examples/switch-vs-checkbox.tsx renamed to src/design-guidelines/boolean/examples/switch-vs-checkbox.tsx

@@ -0,0 +1,15 @@
+# Switch vs. Checkbox
+
+A checkbox and a switch both control binary options like On/Off
+or Enable/Disable. They are very similar in that sense, and many
+developers use them interchangeably.
+
+However, there is a difference between these two components when
+it comes to usability and interaction design!
+
+The rule of thumb is to use a <b>Switch</b>, whenever toggling
+the setting is instantly applied and does not required further
+explicit actions from the user. And use a <b>Checkbox</b> when
+the user has to confirm their choices for them to take effect.
+
+<limel-example-switch-vs-checkbox />