@daffodil/design 0.59.0 → 0.59.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (99) hide show
  1. package/accordion/examples/package.json +1 -10
  2. package/article/examples/package.json +1 -10
  3. package/atoms/image/image.component.d.ts +24 -4
  4. package/button/examples/package.json +1 -10
  5. package/callout/examples/package.json +1 -10
  6. package/card/examples/package.json +1 -10
  7. package/checkbox/examples/package.json +1 -10
  8. package/container/examples/package.json +1 -10
  9. package/core/skeletonable/public_api.d.ts +2 -0
  10. package/core/skeletonable/skeletonable-mixin.d.ts +15 -0
  11. package/esm2020/atoms/image/image.component.mjs +23 -9
  12. package/esm2020/card/examples/basic-card/basic-card.component.mjs +1 -1
  13. package/esm2020/card/examples/card-orientation/card-orientation.component.mjs +1 -1
  14. package/esm2020/card/examples/linkable-card/linkable-card.component.mjs +1 -1
  15. package/esm2020/card/examples/raised-card/raised-card.component.mjs +1 -1
  16. package/esm2020/card/examples/stroked-card/stroked-card.component.mjs +1 -1
  17. package/esm2020/core/skeletonable/public_api.mjs +2 -0
  18. package/esm2020/core/skeletonable/skeletonable-mixin.mjs +26 -0
  19. package/esm2020/image/examples/basic-image/basic-image.component.mjs +1 -1
  20. package/esm2020/image/examples/load-image/load-image.component.mjs +1 -1
  21. package/esm2020/image/examples/public_api.mjs +4 -1
  22. package/esm2020/image/examples/skeleton-image/skeleton-image.component.mjs +12 -0
  23. package/esm2020/image/examples/skeleton-image/skeleton-image.module.mjs +26 -0
  24. package/esm2020/input/examples/basic-input/basic-input.component.mjs +12 -0
  25. package/esm2020/input/examples/basic-input/basic-input.module.mjs +26 -0
  26. package/esm2020/input/examples/daffodil-design-input-examples.mjs +5 -0
  27. package/esm2020/input/examples/examples.mjs +15 -0
  28. package/esm2020/input/examples/index.mjs +2 -0
  29. package/esm2020/input/examples/input-disabled/input-disabled.component.mjs +12 -0
  30. package/esm2020/input/examples/input-disabled/input-disabled.module.mjs +26 -0
  31. package/esm2020/input/examples/input-error/input-error.component.mjs +20 -0
  32. package/esm2020/input/examples/input-error/input-error.module.mjs +30 -0
  33. package/esm2020/input/examples/input-with-form-field/input-with-form-field.component.mjs +12 -0
  34. package/esm2020/input/examples/input-with-form-field/input-with-form-field.module.mjs +26 -0
  35. package/esm2020/input/examples/public_api.mjs +2 -0
  36. package/esm2020/media-gallery/examples/basic-media-gallery/basic-media-gallery.component.mjs +1 -1
  37. package/esm2020/media-gallery/examples/examples.mjs +3 -1
  38. package/esm2020/media-gallery/examples/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.mjs +1 -1
  39. package/esm2020/media-gallery/examples/public_api.mjs +3 -1
  40. package/esm2020/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.component.mjs +12 -0
  41. package/esm2020/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.module.mjs +30 -0
  42. package/esm2020/molecules/media-gallery/media-gallery.component.mjs +6 -5
  43. package/fesm2015/daffodil-design-card-examples.mjs +5 -5
  44. package/fesm2015/daffodil-design-card-examples.mjs.map +1 -1
  45. package/fesm2015/daffodil-design-image-examples.mjs +34 -2
  46. package/fesm2015/daffodil-design-image-examples.mjs.map +1 -1
  47. package/fesm2015/daffodil-design-input-examples.mjs +153 -0
  48. package/fesm2015/daffodil-design-input-examples.mjs.map +1 -0
  49. package/fesm2015/daffodil-design-media-gallery-examples.mjs +39 -3
  50. package/fesm2015/daffodil-design-media-gallery-examples.mjs.map +1 -1
  51. package/fesm2015/daffodil-design.mjs +50 -11
  52. package/fesm2015/daffodil-design.mjs.map +1 -1
  53. package/fesm2020/daffodil-design-card-examples.mjs +5 -5
  54. package/fesm2020/daffodil-design-card-examples.mjs.map +1 -1
  55. package/fesm2020/daffodil-design-image-examples.mjs +34 -2
  56. package/fesm2020/daffodil-design-image-examples.mjs.map +1 -1
  57. package/fesm2020/daffodil-design-input-examples.mjs +153 -0
  58. package/fesm2020/daffodil-design-input-examples.mjs.map +1 -0
  59. package/fesm2020/daffodil-design-media-gallery-examples.mjs +39 -3
  60. package/fesm2020/daffodil-design-media-gallery-examples.mjs.map +1 -1
  61. package/fesm2020/daffodil-design.mjs +50 -11
  62. package/fesm2020/daffodil-design.mjs.map +1 -1
  63. package/hero/examples/package.json +1 -10
  64. package/image/examples/package.json +1 -10
  65. package/image/examples/skeleton-image/skeleton-image.component.d.ts +5 -0
  66. package/image/examples/skeleton-image/skeleton-image.module.d.ts +8 -0
  67. package/input/examples/basic-input/basic-input.component.d.ts +5 -0
  68. package/input/examples/basic-input/basic-input.module.d.ts +8 -0
  69. package/input/examples/daffodil-design-input-examples.d.ts +5 -0
  70. package/input/examples/examples.d.ts +2 -0
  71. package/input/examples/index.d.ts +1 -0
  72. package/input/examples/input-disabled/input-disabled.component.d.ts +5 -0
  73. package/input/examples/input-disabled/input-disabled.module.d.ts +8 -0
  74. package/input/examples/input-error/input-error.component.d.ts +7 -0
  75. package/input/examples/input-error/input-error.module.d.ts +9 -0
  76. package/input/examples/input-with-form-field/input-with-form-field.component.d.ts +5 -0
  77. package/input/examples/input-with-form-field/input-with-form-field.module.d.ts +8 -0
  78. package/input/examples/package.json +1 -0
  79. package/input/examples/public_api.d.ts +1 -0
  80. package/list/examples/package.json +1 -10
  81. package/loading-icon/examples/package.json +1 -10
  82. package/media-gallery/examples/package.json +1 -10
  83. package/media-gallery/examples/public_api.d.ts +2 -0
  84. package/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.component.d.ts +5 -0
  85. package/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.module.d.ts +8 -0
  86. package/menu/examples/package.json +1 -10
  87. package/modal/examples/package.json +1 -10
  88. package/molecules/media-gallery/media-gallery.component.d.ts +10 -2
  89. package/navbar/examples/package.json +1 -10
  90. package/package.json +1 -230
  91. package/paginator/examples/package.json +1 -10
  92. package/quantity-field/examples/package.json +1 -10
  93. package/radio/examples/package.json +1 -10
  94. package/scss/state/_index.scss +1 -0
  95. package/scss/state/skeleton/_mixins.scss +41 -0
  96. package/scss/theme.scss +4 -0
  97. package/scss/utilities.scss +1 -0
  98. package/src/atoms/form/input/README.md +20 -7
  99. package/src/molecules/media-gallery/media-gallery-theme.scss +8 -0
