@bcgov/design-system-react-components 0.5.1 → 0.5.2
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.
- package/README.md +181 -188
- package/dist/cjs/index.cjs +9909 -8294
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/Button/Button.d.ts +1 -1
- package/dist/esm/index.js +9928 -8313
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Button/Button.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +87 -86
package/README.md
CHANGED
|
@@ -1,188 +1,181 @@
|
|
|
1
|
-
# @bcgov/design-system-react-components
|
|
2
|
-
|
|
3
|
-
[
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
//
|
|
29
|
-
|
|
30
|
-
//
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
Storybook
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
### GitHub Actions
|
|
183
|
-
|
|
184
|
-
GitHub Actions are located in `/.github/workflows` in the project root. Actions are included to:
|
|
185
|
-
|
|
186
|
-
- Build the Storybook and Vite applications on merge to `main`
|
|
187
|
-
- Test (Jest and Playwright) on pull request
|
|
188
|
-
- Publish new versions of the library on npm (`next` tag) on merge to `main`
|
|
1
|
+
# @bcgov/design-system-react-components
|
|
2
|
+
|
|
3
|
+
This package contains a library of React components built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html) to implement the [B.C. Design System](https://gov.bc.ca/designsystem).
|
|
4
|
+
|
|
5
|
+
Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
|
|
6
|
+
|
|
7
|
+
Storybook: https://designsystem.gov.bc.ca/react-components/
|
|
8
|
+
|
|
9
|
+
GitHub Repository: https://github.com/bcgov/design-system
|
|
10
|
+
|
|
11
|
+
To use, install this package and import the components into your application.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
`npm install @bcgov/design-system-react-components`
|
|
16
|
+
|
|
17
|
+
### BC Sans font dependency
|
|
18
|
+
|
|
19
|
+
This package installs [@bcgov/bc-sans](https://www.npmjs.com/package/@bcgov/bc-sans) as a peer dependency. You must import the font-face declarations from @bcgov/bc-sans and ensure the font is reachable for your end user. The React components require that the `BC Sans` font-face is available to display correctly. The components do not ship their own copies of the font to minimize your bundle size.
|
|
20
|
+
|
|
21
|
+
**Important!** If you are on a BC Government-provisioned laptop, you already have the BC Sans font installed on your machine. This package uses `BC Sans` (with a space) for its font styles. If you are using this component library but not supplying the font, it's possible that your machine will still display the font correctly for you, **but not your end user**. Make sure to check this by disabling the font on your machine or by testing with another machine.
|
|
22
|
+
|
|
23
|
+
## Use
|
|
24
|
+
|
|
25
|
+
```jsx
|
|
26
|
+
// App.jsx
|
|
27
|
+
|
|
28
|
+
// If you're already importing the BC Sans font-face somewhere else in your
|
|
29
|
+
// project, there is no need to import it again. Just make sure the `BC Sans`
|
|
30
|
+
// declaration and font files are available.
|
|
31
|
+
import "@bcgov/bc-sans/css/BC_Sans.css";
|
|
32
|
+
|
|
33
|
+
// Import the individual components you need
|
|
34
|
+
import {
|
|
35
|
+
Button,
|
|
36
|
+
Footer,
|
|
37
|
+
Header,
|
|
38
|
+
TagGroup,
|
|
39
|
+
TagList
|
|
40
|
+
} from "@bcgov/design-system-react-components";
|
|
41
|
+
|
|
42
|
+
export default function App() {
|
|
43
|
+
return (
|
|
44
|
+
<Header
|
|
45
|
+
title="My application"
|
|
46
|
+
skipLinks={[
|
|
47
|
+
<a href="#main-content">Skip to main content</a>
|
|
48
|
+
]}
|
|
49
|
+
>
|
|
50
|
+
<Button variant="primary" size="small">Log in</Button>
|
|
51
|
+
</Header>
|
|
52
|
+
<main id="main-content">
|
|
53
|
+
<TagGroup aria-label="Tag group with two items">
|
|
54
|
+
<TagList
|
|
55
|
+
items={[
|
|
56
|
+
{ id: "one", textValue: "One" },
|
|
57
|
+
{ id: "two", textValue: "Two" },
|
|
58
|
+
]}
|
|
59
|
+
/>
|
|
60
|
+
</TagGroup>
|
|
61
|
+
</main>
|
|
62
|
+
<Footer/>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Component list
|
|
68
|
+
|
|
69
|
+
| Component | React Aria Components docs link |
|
|
70
|
+
| ----------------------- | ---------------------------------------------------------------- |
|
|
71
|
+
| AlertBanner | N/A |
|
|
72
|
+
| AlertDialog | N/A |
|
|
73
|
+
| Accordion | https://react-spectrum.adobe.com/react-aria/Disclosure.html |
|
|
74
|
+
| AccordionGroup | https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html |
|
|
75
|
+
| Button | https://react-spectrum.adobe.com/react-aria/Button.html |
|
|
76
|
+
| ButtonGroup | N/A |
|
|
77
|
+
| Callout | N/A |
|
|
78
|
+
| Checkbox | https://react-spectrum.adobe.com/react-aria/Checkbox.html |
|
|
79
|
+
| CheckboxGroup | https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html |
|
|
80
|
+
| Dialog | https://react-spectrum.adobe.com/react-aria/Dialog.html |
|
|
81
|
+
| Footer | N/A |
|
|
82
|
+
| Form | https://react-spectrum.adobe.com/react-aria/Form.html |
|
|
83
|
+
| Header | N/A |
|
|
84
|
+
| Heading | https://react-spectrum.adobe.com/react-spectrum/Heading.html |
|
|
85
|
+
| InlineAlert | N/A |
|
|
86
|
+
| Modal | https://react-spectrum.adobe.com/react-aria/Modal.html |
|
|
87
|
+
| Link | https://react-spectrum.adobe.com/react-spectrum/Link.html |
|
|
88
|
+
| RadioGroup, Radio | https://react-spectrum.adobe.com/react-aria/RadioGroup.html |
|
|
89
|
+
| Select | https://react-spectrum.adobe.com/react-aria/Select.html |
|
|
90
|
+
| Switch | https://react-spectrum.adobe.com/react-aria/Switch.html |
|
|
91
|
+
| TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
|
|
92
|
+
| Text | https://react-spectrum.adobe.com/react-spectrum/Text.html |
|
|
93
|
+
| TextArea, TextField | https://react-spectrum.adobe.com/react-aria/TextField.html |
|
|
94
|
+
| Tooltip, TooltipTrigger | https://react-spectrum.adobe.com/react-aria/Tooltip.html |
|
|
95
|
+
|
|
96
|
+
## Supported React versions
|
|
97
|
+
|
|
98
|
+
This package has a peer dependency on `react` and `react-dom` at these versions: `"^16.14.0 || ^17.0.0-rc.1 || ^18.0.0"`
|
|
99
|
+
|
|
100
|
+
By targeting v16.14.0 as a minimum, we get to use [React's modern JSX transformation](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in `tsconfig.json`:
|
|
101
|
+
|
|
102
|
+
```json
|
|
103
|
+
"jsx": "react-jsx",
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
This means there's no need for unused `import React from "react"` statements in your JSX files.
|
|
107
|
+
|
|
108
|
+
## Versions
|
|
109
|
+
|
|
110
|
+
This project follows semantic versioning. See [CHANGELOG.md](./CHANGELOG.md) for version details.
|
|
111
|
+
|
|
112
|
+
## Development
|
|
113
|
+
|
|
114
|
+
### Components
|
|
115
|
+
|
|
116
|
+
Components live in `./src/components` and are targeted by the build process with an export in `./src/index.ts`.
|
|
117
|
+
|
|
118
|
+
#### Testing components with Jest
|
|
119
|
+
|
|
120
|
+
Unit tests can be run with Jest using `npm run test`.
|
|
121
|
+
|
|
122
|
+
### Storybook
|
|
123
|
+
|
|
124
|
+
Storybook stories live in `./src/stories`.
|
|
125
|
+
|
|
126
|
+
Run `npm run storybook-dev` to access the Storybook instance for the component library.
|
|
127
|
+
|
|
128
|
+
New versions of Storybook are automatically built in a GitHub Actions workflow and deployed in the `-dev` namespace in the OpenShift Silver cluster. See `.github/build_react_component_library_apps.yaml`.
|
|
129
|
+
|
|
130
|
+
To deploy a new version of Storybook into `-test` or `-prod`, log in to the OpenShift CLI and run:
|
|
131
|
+
|
|
132
|
+
```sh
|
|
133
|
+
# Create a new layer in the `test` ImageStream from the latest `develop` image:
|
|
134
|
+
oc tag ed91fb-tools/design-system-react-components-storybook:develop ed91fb-tools/design-system-react-components-storybook:test
|
|
135
|
+
|
|
136
|
+
# `develop` to `production`
|
|
137
|
+
oc tag ed91fb-tools/design-system-react-components-storybook:develop ed91fb-tools/design-system-react-components-storybook:production
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
#### Testing with Storybook Test Runner
|
|
141
|
+
|
|
142
|
+
With Storybook running locally, use the `npm run test-storybook` script to run `@storybook/test-runner` using the configuration defined in `./.storybook/test-runner.ts`. [Learn more about Storybook Test Runner](https://storybook.js.org/docs/writing-tests/test-runner).
|
|
143
|
+
|
|
144
|
+
### Vite kitchen sink application
|
|
145
|
+
|
|
146
|
+
Vite uses the components code directly from `./src/components` in groups of content in `./src/pages`.
|
|
147
|
+
|
|
148
|
+
Run `npm run vite-dev` to access the Vite React demo app.
|
|
149
|
+
|
|
150
|
+
### Publish new versions
|
|
151
|
+
|
|
152
|
+
#### npm package
|
|
153
|
+
|
|
154
|
+
Publishing new versions of the package to npm is done via GitHub Actions.
|
|
155
|
+
|
|
156
|
+
GitHub Actions are located in `/.github/workflows` in the project root. Actions are included to:
|
|
157
|
+
|
|
158
|
+
- Build the Storybook and Vite applications on merge to `main`
|
|
159
|
+
- Test (Jest and Playwright) on pull request
|
|
160
|
+
- Publish new versions of the library on npm (`next` tag) on merge to `main`
|
|
161
|
+
- Publish new versions of the library on npm (`latest` tag) when a GitHub release is published
|
|
162
|
+
|
|
163
|
+
#### GitHub release
|
|
164
|
+
|
|
165
|
+
GitHub releases are based on git tags.
|
|
166
|
+
|
|
167
|
+
```sh
|
|
168
|
+
# From your `main` branch, cut a new tag locally based on a commit SHA
|
|
169
|
+
git tag @bcgov/design-system-react-components@<version here> <commit SHA here>
|
|
170
|
+
|
|
171
|
+
# Push the tag to GitHub
|
|
172
|
+
git push --tags
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
From the [Releases page](https://github.com/bcgov/design-system/releases), click "Draft a new release".
|
|
176
|
+
|
|
177
|
+
For "Choose a tag", select the tag you created. For the previous tag, use the previous version of the same package.
|
|
178
|
+
|
|
179
|
+
Copy the changelog notes for the new version and link to the npm page for the new version. Ensure that `package.json` has been updated with the correct version number.
|
|
180
|
+
|
|
181
|
+
Publish the release to publish the latest version of the library on npm. The release tag must start with `@bcgov/design-system-react-components` to trigger the publish workflow.
|