@pareto-engineering/design-system 4.0.0-alpha.34 → 4.0.0-alpha.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/cjs/f/common/InputWrapper/InputWrapper.js +74 -0
  2. package/dist/cjs/f/common/InputWrapper/index.js +13 -0
  3. package/dist/cjs/f/common/InputWrapper/styles.scss +13 -0
  4. package/dist/cjs/f/common/Label/Label.js +18 -4
  5. package/dist/cjs/f/common/Label/styles.scss +8 -2
  6. package/dist/cjs/f/common/index.js +8 -1
  7. package/dist/cjs/f/fields/Checkbox/Checkbox.js +40 -10
  8. package/dist/cjs/f/fields/Checkbox/styles.scss +6 -8
  9. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +42 -20
  10. package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js +1 -1
  11. package/dist/cjs/f/fields/ChoicesInput/styles.scss +50 -35
  12. package/dist/cjs/f/fields/QueryChoices/QueryChoices.js +26 -2
  13. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +35 -5
  14. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +41 -14
  15. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +33 -23
  16. package/dist/cjs/f/fields/QueryCombobox/styles.scss +58 -28
  17. package/dist/cjs/f/fields/QuerySelect/QuerySelect.js +17 -3
  18. package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +41 -19
  19. package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js +3 -3
  20. package/dist/cjs/f/fields/RatingsInput/styles.scss +6 -13
  21. package/dist/cjs/f/fields/SelectInput/SelectInput.js +45 -15
  22. package/dist/cjs/f/fields/SelectInput/styles.scss +40 -18
  23. package/dist/cjs/f/fields/TextInput/TextInput.js +38 -16
  24. package/dist/cjs/f/fields/TextInput/styles.scss +28 -22
  25. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +42 -21
  26. package/dist/cjs/f/fields/TextareaInput/styles.scss +42 -27
  27. package/dist/es/f/common/InputWrapper/InputWrapper.js +66 -0
  28. package/dist/es/f/common/InputWrapper/index.js +2 -0
  29. package/dist/es/f/common/InputWrapper/styles.scss +13 -0
  30. package/dist/es/f/common/Label/Label.js +18 -4
  31. package/dist/es/f/common/Label/styles.scss +8 -2
  32. package/dist/es/f/common/index.js +2 -1
  33. package/dist/es/f/fields/Checkbox/Checkbox.js +41 -11
  34. package/dist/es/f/fields/Checkbox/styles.scss +6 -8
  35. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +43 -21
  36. package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js +1 -1
  37. package/dist/es/f/fields/ChoicesInput/styles.scss +50 -35
  38. package/dist/es/f/fields/QueryChoices/QueryChoices.js +26 -2
  39. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +35 -5
  40. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +41 -14
  41. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +33 -23
  42. package/dist/es/f/fields/QueryCombobox/styles.scss +58 -28
  43. package/dist/es/f/fields/QuerySelect/QuerySelect.js +17 -3
  44. package/dist/es/f/fields/RatingsInput/RatingsInput.js +42 -20
  45. package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js +3 -3
  46. package/dist/es/f/fields/RatingsInput/styles.scss +6 -13
  47. package/dist/es/f/fields/SelectInput/SelectInput.js +46 -16
  48. package/dist/es/f/fields/SelectInput/styles.scss +40 -18
  49. package/dist/es/f/fields/TextInput/TextInput.js +39 -17
  50. package/dist/es/f/fields/TextInput/styles.scss +28 -22
  51. package/dist/es/f/fields/TextareaInput/TextareaInput.js +43 -22
  52. package/dist/es/f/fields/TextareaInput/styles.scss +42 -27
  53. package/package.json +3 -3
  54. package/src/stories/f/Checkbox.stories.jsx +22 -7
  55. package/src/stories/f/ChoicesInput.stories.jsx +21 -7
  56. package/src/stories/f/QueryChoices.stories.jsx +20 -4
  57. package/src/stories/f/QueryCombobox.stories.jsx +25 -13
  58. package/src/stories/f/QuerySelect.stories.jsx +20 -5
  59. package/src/stories/f/RatingsInput.stories.jsx +16 -2
  60. package/src/stories/f/SelectInput.stories.jsx +20 -5
  61. package/src/stories/f/TextInput.stories.jsx +23 -9
  62. package/src/stories/f/TextareaInput.stories.jsx +16 -2
  63. package/src/ui/f/common/InputWrapper/InputWrapper.jsx +89 -0
  64. package/src/ui/f/common/InputWrapper/index.js +2 -0
  65. package/src/ui/f/common/InputWrapper/styles.scss +13 -0
  66. package/src/ui/f/common/Label/Label.jsx +18 -2
  67. package/src/ui/f/common/Label/styles.scss +8 -2
  68. package/src/ui/f/common/index.js +1 -0
  69. package/src/ui/f/fields/Checkbox/Checkbox.jsx +65 -27
  70. package/src/ui/f/fields/Checkbox/styles.scss +6 -8
  71. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +75 -47
  72. package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx +10 -3
  73. package/src/ui/f/fields/ChoicesInput/styles.scss +50 -35
  74. package/src/ui/f/fields/QueryChoices/QueryChoices.jsx +28 -0
  75. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +37 -2
  76. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +67 -38
  77. package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +81 -66
  78. package/src/ui/f/fields/QueryCombobox/styles.scss +58 -28
  79. package/src/ui/f/fields/QuerySelect/QuerySelect.jsx +16 -1
  80. package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +55 -28
  81. package/src/ui/f/fields/RatingsInput/common/Rating/Rating.jsx +3 -3
  82. package/src/ui/f/fields/RatingsInput/styles.scss +6 -13
  83. package/src/ui/f/fields/SelectInput/SelectInput.jsx +88 -49
  84. package/src/ui/f/fields/SelectInput/styles.scss +40 -18
  85. package/src/ui/f/fields/TextInput/TextInput.jsx +52 -29
  86. package/src/ui/f/fields/TextInput/styles.scss +28 -22
  87. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +65 -43
  88. package/src/ui/f/fields/TextareaInput/styles.scss +42 -27
  89. package/tests/__snapshots__/Storyshots.test.js.snap +4698 -3122
