feat(Skeleton-states): Add skeleton state styles (carbon-design-syste…

…m#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/number-input/_number-input.scss

@@ -152,6 +152,15 @@
     background: $field-02;
   }
 
+  .#{$prefix}--number[data-invalid] {
+    input[type='number'] {
+      box-shadow: 0 2px 0px 0px $support-01;
+    }
+    ~ .#{$prefix}--form-requirement {
+      max-height: rem(200px);
+    }
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;

src/components/skeleton/skeleton.html

@@ -0,0 +1,124 @@
+
+<p>Skeleton Text</p>
+<div class="bx--skeleton__text"></div>
+<div class="bx--skeleton__text bx--skeleton__heading"></div>
+
+<p>Button</p>
+<button class="bx--skeleton bx--btn" type="button"></button>
+&nbsp;<a class="bx--skeleton bx--btn" href="#" role="button"></a>
+&nbsp;<button class="bx--skeleton bx--btn bx--btn--sm" type="button"></button>
+
+<p>Label</p>
+<label class="bx--label bx--skeleton"></label>
+
+<p>Breadcrumb</p>
+<div class="bx--breadcrumb bx--skeleton">
+  <div class="bx--breadcrumb-item">
+    <a href="/#" class="bx--link">&nbsp;</a>
+  </div>
+  <div class="bx--breadcrumb-item">
+    <a href="/#" class="bx--link">&nbsp;</a>
+  </div>
+  <div class="bx--breadcrumb-item">
+    <a href="/#" class="bx--link">&nbsp;</a>
+  </div>
+</div>
+
+<p>Dropdown</p>
+<div class="bx--skeleton bx--dropdown-v2 bx--list-box bx--form-item">
+  <div role="button" class="bx--list-box__field">
+    <span class="bx--list-box__label"></span>
+  </div>
+</div>
+
+<p>Progress Indicator</p>
+<ul class="bx--progress bx--skeleton">
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+        <svg>
+            <g>
+                <circle cx="12" cy="12" r="12"></circle>
+            </g>
+        </svg>
+        <p class="bx--progress-label"></p>
+        <span class="bx--progress-line"></span>
+    </li>
+</ul>
+
+<p>Toggle</p>
+<div class="bx--form-item">
+  <input type="checkbox" class="bx--toggle bx--skeleton" value="on">
+  <label class="bx--toggle__label bx--skeleton">
+    <span class="bx--toggle__text--left"></span><span class="bx--toggle__appearance"></span><span class="bx--toggle__text--right"></span>
+  </label>
+</div>
+
+<p>Small Toggle</p>
+<div class="bx--form-item">
+  <input type="checkbox" class="bx--toggle bx--toggle--small bx--skeleton" value="on">
+  <label class="bx--toggle__label bx--skeleton"><span class="bx--toggle__appearance"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"></path></svg></span>
+  </label>
+</div>
+
+<p>Slider</p>
+<div class="bx--form-item">
+  <label class="bx--label bx--skeleton"></label>
+  <div class="bx--slider-container bx--skeleton"><span class="bx--slider__range-label"></span>
+    <div class="bx--slider">
+      <div class="bx--slider__track"></div>
+      <div class="bx--slider__filled-track"></div>
+      <div class="bx--slider__thumb"></div>
+    </div><span class="bx--slider__range-label"></span>
+  </div>
+</div>
+
+<p>Tag</p>
+<span class="bx--tag bx--skeleton"></span>
+
+<p>Tabs</p>
+<nav class="bx--tabs bx--skeleton">
+  <div class="bx--tabs-trigger"><a href="javascript:void(0)" class="bx--tabs-trigger-text">&nbsp;</a>
+    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+  </div>
+  <ul class="bx--tabs__nav bx--tabs__nav--hidden">
+    <li class="bx--tabs__nav-item bx--tabs__nav-item--selected"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+    <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+    <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+    <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
+    </li>
+  </ul>
+</nav>
+
+<p>Icon</p>
+<div class="bx--icon--skeleton"></div>

src/components/text-area/_text-area.scss

@@ -86,4 +86,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  #{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+    height: rem(100px);
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }

src/components/text-input/_text-input.scss

@@ -87,4 +87,14 @@
       color: transparent;
     }
   }
+
+  // Skeleton State
+  .#{$prefix}--text-input.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
 }