@bcgov/design-system-react-components 0.7.0 → 0.8.0-pr758

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 (7) hide show
  1. package/README.md +52 -42
  2. package/dist/cjs/index.cjs +27202 -24346
  3. package/dist/cjs/index.cjs.map +1 -1
  4. package/dist/esm/index.js +27433 -24585
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/index.d.ts +128 -84
  7. package/package.json +41 -31
package/README.md CHANGED
@@ -1,14 +1,17 @@
1
1
  # @bcgov/design-system-react-components
2
2
 
3
- This package contains a library of React components built using [React Aria](https://react-aria.adobe.com) to implement the [B.C. Design System](https://gov.bc.ca/designsystem).
3
+ This package contains a library of React components, built using React Aria, as part of the B.C. Design System.
4
4
 
5
- Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
5
+ To use these components, install this package and import the components you need into your application.
6
6
 
7
- Storybook: https://designsystem.gov.bc.ca/react-components/
7
+ - GitHub: https://github.com/bcgov/design-system/
8
+ - Storybook: https://designsystem.gov.bc.ca/react-components/
9
+ - Documentation: https://gov.bc.ca/designsystem/
8
10
 
9
- GitHub Repository: https://github.com/bcgov/design-system
11
+ If you have questions, you can:
10
12
 
11
- To use, install this package and import the components into your application.
13
+ - <a href="mailto:DesignSystem@gov.bc.ca">Email designsystem@gov.bc.ca</a>
14
+ - <a href="https://github.com/bcgov/design-system/issues">Open an issue on GitHub</a>
12
15
 
13
16
  ## Install
14
17
 
@@ -66,40 +69,45 @@ export default function App() {
66
69
 
67
70
  ## Component list
68
71
 
69
- | Component | React Aria docs link |
70
- | ----------------------- | ---------------------------------------------- |
71
- | AlertBanner | N/A |
72
- | AlertDialog | N/A |
73
- | Accordion | https://react-aria.adobe.com/Disclosure |
74
- | AccordionGroup | https://react-aria.adobe.com/DisclosureGroup |
75
- | Button | https://react-aria.adobe.com/Button |
76
- | ButtonGroup | N/A |
77
- | Calendar | https://react-aria.adobe.com/Calendar |
78
- | Callout | N/A |
79
- | Checkbox | https://react-aria.adobe.com/Checkbox |
80
- | CheckboxGroup | https://react-aria.adobe.com/CheckboxGroup |
81
- | DatePicker | https://react-aria.adobe.com/DatePicker |
82
- | Dialog | https://react-aria.adobe.com/Dialog |
83
- | Footer | N/A |
84
- | Form | https://react-aria.adobe.com/Form |
85
- | Header | N/A |
86
- | Heading | https://react-spectrum.adobe.com/v3/Heading |
87
- | InlineAlert | N/A |
88
- | Modal | https://react-aria.adobe.com/Modal |
89
- | Link | https://react-spectrum.adobe.com/v3/Link |
90
- | ProgressBar | https://react-aria.adobe.com/ProgressBar |
91
- | ProgressCircle | https://react-aria.adobe.com/ProgressBar |
92
- | RadioGroup, Radio | https://react-aria.adobe.com/RadioGroup |
93
- | Select | https://react-aria.adobe.com/Select |
94
- | Separator | https://react-aria.adobe.com/Separator |
95
- | Switch | https://react-aria.adobe.com/Switch |
96
- | TagGroup, TagList, Tag | https://react-aria.adobe.com/TagGroup |
97
- | Text | https://react-spectrum.adobe.com/v3/Text |
98
- | TextArea, TextField | https://react-aria.adobe.com/TextField |
99
- | TimeField | https://react-aria.adobe.com/TimeField |
100
- | ToggleButton | https://react-aria.adobe.com/ToggleButton |
101
- | ToggleButtonGroup | https://react-aria.adobe.com/ToggleButtonGroup |
102
- | Tooltip, TooltipTrigger | https://react-aria.adobe.com/Tooltip |
72
+ Most components are based on <a href="https://react-aria.adobe.com">React Aria</a> primitives.
73
+
74
+ | Component | React Aria docs link |
75
+ | --------------------------------------------------------------------------- | ---------------------------------------------- |
76
+ | AlertBanner | N/A |
77
+ | AlertDialog | N/A |
78
+ | Accordion | https://react-aria.adobe.com/Disclosure |
79
+ | AccordionGroup | https://react-aria.adobe.com/DisclosureGroup |
80
+ | Button | https://react-aria.adobe.com/Button |
81
+ | ButtonGroup | N/A |
82
+ | Calendar | https://react-aria.adobe.com/Calendar |
83
+ | Callout | N/A |
84
+ | Checkbox | https://react-aria.adobe.com/Checkbox |
85
+ | CheckboxGroup | https://react-aria.adobe.com/CheckboxGroup |
86
+ | DatePicker | https://react-aria.adobe.com/DatePicker |
87
+ | Dialog | https://react-aria.adobe.com/Dialog |
88
+ | Footer | N/A |
89
+ | Form | https://react-aria.adobe.com/Form |
90
+ | Header | N/A |
91
+ | Heading | https://react-spectrum.adobe.com/v3/Heading |
92
+ | InlineAlert | N/A |
93
+ | Menu, MenuItem, MenuTrigger, SubmenuTrigger, MenuSection, MenuSectionHeader | https://react-aria.adobe.com/Menu |
94
+ | Modal | https://react-aria.adobe.com/Modal |
95
+ | Link | https://react-spectrum.adobe.com/v3/Link |
96
+ | NumberField | https://react-aria.adobe.com/NumberField |
97
+ | ProgressBar | https://react-aria.adobe.com/ProgressBar |
98
+ | ProgressCircle | https://react-aria.adobe.com/ProgressBar |
99
+ | RadioGroup, Radio | https://react-aria.adobe.com/RadioGroup |
100
+ | Select | https://react-aria.adobe.com/Select |
101
+ | Separator | https://react-aria.adobe.com/Separator |
102
+ | Subheader | N/A |
103
+ | Switch | https://react-aria.adobe.com/Switch |
104
+ | TagGroup, TagList, Tag | https://react-aria.adobe.com/TagGroup |
105
+ | Text | https://react-spectrum.adobe.com/v3/Text |
106
+ | TextArea, TextField | https://react-aria.adobe.com/TextField |
107
+ | TimeField | https://react-aria.adobe.com/TimeField |
108
+ | ToggleButton | https://react-aria.adobe.com/ToggleButton |
109
+ | ToggleButtonGroup | https://react-aria.adobe.com/ToggleButtonGroup |
110
+ | Tooltip, TooltipTrigger | https://react-aria.adobe.com/Tooltip |
103
111
 
104
112
  ## Supported React versions
105
113
 
@@ -123,6 +131,8 @@ This project follows semantic versioning. See [CHANGELOG.md](./CHANGELOG.md) for
123
131
 
124
132
  Components live in `./src/components` and are targeted by the build process with an export in `./src/index.ts`.
125
133
 
134
+ The `*.figma.tsx` files alongside each component are used to map component props to their counterpart properties in Figma via [Code Connect](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect).
135
+
126
136
  #### Testing components with Vitest
127
137
 
128
138
  Unit tests can be run with Vitest using `npm run test`. Use `npm run test:watch` to run Vitest in watch mode.
@@ -193,14 +203,14 @@ Prettier is used for formatting. See configuration file `prettier.config.js` and
193
203
 
194
204
  #### npm package
195
205
 
196
- Publishing new versions of the package to npm is done via GitHub Actions.
206
+ Publishing new versions of the package is done via GitHub Actions.
197
207
 
198
208
  GitHub Actions are located in `/.github/workflows` in the project root. Actions are included to:
199
209
 
200
210
  - Build the Storybook and Vite applications on merge to `main`
201
211
  - Test (Vitest and Playwright) on pull request
202
- - Publish new versions of the library on npm (`next` tag) on merge to `main`
203
- - Publish new versions of the library on npm (`latest` tag) when a GitHub release is published
212
+ - Publish new versions of the library to npm (`next` tag) and GitHub Packages on merge to `main`
213
+ - Publish new production versions of the library to npm (`latest` tag) and GitHub Packages when a GitHub release is published
204
214
 
205
215
  #### GitHub release
206
216