Add switch

assets/components/atoms/checkbox/checkbox.scss

@@ -28,3 +28,13 @@
   align-items: center;
   margin-right: 1rem;
 }
+
+.custom-control-input:focus ~ .custom-control-label:before {
+  box-shadow: none;
+  outline: 2px solid $gray-600;
+  outline-offset: 1px;
+}
+
+.custom-control-input:checked:focus ~ .custom-control-label:before {
+  outline-color: $red-dark;
+}

assets/components/atoms/input/input.scss

@@ -6,7 +6,6 @@
   transition:
     color 0.3s,
     border-color 0.3s,
-    outline 0.3s,
     box-shadow 0.3s;
 
   &:hover,
@@ -15,9 +14,12 @@
   }
 
   &:focus,
-  &.focus {
+  &.focus,
+  &:focus-visible {
     border-color: $input-focus-border-color !important;
-    box-shadow: $input-focus-box-shadow !important;
+    box-shadow: none !important;
+    outline: 2px solid $gray-600;
+    outline-offset: 2px;
   }
 
   &.is-invalid {

assets/components/atoms/switch/switch-inline.twig

@@ -0,0 +1,5 @@
+<div class="custom-controls-inline">
+  {% include '@atoms/switch/switch.twig' with { id: '22', label: 'Cellular data', state: 'checked' } %}
+  {% include '@atoms/switch/switch.twig' with { id: '23', label: 'Airplane mode' } %}
+  {% include '@atoms/switch/switch.twig' with { id: '24', label: 'Turn off notifications'} %}
+</div>

assets/components/atoms/switch/switch-states.twig

@@ -0,0 +1,3 @@
+{% include '@atoms/switch/switch.twig' with { id: '12', label: 'Wi-Fi', state: 'checked' } %}
+{% include '@atoms/switch/switch.twig' with { id: '13', label: 'Bluetooth' } %}
+{% include '@atoms/switch/switch.twig' with { id: '14', label: 'VPN', state: 'disabled' } %}

assets/components/atoms/switch/switch.scss

@@ -0,0 +1,31 @@
+@charset 'utf-8';
+
+.custom-switch {
+  padding-left: 2.25rem;
+
+  .custom-control-label:after {
+    top: calc(0.25rem + 1px);
+    left: calc(-2.25rem + 2px);
+
+    @include media-breakpoint-up(sm){
+      top: calc(0.25rem + 2px);
+    }
+
+    @include media-breakpoint-up(lg){
+      top: calc(0.25rem + 3px);
+    }
+  }
+
+  .custom-control-label:before {
+    top: 3px;
+    left: -2.25rem;
+
+    @include media-breakpoint-up(sm){
+      top: 4px;
+    }
+
+    @include media-breakpoint-up(lg){
+      top: 5px;
+    }
+  }
+}

assets/components/atoms/switch/switch.twig

@@ -0,0 +1,4 @@
+<div class="custom-control custom-switch">
+  <input type="checkbox" class="custom-control-input" id="custom-switch{{id}}" {{state}}>
+  <label class="custom-control-label" for="custom-switch{{id}}">{{ label?: 'Toggle'}}</label>
+</div>

assets/components/atoms/switch/switch.yml

@@ -0,0 +1,10 @@
+title: Switch
+name: switch
+variants:
+  - name: states
+    title: Switch sample
+    notes: Switches also support the disabled attribute.
+  - name: inline
+    title: Inline switch
+notes: |
+  A switch has the markup of a custom [checkbox](#/atoms/checkbox) but uses the `.custom-switch` class to render a toggle switch.

assets/components/entrypoint.scss

@@ -35,6 +35,7 @@
 @import 'atoms/select/select';
 @import 'atoms/separator/separator';
 @import 'atoms/social-icon/social-icon';
+@import 'atoms/switch/switch';
 @import 'atoms/upload/upload';
 @import 'atoms/video/video';
 @import 'atoms/dropdown/dropdown';