@xy-planning-network/trees 0.9.9 → 0.10.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 (33) hide show
  1. package/README.md +5 -13
  2. package/config/tailwind.config.js +8 -4
  3. package/config/theme/colors.ts +10 -1
  4. package/config/theme/index.ts +4 -1
  5. package/config/theme/layout.ts +11 -0
  6. package/config/theme/typography.ts +25 -0
  7. package/dist/trees.es.js +2338 -2164
  8. package/dist/trees.umd.js +8 -8
  9. package/package.json +5 -3
  10. package/src/index.css +106 -11
  11. package/src/lib-components/forms/FieldsetLegend.vue +1 -1
  12. package/src/lib-components/forms/InputHelp.vue +1 -1
  13. package/src/lib-components/forms/MultiCheckboxes.vue +11 -6
  14. package/src/lib-components/forms/Radio.vue +11 -6
  15. package/src/lib-components/forms/RadioCards.vue +6 -6
  16. package/src/lib-components/forms/YesOrNoRadio.vue +9 -4
  17. package/src/lib-components/indicators/InlineAlert.vue +3 -3
  18. package/src/lib-components/indicators/ProgressCircles.vue +87 -0
  19. package/src/lib-components/indicators/ProgressCirclesLabeled.vue +104 -0
  20. package/src/lib-components/layout/SidebarLayout.vue +61 -53
  21. package/src/lib-components/layout/StackedLayout.vue +1 -1
  22. package/src/lib-components/lists/Cards.vue +1 -1
  23. package/src/lib-components/navigation/Steps.vue +1 -1
  24. package/src/lib-components/overlays/ContentModal.vue +1 -1
  25. package/src/lib-components/overlays/Modal.vue +5 -5
  26. package/src/lib-components/overlays/Popover/PopoverContent.vue +1 -1
  27. package/src/lib-components/overlays/Tooltip.vue +2 -2
  28. package/types/components.d.ts +1 -1
  29. package/types/lib-components/index.d.ts +5 -1
  30. package/types/lib-components/indicators/ProgressCircles.vue.d.ts +31 -0
  31. package/types/lib-components/indicators/ProgressCirclesLabeled.vue.d.ts +31 -0
  32. package/types/lib-components/layout/SidebarLayout.vue.d.ts +2 -0
  33. package/config/theme/fontFamily.ts +0 -5
package/README.md CHANGED
@@ -47,10 +47,10 @@ Trees is our attempt at unifying the frontend code we've written to power a smal
47
47
 
48
48
  ## Install
49
49
 
50
- Install trees and mitt into an existing Vue project - assumes npm version >= 7
50
+ Install trees into an existing Vue project - assumes npm version >= 7
51
51
 
52
52
  ```sh
53
- npm i @xy-planning-network/trees mitt
53
+ npm i @xy-planning-network/trees
54
54
  ```
55
55
 
56
56
  Additional peer dependecies will be installed by NPM. If you are using NPM < 7 you may need to explicitly install peer dependencies.
