feat(Skeleton-states): Add skeleton state styles (#713)

* feat(skeleton): Add skeleton loading mixin and styles

* feat(skeleton): Add skeleton icon styles

* feat(skeleton): Add skeleton styles to components

* feat(skeleton): Add structured list skeleton

* feat: skeleton styles

* feat: add skeleton demo html

* feat: update skeleton html

* feat(skeleton-states): Update accordion skeleton styles

* feat(skeleton-states): Update accordion

* chore: Update px to rem

* chore: remove duplicate code

* chore: Add correct color value for skeleton state

* feat(skeleton-states): Update data table

src/components/accordion/_accordion.scss

@@ -26,7 +26,7 @@
       .#{$prefix}--accordion__arrow {
         @include focus-outline('border');
         overflow: visible; // safari fix
-        outline-offset: -.5px; // safari fix
+        outline-offset: -0.5px; // safari fix
       }
     }
 
@@ -53,7 +53,7 @@
       .#{$prefix}--accordion__arrow {
         @include focus-outline('border');
         overflow: visible; // safari fix
-        outline-offset: -.5px; // safari fix
+        outline-offset: -0.5px; // safari fix
       }
     }
   }
@@ -82,22 +82,52 @@
       @include typescale('zeta');
     }
   }
-}
 
-.#{$prefix}--accordion__item--active {
-  overflow: visible;
+  .#{$prefix}--accordion__item--active {
+    overflow: visible;
 
-  .#{$prefix}--accordion__content {
-    padding-top: $spacing-md;
-    padding-bottom: $spacing-lg;
-    height: auto;
-    visibility: visible;
-    opacity: 1;
-    transition: all $transition--expansion $carbon--ease-in;
+    .#{$prefix}--accordion__content {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-lg;
+      height: auto;
+      visibility: visible;
+      opacity: 1;
+      transition: all $transition--expansion $carbon--ease-in;
+    }
+
+    .#{$prefix}--accordion__arrow {
+      transform: rotate(90deg);
+      fill: $brand-01;
+    }
   }
 
-  .#{$prefix}--accordion__arrow {
-    transform: rotate(90deg);
-    fill: $brand-01;
+  // Skeleton state
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
+    cursor: default;
+  }
+
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
+    pointer-events: none;
+    fill: $ui-05;
+    cursor: default;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border: none;
+      outline: none;
+      cursor: default;
+    }
+  }
+
+  .#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow {
+    border: none;
+    outline: none;
+    cursor: default;
+  }
+
+  .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
+    margin-bottom: 0;
   }
 }

src/components/breadcrumb/_breadcrumb.scss

@@ -63,4 +63,11 @@
       }
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
+    @include skeleton;
+    width: rem(100px);
+    height: 1rem;
+  }
 }

src/components/button/_button.scss

@@ -180,4 +180,10 @@
   .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger--primary {
     margin-left: $spacing-md;
   }
+
+  // Skeleton State
+  .#{$prefix}--btn.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(150px);
+  }
 }

src/components/checkbox/_checkbox.scss

@@ -160,4 +160,16 @@
       }
     }
   }
+
+  // Skeleton state
+  .#{$prefix}--checkbox-label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(100px);
+    height: rem(18px);
+
+    &:after,
+    &:before {
+      border: none;
+    }
+  }
 }

src/components/code-snippet/_code-snippet.scss

@@ -91,4 +91,24 @@
     top: 1rem;
     right: 1.25rem;
   }
+
+  // Skeleton State
+  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
+    height: rem(98px);
+  }
+
+  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    height: 100%;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton code {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    display: block;
+  }
 }

src/components/data-table-v2/_data-table-v2-skeleton.scss