package/src/ui/f/fields/TextareaInput/styles.scss CHANGED
@@ -1,35 +1,50 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
2
 
3
3
  @use "@pareto-engineering/bem";
4
-
5
- $default-padding: var(--theme-default-padding);
6
- $active-border-color: var(--on-y);
4
+ @use "@pareto-engineering/styles/src/mixins";
5
+ @use "@pareto-engineering/styles/src/globals" as *;
6
+
7
+ $default-padding: .55em .75em;
8
+ $default-border: 1px solid var(--outline-inputs);
9
+ $default-input-border-radius: var(--theme-default-input-border-radius);
10
+ $default-border: var(--theme-default-input-border);
11
+ $hover-border: var(--theme-hover-input-border);
12
+ $focus-border: var(--theme-focus-input-border);
13
+ $default-background: var(--theme-default-input-background);
14
+ $disabled-background: var(--theme-disabled-input-background);
7
15
 
8
16
  .#{bem.$base}.text-area-input {
9
- display: flex;
10
- flex-direction: column;
11
-
12
- .textarea {
13
- background: var(--y);
14
- border: var(--theme-default-border-style) var(--hard-y);
15
- border-radius: calc(var(--theme-default-border-radius) / 2);
16
- color: var(--on-y);
17
- padding: $default-padding;
18
-
19
- &::placeholder {
20
- color: var(--metadata);
21
- }
22
-
23
- &:not(:disabled):hover {
24
- border: var(--theme-default-border-style) $active-border-color;
25
- }
26
-
27
- &:disabled {
28
- background-color: var(--hard-y);
29
- }
30
-
31
- &:focus {
32
- border: var(--theme-default-border-style) $active-border-color;
17
+ &.#{bem.$base}.input-wrapper {
18
+ display: flex;
19
+ flex-direction: column;
20
+
21
+ > .textarea {
22
+ background: $default-background;
23
+ border: $default-border;
24
+ border-radius: $default-input-border-radius;
25
+ color: var(--y);
26
+ outline: none;
27
+ padding: $default-padding;
28
+ width: 100%;
29
+
30
+ &::placeholder {
31
+ color: var(--metadata);
32
+ }
33
+
34
+ &:disabled {
35
+ background-color: $disabled-background;
36
+ }
37
+
38
+ &:not(:disabled) {
39
+ &:hover,
40
+ &:active {
41
+ border: $hover-border;
42
+ }
43
+
44
+ &:focus {
45
+ border: $focus-border;
46
+ }
47
+ }
33
48
  }
34
49
  }
35
50
  }