Add switch

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';