@automattic/vip-design-system 1.2.3 → 1.3.1

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 (232) hide show
  1. package/.eslintignore +2 -1
  2. package/.prettierignore +1 -0
  3. package/.storybook/decorators/withBoundingBox.tsx +30 -4
  4. package/.storybook/decorators/withColorMode.tsx +5 -5
  5. package/CONTRIBUTING.md +1 -1
  6. package/build/system/Accordion/Accordion.js +6 -6
  7. package/build/system/Accordion/Accordion.stories.js +1 -1
  8. package/build/system/Accordion/Accordion.test.js +7 -5
  9. package/build/system/Avatar/Avatar.js +3 -2
  10. package/build/system/Badge/Badge.js +1 -0
  11. package/build/system/Button/Button.d.ts +11 -0
  12. package/build/system/Button/Button.js +12 -1
  13. package/build/system/Button/Button.stories.d.ts +2 -1
  14. package/build/system/Button/Button.stories.js +1 -2
  15. package/build/system/Button/Button.test.js +72 -45
  16. package/build/system/Button/ButtonSubmit.d.ts +17 -1
  17. package/build/system/Button/ButtonSubmit.js +58 -65
  18. package/build/system/Button/ButtonSubmit.stories.d.ts +17 -37
  19. package/build/system/Button/ButtonSubmit.stories.js +52 -0
  20. package/build/system/Button/ButtonSubmit.test.js +55 -35
  21. package/build/system/Button/index.d.ts +7 -3
  22. package/build/system/Button/index.js +8 -7
  23. package/build/system/Dropdown/DropdownContent.js +1 -1
  24. package/build/system/Dropdown/DropdownItem.js +1 -1
  25. package/build/system/Dropdown/DropdownLabel.js +1 -1
  26. package/build/system/Form/Checkbox.d.ts +9 -9
  27. package/build/system/Form/Checkbox.js +56 -61
  28. package/build/system/Form/Checkbox.stories.d.ts +6 -6
  29. package/build/system/Form/Checkbox.stories.js +71 -0
  30. package/build/system/Form/Input.d.ts +14 -1
  31. package/build/system/Form/Input.js +59 -72
  32. package/build/system/Form/Input.stories.d.ts +6 -4
  33. package/build/system/Form/Input.stories.js +53 -0
  34. package/build/system/Form/Input.styles.d.ts +23 -14
  35. package/build/system/Form/Input.styles.js +40 -28
  36. package/build/system/Form/InputWithCopyButton.stories.jsx +7 -0
  37. package/build/system/Form/Label.d.ts +19 -8
  38. package/build/system/Form/Label.js +39 -43
  39. package/build/system/Form/Label.stories.d.ts +7 -5
  40. package/build/system/Form/Label.stories.js +32 -0
  41. package/build/system/Form/Radio.js +4 -4
  42. package/build/system/Form/Radio.stories.jsx +1 -1
  43. package/build/system/Form/RadioBoxGroup.js +1 -1
  44. package/build/system/Form/RequiredLabel.d.ts +2 -1
  45. package/build/system/Form/RequiredLabel.js +16 -7
  46. package/build/system/Form/Toggle.js +2 -2
  47. package/build/system/Form/Validation.d.ts +8 -13
  48. package/build/system/Form/Validation.js +39 -35
  49. package/build/system/Heading/Heading.stories.js +3 -0
  50. package/build/system/Link/Link.js +1 -1
  51. package/build/system/NewDialog/DialogClose.js +2 -2
  52. package/build/system/NewDialog/DialogContent.js +3 -3
  53. package/build/system/NewDialog/DialogTitle.js +3 -1
  54. package/build/system/NewDialog/NewDialog.stories.d.ts +0 -1
  55. package/build/system/NewDialog/NewDialog.stories.jsx +0 -27
  56. package/build/system/NewForm/Fieldset.d.ts +12 -1
  57. package/build/system/NewForm/Fieldset.js +38 -40
  58. package/build/system/NewForm/Form.d.ts +8 -1
  59. package/build/system/NewForm/Form.js +24 -23
  60. package/build/system/NewForm/FormAutocomplete.css +0 -11
  61. package/build/system/NewForm/FormAutocomplete.js +8 -8
  62. package/build/system/NewForm/FormAutocomplete.stories.jsx +1 -3
  63. package/build/system/NewForm/FormAutocompleteMultiselect.js +10 -10
  64. package/build/system/NewForm/FormSelect.js +1 -1
  65. package/build/system/NewForm/FormSelectArrow.js +1 -1
  66. package/build/system/NewForm/FormSelectInline.js +1 -1
  67. package/build/system/NewForm/FormSelectLoading.js +1 -1
  68. package/build/system/NewForm/FormSelectSearch.js +2 -2
  69. package/build/system/NewForm/Legend.d.ts +12 -1
  70. package/build/system/NewForm/Legend.js +32 -34
  71. package/build/system/NewForm/index.d.ts +1 -1
  72. package/build/system/OptionRow/OptionRow.js +1 -1
  73. package/build/system/Progress/Progress.d.ts +9 -2
  74. package/build/system/Progress/Progress.js +75 -70
  75. package/build/system/Progress/Progress.stories.d.ts +9 -7
  76. package/build/system/Progress/Progress.stories.js +34 -0
  77. package/build/system/Progress/Progress.test.d.ts +1 -0
  78. package/build/system/Progress/Progress.test.js +65 -0
  79. package/build/system/Progress/index.d.ts +4 -2
  80. package/build/system/Progress/index.js +5 -5
  81. package/build/system/ScreenReaderText/ScreenReaderText.js +1 -2
  82. package/build/system/Tabs/TabsTrigger.js +0 -1
  83. package/build/system/Text/Text.js +1 -1
  84. package/build/system/Text/Text.stories.js +36 -0
  85. package/build/system/Tooltip/Tooltip.css +6 -2
  86. package/build/system/Tooltip/Tooltip.stories.js +2 -2
  87. package/build/system/Wizard/Wizard.d.ts +14 -1
  88. package/build/system/Wizard/Wizard.js +62 -93
  89. package/build/system/Wizard/Wizard.stories.d.ts +11 -8
  90. package/build/system/Wizard/Wizard.stories.js +167 -0
  91. package/build/system/Wizard/WizardStep.d.ts +24 -1
  92. package/build/system/Wizard/WizardStep.js +180 -190
  93. package/build/system/Wizard/index.d.ts +4 -2
  94. package/build/system/Wizard/index.js +6 -7
  95. package/build/system/index.d.ts +2 -2
  96. package/build/system/index.js +2 -1
  97. package/build/system/theme/generated/valet-theme-dark.json +1219 -476
  98. package/build/system/theme/generated/valet-theme-light.json +1217 -474
  99. package/build/system/theme/{getColor.d.ts → getPropValue.d.ts} +2 -1
  100. package/{src/system/theme/getColor.js → build/system/theme/getPropValue.js} +36 -4
  101. package/build/system/theme/index.d.ts +20 -65
  102. package/build/system/theme/index.js +27 -57
  103. package/package.json +4 -4
  104. package/src/system/Accordion/Accordion.stories.tsx +1 -1
  105. package/src/system/Accordion/Accordion.test.tsx +3 -0
  106. package/src/system/Accordion/Accordion.tsx +6 -6
  107. package/src/system/Avatar/Avatar.tsx +3 -3
  108. package/src/system/Badge/Badge.tsx +1 -1
  109. package/src/system/Button/Button.stories.tsx +2 -3
  110. package/src/system/Button/{Button.test.js → Button.test.tsx} +2 -2
  111. package/src/system/Button/Button.tsx +12 -0
  112. package/src/system/Button/ButtonSubmit.stories.tsx +31 -0
  113. package/src/system/Button/{ButtonSubmit.test.js → ButtonSubmit.test.tsx} +4 -4
  114. package/src/system/Button/{ButtonSubmit.js → ButtonSubmit.tsx} +21 -27
  115. package/src/system/Button/index.ts +8 -0
  116. package/src/system/Dropdown/DropdownContent.js +1 -1
  117. package/src/system/Dropdown/DropdownItem.js +1 -1
  118. package/src/system/Dropdown/DropdownLabel.js +1 -1
  119. package/src/system/Form/{Checkbox.stories.jsx → Checkbox.stories.tsx} +3 -2
  120. package/src/system/Form/{Checkbox.js → Checkbox.tsx} +6 -10
  121. package/src/system/Form/{Input.stories.jsx → Input.stories.tsx} +1 -0
  122. package/src/system/Form/{Input.styles.js → Input.styles.ts} +14 -5
  123. package/src/system/Form/{Input.js → Input.tsx} +10 -19
  124. package/src/system/Form/InputWithCopyButton.stories.jsx +7 -0
  125. package/src/system/Form/{Label.js → Label.tsx} +8 -13
  126. package/src/system/Form/Radio.js +4 -4
  127. package/src/system/Form/Radio.stories.jsx +1 -1
  128. package/src/system/Form/RadioBoxGroup.js +1 -1
  129. package/src/system/Form/{RequiredLabel.js → RequiredLabel.tsx} +1 -3
  130. package/src/system/Form/Toggle.js +2 -2
  131. package/src/system/Form/{Validation.js → Validation.tsx} +11 -12
  132. package/src/system/Heading/Heading.stories.tsx +1 -0
  133. package/src/system/Link/Link.tsx +1 -1
  134. package/src/system/NewDialog/DialogClose.js +2 -2
  135. package/src/system/NewDialog/DialogContent.js +3 -3
  136. package/src/system/NewDialog/DialogTitle.js +3 -1
  137. package/src/system/NewDialog/NewDialog.stories.jsx +0 -27
  138. package/src/system/NewForm/Fieldset.tsx +46 -0
  139. package/src/system/NewForm/Form.tsx +23 -0
  140. package/src/system/NewForm/FormAutocomplete.css +0 -11
  141. package/src/system/NewForm/FormAutocomplete.js +8 -8
  142. package/src/system/NewForm/FormAutocomplete.stories.jsx +1 -3
  143. package/src/system/NewForm/FormAutocompleteMultiselect.js +10 -10
  144. package/src/system/NewForm/FormSelect.js +1 -1
  145. package/src/system/NewForm/FormSelectArrow.js +1 -1
  146. package/src/system/NewForm/FormSelectInline.js +1 -1
  147. package/src/system/NewForm/FormSelectLoading.js +1 -1
  148. package/src/system/NewForm/FormSelectSearch.js +2 -2
  149. package/src/system/NewForm/Legend.tsx +40 -0
  150. package/src/system/OptionRow/OptionRow.js +1 -1
  151. package/src/system/Progress/Progress.test.tsx +33 -0
  152. package/src/system/Progress/{Progress.js → Progress.tsx} +16 -19
  153. package/src/system/Progress/index.ts +4 -0
  154. package/src/system/ScreenReaderText/ScreenReaderText.tsx +0 -2
  155. package/src/system/Tabs/TabsTrigger.js +0 -1
  156. package/src/system/Text/Text.stories.tsx +7 -0
  157. package/src/system/Text/Text.tsx +1 -1
  158. package/src/system/Tooltip/Tooltip.css +6 -2
  159. package/src/system/Tooltip/Tooltip.stories.tsx +4 -4
  160. package/{build/system/Wizard/Wizard.stories.jsx → src/system/Wizard/Wizard.stories.tsx} +18 -23
  161. package/src/system/Wizard/Wizard.tsx +62 -0
  162. package/src/system/Wizard/{WizardStep.js → WizardStep.tsx} +38 -41
  163. package/src/system/Wizard/index.ts +7 -0
  164. package/src/system/index.js +2 -1
  165. package/src/system/theme/generated/valet-theme-dark.json +1219 -476
  166. package/src/system/theme/generated/valet-theme-light.json +1217 -474
  167. package/{build/system/theme/getColor.js → src/system/theme/getPropValue.js} +36 -4
  168. package/src/system/theme/index.js +27 -57
  169. package/tokens/utilities/colors/color output/blue.json +305 -0
  170. package/tokens/utilities/colors/color output/gold.json +305 -0
  171. package/tokens/utilities/colors/color output/gray.json +305 -0
  172. package/tokens/utilities/colors/color output/green.json +305 -0
  173. package/tokens/utilities/colors/color output/orange.json +305 -0
  174. package/tokens/utilities/colors/color output/pink.json +305 -0
  175. package/tokens/utilities/colors/color output/red.json +305 -0
  176. package/tokens/utilities/colors/color output/salmon.json +305 -0
  177. package/tokens/utilities/colors/color output/yellow.json +305 -0
  178. package/tokens/utilities/colors/colorOutput.json +4062 -0
  179. package/tokens/utilities/colors/color_3d_plot.js +43 -0
  180. package/tokens/utilities/colors/color_graph.js +31 -0
  181. package/tokens/utilities/colors/colors.json +1981 -0
  182. package/tokens/utilities/colors/index.js +118 -0
  183. package/tokens/utilities/colors/package-lock.json +6749 -0
  184. package/tokens/utilities/colors/package.json +21 -0
  185. package/tokens/utilities/figma-type-calculator/responsive-type.js +98 -0
  186. package/tokens/valet-core/$metadata.json +19 -15
  187. package/tokens/valet-core/$themes.json +3323 -419
  188. package/tokens/valet-core/{figma-parsely-expressive-type.json → figma-parsely-web-type.json} +128 -128
  189. package/tokens/valet-core/{figma-valet-expressive-type.json → figma-valet-web-type.json} +126 -126
  190. package/tokens/valet-core/figma-wpvip-services-web-type.json +1267 -0
  191. package/tokens/valet-core/{figma-wpvip-expressive-type.json → figma-wpvip-web-type.json} +162 -162
  192. package/tokens/valet-core/{parsely-expressive-color.json → parsely-web-color.json} +1 -1
  193. package/tokens/valet-core/{wpvip-expressive-core.json → parsely-web-core.json} +73 -23
  194. package/tokens/valet-core/{parsely-expressive-type.json → parsely-web-type.json} +21 -9
  195. package/tokens/valet-core/valet-core.json +331 -232
  196. package/tokens/valet-core/{valet-expressive-color.json → valet-web-color.json} +1 -1
  197. package/tokens/valet-core/{parsely-expressive-core.json → valet-web-core.json} +72 -22
  198. package/tokens/valet-core/{wpvip-productive-color.json → wpvip-product-core.json} +663 -7
  199. package/tokens/valet-core/{wpvip-productive-color-dark.json → wpvip-product-dark.json} +332 -10
  200. package/tokens/valet-core/{wpvip-expressive-color.json → wpvip-services-web-color.json} +1 -1
  201. package/tokens/valet-core/{valet-expressive-core.json → wpvip-services-web-core.json} +72 -22
  202. package/tokens/valet-core/wpvip-services-web-type.json +412 -0
  203. package/tokens/valet-core/{wpvip-expressive-color-dark.json → wpvip-web-color-dark.json} +1 -1
  204. package/tokens/valet-core/wpvip-web-color.json +730 -0
  205. package/tokens/valet-core/{wpvip-expressive-type.json → wpvip-web-type.json} +24 -12
  206. package/tokens/valet-core/wpvip-web.json +1310 -0
  207. package/tsconfig.json +2 -1
  208. package/build/system/Button/ButtonSubmit.stories.jsx +0 -40
  209. package/build/system/Button/variants.d.ts +0 -2
  210. package/build/system/Button/variants.js +0 -1
  211. package/build/system/Form/Checkbox.stories.jsx +0 -54
  212. package/build/system/Form/Input.stories.jsx +0 -38
  213. package/build/system/Wizard/WizardStepHorizontal.d.ts +0 -2
  214. package/build/system/Wizard/WizardStepHorizontal.js +0 -55
  215. package/build/system/theme/textStyles.d.ts +0 -71
  216. package/build/system/theme/textStyles.js +0 -46
  217. package/src/system/Button/ButtonSubmit.stories.jsx +0 -40
  218. package/src/system/Button/index.js +0 -8
  219. package/src/system/Button/variants.js +0 -1
  220. package/src/system/Form/Label.stories.jsx +0 -36
  221. package/src/system/NewForm/Fieldset.js +0 -47
  222. package/src/system/NewForm/Form.js +0 -26
  223. package/src/system/NewForm/Legend.js +0 -41
  224. package/src/system/Progress/Progress.stories.jsx +0 -25
  225. package/src/system/Progress/index.js +0 -6
  226. package/src/system/Wizard/Wizard.js +0 -103
  227. package/src/system/Wizard/Wizard.stories.jsx +0 -145
  228. package/src/system/Wizard/WizardStepHorizontal.js +0 -55
  229. package/src/system/Wizard/index.js +0 -8
  230. package/src/system/theme/textStyles.js +0 -46
  231. /package/{build/system/Form/Label.stories.jsx → src/system/Form/Label.stories.tsx} +0 -0
  232. /package/{build/system/Progress/Progress.stories.jsx → src/system/Progress/Progress.stories.tsx} +0 -0
