adds shame fixes from MAW to patterns (#1)

* update hgroups

* update margin on card-group

* init form toggle

assets/sass/all-digital/_components.scss

@@ -16,3 +16,4 @@
 @import 'components/form-control-groups';
 @import 'components/link-group';
 @import 'components/badge';
+@import 'components/form-toggle';

assets/sass/all-digital/base/_headings.scss

@@ -67,6 +67,8 @@ h6 {
   .display1,
   .display2,
   .display3,
+  .heading1,
+  .heading2,
   .heading3,
   .heading4,
   .heading5,
@@ -75,20 +77,15 @@ h6 {
   .body2,
   .body3,
   .body4,
+  h1,
+  h2,
   h3,
   h4,
   h5,
   h6,
   p {
     margin-bottom: 0;
   }
-
-  .heading1,
-  .heading2,
-  h1,
-  h2 {
-    margin-bottom: 6px;
-  }
 }
 
 .hgroup--spaced {

assets/sass/all-digital/components/_card-group.scss

@@ -1,5 +1,5 @@
 .card-group {
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }
 
 .card-group__item {

assets/sass/all-digital/components/_form-toggle.scss

@@ -0,0 +1,87 @@
+.form-toggle {
+  margin-bottom: 12px;
+
+  .form-toggle__label {
+    // needs higher specifity
+    // to overcome all digital
+    display: block;
+  }
+}
+
+.form-toggle__input > input {
+  @include visually-hidden;
+}
+
+
+.form-toggle__label {
+  display: block;
+  position: relative;
+  outline: none;
+  user-select: none;
+  margin-bottom: 0;
+
+  &:before,
+  &:after {
+    display: block;
+  }
+
+  &:before {
+    width: 54px;
+    height: 30px;
+    background-color: $cool-grey8;
+    border-radius: 30px;
+    transition: background 0.4s;
+    content: 'OFF ';
+    line-height: 30px;
+    padding-left: 27px;
+    text-align: center;
+    font-size: 9px;
+    font-weight: bold;
+    color: $white;
+  }
+
+  &:after {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    content: '';
+    background-color: $white;
+    border-radius: 100%;
+    transition: transform 0.4s;
+    top: 3px;
+    margin: 0 3px;
+  }
+
+  input:checked ~ & {
+    &:before {
+      background-color: $blue-sky;
+      content: 'ON ';
+      padding-right: 27px;
+      padding-left: 0;
+    }
+
+    &:after {
+      transform: translateX(24px);
+    }
+  }
+
+  input:disabled ~ & {
+    opacity: 0.8;
+  }
+
+  input:focus ~ & {
+    &:after {
+      animation: gradient 0.2s linear 1 forwards;
+    }
+  }
+}
+
+@keyframes gradient {
+  from {
+    box-shadow: inset 0 0 0 $blue-sky;
+  }
+
+  to {
+    box-shadow: inset 0 0 6px $blue-sky;
+  }
+}