@raspberrypifoundation/design-system-react 1.4.0 → 1.6.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 (5) hide show
  1. package/CHANGELOG.md +195 -0
  2. package/README.md +80 -18
  3. package/dist/cjs/bundle.js +27 -17
  4. package/dist/esm/bundle.js +27 -17
  5. package/package.json +8 -4
package/CHANGELOG.md ADDED
@@ -0,0 +1,195 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
+
7
+ ## Unreleased
8
+
9
+ ## v1.6.0 - 2024-10-24
10
+
11
+ ### Changed
12
+
13
+ - Update to use yarn instead of npm and set peerdependency for react-router-dom (#98)
14
+ - Update InputField, SearchInput, SelectInput, TextInput and TextareaInput to link label to input field correctly using id (#107)
15
+ - Update `README.md` to include global header (#97)
16
+ - Update the search input to accept an onChange function and a default value. Add button type to the search button. (#108)
17
+
18
+ ## v1.5.0
19
+
20
+ ## Fixed
21
+
22
+ - Fix (#103) using wrong version number (#106)
23
+ - Fix (#101) being added to wrong release in changelog (#103)
24
+
25
+ ### Changed
26
+
27
+ - Alert component can now accept children (#101)
28
+
29
+ ## v1.4.0
30
+
31
+ ### Added
32
+
33
+ - Table component (#92)
34
+
35
+ ## v1.3.1
36
+
37
+ ### Fixed
38
+
39
+ - Fixed `exports` change in 1.3.0 (#89) to use relative path in `package.json`
40
+
41
+ ## v1.3.0
42
+
43
+ ### Changed
44
+
45
+ - Use `exports` instead of `main`/`module` in `package.json` to define what is exported (#89)
46
+
47
+ ## v1.2.1
48
+
49
+ ### Fixed
50
+
51
+ - Added missing Tag export
52
+
53
+ ## v1.2.0
54
+
55
+ ### Added
56
+
57
+ - SearchInput component (#82)
58
+ - InputLabel component (#71)
59
+ - Fieldset component (#70)
60
+ - Add changelog update check to github workflow (#73)
61
+ - Tag component (#81)
62
+ - Add details to `README.md` on using `npm link` with `design-system-core` (#80)
63
+
64
+ ### Changed
65
+
66
+ - Update design-system-core to v1.3.2
67
+ - Update nodejs to latest LTS release (v20.16.0) to match design-system-core (#77)
68
+
69
+ ## Fixed
70
+
71
+ - Update `.nvmrc` to match `.tool_versions` in order to fix builds (#84)
72
+
73
+ ## v1.1.16
74
+
75
+ ### Added
76
+
77
+ - TextareaInput component
78
+ - RadioInput component
79
+ - Updated `design-system-core` to `v1.1.1`
80
+
81
+ ## v1.1.15
82
+
83
+ ### Fixed
84
+
85
+ - Updated Core to v1.1.0
86
+ - Update `ProgressBar` as per https://github.com/RaspberryPiFoundation/design-system-core/pull/124
87
+ - This does not result in breaking changes to this library
88
+
89
+ ## v1.1.14
90
+
91
+ ### Fixed
92
+
93
+ - Remove defaultProps from accordion
94
+
95
+ ## v1.1.13
96
+
97
+ ### Fixed
98
+
99
+ - Ensure aria-label on button is passed through unchanged
100
+
101
+ ## v1.1.12
102
+
103
+ ### Fixed
104
+
105
+ - Only change the paragraph spacing of the alerts
106
+
107
+ ## v1.1.11
108
+
109
+ ### Fixed
110
+
111
+ - Fix linting by assigning options to a variable
112
+ - Remove reliance on defaultProps (to be deprecated)
113
+ - Tidy up alert padding
114
+
115
+ ## v1.1.9
116
+
117
+ - Fixing `rollup` config
118
+
119
+ ## v1.1.8
120
+
121
+ ### Changed
122
+
123
+ - `Button` component now uses the `react-router-dom` `Link` component for links rather than a plain anchor tag
124
+
125
+ ## v1.1.7
126
+
127
+ ### Fixed
128
+
129
+ - Fixed legacy `Button` component use case with React element as icon
130
+
131
+ ## v1.1.6
132
+
133
+ ### Fixed
134
+
135
+ - Exports Alert component
136
+
137
+ ## v1.1.5
138
+
139
+ ### Added
140
+
141
+ - Alert component added
142
+
143
+ ## v1.1.4
144
+
145
+ ### Fixed
146
+
147
+ - Fixes bug with SelectInput to allow setting of placeholder value
148
+
149
+ ## v1.1.0
150
+
151
+ ### Added
152
+
153
+ - v1.1 TextInput component added
154
+ - v1.1 SelectInput component added
155
+ - v1.1 CheckboxInput component added
156
+ - v1.1 ProgressBar component added
157
+
158
+ ## v1.0.0
159
+
160
+ ### Added
161
+
162
+ - Button additions to bring in line with Core ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
163
+ - Added: Icon library/font (same as core)
164
+ - Added prop: iconPosition
165
+ - Added prop: variant, danger
166
+ - Added prop: fullWidth
167
+ - Storybook: Enabled icon changing
168
+ - Storybook: Added link to icon names
169
+ - Storybook: Added button docs
170
+ - General storybook additions ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
171
+ - Storybook: Added pseudo-state addon
172
+ - Storybook: Added "Install" docs
173
+ - Storybook: Added docs styles
174
+
175
+ ### Changed
176
+
177
+ - Button changes to bring in line with Core ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
178
+ - Renamed prop: enabled -> disabled
179
+ - Renamed prop: textAlways -> iconOnly
180
+ - Renamed prop: small -> size
181
+ - Removed prop: active
182
+ - Removed prop: textOnHover (not actually used/functional)
183
+ - Changed prop: icon, now uses same icon font as core.
184
+
185
+ ### Removed
186
+
187
+ - Button changes to bring in line with Core ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
188
+ - Removed prop: active
189
+ - Removed prop: textOnHover (not actually used/functional)
190
+
191
+ ### Fixed
192
+
193
+ - General storybook improvements ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
194
+ - Storybook: Updated "Introduction" docs
195
+ - Storybook: Reordered addons
package/README.md CHANGED
@@ -1,60 +1,122 @@
1
- # Design System React
1
+ # RPF Design System - React
2
+
3
+ The React implementation of the **Raspberry Pi Foundation Design System**
4
+
5
+ [![Foo](https://img.shields.io/badge/React-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=00AECE)](https://design-system-react.rpf-internal.org/?path=/docs/documentation-introduction--documentation)
6
+
7
+ ### Design System links:
8
+
9
+ [![Foo](https://img.shields.io/badge/Design_System-Documentation-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CD2355)](https://rpf-design-system.pages.dev/)
10
+
11
+ [![Foo](https://img.shields.io/badge/Core-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495)](https://github.com/raspberrypifoundation/design-system-core/)
12
+ [![Foo](https://img.shields.io/badge/Core-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495)](https://design-system-core.rpf-internal.org/?path=/docs/about--docs)
13
+
14
+ [![Foo](https://img.shields.io/badge/Rails-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)](https://github.com/raspberrypifoundation/design-system-rails/)
15
+ [![Foo](https://img.shields.io/badge/Rails-Components_(Lookbook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)](https://design-system-rails.rpf-internal.org/lookbook)
16
+
17
+ ---
2
18
 
3
19
  ## Usage
4
20
 
5
- Using `npm`:
21
+ Using `yarn`:
6
22
 
7
23
  ```bash
8
- npm install @raspberrypifoundation/design-system-react
9
- npm run storybook
24
+ yarn add @raspberrypifoundation/design-system-react
10
25
  ```
11
26
 
12
- Using `yarn`:
27
+ ## Development
28
+
29
+ Dependencies:
30
+ * asdf (https://asdf-vm.com/)
31
+
32
+ ```
33
+ asdf install
34
+ ```
35
+
36
+ Enable corepack, which adds the yarn binary to your path
37
+ ```
38
+ corepack enable
39
+ ```
40
+
41
+ Install packages:
13
42
 
14
- ```bash
15
- yarn install @raspberrypifoundation/design-system-react
16
- yarn storybook
43
+ ```
44
+ yarn
45
+ ```
46
+
47
+ Run Storybook:
48
+
49
+ ```
50
+ yarn run storybook
17
51
  ```
18
52
 
53
+ ### Testing
54
+
55
+ Run the tests with `yarn run test`.
56
+
19
57
  ### Working with a local version of [design-system-core](https://github.com/RaspberryPiFoundation/design-system-core)
20
58
 
21
- Sometimes you may want to work on `design-system-core` and `design-system-react` at the same time. You can do this by working with your local version of core using `npm link`.
59
+ Sometimes you may want to work on `design-system-core` and `design-system-react` at the same time. You can do this by working with your local version of core using `yarn link`.
60
+
61
+ 1. In your `design-system-react` repo and tell the application to use your local version of `design-system-core`. In this command `../design-system-core` should be replaced with the path to your copy of `design-system-core`.
62
+
63
+ ```
64
+ yarn link ../design-system-core
65
+ ```
22
66
 
23
- 1. Navigate to your local `design-system-core` repo create a global symbolic link.
67
+ The output should look include something like
24
68
 
25
69
  ```
26
- npm link
70
+ ➤ YN0000: ┌ Resolution step
71
+ ➤ YN0085: │ + @raspberrypifoundation/design-system-core@portal:/Users/testy.mctestface/path/to/design-system-core::locator=%40raspberrypifoundation%2Fdesign-system-react%40workspace%3A.
72
+ ➤ YN0085: │ - @raspberrypifoundation/design-system-core@npm:1.4.0
73
+ ➤ YN0000: └ Completed
27
74
  ```
28
75
 
29
- 2. In `design-system-react` remove the node_modules folder and install the application.
76
+ 2. Set `NODE_OPTIONS=--preserve-symlinks`, to make sure the local version of `design-system-core` is being used.
30
77
 
31
78
  ```
32
- rm -rf node_modules && npm i
79
+ export NODE_OPTIONS="$NODE_OPTIONS --preserve-symlinks"
33
80
  ```
34
81
 
35
- 3. Navigate to your local `design-system-react` repo and tell the application to use the global symbolic link. You should notice "changed 1 package" in the response.
82
+ 3. Re-start storybook
36
83
 
37
84
  ```
38
- npm link @raspberrypifoundation/design-system-core
85
+ yarn run storybook
39
86
  ```
40
87
 
41
88
  #### Troubleshooting
42
89
 
43
- If you are experiencing issues and believe design-system-react is not using your local version of design-system-core, or if you are running into issues running `npm link`, try the following:
90
+ If you are experiencing issues and believe design-system-react is not using your local version of design-system-core, or if you are running into issues running `yarn link`, try the following:
44
91
 
45
92
  - Check that `design-system-react` and `design-system-core` are both using the same `nodejs` version in `.tool_versions`. If they are not, update the node version(s) in `.tool_versions` locally and retry the steps above. If this was the issues / the `nodejs` versions are not the same, consider creating a PR to bring them in-line.
46
93
 
47
- - Ensure that you are running the `npm link` command in step 3 AFTER step 2. Doing these in the wrong order will not work.
94
+ - Make sure the `NODE_OPTIONS=--preserve-symlinks` is set in the same terminal (i.e. shell instance) as Storybook, and that Storybook has been restarted.
95
+
96
+ - Ask in the `design-system` Slack channel.
97
+
98
+ ## Node versions
99
+
100
+ We've two places where the NodeJS version is specified, and we should keep these in-sync. The `.tool-versions` is used for local development, installed via `asdf`. The `.nvmrc` is used in the CI/publish Github action, and the Cloudflare pages build process. If you change one, please change t'other.
48
101
 
49
102
  ## Deployment
50
103
 
51
104
  Create a new [release](https://github.com/RaspberryPiFoundation/design-system-react/releases):
52
105
 
53
- - Update the changelog, package.json (then run npm i to update package-lock.json) and commit.
106
+ - Use `yarn version -i minor` to increment the version in `package.json`. You can also use `major` or `patch` instead of `minor` here.
107
+ - Update the changelog
108
+ - Commit and push to a branch, and open a PR for review.
109
+
110
+ Make a cuppa while a peer reviews the release.
111
+
112
+ - Once approved, merge your PR to main
54
113
  - Click 'Draft a new release'
55
114
  - Type the version in the dropdown and click 'Create new tag'
56
115
  - Add a title and some notes about what the release contains
57
116
  - Click 'Publish release' (leave 'Set as latest release' checked) and a build will be kicked off
117
+
118
+ Once published
119
+
58
120
  - Add new version to `package.json` in your app
59
121
 
60
122
  ## Using Docker
package/dist/cjs/bundle.js CHANGED
@@ -1203,7 +1203,7 @@ const Button = ({
1203
1203
  disabled
1204
1204
  }, className);
1205
1205
  let iconClasses = "rpf-button__icon";
1206
- if ( /*#__PURE__*/React.isValidElement(icon)) {
1206
+ if (/*#__PURE__*/React.isValidElement(icon)) {
1207
1207
  iconClasses += " icon";
1208
1208
  console.warn("DEPRECATED: icons as React elements will not be supported in future releases");
1209
1209
  } else {
@@ -1255,6 +1255,7 @@ styleInject(css_248z$c);
1255
1255
  const Alert = ({
1256
1256
  title,
1257
1257
  text,
1258
+ children,
1258
1259
  type,
1259
1260
  actions
1260
1261
  }) => /*#__PURE__*/React.createElement("div", {
@@ -1265,7 +1266,7 @@ const Alert = ({
1265
1266
  className: "rpf-alert__body"
1266
1267
  }, /*#__PURE__*/React.createElement("p", {
1267
1268
  className: "rpf-alert__title"
1268
- }, title), /*#__PURE__*/React.createElement("p", null, text), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
1269
+ }, title), text && /*#__PURE__*/React.createElement("p", null, text), children && /*#__PURE__*/React.createElement("div", null, children), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
1269
1270
  className: "rpf-alert__actions"
1270
1271
  }, actions.map(action => /*#__PURE__*/React.createElement(Button, {
1271
1272
  key: action.key || action.label,
@@ -1277,12 +1278,14 @@ const Alert = ({
1277
1278
  })))));
1278
1279
  Alert.propTypes = {
1279
1280
  title: PropTypes.string,
1281
+ text: PropTypes.string,
1280
1282
  type: PropTypes.oneOf(["error", "warning", "information", "success"]),
1281
1283
  actions: PropTypes.arrayOf(PropTypes.shape({
1282
1284
  href: PropTypes.string,
1283
1285
  label: PropTypes.string,
1284
1286
  onClick: PropTypes.func
1285
- }))
1287
+ })),
1288
+ children: PropTypes.node
1286
1289
  };
1287
1290
 
1288
1291
  var css_248z$b = ":root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-teal-950: hsla(174, 80%, 20%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root {\n --color-progress-bar-complete: var(--rpf-navy-800);\n --color-progress-bar-incomplete: var(--rpf-grey-150);\n}\n\n.rpf-progress-bar__label {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n align-items: center;\n display: grid;\n grid-gap: var(--space-3);\n grid-template-columns: max-content 1fr;\n}\n.rpf-progress-bar__bar {\n background: var(--color-progress-bar-incomplete);\n block-size: 0.375rem;\n border-radius: 0.375rem;\n inline-size: 100%;\n}\n.rpf-progress-bar__bar::-webkit-progress-bar {\n background: var(--color-progress-bar-incomplete);\n border-radius: 0.375rem;\n}\n.rpf-progress-bar__bar::-webkit-progress-value {\n background: var(--color-progress-bar-complete);\n border-radius: 0.375rem;\n}\n.rpf-progress-bar__bar::-moz-progress-bar {\n background: var(--color-progress-bar-complete);\n border-radius: 0.375rem;\n}\n";
@@ -1387,8 +1390,8 @@ Fieldset.propTypes = {
1387
1390
  };
1388
1391
 
1389
1392
  const InputField = ({
1393
+ id,
1390
1394
  label,
1391
- name,
1392
1395
  children,
1393
1396
  disabled = false,
1394
1397
  error = "",
@@ -1396,7 +1399,7 @@ const InputField = ({
1396
1399
  }) => /*#__PURE__*/React.createElement("div", {
1397
1400
  className: "rpf-input-field"
1398
1401
  }, (label || hint) && /*#__PURE__*/React.createElement("label", {
1399
- htmlFor: name,
1402
+ htmlFor: id,
1400
1403
  className: classNames("rpf-label", {
1401
1404
  "rpf-label--disabled": disabled
1402
1405
  })
@@ -1412,7 +1415,7 @@ InputField.propTypes = {
1412
1415
  error: PropTypes.string,
1413
1416
  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
1414
1417
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
1415
- name: PropTypes.string.isRequired
1418
+ id: PropTypes.string.isRequired
1416
1419
  };
1417
1420
 
1418
1421
  var css_248z$8 = ":root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n --rpf-link-text: var(--rpf-navy-800);\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input.rpf-input-select {\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>\");\n background-repeat: no-repeat;\n background-position: center right var(--space-1-5);\n}\nhtml[dir=rtl] .rpf-input.rpf-input-select {\n background-position: center left var(--space-1-5);\n}\n.rpf-input.rpf-input-select:disabled, .rpf-input.rpf-input-select--disabled {\n background-image: none;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n --table-border-width: var(--border-width-sm);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-teal-950: hsla(174, 80%, 20%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:disabled, .rpf-input--disabled {\n border-color: var(--rpf-input-background-color-disabled);\n background-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n";
@@ -1431,11 +1434,11 @@ const SelectInput = ({
1431
1434
  placeholder = "",
1432
1435
  value = ""
1433
1436
  }) => /*#__PURE__*/React.createElement(InputField, {
1437
+ id: id,
1434
1438
  disabled: disabled,
1435
1439
  error: error,
1436
1440
  hint: hint,
1437
- label: label,
1438
- name: name
1441
+ label: label
1439
1442
  }, /*#__PURE__*/React.createElement("select", {
1440
1443
  className: classNames("rpf-input rpf-input-select", {
1441
1444
  "rpf-input--error": error,
@@ -1482,11 +1485,11 @@ const TextInput = ({
1482
1485
  hint = "",
1483
1486
  onChange = () => {}
1484
1487
  }) => /*#__PURE__*/React.createElement(InputField, {
1488
+ id: id,
1485
1489
  disabled: disabled,
1486
1490
  error: error,
1487
1491
  hint: hint,
1488
- label: label,
1489
- name: name
1492
+ label: label
1490
1493
  }, /*#__PURE__*/React.createElement("input", {
1491
1494
  className: classNames("rpf-input rpf-input-text", {
1492
1495
  "rpf-input--error": error,
@@ -1585,11 +1588,11 @@ const TextareaInput = ({
1585
1588
  hint = "",
1586
1589
  onChange = () => {}
1587
1590
  }) => /*#__PURE__*/React.createElement(InputField, {
1591
+ id: id,
1588
1592
  disabled: disabled,
1589
1593
  error: error,
1590
1594
  hint: hint,
1591
- label: label,
1592
- name: name
1595
+ label: label
1593
1596
  }, /*#__PURE__*/React.createElement("textarea", {
1594
1597
  className: classNames("rpf-input rpf-input-textarea", {
1595
1598
  "rpf-input--error": error,
@@ -1627,11 +1630,13 @@ const SearchInput = ({
1627
1630
  error = "",
1628
1631
  hint = "",
1629
1632
  placeholder = "",
1630
- onClick = () => {}
1633
+ defaultValue = "",
1634
+ onClick = () => {},
1635
+ onChange = event => {}
1631
1636
  }) => /*#__PURE__*/React.createElement("div", {
1632
1637
  className: "rpf-input-field"
1633
1638
  }, /*#__PURE__*/React.createElement("label", {
1634
- htmlFor: "search",
1639
+ htmlFor: inputFieldId,
1635
1640
  className: classNames("rpf-label", {
1636
1641
  "rpf-label--disabled": disabled
1637
1642
  })
@@ -1649,8 +1654,11 @@ const SearchInput = ({
1649
1654
  name: "search",
1650
1655
  type: "search",
1651
1656
  "area-label": "Search",
1652
- placeholder: placeholder
1657
+ defaultValue: defaultValue,
1658
+ placeholder: placeholder,
1659
+ onChange: onChange
1653
1660
  }), /*#__PURE__*/React.createElement("button", {
1661
+ type: "button",
1654
1662
  className: classNames("rpf-button rpf-button-search", {
1655
1663
  "rpf-button--disabled": disabled,
1656
1664
  "rpf-button--error": error
@@ -1662,7 +1670,7 @@ const SearchInput = ({
1662
1670
  }, "search"))), error && /*#__PURE__*/React.createElement("div", {
1663
1671
  className: "rpf-error-message"
1664
1672
  }, /*#__PURE__*/React.createElement("span", {
1665
- class: "rpf-error-message__icon material-symbols-sharp"
1673
+ className: "rpf-error-message__icon material-symbols-sharp"
1666
1674
  }, "info"), error));
1667
1675
  SearchInput.propTypes = {
1668
1676
  disabled: PropTypes.bool,
@@ -1671,7 +1679,9 @@ SearchInput.propTypes = {
1671
1679
  inputFieldId: PropTypes.string.isRequired,
1672
1680
  label: PropTypes.string.isRequired,
1673
1681
  onClick: PropTypes.func,
1674
- placeholder: PropTypes.string
1682
+ onChange: PropTypes.func,
1683
+ placeholder: PropTypes.string,
1684
+ defaultValue: PropTypes.string
1675
1685
  };
1676
1686
 
1677
1687
  var css_248z$3 = ".rpf-table {\n border: 1px solid var(--rpf-grey-100);\n border-radius: var(--border-radius);\n overflow: auto;\n top: 0;\n width: fit-content;\n}\n.rpf-table--full-width {\n width: 100%;\n}\n.rpf-table__table {\n border-collapse: collapse;\n width: max-content;\n}\n.rpf-table__table--full-width {\n width: 100%;\n}\n.rpf-table__table thead th,\n.rpf-table__table thead td {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n";
package/dist/esm/bundle.js CHANGED
@@ -1201,7 +1201,7 @@ const Button = ({
1201
1201
  disabled
1202
1202
  }, className);
1203
1203
  let iconClasses = "rpf-button__icon";
1204
- if ( /*#__PURE__*/React.isValidElement(icon)) {
1204
+ if (/*#__PURE__*/React.isValidElement(icon)) {
1205
1205
  iconClasses += " icon";
1206
1206
  console.warn("DEPRECATED: icons as React elements will not be supported in future releases");
1207
1207
  } else {
@@ -1253,6 +1253,7 @@ styleInject(css_248z$c);
1253
1253
  const Alert = ({
1254
1254
  title,
1255
1255
  text,
1256
+ children,
1256
1257
  type,
1257
1258
  actions
1258
1259
  }) => /*#__PURE__*/React.createElement("div", {
@@ -1263,7 +1264,7 @@ const Alert = ({
1263
1264
  className: "rpf-alert__body"
1264
1265
  }, /*#__PURE__*/React.createElement("p", {
1265
1266
  className: "rpf-alert__title"
1266
- }, title), /*#__PURE__*/React.createElement("p", null, text), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
1267
+ }, title), text && /*#__PURE__*/React.createElement("p", null, text), children && /*#__PURE__*/React.createElement("div", null, children), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
1267
1268
  className: "rpf-alert__actions"
1268
1269
  }, actions.map(action => /*#__PURE__*/React.createElement(Button, {
1269
1270
  key: action.key || action.label,
@@ -1275,12 +1276,14 @@ const Alert = ({
1275
1276
  })))));
1276
1277
  Alert.propTypes = {
1277
1278
  title: PropTypes.string,
1279
+ text: PropTypes.string,
1278
1280
  type: PropTypes.oneOf(["error", "warning", "information", "success"]),
1279
1281
  actions: PropTypes.arrayOf(PropTypes.shape({
1280
1282
  href: PropTypes.string,
1281
1283
  label: PropTypes.string,
1282
1284
  onClick: PropTypes.func
1283
- }))
1285
+ })),
1286
+ children: PropTypes.node
1284
1287
  };
1285
1288
 
1286
1289
  var css_248z$b = ":root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-teal-950: hsla(174, 80%, 20%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root {\n --color-progress-bar-complete: var(--rpf-navy-800);\n --color-progress-bar-incomplete: var(--rpf-grey-150);\n}\n\n.rpf-progress-bar__label {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n align-items: center;\n display: grid;\n grid-gap: var(--space-3);\n grid-template-columns: max-content 1fr;\n}\n.rpf-progress-bar__bar {\n background: var(--color-progress-bar-incomplete);\n block-size: 0.375rem;\n border-radius: 0.375rem;\n inline-size: 100%;\n}\n.rpf-progress-bar__bar::-webkit-progress-bar {\n background: var(--color-progress-bar-incomplete);\n border-radius: 0.375rem;\n}\n.rpf-progress-bar__bar::-webkit-progress-value {\n background: var(--color-progress-bar-complete);\n border-radius: 0.375rem;\n}\n.rpf-progress-bar__bar::-moz-progress-bar {\n background: var(--color-progress-bar-complete);\n border-radius: 0.375rem;\n}\n";
@@ -1385,8 +1388,8 @@ Fieldset.propTypes = {
1385
1388
  };
1386
1389
 
1387
1390
  const InputField = ({
1391
+ id,
1388
1392
  label,
1389
- name,
1390
1393
  children,
1391
1394
  disabled = false,
1392
1395
  error = "",
@@ -1394,7 +1397,7 @@ const InputField = ({
1394
1397
  }) => /*#__PURE__*/React.createElement("div", {
1395
1398
  className: "rpf-input-field"
1396
1399
  }, (label || hint) && /*#__PURE__*/React.createElement("label", {
1397
- htmlFor: name,
1400
+ htmlFor: id,
1398
1401
  className: classNames("rpf-label", {
1399
1402
  "rpf-label--disabled": disabled
1400
1403
  })
@@ -1410,7 +1413,7 @@ InputField.propTypes = {
1410
1413
  error: PropTypes.string,
1411
1414
  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
1412
1415
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
1413
- name: PropTypes.string.isRequired
1416
+ id: PropTypes.string.isRequired
1414
1417
  };
1415
1418
 
1416
1419
  var css_248z$8 = ":root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n --rpf-link-text: var(--rpf-navy-800);\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input.rpf-input-select {\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>\");\n background-repeat: no-repeat;\n background-position: center right var(--space-1-5);\n}\nhtml[dir=rtl] .rpf-input.rpf-input-select {\n background-position: center left var(--space-1-5);\n}\n.rpf-input.rpf-input-select:disabled, .rpf-input.rpf-input-select--disabled {\n background-image: none;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n --table-border-width: var(--border-width-sm);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-teal-950: hsla(174, 80%, 20%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:disabled, .rpf-input--disabled {\n border-color: var(--rpf-input-background-color-disabled);\n background-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n";
@@ -1429,11 +1432,11 @@ const SelectInput = ({
1429
1432
  placeholder = "",
1430
1433
  value = ""
1431
1434
  }) => /*#__PURE__*/React.createElement(InputField, {
1435
+ id: id,
1432
1436
  disabled: disabled,
1433
1437
  error: error,
1434
1438
  hint: hint,
1435
- label: label,
1436
- name: name
1439
+ label: label
1437
1440
  }, /*#__PURE__*/React.createElement("select", {
1438
1441
  className: classNames("rpf-input rpf-input-select", {
1439
1442
  "rpf-input--error": error,
@@ -1480,11 +1483,11 @@ const TextInput = ({
1480
1483
  hint = "",
1481
1484
  onChange = () => {}
1482
1485
  }) => /*#__PURE__*/React.createElement(InputField, {
1486
+ id: id,
1483
1487
  disabled: disabled,
1484
1488
  error: error,
1485
1489
  hint: hint,
1486
- label: label,
1487
- name: name
1490
+ label: label
1488
1491
  }, /*#__PURE__*/React.createElement("input", {
1489
1492
  className: classNames("rpf-input rpf-input-text", {
1490
1493
  "rpf-input--error": error,
@@ -1583,11 +1586,11 @@ const TextareaInput = ({
1583
1586
  hint = "",
1584
1587
  onChange = () => {}
1585
1588
  }) => /*#__PURE__*/React.createElement(InputField, {
1589
+ id: id,
1586
1590
  disabled: disabled,
1587
1591
  error: error,
1588
1592
  hint: hint,
1589
- label: label,
1590
- name: name
1593
+ label: label
1591
1594
  }, /*#__PURE__*/React.createElement("textarea", {
1592
1595
  className: classNames("rpf-input rpf-input-textarea", {
1593
1596
  "rpf-input--error": error,
@@ -1625,11 +1628,13 @@ const SearchInput = ({
1625
1628
  error = "",
1626
1629
  hint = "",
1627
1630
  placeholder = "",
1628
- onClick = () => {}
1631
+ defaultValue = "",
1632
+ onClick = () => {},
1633
+ onChange = event => {}
1629
1634
  }) => /*#__PURE__*/React.createElement("div", {
1630
1635
  className: "rpf-input-field"
1631
1636
  }, /*#__PURE__*/React.createElement("label", {
1632
- htmlFor: "search",
1637
+ htmlFor: inputFieldId,
1633
1638
  className: classNames("rpf-label", {
1634
1639
  "rpf-label--disabled": disabled
1635
1640
  })
@@ -1647,8 +1652,11 @@ const SearchInput = ({
1647
1652
  name: "search",
1648
1653
  type: "search",
1649
1654
  "area-label": "Search",
1650
- placeholder: placeholder
1655
+ defaultValue: defaultValue,
1656
+ placeholder: placeholder,
1657
+ onChange: onChange
1651
1658
  }), /*#__PURE__*/React.createElement("button", {
1659
+ type: "button",
1652
1660
  className: classNames("rpf-button rpf-button-search", {
1653
1661
  "rpf-button--disabled": disabled,
1654
1662
  "rpf-button--error": error
@@ -1660,7 +1668,7 @@ const SearchInput = ({
1660
1668
  }, "search"))), error && /*#__PURE__*/React.createElement("div", {
1661
1669
  className: "rpf-error-message"
1662
1670
  }, /*#__PURE__*/React.createElement("span", {
1663
- class: "rpf-error-message__icon material-symbols-sharp"
1671
+ className: "rpf-error-message__icon material-symbols-sharp"
1664
1672
  }, "info"), error));
1665
1673
  SearchInput.propTypes = {
1666
1674
  disabled: PropTypes.bool,
@@ -1669,7 +1677,9 @@ SearchInput.propTypes = {
1669
1677
  inputFieldId: PropTypes.string.isRequired,
1670
1678
  label: PropTypes.string.isRequired,
1671
1679
  onClick: PropTypes.func,
1672
- placeholder: PropTypes.string
1680
+ onChange: PropTypes.func,
1681
+ placeholder: PropTypes.string,
1682
+ defaultValue: PropTypes.string
1673
1683
  };
1674
1684
 
1675
1685
  var css_248z$3 = ".rpf-table {\n border: 1px solid var(--rpf-grey-100);\n border-radius: var(--border-radius);\n overflow: auto;\n top: 0;\n width: fit-content;\n}\n.rpf-table--full-width {\n width: 100%;\n}\n.rpf-table__table {\n border-collapse: collapse;\n width: max-content;\n}\n.rpf-table__table--full-width {\n width: 100%;\n}\n.rpf-table__table thead th,\n.rpf-table__table thead td {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n";
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@raspberrypifoundation/design-system-react",
3
- "version": "1.4.0",
3
+ "packageManager": "yarn@4.5.0",
4
+ "version": "1.6.0",
4
5
  "description": "",
5
6
  "type": "module",
6
7
  "exports": {
@@ -13,7 +14,6 @@
13
14
  "scripts": {
14
15
  "build-css": "sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core --quiet src:src",
15
16
  "build-storybook": "npm install && npm run build-css && storybook build",
16
- "prepublishOnly": "npm run rollup",
17
17
  "lint": "eslint \"src/**/*.{js,jsx,json}\"",
18
18
  "lint:fix": "eslint --fix \"src/**/*.{js,jsx,json}\"",
19
19
  "rollup": "npm run build-css && rollup -c",
@@ -57,6 +57,7 @@
57
57
  "@storybook/testing-library": "^0.1.0",
58
58
  "@testing-library/jest-dom": "^6.4.2",
59
59
  "@testing-library/react": "^15.0.2",
60
+ "babel-eslint": "^10.1.0",
60
61
  "css-loader": "^6.8.1",
61
62
  "eslint": "^7.11.0",
62
63
  "eslint-config-prettier": "^8.8.0",
@@ -91,6 +92,9 @@
91
92
  "prop-types": "^15.8.1",
92
93
  "react": "^18.2.0",
93
94
  "react-dom": "^18.2.0",
94
- "react-router-dom": "^6.23.1"
95
+ "react-router-dom": "^6.24.0"
96
+ },
97
+ "peerDependencies": {
98
+ "react-router-dom": "^6.24.0"
95
99
  }
96
- }
100
+ }