package/tokens/valet-core/{parsely-expressive-core.json → valet-web-core.json} RENAMED
@@ -5,41 +5,67 @@
5
5
  "value": "{space.responsive.4-7}",
6
6
  "type": "spacing",
7
7
  "description": "Use for global padding for the application—usually the outer margins of the screen. "
8
+ }
9
+ },
10
+ "responsive": {
11
+ "x-small": {
12
+ "value": "{space.responsive.3-4}",
13
+ "type": "spacing"
8
14
  },
9
15
  "small": {
10
- "value": "{space.responsive.6-7}",
16
+ "value": "{space.responsive.4-5}",
11
17
  "type": "spacing"
12
18
  },
13
19
  "medium": {
14
- "value": "{space.responsive.7-8}",
20
+ "value": "{space.responsive.5-6}",
15
21
  "type": "spacing"
16
22
  },
17
23
  "large": {
24
+ "value": "{space.responsive.6-7}",
25
+ "type": "spacing",
26
+ "description": "The default space between sequential blocks in a layout"
27
+ },
28
+ "x-large": {
29
+ "value": "{space.responsive.7-8}",
30
+ "type": "spacing"
31
+ },
32
+ "xx-large": {
18
33
  "value": "{space.responsive.8-9}",
19
34
  "type": "spacing"
20
35
  },
21
- "huge": {
36
+ "xxx-large": {
22
37
  "value": "{space.responsive.9-10}",
23
38
  "type": "spacing"
24
39
  }
25
40
  },
26
- "gap": {
27
- "tiny": {
28
- "value": "{space.responsive.3-4}",
41
+ "static": {
42
+ "x-small": {
43
+ "value": "{space.static.1}",
29
44
  "type": "spacing"
30
45
  },
31
46
  "small": {
32
- "value": "{space.responsive.4-5}",
47
+ "value": "{space.static.2}",
33
48
  "type": "spacing"
34
49
  },
35
50
  "medium": {
36
- "value": "{space.responsive.5-6}",
51
+ "value": "{space.static.3}",
37
52
  "type": "spacing"
38
53
  },
39
54
  "large": {
40
- "value": "{space.responsive.6-7}",
41
- "type": "spacing",
42
- "description": "The default space between sequential blocks in a layout"
55
+ "value": "{space.static.4}",
56
+ "type": "spacing"
57
+ },
58
+ "x-large": {
59
+ "value": "{space.static.5}",
60
+ "type": "spacing"
61
+ },
62
+ "xx-large": {
63
+ "value": "{space.static.6}",
64
+ "type": "spacing"
65
+ },
66
+ "xxx-large": {
67
+ "value": "{space.static.7}",
68
+ "type": "spacing"
43
69
  }
44
70
  }
45
71
  },
@@ -106,17 +132,41 @@
106
132
  }
107
133
  },
