diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
index 65063658652a..a515895842e7 100644
--- a/src/components/code-snippet/_code-snippet.scss
+++ b/src/components/code-snippet/_code-snippet.scss
@@ -229,4 +229,24 @@
.#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
right: auto;
}
+
+ // 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;
+ }
}
diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index ce581948820b..72bc4712c72f 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -151,4 +151,15 @@
.#{$prefix}--number--light input[type='number'] {
background: $field-02;
}
+
+ // Skeleton State
+ .#{$prefix}--number.#{$prefix}--skeleton {
+ @include skeleton;
+ width: 100%;
+ height: 2.5rem;
+
+ input[type='number'] {
+ display: none;
+ }
+ }
}
diff --git a/src/components/order-summary/order-summary.hbs b/src/components/order-summary/order-summary.hbs
index fc7cf9dc240d..70d22bdb0611 100644
--- a/src/components/order-summary/order-summary.hbs
+++ b/src/components/order-summary/order-summary.hbs
@@ -12,13 +12,13 @@
USD
- NOKNOKNOKNOKNOK
+ NOK
GBP
- WWW
+ EUR
diff --git a/src/components/skeleton/skeleton.hbs b/src/components/skeleton/skeleton.hbs
new file mode 100644
index 000000000000..9853f6f3a993
--- /dev/null
+++ b/src/components/skeleton/skeleton.hbs
@@ -0,0 +1,124 @@
+
+Skeleton Text
+
+
+
+Button
+
+
+
+
+Label
+
+
+Breadcrumb
+
+
+Dropdown
+
+
+Progress Indicator
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+
+
+Toggle
+
+
+
+
+
+Small Toggle
+
+
+Slider
+
+
+Tag
+
+
+Tabs
+
+
+Icon
+
\ No newline at end of file
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index a38efe5138d4..e13aca59a0f1 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -83,4 +83,14 @@
color: transparent;
}
}
+
+ // Skeleton State
+ .#{$prefix}--text-input.#{$prefix}--skeleton {
+ @include skeleton;
+ width: 100%;
+
+ &::-webkit-input-placeholder {
+ color: transparent;
+ }
+ }
}