@@ -0,0 +1,45 @@
+@import '../../globals/scss/import-once';
+
+@include exports('data-table-v2-skeleton') {
+  .#{$prefix}--data-table-v2.#{$prefix}--skeleton {
+    th {
+      border-bottom: 1px solid $brand-01;
+
+      &:nth-child(3n + 1) {
+        width: 10%;
+      }
+
+      &:nth-child(3n + 2) {
+        width: 30%;
+      }
+
+      &:nth-child(3n + 3) {
+        width: 15%;
+      }
+    }
+
+    th span,
+    td span {
+      @include skeleton;
+      width: 75%;
+      height: 1rem;
+      display: block;
+    }
+
+    tr:hover {
+      td {
+        border-color: $ui-04;
+        background: transparent;
+
+        &:first-of-type,
+        &:last-of-type {
+          border-color: $ui-04;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 {
+    pointer-events: none;
+  }
+}

src/components/data-table-v2/_data-table-v2.scss

@@ -7,3 +7,4 @@
 @import 'data-table-v2-expandable';
 @import 'data-table-v2-sort';
 @import 'data-table-v2-inline-edit';
+@import 'data-table-v2-skeleton';

src/components/date-picker/_date-picker.scss

@@ -349,4 +349,21 @@
   .flatpickr-next-month {
     padding-top: 5px;
   }
+
+  // Skeleton State
+  .#{$prefix}--date-picker.#{$prefix}--skeleton input,
+  .#{$prefix}--date-picker__input.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
+
+  .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label {
+    @include skeleton;
+    width: rem(75px);
+    height: rem(14px);
+  }
 }

src/components/dropdown/_dropdown.scss

@@ -212,4 +212,9 @@
       color: $text-01;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--dropdown-v2.#{$prefix}--skeleton {
+    @include skeleton;
+  }
 }

src/components/form/_form.scss

@@ -40,6 +40,13 @@
     opacity: 0.5;
   }
 
+  // Skeleton State
+  .#{$prefix}--label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(75px);
+    height: rem(14px);
+  }
+
   input[data-invalid],
   textarea[data-invalid],
   select[data-invalid] {

src/components/number-input/_number-input.scss

@@ -99,13 +99,24 @@
       fill: $brand-02;
     }
   }
-}
 
-.#{$prefix}--number[data-invalid] {
-  input[type='number'] {
-    box-shadow: 0 2px 0px 0px $support-01;
+  .#{$prefix}--number[data-invalid] {
+    input[type='number'] {
+      box-shadow: 0 2px 0px 0px $support-01;
+    }
+    ~ .#{$prefix}--form-requirement {
+      max-height: rem(200px);
+    }
   }
-  ~ .#{$prefix}--form-requirement {
-    max-height: rem(200px);
+
+  // Skeleton State
+  .#{$prefix}--number.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+    height: 2.5rem;
+
+    input[type='number'] {
+      display: none;
+    }
   }
 }

src/components/pagination/_pagination.scss

@@ -176,4 +176,10 @@ $css--helpers: true;
       right: 0.3rem;
     }
   }
+
+  // Skeleton state
+  .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text {
+    margin-right: 1rem;
+    margin-bottom: 0;
+  }
 }

src/components/progress-indicator/_progress-indicator.scss

@@ -108,4 +108,11 @@
       background-color: $brand-01;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
+    @include skeleton;
+    height: rem(12px);
+    width: rem(40px);
+  }
 }

src/components/radio-button/_radio-button.scss

@@ -67,4 +67,15 @@
   .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
     @include focus-outline('blurred');
   }
+
+  // Skeleton State
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(100px);
+    height: rem(18px);
+  }
+
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton .#{$prefix}--radio-button__appearance {
+    display: none;
+  }
 }

src/components/search/_search.scss

@@ -143,4 +143,14 @@
   .#{$prefix}--search-view--hidden {
     display: none;
   }
+
+  .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }

src/components/skeleton/_skeleton-icon.scss

@@ -0,0 +1,10 @@
+@import '../../globals/scss/import-once';
+
+@include exports('skeleton-icon') {
+  .#{$prefix}--icon--skeleton {
+    @include skeleton;
+    display: inline-block;
+    width: rem(16px);
+    height: rem(16px);
+  }
+}

src/components/skeleton/_skeleton-text.scss

@@ -0,0 +1,15 @@
+@import '../../globals/scss/import-once';
+
+@include exports('skeleton-text') {
+  .#{$prefix}--skeleton__text {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    margin-bottom: $spacing-xs;
+  }
+
+  .#{$prefix}--skeleton__heading {
+    height: 1.5rem;
+    margin-bottom: $spacing-sm;
+  }
+}

src/components/skeleton/_skeleton.scss

@@ -0,0 +1,6 @@
+@import '../../globals/scss/vars';
+@import '../../globals/scss/spacing';
+@import '../../globals/scss/helper-mixins';
+
+@import 'skeleton-text';
+@import 'skeleton-icon';