@automattic/vip-design-system 1.2.2 → 1.3.0

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 +15 -2
  13. package/build/system/Button/Button.stories.d.ts +2 -1
  14. package/build/system/Button/Button.stories.js +9 -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 +1 -2
  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 +6 -3
  110. package/src/system/Button/{Button.test.js → Button.test.tsx} +2 -2
  111. package/src/system/Button/Button.tsx +15 -1
  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 +1 -2
  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/{wpvip-expressive-type.json → wpvip-web-type.json} RENAMED
@@ -197,7 +197,7 @@
197
197
  },
198
198
  "5-serif": {
199
199
  "value": {
200
- "fontFamily": "{fontFamily.display}",
200
+ "fontFamily": "{fontFamily.serif}",
201
201
  "fontWeight": "{fontWeight.regular}",
202
202
  "lineHeight": "{lineHeight.responsive}",
203
203
  "fontSize": "{fontSize.responsive.11}",
@@ -207,7 +207,7 @@
207
207
  },
208
208
  "6-serif": {
209
209
  "value": {
210
- "fontFamily": "{fontFamily.display}",
210
+ "fontFamily": "{fontFamily.serif}",
211
211
  "fontWeight": "{fontWeight.regular}",
212
212
  "lineHeight": "{lineHeight.responsive}",
213
213
  "fontSize": "{fontSize.responsive.12}",
@@ -217,7 +217,7 @@
217
217
  },
218
218
  "7-serif": {
219
219
  "value": {
220
- "fontFamily": "{fontFamily.display}",
220
+ "fontFamily": "{fontFamily.serif}",
221
221
  "fontWeight": "{fontWeight.regular}",
222
222
  "lineHeight": "{lineHeight.responsive}",
223
223
  "fontSize": "{fontSize.responsive.13}",
@@ -230,9 +230,9 @@
230
230
  "1": {
231
231
  "value": {
232
232
  "fontFamily": "{fontFamily.sans}",
233
- "fontWeight": "{fontWeight.light}",
234
- "lineHeight": "{lineHeight.4}",
235
- "fontSize": "{fontSize.responsive.8}",
233
+ "fontWeight": "{fontWeight.regular}",
234
+ "lineHeight": "{lineHeight.responsive}",
235
+ "fontSize": "{fontSize.responsive.7}",
236
236
  "letterSpacing": "{letterSpacing.tight}"
237
237
  },
238
238
  "type": "typography"
@@ -241,7 +241,7 @@
241
241
  "quotation": {
242
242
  "1": {
243
243
  "value": {
244
- "fontFamily": "{fontFamily.display}",
244
+ "fontFamily": "{fontFamily.serif}",
245
245
  "fontWeight": "{fontWeight.regular}",
246
246
  "lineHeight": "{lineHeight.4}",
247
247
  "fontSize": "{fontSize.responsive.8}",
@@ -251,7 +251,7 @@
251
251
  },
252
252
  "2": {
253
253
  "value": {
254
- "fontFamily": "{fontFamily.display}",
254
+ "fontFamily": "{fontFamily.serif}",
255
255
  "fontWeight": "{fontWeight.regular}",
256
256
  "lineHeight": "{lineHeight.4}",
257
257
  "fontSize": "{fontSize.responsive.10}",
@@ -261,7 +261,7 @@
261
261
  },
262
262
  "3": {
263
263
  "value": {
264
- "fontFamily": "{fontFamily.display}",
264
+ "fontFamily": "{fontFamily.serif}",
265
265
  "fontWeight": "{fontWeight.regular}",
266
266
  "lineHeight": "{lineHeight.3}",
267
267
  "fontSize": "{fontSize.responsive.11}",
@@ -295,7 +295,7 @@
295
295
  "code": {
296
296
  "1": {
297
297
  "value": {
298
- "fontFamily": "{fontFamily.mono}",
298
+ "fontFamily": "{fontFamily.monospace}",
299
299
  "fontWeight": "{fontWeight.regular}",
300
300
  "lineHeight": "{lineHeight.4}",
301
301
  "fontSize": "{fontSize.static.2}"
@@ -304,7 +304,7 @@
304
304
  },
305
305
  "2": {
306
306
  "value": {
307
- "fontFamily": "{fontFamily.mono}",
307
+ "fontFamily": "{fontFamily.monospace}",
308
308
  "fontWeight": "{fontWeight.regular}",
309
309
  "lineHeight": "{lineHeight.4}",
310
310
  "fontSize": "{fontSize.static.3}"
@@ -396,5 +396,17 @@
396
396
  "value": "0.03em",
397
397
  "type": "letterSpacing"
398
398
  }
399
+ },
400
+ "statistic": {
401
+ "1": {
402
+ "value": {
403
+ "fontFamily": "{fontFamily.sans}",
404
+ "fontWeight": "{fontWeight.regular}",
405
+ "lineHeight": "{lineHeight.responsive}",
406
+ "fontSize": "{fontSize.responsive.12}",
407
+ "letterSpacing": "{letterSpacing.tight}"
408
+ },
409
+ "type": "typography"
410
+ }
399
411
  }
400
- }
412
+ }