@raspberrypifoundation/design-system-react 1.5.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.
- package/CHANGELOG.md +195 -0
- package/README.md +80 -18
- package/dist/cjs/bundle.js +22 -15
- package/dist/esm/bundle.js +22 -15
- 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
|
+
[-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
|
+
[&labelColor=CD2355)](https://rpf-design-system.pages.dev/)
|
|
10
|
+
|
|
11
|
+
[&labelColor=D95495)](https://github.com/raspberrypifoundation/design-system-core/)
|
|
12
|
+
[-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
|
+
[&labelColor=CC0000)](https://github.com/raspberrypifoundation/design-system-rails/)
|
|
15
|
+
[-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 `
|
|
21
|
+
Using `yarn`:
|
|
6
22
|
|
|
7
23
|
```bash
|
|
8
|
-
|
|
9
|
-
npm run storybook
|
|
24
|
+
yarn add @raspberrypifoundation/design-system-react
|
|
10
25
|
```
|
|
11
26
|
|
|
12
|
-
|
|
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
|
-
```
|
|
15
|
-
yarn
|
|
16
|
-
|
|
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 `
|
|
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
|
-
|
|
67
|
+
The output should look include something like
|
|
24
68
|
|
|
25
69
|
```
|
|
26
|
-
|
|
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.
|
|
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
|
-
|
|
79
|
+
export NODE_OPTIONS="$NODE_OPTIONS --preserve-symlinks"
|
|
33
80
|
```
|
|
34
81
|
|
|
35
|
-
3.
|
|
82
|
+
3. Re-start storybook
|
|
36
83
|
|
|
37
84
|
```
|
|
38
|
-
|
|
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 `
|
|
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
|
-
-
|
|
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
|
-
-
|
|
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 (
|
|
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 {
|
|
@@ -1390,8 +1390,8 @@ Fieldset.propTypes = {
|
|
|
1390
1390
|
};
|
|
1391
1391
|
|
|
1392
1392
|
const InputField = ({
|
|
1393
|
+
id,
|
|
1393
1394
|
label,
|
|
1394
|
-
name,
|
|
1395
1395
|
children,
|
|
1396
1396
|
disabled = false,
|
|
1397
1397
|
error = "",
|
|
@@ -1399,7 +1399,7 @@ const InputField = ({
|
|
|
1399
1399
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
1400
1400
|
className: "rpf-input-field"
|
|
1401
1401
|
}, (label || hint) && /*#__PURE__*/React.createElement("label", {
|
|
1402
|
-
htmlFor:
|
|
1402
|
+
htmlFor: id,
|
|
1403
1403
|
className: classNames("rpf-label", {
|
|
1404
1404
|
"rpf-label--disabled": disabled
|
|
1405
1405
|
})
|
|
@@ -1415,7 +1415,7 @@ InputField.propTypes = {
|
|
|
1415
1415
|
error: PropTypes.string,
|
|
1416
1416
|
hint: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
1417
1417
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
|
1418
|
-
|
|
1418
|
+
id: PropTypes.string.isRequired
|
|
1419
1419
|
};
|
|
1420
1420
|
|
|
1421
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";
|
|
@@ -1434,11 +1434,11 @@ const SelectInput = ({
|
|
|
1434
1434
|
placeholder = "",
|
|
1435
1435
|
value = ""
|
|
1436
1436
|
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
1437
|
+
id: id,
|
|
1437
1438
|
disabled: disabled,
|
|
1438
1439
|
error: error,
|
|
1439
1440
|
hint: hint,
|
|
1440
|
-
label: label
|
|
1441
|
-
name: name
|
|
1441
|
+
label: label
|
|
1442
1442
|
}, /*#__PURE__*/React.createElement("select", {
|
|
1443
1443
|
className: classNames("rpf-input rpf-input-select", {
|
|
1444
1444
|
"rpf-input--error": error,
|
|
@@ -1485,11 +1485,11 @@ const TextInput = ({
|
|
|
1485
1485
|
hint = "",
|
|
1486
1486
|
onChange = () => {}
|
|
1487
1487
|
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
1488
|
+
id: id,
|
|
1488
1489
|
disabled: disabled,
|
|
1489
1490
|
error: error,
|
|
1490
1491
|
hint: hint,
|
|
1491
|
-
label: label
|
|
1492
|
-
name: name
|
|
1492
|
+
label: label
|
|
1493
1493
|
}, /*#__PURE__*/React.createElement("input", {
|
|
1494
1494
|
className: classNames("rpf-input rpf-input-text", {
|
|
1495
1495
|
"rpf-input--error": error,
|
|
@@ -1588,11 +1588,11 @@ const TextareaInput = ({
|
|
|
1588
1588
|
hint = "",
|
|
1589
1589
|
onChange = () => {}
|
|
1590
1590
|
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
1591
|
+
id: id,
|
|
1591
1592
|
disabled: disabled,
|
|
1592
1593
|
error: error,
|
|
1593
1594
|
hint: hint,
|
|
1594
|
-
label: label
|
|
1595
|
-
name: name
|
|
1595
|
+
label: label
|
|
1596
1596
|
}, /*#__PURE__*/React.createElement("textarea", {
|
|
1597
1597
|
className: classNames("rpf-input rpf-input-textarea", {
|
|
1598
1598
|
"rpf-input--error": error,
|
|
@@ -1630,11 +1630,13 @@ const SearchInput = ({
|
|
|
1630
1630
|
error = "",
|
|
1631
1631
|
hint = "",
|
|
1632
1632
|
placeholder = "",
|
|
1633
|
-
|
|
1633
|
+
defaultValue = "",
|
|
1634
|
+
onClick = () => {},
|
|
1635
|
+
onChange = event => {}
|
|
1634
1636
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
1635
1637
|
className: "rpf-input-field"
|
|
1636
1638
|
}, /*#__PURE__*/React.createElement("label", {
|
|
1637
|
-
htmlFor:
|
|
1639
|
+
htmlFor: inputFieldId,
|
|
1638
1640
|
className: classNames("rpf-label", {
|
|
1639
1641
|
"rpf-label--disabled": disabled
|
|
1640
1642
|
})
|
|
@@ -1652,8 +1654,11 @@ const SearchInput = ({
|
|
|
1652
1654
|
name: "search",
|
|
1653
1655
|
type: "search",
|
|
1654
1656
|
"area-label": "Search",
|
|
1655
|
-
|
|
1657
|
+
defaultValue: defaultValue,
|
|
1658
|
+
placeholder: placeholder,
|
|
1659
|
+
onChange: onChange
|
|
1656
1660
|
}), /*#__PURE__*/React.createElement("button", {
|
|
1661
|
+
type: "button",
|
|
1657
1662
|
className: classNames("rpf-button rpf-button-search", {
|
|
1658
1663
|
"rpf-button--disabled": disabled,
|
|
1659
1664
|
"rpf-button--error": error
|
|
@@ -1665,7 +1670,7 @@ const SearchInput = ({
|
|
|
1665
1670
|
}, "search"))), error && /*#__PURE__*/React.createElement("div", {
|
|
1666
1671
|
className: "rpf-error-message"
|
|
1667
1672
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1668
|
-
|
|
1673
|
+
className: "rpf-error-message__icon material-symbols-sharp"
|
|
1669
1674
|
}, "info"), error));
|
|
1670
1675
|
SearchInput.propTypes = {
|
|
1671
1676
|
disabled: PropTypes.bool,
|
|
@@ -1674,7 +1679,9 @@ SearchInput.propTypes = {
|
|
|
1674
1679
|
inputFieldId: PropTypes.string.isRequired,
|
|
1675
1680
|
label: PropTypes.string.isRequired,
|
|
1676
1681
|
onClick: PropTypes.func,
|
|
1677
|
-
|
|
1682
|
+
onChange: PropTypes.func,
|
|
1683
|
+
placeholder: PropTypes.string,
|
|
1684
|
+
defaultValue: PropTypes.string
|
|
1678
1685
|
};
|
|
1679
1686
|
|
|
1680
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 (
|
|
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 {
|
|
@@ -1388,8 +1388,8 @@ Fieldset.propTypes = {
|
|
|
1388
1388
|
};
|
|
1389
1389
|
|
|
1390
1390
|
const InputField = ({
|
|
1391
|
+
id,
|
|
1391
1392
|
label,
|
|
1392
|
-
name,
|
|
1393
1393
|
children,
|
|
1394
1394
|
disabled = false,
|
|
1395
1395
|
error = "",
|
|
@@ -1397,7 +1397,7 @@ const InputField = ({
|
|
|
1397
1397
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
1398
1398
|
className: "rpf-input-field"
|
|
1399
1399
|
}, (label || hint) && /*#__PURE__*/React.createElement("label", {
|
|
1400
|
-
htmlFor:
|
|
1400
|
+
htmlFor: id,
|
|
1401
1401
|
className: classNames("rpf-label", {
|
|
1402
1402
|
"rpf-label--disabled": disabled
|
|
1403
1403
|
})
|
|
@@ -1413,7 +1413,7 @@ InputField.propTypes = {
|
|
|
1413
1413
|
error: PropTypes.string,
|
|
1414
1414
|
hint: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
1415
1415
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
|
1416
|
-
|
|
1416
|
+
id: PropTypes.string.isRequired
|
|
1417
1417
|
};
|
|
1418
1418
|
|
|
1419
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";
|
|
@@ -1432,11 +1432,11 @@ const SelectInput = ({
|
|
|
1432
1432
|
placeholder = "",
|
|
1433
1433
|
value = ""
|
|
1434
1434
|
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
1435
|
+
id: id,
|
|
1435
1436
|
disabled: disabled,
|
|
1436
1437
|
error: error,
|
|
1437
1438
|
hint: hint,
|
|
1438
|
-
label: label
|
|
1439
|
-
name: name
|
|
1439
|
+
label: label
|
|
1440
1440
|
}, /*#__PURE__*/React.createElement("select", {
|
|
1441
1441
|
className: classNames("rpf-input rpf-input-select", {
|
|
1442
1442
|
"rpf-input--error": error,
|
|
@@ -1483,11 +1483,11 @@ const TextInput = ({
|
|
|
1483
1483
|
hint = "",
|
|
1484
1484
|
onChange = () => {}
|
|
1485
1485
|
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
1486
|
+
id: id,
|
|
1486
1487
|
disabled: disabled,
|
|
1487
1488
|
error: error,
|
|
1488
1489
|
hint: hint,
|
|
1489
|
-
label: label
|
|
1490
|
-
name: name
|
|
1490
|
+
label: label
|
|
1491
1491
|
}, /*#__PURE__*/React.createElement("input", {
|
|
1492
1492
|
className: classNames("rpf-input rpf-input-text", {
|
|
1493
1493
|
"rpf-input--error": error,
|
|
@@ -1586,11 +1586,11 @@ const TextareaInput = ({
|
|
|
1586
1586
|
hint = "",
|
|
1587
1587
|
onChange = () => {}
|
|
1588
1588
|
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
1589
|
+
id: id,
|
|
1589
1590
|
disabled: disabled,
|
|
1590
1591
|
error: error,
|
|
1591
1592
|
hint: hint,
|
|
1592
|
-
label: label
|
|
1593
|
-
name: name
|
|
1593
|
+
label: label
|
|
1594
1594
|
}, /*#__PURE__*/React.createElement("textarea", {
|
|
1595
1595
|
className: classNames("rpf-input rpf-input-textarea", {
|
|
1596
1596
|
"rpf-input--error": error,
|
|
@@ -1628,11 +1628,13 @@ const SearchInput = ({
|
|
|
1628
1628
|
error = "",
|
|
1629
1629
|
hint = "",
|
|
1630
1630
|
placeholder = "",
|
|
1631
|
-
|
|
1631
|
+
defaultValue = "",
|
|
1632
|
+
onClick = () => {},
|
|
1633
|
+
onChange = event => {}
|
|
1632
1634
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
1633
1635
|
className: "rpf-input-field"
|
|
1634
1636
|
}, /*#__PURE__*/React.createElement("label", {
|
|
1635
|
-
htmlFor:
|
|
1637
|
+
htmlFor: inputFieldId,
|
|
1636
1638
|
className: classNames("rpf-label", {
|
|
1637
1639
|
"rpf-label--disabled": disabled
|
|
1638
1640
|
})
|
|
@@ -1650,8 +1652,11 @@ const SearchInput = ({
|
|
|
1650
1652
|
name: "search",
|
|
1651
1653
|
type: "search",
|
|
1652
1654
|
"area-label": "Search",
|
|
1653
|
-
|
|
1655
|
+
defaultValue: defaultValue,
|
|
1656
|
+
placeholder: placeholder,
|
|
1657
|
+
onChange: onChange
|
|
1654
1658
|
}), /*#__PURE__*/React.createElement("button", {
|
|
1659
|
+
type: "button",
|
|
1655
1660
|
className: classNames("rpf-button rpf-button-search", {
|
|
1656
1661
|
"rpf-button--disabled": disabled,
|
|
1657
1662
|
"rpf-button--error": error
|
|
@@ -1663,7 +1668,7 @@ const SearchInput = ({
|
|
|
1663
1668
|
}, "search"))), error && /*#__PURE__*/React.createElement("div", {
|
|
1664
1669
|
className: "rpf-error-message"
|
|
1665
1670
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1666
|
-
|
|
1671
|
+
className: "rpf-error-message__icon material-symbols-sharp"
|
|
1667
1672
|
}, "info"), error));
|
|
1668
1673
|
SearchInput.propTypes = {
|
|
1669
1674
|
disabled: PropTypes.bool,
|
|
@@ -1672,7 +1677,9 @@ SearchInput.propTypes = {
|
|
|
1672
1677
|
inputFieldId: PropTypes.string.isRequired,
|
|
1673
1678
|
label: PropTypes.string.isRequired,
|
|
1674
1679
|
onClick: PropTypes.func,
|
|
1675
|
-
|
|
1680
|
+
onChange: PropTypes.func,
|
|
1681
|
+
placeholder: PropTypes.string,
|
|
1682
|
+
defaultValue: PropTypes.string
|
|
1676
1683
|
};
|
|
1677
1684
|
|
|
1678
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
|
-
"
|
|
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.
|
|
95
|
+
"react-router-dom": "^6.24.0"
|
|
96
|
+
},
|
|
97
|
+
"peerDependencies": {
|
|
98
|
+
"react-router-dom": "^6.24.0"
|
|
95
99
|
}
|
|
96
|
-
}
|
|
100
|
+
}
|