@raspberrypifoundation/design-system-react 0.1.5 → 1.1.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 (4) hide show
  1. package/README.md +6 -5
  2. package/dist/cjs/bundle.js +97 -65
  3. package/dist/esm/bundle.js +97 -65
  4. package/package.json +91 -56
package/README.md CHANGED
@@ -39,11 +39,12 @@ Projects that need to import this package must have an `.npmrc` file at their ro
39
39
 
40
40
  Create a new [release](https://github.com/RaspberryPiFoundation/design-system-react/releases):
41
41
 
42
- - click 'Draft a new release'
43
- - type the version in the dropdown and click 'Create new tag'
44
- - add a title and some notes about what the release contains
45
- - click 'Publish release' (leave 'Set as latest release' checked) and a build will be kicked off
46
- - add new version to `package.json` in your app
42
+ - Update the changelog
43
+ - Click 'Draft a new release'
44
+ - Type the version in the dropdown and click 'Create new tag'
45
+ - Add a title and some notes about what the release contains
46
+ - Click 'Publish release' (leave 'Set as latest release' checked) and a build will be kicked off
47
+ - Add new version to `package.json` in your app
47
48
 
48
49
  ### Using Docker
49
50
 
package/dist/cjs/bundle.js CHANGED
@@ -19,39 +19,57 @@ var classnames$1 = {exports: {}};
19
19
 
20
20
  var hasOwn = {}.hasOwnProperty;
21
21
 
22
- function classNames() {
23
- var classes = [];
22
+ function classNames () {
23
+ var classes = '';
24
24
 
25
25
  for (var i = 0; i < arguments.length; i++) {
26
26
  var arg = arguments[i];
27
- if (!arg) continue;
28
-
29
- var argType = typeof arg;
30
-
31
- if (argType === 'string' || argType === 'number') {
32
- classes.push(arg);
33
- } else if (Array.isArray(arg)) {
34
- if (arg.length) {
35
- var inner = classNames.apply(null, arg);
36
- if (inner) {
37
- classes.push(inner);
38
- }
39
- }
40
- } else if (argType === 'object') {
41
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
42
- classes.push(arg.toString());
43
- continue;
44
- }
45
-
46
- for (var key in arg) {
47
- if (hasOwn.call(arg, key) && arg[key]) {
48
- classes.push(key);
49
- }
50
- }
27
+ if (arg) {
28
+ classes = appendClass(classes, parseValue(arg));
51
29
  }
52
30
  }
53
31
 
54
- return classes.join(' ');
32
+ return classes;
33
+ }
34
+
35
+ function parseValue (arg) {
36
+ if (typeof arg === 'string' || typeof arg === 'number') {
37
+ return arg;
38
+ }
39
+
40
+ if (typeof arg !== 'object') {
41
+ return '';
42
+ }
43
+
44
+ if (Array.isArray(arg)) {
45
+ return classNames.apply(null, arg);
46
+ }
47
+
48
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
49
+ return arg.toString();
50
+ }
51
+
52
+ var classes = '';
53
+
54
+ for (var key in arg) {
55
+ if (hasOwn.call(arg, key) && arg[key]) {
56
+ classes = appendClass(classes, key);
57
+ }
58
+ }
59
+
60
+ return classes;
61
+ }
62
+
63
+ function appendClass (value, newClass) {
64
+ if (!newClass) {
65
+ return value;
66
+ }
67
+
68
+ if (value) {
69
+ return value + ' ' + newClass;
70
+ }
71
+
72
+ return value + newClass;
55
73
  }
56
74
 
57
75
  if (module.exports) {
@@ -3869,46 +3887,50 @@ function styleInject(css, ref) {
3869
3887
  }
3870
3888
  }
3871
3889
 
3872
- var css_248z = ":root {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n}\n\n:root {\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%, 36%, 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%, 29%, 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%, 37%, 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, 100%, 38%, 1);\n}\n\n:root {\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 {\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 {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root {\n --border-radius: var(--space-1);\n --input-border-width: 2px;\n --alert-border-width: 2px;\n}\n\n:root {\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-button-primary-background-color: var(--rpf-navy-800);\n --rpf-button-primary-background-color-hover: var(--rpf-navy-900);\n --rpf-button-primary-background-color-active: var(--rpf-navy-600);\n --rpf-button-primary-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-primary-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n}\n\n.rpf-button {\n all: unset;\n align-items: center;\n color: var(--rpf-button-primary-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-height: calc(var(--rpf-button-lg-height) - var(--space-1) - var(--space-1));\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n width: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-primary-background-color);\n border-color: var(--rpf-button-primary-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-primary-background-color-hover);\n border-color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-primary-background-color-active);\n border-color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 3px solid var(--rpf-brand-raspberry);\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled:hover::before, .rpf-button:disabled::before, .rpf-button--disabled:hover::before, .rpf-button--disabled::before {\n border-color: var(--rpf-button-primary-background-color-disabled);\n background-color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-primary-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-primary-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-primary-text-color);\n border-color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-primary-text-color);\n border-color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-primary-text-color);\n border-color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-primary-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary:disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--icon-only {\n height: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n width: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-height: calc(var(--rpf-button-min-target-size) - var(--space-1) - var(--space-1));\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n height: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n width: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n";
3890
+ var css_248z$1 = "@font-face {\n font-family: \"Material Symbols Outlined\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-outlined.woff2\") format(\"woff2\");\n}\n.material-symbols-outlined {\n font-family: \"Material Symbols Outlined\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Rounded\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-rounded.woff2\") format(\"woff2\");\n}\n.material-symbols-rounded {\n font-family: \"Material Symbols Rounded\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Sharp\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-sharp.woff2\") format(\"woff2\");\n}\n.material-symbols-sharp {\n font-family: \"Material Symbols Sharp\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n";
3891
+ styleInject(css_248z$1);
3892
+
3893
+ var css_248z = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 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-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-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-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-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 --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}\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.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
3873
3894
  styleInject(css_248z);
