@daffodil/design 0.58.10 → 0.59.1

package/scss/state/skeleton/_mixins.scss

@@ -0,0 +1,41 @@
+@use '../../core';
+@use '../../theming';
+
+@mixin daff-skeleton-theme($theme) {
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+
+	.daff-skeleton {
+		&::before,
+		::before {
+			background: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		@keyframes loading {
+			from {
+				opacity: 0.5;
+			}
+			to {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin skeleton-screen($width, $height) {
+	display: flex;
+
+	&::before {
+		animation-name: loading;
+		animation-duration: 1500ms;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+		content: '';
+		height: $height;
+		width: $width;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+}

package/scss/theme.scss

@@ -38,6 +38,7 @@
 @use '../src/molecules/paginator/paginator-theme' as paginator;
 @use '../src/molecules/sidebar/sidebar/sidebar-theme' as sidebar;
 @use '../src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme' as sidebar-viewport;
+@use '../scss/state/skeleton/mixins' as skeleton;
 
 //
 // Generates the styles of a @daffodil/design theme.
@@ -52,6 +53,9 @@
 	// CSS variables
 	@include variables.daff-theme-css-variables($theme);
 
+	// Mixins
+	@include skeleton.daff-skeleton-theme($theme);
+
 	// Atoms
 	@include button.daff-button-theme($theme);
 	@include error-message.daff-error-message-theme($theme);

package/scss/utilities.scss

@@ -19,3 +19,4 @@
 @forward 'layout';
 @forward 'interactions';
 @forward 'accessibility';
+@forward 'state';

package/src/atoms/form/input/README.md

@@ -1,11 +1,24 @@
-# Input Component
+# Input
+Input is a form control element that can be used in forms.
 
-`daff-input`  is a form control element that can be used in forms.
+## Examples
 
-Make sure to use the appropriate `type` attribute on all inputs.
+### Basic
+A basic input without using the `DaffFormFieldComponent`.
 
-## Usage
+<design-land-example-viewer-container example="basic-input"></design-land-example-viewer-container>
 
-```
-<input daff-input type="text" placeholder="Email" name="email" />
-```
+### With `DaffFormFieldComponent`
+An input using `DaffFormField`
+
+<design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
+
+### Disabled
+The input in this example is disabled using the native HTML disabled attribute.
+
+<design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
+
+### With Reactive Forms
+The input in this example uses the `ReactiveFormsModule` to display errors.
+
+<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>

package/src/molecules/media-gallery/media-gallery-theme.scss

@@ -16,5 +16,13 @@
 				border: 1px solid theming.daff-color($gray);
 			}
 		}
+
+		&.daff-skeleton {
+			.daff-thumbnail {
+				&--selected {
+					border: none;
+				}
+			}
+		}
 	}
 }