@raspberrypifoundation/design-system-react 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 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).
 
+## 1.7.1 - 2025-03-14
+
+### Added
+
+- Checkbox component now supports a custom class (#126)
+
 ## v1.7.0 - 2024-12-03
 
 ### Added

package/dist/cjs/bundle.js

@@ -1332,11 +1332,12 @@ const CheckboxInput = ({
   disabled = false,
   error = "",
   onChange = () => {},
-  value = ""
+  value = "",
+  className = ""
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
   className: classNames("rpf-input-checkbox", {
     "rpf-input-checkbox--error": error
-  })
+  }, className)
 }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
   checked: !!checked,
   disabled: disabled,
@@ -1360,7 +1361,8 @@ CheckboxInput.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
-  value: PropTypes.string
+  value: PropTypes.string,
+  className: PropTypes.string
 };
 
 var css_248z$9 = ":root, :host {\n  --border-radius: var(--space-1);\n  --border-radius-sm: var(--space-0-5);\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-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  --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, :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  --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.rpf-fieldset {\n  all: unset;\n  background-color: var(--rpf-input-background-color);\n  box-sizing: border-box;\n  display: block;\n  color: var(--rpf-input-color);\n  margin-block-end: var(--space-3);\n  max-inline-size: fit-content;\n}\n.rpf-fieldset legend {\n  background-color: var(--rpf-input-background-color);\n  color: var(--rpf-input-color);\n  inline-size: 100%;\n}\n.rpf-fieldset--full-width, .rpf-fieldset--full-width .rpf-fieldset__inputs * {\n  max-inline-size: none;\n}\n.rpf-fieldset__inputs *:last-child {\n  margin-block-end: 0;\n}\n.rpf-fieldset--error .rpf-fieldset__inputs {\n  border-color: var(--rpf-input-color-error);\n  border-radius: var(--border-radius);\n  border-style: solid;\n  border-width: var(--fieldset-border-width);\n}\n.rpf-fieldset--disabled .rpf-fieldset__inputs, .rpf-fieldset:disabled .rpf-fieldset__inputs {\n  background-color: var(--rpf-input-background-color-disabled);\n  border-radius: var(--border-radius);\n  color: var(--rpf-input-color);\n}\n";

package/dist/esm/bundle.js

@@ -1330,11 +1330,12 @@ const CheckboxInput = ({
   disabled = false,
   error = "",
   onChange = () => {},
-  value = ""
+  value = "",
+  className = ""
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
   className: classNames("rpf-input-checkbox", {
     "rpf-input-checkbox--error": error
-  })
+  }, className)
 }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
   checked: !!checked,
   disabled: disabled,
@@ -1358,7 +1359,8 @@ CheckboxInput.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
-  value: PropTypes.string
+  value: PropTypes.string,
+  className: PropTypes.string
 };
 
 var css_248z$9 = ":root, :host {\n  --border-radius: var(--space-1);\n  --border-radius-sm: var(--space-0-5);\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-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  --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, :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  --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.rpf-fieldset {\n  all: unset;\n  background-color: var(--rpf-input-background-color);\n  box-sizing: border-box;\n  display: block;\n  color: var(--rpf-input-color);\n  margin-block-end: var(--space-3);\n  max-inline-size: fit-content;\n}\n.rpf-fieldset legend {\n  background-color: var(--rpf-input-background-color);\n  color: var(--rpf-input-color);\n  inline-size: 100%;\n}\n.rpf-fieldset--full-width, .rpf-fieldset--full-width .rpf-fieldset__inputs * {\n  max-inline-size: none;\n}\n.rpf-fieldset__inputs *:last-child {\n  margin-block-end: 0;\n}\n.rpf-fieldset--error .rpf-fieldset__inputs {\n  border-color: var(--rpf-input-color-error);\n  border-radius: var(--border-radius);\n  border-style: solid;\n  border-width: var(--fieldset-border-width);\n}\n.rpf-fieldset--disabled .rpf-fieldset__inputs, .rpf-fieldset:disabled .rpf-fieldset__inputs {\n  background-color: var(--rpf-input-background-color-disabled);\n  border-radius: var(--border-radius);\n  color: var(--rpf-input-color);\n}\n";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
   "packageManager": "yarn@4.5.0",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "",
   "type": "module",
   "exports": {