@@ -78,22 +78,14 @@ module.exports = {
78
78
 
79
79
  ### Fonts
80
80
 
81
- **Include Inter Var in html template**
82
-
83
- ```html
84
- <head>
85
- <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
86
- </head>
87
- ```
88
-
89
- **Optionally include Work Sans in html template**
81
+ **Include Font Families in html template**
90
82
 
91
83
  ```html
92
84
  <head>
93
85
  <link rel="preconnect" href="https://fonts.googleapis.com" />
94
86
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
95
87
  <link
96
- href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
88
+ href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Work+Sans:ital,wght@0,300..800;1,300..800&display=swap"
97
89
  rel="stylesheet"
98
90
  />
99
91
  </head>
@@ -246,7 +238,7 @@ import {
246
238
  * should provide code completiong support in your editor - milage may vary
247
239
  * provides proper type checking on the components declared props
248
240
  */
249
- declare module "@vue/runtime-core" {
241
+ declare module "vue" {
250
242
  interface GlobalComponents {
251
243
  BaseInput: typeof BaseInput
252
244
  Checkbox: typeof Checkbox
package/config/tailwind.config.js CHANGED
@@ -19,21 +19,25 @@ module.exports = {
19
19
  },
20
20
  extend: {
21
21
  animation: treesTheme.animation,
22
+ borderRadius: treesTheme.borderRadius,
22
23
  colors: treesTheme.colors,
23
24
  fontFamily: treesTheme.fontFamily,
25
+ fontWeight: treesTheme.fontWeight,
24
26
  typography: (theme) => {
25
27
  return {
26
28
  DEFAULT: {
27
29
  css: {
28
- color: theme("colors.gray.900"),
30
+ color: theme("colors.neutral.800"),
29
31
  a: {
30
- color: theme("colors.xy-blue.DEFAULT"),
32
+ textDecoration: "none",
33
+ borderBottom: `2px solid ${theme("colors.xy-blue.DEFAULT")}`,
31
34
  "&:hover": {
32
- color: theme("colors.blue.700"),
35
+ color: theme("colors.xy-blue.DEFAULT"),
36
+ borderBottomColor: theme("colors.transparent"),
33
37
  },
34
38
  },
35
39
  "h2, h3, h4": {
36
- color: theme("colors.gray.900"),
40
+ color: theme("colors.neutral.800"),
37
41
  },
38
42
  },
39
43
  },
package/config/theme/colors.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import twColors from "tailwindcss/colors"
2
+
1
3
  export const brandColors = {
2
4
  blue: {
3
5
  50: "#C9E4F6",
@@ -24,7 +26,9 @@ export const brandColors = {
24
26
  900: "#307D41",
25
27
  },
26
28
  neutral: {
27
- // holding on usage for potential palette update
29
+ // NOTE(spk): This is the official xy-neutral color pallete, but we're holding on usage.
30
+ // The color gradients are problematic with existing designs.
31
+ // The color weights 100-300 need a shift to the right by introducing a new 100 weight.
28
32
  50: "#FAF9F8",
29
33
  100: "#E7E6E5",
30
34
  200: "#C9C8C7",
@@ -39,6 +43,9 @@ export const brandColors = {
39
43
  }
40
44
 
41
45
  export default {
46
+ // NOTE(spk): The gray color pallete is currently in heavy rotation
47
+ // replace with tailwind/neutral while we phase it out.
48
+ gray: twColors.neutral,
42
49
  "xy-blue": {
43
50
  DEFAULT: brandColors["blue"][600],
44
51
  ...brandColors["blue"],
@@ -50,6 +57,8 @@ export default {
50
57
  DEFAULT: brandColors["green"][200],
51
58
  ...brandColors["green"],
52
59
  },
60
+ // NOTE(spk): while xy-neutral is updated we'll work with tailwind/neutral in its place.
61
+ "xy-neutral": twColors.neutral,
53
62
  "xy-black": {
54
63
  DEFAULT: brandColors["neutral"][800],
55
64
  },
package/config/theme/index.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import animation from "./animation"
2
2
  import colors from "./colors"
3
- import fontFamily from "./fontFamily"
3
+ import { borderRadius } from "./layout"
4
+ import { fontFamily, fontWeight } from "./typography"
4
5
 
5
6
  export default {
6
7
  animation,
8
+ borderRadius,
7
9
  colors,
8
10
  fontFamily,
11
+ fontWeight,
9
12
  }
package/config/theme/layout.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * borderRadius
3
+ * experimental .rounded class utilities for consitency with the brand design language
4
+ *
5
+ * These rounded utilities should be used mostly for layout container styles like cards,
6
+ * continue to use tailwind rounded utilities for other components like buttons and inputs.
7
+ */
8
+ export const borderRadius = {
9
+ xy: "1.125rem", // rounded-xy 18px - use with padding < 1.5rem/24px
10
+ "xy-lg": "1.5rem", // rounded-xy-lg 32px - use with padding > 1.5rem/24px
11
+ }
package/config/theme/typography.ts ADDED
@@ -0,0 +1,25 @@
1
+ import defaultTheme from "tailwindcss/defaultTheme"
2
+
3
+ export const fontFamily = {
4
+ display: ["Work Sans", ...defaultTheme.fontFamily.sans],
5
+ sans: [
6
+ // NOTE(spk): https://tailwindcss.com/docs/font-family#providing-default-font-settings
7
+ `"Open Sans", ${defaultTheme.fontFamily.sans.join(", ")}`,
8
+ {
9
+ // NOTE(spk): suggested by Google Fonts embed
10
+ fontVariationSettings: '"wdth" 100',
11
+ },
12
+ ],
13
+ }
14
+
15
+ // NOTE(spk): The Work Sans font family technically supports weights 100-900,
16
+ // here Open Sans is limited to 300-800. The current brand guidelines only make use of
17
+ // the 300-800 weight range for both type faces.
18
+ export const fontWeight = {
19
+ light: "300",
20
+ normal: "400",
21
+ medium: "500",
22
+ semibold: "600",
23
+ bold: "700",
24
+ extrabold: "800",
25
+ }