@bcgov/design-system-react-components 0.8.1-pr910 → 0.8.1-pr912

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 (3) hide show
  1. package/AGENTS.md +52 -38
  2. package/README.md +2 -0
  3. package/package.json +7 -7
package/AGENTS.md CHANGED
@@ -1,4 +1,4 @@
1
- # B.C. Design System React Components (v0.0.1)
1
+ # B.C. Design System React Components
2
2
 
3
3
  ## Library context
4
4
 
@@ -8,6 +8,7 @@
8
8
  ## Using the component library
9
9
 
10
10
  - Install the React components package with `npm i @bcgov/design-system-react-components` and import individual components as needed
11
+ - Check that `@bcgov/bc-sans` is installed and `@bcgov/bc-sans/css/BC_Sans.css` is imported. Warn the user and refer them to the `@bcgov/bc-sans` README if not
11
12
  - Prefer the component library API over creating new components wherever possible
12
13
  - Use component props and established patterns rather than bypassing them with ad hoc markup
13
14
  - When a component is missing or insufficient, extend existing design system patterns rather than creating one-off UI
@@ -17,46 +18,59 @@
17
18
 
18
19
  - Technical docs for components are in [Storybook](https://github.com/bcgov/design-system/tree/main/packages/react-components/src/stories)
19
20
  - For components based on React Aria primitives, also refer to the React Aria docs for the full API reference
21
+ - All component props are fully typed. Treat the shipped TypeScript types — via your editor's autocomplete, or read directly from `dist/index.d.ts` inside `node_modules/@bcgov/design-system-react-components` — as the authoritative prop reference
22
+ - If a prop isn't present in the types, it doesn't exist. Don't infer props from naming conventions or from other component libraries
20
23
 
21
24
  ### Available components
22
25
 
23
- | Component | Summary | Component MDX file | React Aria primitive |
24
- | --------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- |
25
- | AlertBanner | Displays an important status or announcement message. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/AlertBanner.mdx | N/A |
26
- | AlertDialog | Presents a high-priority confirmation or warning dialog. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/AlertDialog.mdx | https://react-aria.adobe.com/Dialog.md |
27
- | Accordion | Expands and collapses sections of content. | N/A | https://react-aria.adobe.com/Disclosure.md |
28
- | AccordionGroup | Groups related expandable sections together. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/AccordionGroup.mdx | https://react-aria.adobe.com/DisclosureGroup.md |
29
- | Button | Triggers an action or navigates to a new state. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Button.mdx | https://react-aria.adobe.com/Button.md |
30
- | ButtonGroup | Groups related action buttons. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/ButtonGroup.mdx | N/A |
31
- | Calendar | Lets users browse and select dates. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Calendar.mdx | https://react-aria.adobe.com/Calendar.md |
32
- | Callout | Highlights informational content or tips. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Callout.mdx | N/A |
33
- | Checkbox | Enables a true/false selection. | N/A | https://react-aria.adobe.com/Checkbox.md |
34
- | CheckboxGroup | Lets users choose multiple related options. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/CheckboxGroup.mdx | https://react-aria.adobe.com/CheckboxGroup.md |
35
- | DatePicker | Lets users select a date in a calendar-based input. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/DatePicker.mdx | https://react-aria.adobe.com/DatePicker.md |
36
- | Dialog | Displays a modal dialog for focused workflow or messaging. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Dialogs.mdx | https://react-aria.adobe.com/Dialog.md |
37
- | Footer | Shows common site or page footer information. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Footer.mdx | N/A |
38
- | Form | Organizes fields and a submit flow. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Form.mdx | https://react-aria.adobe.com/Form.md |
39
- | Header | Displays a page or section header. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Header.mdx | N/A |
40
- | InlineAlert | Communicates a short, inline status message. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/InlineAlert.mdx | N/A |
41
- | Menu, MenuItem, MenuTrigger, SubmenuTrigger, MenuSection, MenuSectionHeader | Displays a menu of actions or navigation choices. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Menu.mdx | https://react-aria.adobe.com/Menu.md |
42
- | Modal | Displays a layered overlay for focused interaction. | N/A | https://react-aria.adobe.com/Modal.md |
43
- | NumberField | Lets users input numeric values with validation. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/NumberField.mdx | https://react-aria.adobe.com/NumberField.md |
44
- | ProgressBar | Shows completion progress for a long-running task. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/ProgressBar.mdx | https://react-aria.adobe.com/ProgressBar.md |
45
- | ProgressCircle | Shows a circular progress indicator. | N/A | https://react-aria.adobe.com/ProgressBar.md |
46
- | RadioGroup, Radio | Lets users choose one option from a set. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/RadioGroup.mdx | https://react-aria.adobe.com/RadioGroup.md |
47
- | Select | Lets users choose one option from a dropdown list. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Select.mdx | https://react-aria.adobe.com/Select.md |
48
- | Separator | Visually separates content sections. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Separator.mdx | https://react-aria.adobe.com/Separator.md |
49
- | Subheader | Provides a secondary heading or section label. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Subheader.mdx | N/A |
50
- | Switch | Toggles a setting between on and off. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Switch.mdx | https://react-aria.adobe.com/Switch.md |
51
- | TagGroup, TagList, Tag | Displays small labels or filtered selections. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/TagGroup.mdx | https://react-aria.adobe.com/TagGroup.md |
52
- | TextArea, TextField | Accepts short or multi-line text input. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/TextField.mdx | https://react-aria.adobe.com/TextField.md |
53
- | TimeField | Lets users input a time value. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/TimeField.mdx | https://react-aria.adobe.com/TimeField.md |
54
- | ToggleButton | Toggles an action between active and inactive states. | N/A | https://react-aria.adobe.com/ToggleButton.md |
55
- | ToggleButtonGroup | Groups related toggle actions together. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/ToggleButtonGroup.mdx | https://react-aria.adobe.com/ToggleButtonGroup.md |
56
- | Tooltip, TooltipTrigger | Shows contextual help or extra information on hover or focus. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Tooltip.mdx | https://react-aria.adobe.com/Tooltip.md |
57
- | Heading | Renders a styled semantic heading. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Heading.mdx | https://react-spectrum.adobe.com/v3/Heading.html |
58
- | Link | Renders an accessible, configurable hyperlink. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Link.mdx | https://react-spectrum.adobe.com/v3/Link.html |
59
- | Text | Renders styled text content. | https://github.com/bcgov/design-system/blob/main/packages/react-components/src/stories/Text.mdx | https://react-spectrum.adobe.com/v3/Text.html |
26
+ | Component | Summary | Component MDX file | React Aria primitive |
27
+ | --------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
28
+ | AlertBanner | Displays an important status or announcement message. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/AlertBanner.mdx | N/A |
29
+ | AlertDialog | Presents a high-priority confirmation or warning dialog. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/AlertDialog.mdx | https://react-aria.adobe.com/Dialog.md |
30
+ | Accordion | Expands and collapses sections of content. | N/A | https://react-aria.adobe.com/Disclosure.md |
31
+ | AccordionGroup | Groups related expandable sections together. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/AccordionGroup.mdx | https://react-aria.adobe.com/DisclosureGroup.md |
32
+ | Button | Triggers an action or navigates to a new state. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Button.mdx | https://react-aria.adobe.com/Button.md |
33
+ | ButtonGroup | Groups related action buttons. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/ButtonGroup.mdx | N/A |
34
+ | Calendar | Lets users browse and select dates. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Calendar.mdx | https://react-aria.adobe.com/Calendar.md |
35
+ | Callout | Highlights informational content or tips. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Callout.mdx | N/A |
36
+ | Checkbox | Enables a true/false selection. | N/A | https://react-aria.adobe.com/Checkbox.md |
37
+ | CheckboxGroup | Lets users choose multiple related options. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/CheckboxGroup.mdx | https://react-aria.adobe.com/CheckboxGroup.md |
38
+ | DatePicker | Lets users select a date in a calendar-based input. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/DatePicker.mdx | https://react-aria.adobe.com/DatePicker.md |
39
+ | Dialog | Displays a modal dialog for focused workflow or messaging. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Dialogs.mdx | https://react-aria.adobe.com/Dialog.md |
40
+ | Footer | Shows common site or page footer information. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Footer.mdx | N/A |
41
+ | Form | Organizes fields and a submit flow. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Form.mdx | https://react-aria.adobe.com/Form.md |
42
+ | Header | Displays a page or section header. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Header.mdx | N/A |
43
+ | InlineAlert | Communicates a short, inline status message. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/InlineAlert.mdx | N/A |
44
+ | Menu, MenuItem, MenuTrigger, SubmenuTrigger, MenuSection, MenuSectionHeader | Displays a menu of actions or navigation choices. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Menu.mdx | https://react-aria.adobe.com/Menu.md |
45
+ | Modal | Displays a layered overlay for focused interaction. | N/A | https://react-aria.adobe.com/Modal.md |
46
+ | NumberField | Lets users input numeric values with validation. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/NumberField.mdx | https://react-aria.adobe.com/NumberField.md |
47
+ | ProgressBar | Shows completion progress for a long-running task. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/ProgressBar.mdx | https://react-aria.adobe.com/ProgressBar.md |
48
+ | ProgressCircle | Shows a circular progress indicator. | N/A | https://react-aria.adobe.com/ProgressBar.md |
49
+ | RadioGroup, Radio | Lets users choose one option from a set. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/RadioGroup.mdx | https://react-aria.adobe.com/RadioGroup.md |
50
+ | Select | Lets users choose one option from a dropdown list. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Select.mdx | https://react-aria.adobe.com/Select.md |
51
+ | Separator | Visually separates content sections. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Separator.mdx | https://react-aria.adobe.com/Separator.md |
52
+ | Subheader | Provides a secondary heading or section label. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Subheader.mdx | N/A |
53
+ | Switch | Toggles a setting between on and off. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Switch.mdx | https://react-aria.adobe.com/Switch.md |
54
+ | TagGroup, TagList, Tag | Displays small labels or filtered selections. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/TagGroup.mdx | https://react-aria.adobe.com/TagGroup.md |
55
+ | TextArea, TextField | Accepts short or multi-line text input. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/TextField.mdx | https://react-aria.adobe.com/TextField.md |
56
+ | TimeField | Lets users input a time value. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/TimeField.mdx | https://react-aria.adobe.com/TimeField.md |
57
+ | ToggleButton | Toggles an action between active and inactive states. | N/A | https://react-aria.adobe.com/ToggleButton.md |
58
+ | ToggleButtonGroup | Groups related toggle actions together. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/ToggleButtonGroup.mdx | https://react-aria.adobe.com/ToggleButtonGroup.md |
59
+ | Tooltip, TooltipTrigger | Shows contextual help or extra information on hover or focus. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Tooltip.mdx | https://react-aria.adobe.com/Tooltip.md |
60
+ | Heading | Renders a styled semantic heading. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Heading.mdx | https://react-spectrum.adobe.com/v3/Heading.html |
61
+ | Link | Renders an accessible, configurable hyperlink. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Link.mdx | https://react-spectrum.adobe.com/v3/Link.html |
62
+ | Text | Renders styled text content. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Text.mdx | https://react-spectrum.adobe.com/v3/Text.html |
63
+
64
+ ### Forms
65
+
66
+ - Use the Form component as a wrapper for input components
67
+ - Refer to the [React Aria forms docs](https://react-aria.adobe.com/forms.md) when implementing validation and submission in your application
68
+ - Use components' built-in state, validation and error handling APIs instead of writing your own
69
+
70
+ ### Icons
71
+
72
+ - The library includes React components for a small number of common icons
73
+ - If you need additional icons, prefer using Font Awesome Free v7 (`@fortawesome/react-fontawesome@3.5.0` or later) for coherence with the design system
60
74
 
61
75
  ## Styling components
62
76
 
package/README.md CHANGED
@@ -25,6 +25,8 @@ Add the B.C. Design System boilerplate from [AGENTS.example.md](https://github.c
25
25
 
26
26
  Run `/context` to confirm that your agent has loaded the instructions into its context window.
27
27
 
28
+ When working with Figma design files that use the B.C. Design System, [connecting your harness to Figma's MCP server](https://developers.figma.com/docs/figma-mcp-server/) can also significantly improve output quality.
29
+
28
30
  ### BC Sans font dependency
29
31
 
30
32
  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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcgov/design-system-react-components",
3
- "version": "0.8.1-pr910",
3
+ "version": "0.8.1-pr912",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/bcgov/design-system.git",
@@ -75,8 +75,8 @@
75
75
  "@types/node": "25.9.8",
76
76
  "@types/react": "19.3.0",
77
77
  "@types/react-dom": "19.3.0",
78
- "@typescript-eslint/eslint-plugin": "8.70.0",
79
- "@typescript-eslint/parser": "8.70.0",
78
+ "@typescript-eslint/eslint-plugin": "8.70.1",
79
+ "@typescript-eslint/parser": "8.70.1",
80
80
  "@vitejs/plugin-react": "6.1.1",
81
81
  "@vitest/browser-playwright": "4.1.11",
82
82
  "@vitest/coverage-v8": "4.1.11",
@@ -88,8 +88,8 @@
88
88
  "globals": "17.12.0",
89
89
  "jsdom": "29.1.1",
90
90
  "playwright": "1.63.0",
91
- "prettier": "3.9.8",
92
- "rollup": "4.63.4",
91
+ "prettier": "3.9.9",
92
+ "rollup": "4.63.5",
93
93
  "rollup-plugin-dts": "6.5.1",
94
94
  "rollup-plugin-peer-deps-external": "2.2.4",
95
95
  "rollup-plugin-postcss": "4.0.2",
@@ -98,8 +98,8 @@
98
98
  "stylelint-config-standard": "40.0.0",
99
99
  "tslib": "2.8.1",
100
100
  "typescript": "6.0.3",
101
- "typescript-eslint": "8.70.0",
102
- "vite": "8.3.0",
101
+ "typescript-eslint": "8.70.1",
102
+ "vite": "8.3.1",
103
103
  "vitest": "4.1.11"
104
104
  },
105
105
  "optionalDependencies": {