108
134
  "borderRadius": {
109
- "small": {
110
- "value": "{borderRadius.static.2}",
111
- "type": "borderRadius"
112
- },
113
- "medium": {
114
- "value": "{borderRadius.responsive.3-5}",
115
- "type": "borderRadius"
135
+ "static": {
136
+ "small": {
137
+ "value": "{borderRadius.static.2}",
138
+ "type": "borderRadius"
139
+ },
140
+ "medium": {
141
+ "value": "{borderRadius.static.3}",
142
+ "type": "borderRadius"
143
+ },
144
+ "large": {
145
+ "value": "{borderRadius.static.4}",
146
+ "type": "borderRadius"
147
+ },
148
+ "x-large": {
149
+ "value": "{borderRadius.static.5}",
150
+ "type": "borderRadius"
151
+ },
152
+ "xx-large": {
153
+ "value": "{borderRadius.static.6}",
154
+ "type": "borderRadius"
155
+ },
156
+ "x-small": {
157
+ "value": "{borderRadius.static.1}",
158
+ "type": "borderRadius"
159
+ }
116
160
  },
117
- "large": {
118
- "value": "{borderRadius.responsive.4-6}",
119
- "type": "borderRadius"
161
+ "responsive": {
162
+ "medium": {
163
+ "value": "{borderRadius.responsive.3-5}",
164
+ "type": "borderRadius"
165
+ },
166
+ "large": {
167
+ "value": "{borderRadius.responsive.4-6}",
168
+ "type": "borderRadius"
169
+ }
120
170
  }
121
171
  }
122
- }
172
+ }