@@ -0,0 +1,41 @@
1
+ @use '../../core';
2
+ @use '../../theming';
3
+
4
+ @mixin daff-skeleton-theme($theme) {
5
+ $gray: core.daff-map-deep-get($theme, 'core.gray');
6
+ $base: core.daff-map-deep-get($theme, 'core.base');
7
+
8
+ .daff-skeleton {
9
+ &::before,
10
+ ::before {
11
+ background: theming.daff-illuminate($base, $gray, 2);
12
+ }
13
+
14
+ @keyframes loading {
15
+ from {
16
+ opacity: 0.5;
17
+ }
18
+ to {
19
+ opacity: 1;
20
+ }
21
+ }
22
+ }
23
+ }
24
+
25
+ @mixin skeleton-screen($width, $height) {
26
+ display: flex;
27
+
28
+ &::before {
29
+ animation-name: loading;
30
+ animation-duration: 1500ms;
31
+ animation-timing-function: linear;
32
+ animation-iteration-count: infinite;
33
+ animation-direction: alternate;
34
+ content: '';
35
+ height: $height;
36
+ width: $width;
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ }
41
+ }
package/scss/theme.scss CHANGED
@@ -38,6 +38,7 @@
38
38
  @use '../src/molecules/paginator/paginator-theme' as paginator;
39
39
  @use '../src/molecules/sidebar/sidebar/sidebar-theme' as sidebar;
40
40
  @use '../src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme' as sidebar-viewport;
41
+ @use '../scss/state/skeleton/mixins' as skeleton;
41
42
 
42
43
  //
43
44
  // Generates the styles of a @daffodil/design theme.
@@ -52,6 +53,9 @@
52
53
  // CSS variables
53
54
  @include variables.daff-theme-css-variables($theme);
54
55
 
56
+ // Mixins
57
+ @include skeleton.daff-skeleton-theme($theme);
58
+
55
59
  // Atoms
56
60
  @include button.daff-button-theme($theme);
57
61
  @include error-message.daff-error-message-theme($theme);
@@ -19,3 +19,4 @@
19
19
  @forward 'layout';
20
20
  @forward 'interactions';
21
21
  @forward 'accessibility';
22
+ @forward 'state';
@@ -1,11 +1,24 @@
1
- # Input Component
1
+ # Input
2
+ Input is a form control element that can be used in forms.
2
3
 
3
- `daff-input` is a form control element that can be used in forms.
4
+ ## Examples
4
5
 
5
- Make sure to use the appropriate `type` attribute on all inputs.
6
+ ### Basic
7
+ A basic input without using the `DaffFormFieldComponent`.
6
8
 
7
- ## Usage
9
+ <design-land-example-viewer-container example="basic-input"></design-land-example-viewer-container>
8
10
 
9
- ```
10
- <input daff-input type="text" placeholder="Email" name="email" />
11
- ```
11
+ ### With `DaffFormFieldComponent`
12
+ An input using `DaffFormField`
13
+
14
+ <design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
15
+
16
+ ### Disabled
17
+ The input in this example is disabled using the native HTML disabled attribute.
18
+
19
+ <design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
20
+
21
+ ### With Reactive Forms
22
+ The input in this example uses the `ReactiveFormsModule` to display errors.
23
+
24
+ <design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
@@ -16,5 +16,13 @@
16
16
  border: 1px solid theming.daff-color($gray);
17
17
  }
18
18
  }
19
+
20
+ &.daff-skeleton {
21
+ .daff-thumbnail {
22
+ &--selected {
23
+ border: none;
24
+ }
25
+ }
26
+ }
19
27
  }
20
28
  }