3874
3895
 
3875
3896
  /* eslint-disable complexity */
3876
3897
  const Button = ({
3877
- type = "primary",
3878
- className,
3879
- enabled = true,
3880
- active,
3898
+ text,
3899
+ type,
3900
+ variant,
3901
+ size,
3881
3902
  icon,
3882
- small = false,
3883
- onClick = () => {},
3903
+ iconOnly,
3904
+ iconPosition,
3905
+ fullWidth,
3906
+ disabled,
3884
3907
  href,
3885
- text,
3886
3908
  title,
3887
- "aria-label": ariaLabel = "",
3888
- textOnHover = false,
3889
- textAlways = false
3909
+ className,
3910
+ onClick,
3911
+ "aria-label": ariaLabel
3890
3912
  }) => {
3891
- const iconOnly = icon && !textAlways;
3892
- const classes = classnames("rpf-button", {
3893
- active: active,
3894
- disabled: !enabled,
3895
- "rpf-button--sm": small,
3896
- // eslint-disable-next-line no-undefined
3897
- "rpf-button--icon-only": iconOnly,
3898
- text_on_hover: textOnHover,
3899
- [`rpf-button--${type}`]: type
3913
+ const iconButton = icon && iconOnly;
3914
+ const classes = classnames(
3915
+ // Static classes
3916
+ "rpf-button",
3917
+ // Conditional classes
3918
+ {
3919
+ [`rpf-button--${type}`]: type,
3920
+ "rpf-button--danger": variant === "danger",
3921
+ "rpf-button--sm": size === "small",
3922
+ "rpf-button--icon-only": iconButton,
3923
+ "rpf-button--full-width": fullWidth,
3924
+ disabled
3900
3925
  }, className);
3901
- const iconClasses = classnames("icon", "rpf-button__icon", {
3902
- icon_with_text: !textOnHover,
3903
- icon_without_text: textOnHover,
3904
- // eslint-disable-next-line no-undefined
3905
- icon_only: !textOnHover && !text
3906
- });
3907
- const content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
3926
+ const iconClasses = "rpf-button__icon material-symbols-sharp";
3927
+ const renderIcon = position => icon && iconPosition === position && /*#__PURE__*/React.createElement("span", {
3908
3928
  className: iconClasses
3909
- }, icon), text && !iconOnly && /*#__PURE__*/React.createElement("span", {
3929
+ }, icon);
3930
+ const renderText = () => text && !iconButton && /*#__PURE__*/React.createElement("span", {
3910
3931
  className: "text"
3911
- }, text));
3932
+ }, text);
3933
+ const content = /*#__PURE__*/React.createElement(React.Fragment, null, renderIcon("left"), renderText(), renderIcon("right"));
3912
3934
  if (href) {
3913
3935
  return /*#__PURE__*/React.createElement("a", {
3914
3936
  className: classes,
@@ -3922,24 +3944,34 @@ const Button = ({
3922
3944
  title: title,
3923
3945
  "aria-label": ariaLabel,
3924
3946
  onClick: onClick,
3925
- disabled: !enabled
3947
+ disabled: disabled
3926
3948
  }, content);
3927
3949
  };
3928
- /* eslint-enable complexity */
3929
-
3930
3950
  Button.propTypes = {
3931
3951
  type: PropTypes.string,
3932
3952
  className: PropTypes.string,
3933
- enabled: PropTypes.bool,
3934
- active: PropTypes.bool,
3935
- icon: PropTypes.element,
3953
+ disabled: PropTypes.bool,
3954
+ icon: PropTypes.string,
3936
3955
  href: PropTypes.string,
3937
3956
  onClick: PropTypes.func,
3938
3957
  text: PropTypes.string,
3939
- title: PropTypes.string,
3940
- textAlways: PropTypes.bool,
3958
+ iconOnly: PropTypes.bool,
3941
3959
  "aria-label": PropTypes.string,
3942
- textOnHover: PropTypes.bool
3960
+ title: PropTypes.string,
3961
+ iconPosition: PropTypes.oneOf(["left", "right"]),
3962
+ size: PropTypes.oneOf(["default", "small"]) // added size prop
3963
+ };
3964
+ Button.defaultProps = {
3965
+ type: "primary",
3966
+ variant: "",
3967
+ size: "default",
3968
+ icon: "",
3969
+ iconOnly: false,
3970
+ iconPosition: "left",
3971
+ fullWidth: false,
3972
+ disabled: false,
3973
+ onClick: () => {},
3974
+ "aria-label": ""
3943
3975
  };
3944
3976
 
3945
3977
  exports.Button = Button;
package/dist/esm/bundle.js CHANGED
@@ -17,39 +17,57 @@ var classnames$1 = {exports: {}};
17
17
 
18
18
  var hasOwn = {}.hasOwnProperty;
19
19
 
20
- function classNames() {
21
- var classes = [];
20
+ function classNames () {
21
+ var classes = '';
22
22
 
23
23
  for (var i = 0; i < arguments.length; i++) {
24
24
  var arg = arguments[i];
25
- if (!arg) continue;
26
-
27
- var argType = typeof arg;
28
-
29
- if (argType === 'string' || argType === 'number') {
30
- classes.push(arg);
31
- } else if (Array.isArray(arg)) {
32
- if (arg.length) {
33
- var inner = classNames.apply(null, arg);
34
- if (inner) {
35
- classes.push(inner);
36
- }
37
- }
38
- } else if (argType === 'object') {
39
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
40
- classes.push(arg.toString());
41
- continue;
42
- }
43
-
44
- for (var key in arg) {
45
- if (hasOwn.call(arg, key) && arg[key]) {
46
- classes.push(key);
47
- }
48
- }
25
+ if (arg) {
26
+ classes = appendClass(classes, parseValue(arg));
49
27
  }
50
28
  }
51
29
 
52
- return classes.join(' ');
30
+ return classes;
31
+ }
32
+
33
+ function parseValue (arg) {
34
+ if (typeof arg === 'string' || typeof arg === 'number') {
35
+ return arg;
36
+ }
37
+
38
+ if (typeof arg !== 'object') {
39
+ return '';
40
+ }
41
+
42
+ if (Array.isArray(arg)) {
43
+ return classNames.apply(null, arg);
44
+ }
45
+
46
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
47
+ return arg.toString();
48
+ }
49
+
50
+ var classes = '';
51
+
52
+ for (var key in arg) {
53
+ if (hasOwn.call(arg, key) && arg[key]) {
54
+ classes = appendClass(classes, key);
55
+ }
56
+ }
57
+
58
+ return classes;
59
+ }
60
+
61
+ function appendClass (value, newClass) {
62
+ if (!newClass) {
63
+ return value;
64
+ }
65
+
66
+ if (value) {
67
+ return value + ' ' + newClass;
68
+ }
69
+
70
+ return value + newClass;
53
71
  }
54
72
 
55
73
  if (module.exports) {
@@ -3867,46 +3885,50 @@ function styleInject(css, ref) {
3867
3885
  }
3868
3886
  }
3869
3887
 
3870
- var css_248z = ":root {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n}\n\n:root {\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%, 36%, 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%, 29%, 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%, 37%, 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, 100%, 38%, 1);\n}\n\n:root {\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 {\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 {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root {\n --border-radius: var(--space-1);\n --input-border-width: 2px;\n --alert-border-width: 2px;\n}\n\n:root {\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-button-primary-background-color: var(--rpf-navy-800);\n --rpf-button-primary-background-color-hover: var(--rpf-navy-900);\n --rpf-button-primary-background-color-active: var(--rpf-navy-600);\n --rpf-button-primary-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-primary-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n}\n\n.rpf-button {\n all: unset;\n align-items: center;\n color: var(--rpf-button-primary-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-height: calc(var(--rpf-button-lg-height) - var(--space-1) - var(--space-1));\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n width: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-primary-background-color);\n border-color: var(--rpf-button-primary-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-primary-background-color-hover);\n border-color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-primary-background-color-active);\n border-color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 3px solid var(--rpf-brand-raspberry);\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled:hover::before, .rpf-button:disabled::before, .rpf-button--disabled:hover::before, .rpf-button--disabled::before {\n border-color: var(--rpf-button-primary-background-color-disabled);\n background-color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-primary-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-primary-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-primary-text-color);\n border-color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-primary-text-color);\n border-color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-primary-text-color);\n border-color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-primary-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-primary-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-primary-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-primary-background-color-disabled);\n}\n.rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary:disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--icon-only {\n height: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n width: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-height: calc(var(--rpf-button-min-target-size) - var(--space-1) - var(--space-1));\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n height: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n width: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n";
3888
+ var css_248z$1 = "@font-face {\n font-family: \"Material Symbols Outlined\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-outlined.woff2\") format(\"woff2\");\n}\n.material-symbols-outlined {\n font-family: \"Material Symbols Outlined\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Rounded\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-rounded.woff2\") format(\"woff2\");\n}\n.material-symbols-rounded {\n font-family: \"Material Symbols Rounded\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Sharp\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-sharp.woff2\") format(\"woff2\");\n}\n.material-symbols-sharp {\n font-family: \"Material Symbols Sharp\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n";
3889
+ styleInject(css_248z$1);
3890
+
3891
+ var css_248z = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 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-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-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-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-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 --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}\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.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
3871
3892
  styleInject(css_248z);
3872
3893
 
3873
3894
  /* eslint-disable complexity */
3874
3895
  const Button = ({
3875
- type = "primary",
3876
- className,
3877
- enabled = true,
3878
- active,
3896
+ text,
3897
+ type,
3898
+ variant,
3899
+ size,
3879
3900
  icon,
3880
- small = false,
3881
- onClick = () => {},
3901
+ iconOnly,
3902
+ iconPosition,
3903
+ fullWidth,
3904
+ disabled,
3882
3905
  href,
3883
- text,
3884
3906
  title,
3885
- "aria-label": ariaLabel = "",
3886
- textOnHover = false,
3887
- textAlways = false
3907
+ className,
3908
+ onClick,
3909
+ "aria-label": ariaLabel
3888
3910
  }) => {
3889
- const iconOnly = icon && !textAlways;
3890
- const classes = classnames("rpf-button", {
3891
- active: active,
3892
- disabled: !enabled,
3893
- "rpf-button--sm": small,
3894
- // eslint-disable-next-line no-undefined
3895
- "rpf-button--icon-only": iconOnly,
3896
- text_on_hover: textOnHover,
3897
- [`rpf-button--${type}`]: type
3911
+ const iconButton = icon && iconOnly;
3912
+ const classes = classnames(
3913
+ // Static classes
3914
+ "rpf-button",
3915
+ // Conditional classes
3916
+ {
3917
+ [`rpf-button--${type}`]: type,
3918
+ "rpf-button--danger": variant === "danger",
3919
+ "rpf-button--sm": size === "small",
3920
+ "rpf-button--icon-only": iconButton,
3921
+ "rpf-button--full-width": fullWidth,
3922
+ disabled
3898
3923
  }, className);
3899
- const iconClasses = classnames("icon", "rpf-button__icon", {
3900
- icon_with_text: !textOnHover,
3901
- icon_without_text: textOnHover,
3902
- // eslint-disable-next-line no-undefined
3903
- icon_only: !textOnHover && !text
3904
- });
3905
- const content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
3924
+ const iconClasses = "rpf-button__icon material-symbols-sharp";
3925
+ const renderIcon = position => icon && iconPosition === position && /*#__PURE__*/React.createElement("span", {
3906
3926
  className: iconClasses
3907
- }, icon), text && !iconOnly && /*#__PURE__*/React.createElement("span", {
3927
+ }, icon);
3928
+ const renderText = () => text && !iconButton && /*#__PURE__*/React.createElement("span", {
3908
3929
  className: "text"
3909
- }, text));
3930
+ }, text);
3931
+ const content = /*#__PURE__*/React.createElement(React.Fragment, null, renderIcon("left"), renderText(), renderIcon("right"));
3910
3932
  if (href) {
3911
3933
  return /*#__PURE__*/React.createElement("a", {
3912
3934
  className: classes,
@@ -3920,24 +3942,34 @@ const Button = ({
3920
3942
  title: title,
3921
3943
  "aria-label": ariaLabel,
3922
3944
  onClick: onClick,
3923
- disabled: !enabled
3945
+ disabled: disabled
3924
3946
  }, content);
3925
3947
  };
3926
- /* eslint-enable complexity */
3927
-
3928
3948
  Button.propTypes = {
3929
3949
  type: PropTypes.string,
3930
3950
  className: PropTypes.string,
3931
- enabled: PropTypes.bool,
3932
- active: PropTypes.bool,
3933
- icon: PropTypes.element,
3951
+ disabled: PropTypes.bool,
3952
+ icon: PropTypes.string,
3934
3953
  href: PropTypes.string,
3935
3954
  onClick: PropTypes.func,
3936
3955
  text: PropTypes.string,
3937
- title: PropTypes.string,
3938
- textAlways: PropTypes.bool,
3956
+ iconOnly: PropTypes.bool,
3939
3957
  "aria-label": PropTypes.string,
3940
- textOnHover: PropTypes.bool
3958
+ title: PropTypes.string,
3959
+ iconPosition: PropTypes.oneOf(["left", "right"]),
3960
+ size: PropTypes.oneOf(["default", "small"]) // added size prop
3961
+ };
3962
+ Button.defaultProps = {
3963
+ type: "primary",
3964
+ variant: "",
3965
+ size: "default",
3966
+ icon: "",
3967
+ iconOnly: false,
3968
+ iconPosition: "left",
3969
+ fullWidth: false,
3970
+ disabled: false,
3971
+ onClick: () => {},
3972
+ "aria-label": ""
3941
3973
  };
3942
3974
 
3943
3975
  export { Button };
package/package.json CHANGED
@@ -1,58 +1,93 @@
1
1
  {
2
- "name": "@raspberrypifoundation/design-system-react",
3
- "version": "0.1.5",
4
- "description": "",
5
- "main": "dist/cjs/bundle.js",
6
- "module": "dist/esm/bundle.js",
7
- "type": "module",
8
- "files": [
9
- "dist"
10
- ],
11
- "scripts": {
12
- "build-css": "sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core --quiet src:src",
13
- "build-storybook": "npm install && npm run build-css && storybook build",
14
- "prepublishOnly": "npm run rollup",
15
- "rollup": "npm run build-css && rollup -c",
16
- "storybook": "npm run watch-css & storybook dev -p 6006",
17
- "test": "echo \"Error: no test specified\" && exit 1",
18
- "watch-css": "npm run build-css && sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core -q --watch src:src"
19
- },
20
- "repository": {
21
- "type": "git",
22
- "url": "https://github.com/RaspberryPiFoundation/design-system-react.git"
23
- },
24
- "keywords": [],
25
- "author": "",
26
- "license": "",
27
- "devDependencies": {
28
- "@babel/preset-env": "^7.22.20",
29
- "@babel/preset-react": "^7.18.6",
30
- "@newhighsco/storybook-addon-svgr": "^1.0.1",
31
- "@raspberrypifoundation/design-system-core": "^0.1.5",
32
- "@rollup/plugin-babel": "^6.0.3",
33
- "@rollup/plugin-commonjs": "^25.0.2",
34
- "@rollup/plugin-node-resolve": "^15.1.0",
35
- "@rollup/plugin-replace": "^5.0.2",
36
- "@storybook/addon-essentials": "^7.0.18",
37
- "@storybook/addon-interactions": "^7.0.18",
38
- "@storybook/addon-links": "^7.0.18",
39
- "@storybook/addon-mdx-gfm": "^7.0.18",
40
- "@storybook/blocks": "^7.0.18",
41
- "@storybook/react": "^7.0.18",
42
- "@storybook/react-webpack5": "^7.0.18",
43
- "@storybook/testing-library": "^0.1.0",
44
- "css-loader": "^6.8.1",
45
- "rollup": "^3.26.1",
46
- "rollup-plugin-postcss": "^4.0.0",
47
- "sass": "^1.69.5",
48
- "sass-loader": "^13.3.2",
49
- "storybook": "^7.0.18",
50
- "storybook-addon-sass-postcss": "^0.1.3"
51
- },
52
- "dependencies": {
53
- "classnames": "^2.3.2",
54
- "prop-types": "^15.8.1",
55
- "react": "^18.2.0",
56
- "react-dom": "^18.2.0"
57
- }
2
+ "name": "@raspberrypifoundation/design-system-react",
3
+ "version": "1.1.0",
4
+ "description": "",
5
+ "main": "dist/cjs/bundle.js",
6
+ "module": "dist/esm/bundle.js",
7
+ "type": "module",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "build-css": "sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core --quiet src:src",
13
+ "build-storybook": "npm install && npm run build-css && storybook build",
14
+ "prepublishOnly": "npm run rollup",
15
+ "lint": "eslint \"src/**/*.{js,jsx,json}\"",
16
+ "lint:fix": "eslint --fix \"src/**/*.{js,jsx,json}\"",
17
+ "rollup": "npm run build-css && rollup -c",
18
+ "storybook": "npm run watch-css & storybook dev -p 6006",
19
+ "test": "jest",
20
+ "watch-css": "npm run build-css && sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core -q --watch src:src"
21
+ },
22
+ "jest": {
23
+ "setupFilesAfterEnv": [
24
+ "<rootDir>/node_modules/@testing-library/jest-dom"
25
+ ],
26
+ "testEnvironment": "jsdom",
27
+ "moduleNameMapper": {
28
+ "material-symbols": "<rootDir>/mocks/material-symbols.js",
29
+ "\\.(css|scss)$": "identity-obj-proxy"
30
+ }
31
+ },
32
+ "repository": {
33
+ "type": "git",
34
+ "url": "https://github.com/RaspberryPiFoundation/design-system-react.git"
35
+ },
36
+ "keywords": [],
37
+ "author": "",
38
+ "license": "",
39
+ "devDependencies": {
40
+ "@babel/preset-env": "^7.22.20",
41
+ "@babel/preset-react": "^7.18.6",
42
+ "@newhighsco/storybook-addon-svgr": "^1.0.1",
43
+ "@raspberrypifoundation/design-system-core": "^0.3.4",
44
+ "@rollup/plugin-babel": "^6.0.3",
45
+ "@rollup/plugin-commonjs": "^25.0.2",
46
+ "@rollup/plugin-node-resolve": "^15.1.0",
47
+ "@rollup/plugin-replace": "^5.0.2",
48
+ "@storybook/addon-essentials": "^7.4.0",
49
+ "@storybook/addon-interactions": "^7.4.0",
50
+ "@storybook/addon-links": "^7.4.0",
51
+ "@storybook/addon-mdx-gfm": "^7.4.0",
52
+ "@storybook/blocks": "^7.4.0",
53
+ "@storybook/react": "^7.4.0",
54
+ "@storybook/react-webpack5": "^7.4.0",
55
+ "@storybook/testing-library": "^0.1.0",
56
+ "@testing-library/jest-dom": "^6.4.2",
57
+ "@testing-library/react": "^15.0.2",
58
+ "css-loader": "^6.8.1",
59
+ "eslint": "^7.11.0",
60
+ "eslint-config-prettier": "^8.8.0",
61
+ "eslint-config-react-app": "^6.0.0",
62
+ "eslint-plugin-flowtype": "^5.2.0",
63
+ "eslint-plugin-import": "^2.22.1",
64
+ "eslint-plugin-jest": "^24.1.0",
65
+ "eslint-plugin-jsx-a11y": "^6.3.1",
66
+ "eslint-plugin-prettier": "^4.2.1",
67
+ "eslint-plugin-react": "^7.21.5",
68
+ "eslint-plugin-react-hooks": "^4.2.0",
69
+ "eslint-plugin-testing-library": "^3.9.2",
70
+ "eslint-webpack-plugin": "^2.5.2",
71
+ "identity-obj-proxy": "^3.0.0",
72
+ "jest": "^29.7.0",
73
+ "jest-environment-jsdom": "^29.7.0",
74
+ "jest-github-actions-reporter": "^1.0.3",
75
+ "jest-junit": "^14.0.1",
76
+ "jsdom": "^24.0.0",
77
+ "prettier": "^2.8.8",
78
+ "rollup": "^3.26.1",
79
+ "rollup-plugin-postcss": "^4.0.0",
80
+ "sass": "^1.69.5",
81
+ "sass-loader": "^13.3.2",
82
+ "storybook": "^7.4.0",
83
+ "storybook-addon-pseudo-states": "^2.1.2",
84
+ "storybook-addon-sass-postcss": "^0.1.3"
85
+ },
86
+ "dependencies": {
87
+ "classnames": "^2.3.2",
88
+ "material-symbols": "^0.14.5",
89
+ "prop-types": "^15.8.1",
90
+ "react": "^18.2.0",
91
+ "react-dom": "^18.2.0"
92
+ }
58
93
  }