@utrecht/component-library-react 1.0.0-alpha.9 → 1.0.0-alpha.90

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 (12) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/Button.d.ts +19 -0
  3. package/dist/cjs/Button.js +21 -3
  4. package/dist/cjs/ButtonLink.d.ts +15 -0
  5. package/dist/cjs/ButtonLink.js +52 -0
  6. package/dist/cjs/CustomRadioButton.d.ts +11 -0
  7. package/dist/cjs/CustomRadioButton.js +29 -0
  8. package/dist/cjs/RadioButton.js +1 -1
  9. package/dist/cjs/index.d.ts +3 -1
  10. package/dist/cjs/index.js +8 -1
  11. package/dist/cjs/tsconfig.tsbuildinfo +4101 -511
  12. package/package.json +200 -51
package/README.md CHANGED
@@ -45,11 +45,11 @@ import { Document } from "@utrecht/component-library-react/Document";
45
45
  import { Heading1 } from "@utrecht/component-library-react/Heading1";
46
46
 
47
47
  // Package with CSS for white-label components
48
- import "@utrecht/component-library-css/dist/bem.css";
48
+ import "@utrecht/component-library-css";
49
49
 
50
50
  // Package with Utrecht design tokens for the white-label components
51
51
  // Substitute with your another theme for other organisations.
52
- import "@utrecht/design-tokens/dist/theme/index.css";
52
+ import "@utrecht/design-tokens/dist/index.css";
53
53
 
54
54
  export const MyPage = () => (
55
55
  // Class name to apply the design tokens from the theme
package/dist/cjs/Button.d.ts CHANGED
@@ -1,5 +1,24 @@
1
1
  import { ButtonHTMLAttributes } from 'react';
2
2
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
+ appearance?: string;
3
4
  busy?: boolean;
4
5
  }
5
6
  export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
7
+ export declare const PrimaryActionButton: {
8
+ ({ ...args }: {
9
+ [x: string]: any;
10
+ }): JSX.Element;
11
+ displayName: string;
12
+ };
13
+ export declare const SecondaryActionButton: {
14
+ ({ ...args }: {
15
+ [x: string]: any;
16
+ }): JSX.Element;
17
+ displayName: string;
18
+ };
19
+ export declare const SubtleButton: {
20
+ ({ ...args }: {
21
+ [x: string]: any;
22
+ }): JSX.Element;
23
+ displayName: string;
24
+ };
package/dist/cjs/Button.js CHANGED
@@ -14,12 +14,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Button = void 0;
17
+ exports.SubtleButton = exports.SecondaryActionButton = exports.PrimaryActionButton = exports.Button = void 0;
18
18
  const jsx_runtime_1 = require("react/jsx-runtime");
19
19
  const clsx_1 = __importDefault(require("clsx"));
20
20
  const react_1 = require("react");
21
21
  exports.Button = react_1.forwardRef((_a, ref) => {
22
- var { busy, disabled, children, className, type } = _a, restProps = __rest(_a, ["busy", "disabled", "children", "className", "type"]);
23
- return (jsx_runtime_1.jsx("button", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', className), "aria-busy": busy || undefined, disabled: disabled, type: type || 'button' }, { children: children }), void 0));
22
+ var { appearance, busy, disabled, children, className, type } = _a, restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "type"]);
23
+ return (jsx_runtime_1.jsx("button", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', className), "aria-busy": busy || undefined, disabled: disabled, type: type || 'button' }, { children: children }), void 0));
24
24
  });
25
25
  exports.Button.displayName = 'utrecht-button';
26
+ const PrimaryActionButton = (_a) => {
27
+ var args = __rest(_a, []);
28
+ return jsx_runtime_1.jsx(exports.Button, Object.assign({}, args, { appearance: "primary-action-button" }), void 0);
29
+ };
30
+ exports.PrimaryActionButton = PrimaryActionButton;
31
+ exports.PrimaryActionButton.displayName = 'utrecht-primary-action-button';
32
+ const SecondaryActionButton = (_a) => {
33
+ var args = __rest(_a, []);
34
+ return jsx_runtime_1.jsx(exports.Button, Object.assign({}, args, { appearance: "secondary-action-button" }), void 0);
35
+ };
36
+ exports.SecondaryActionButton = SecondaryActionButton;
37
+ exports.SecondaryActionButton.displayName = 'utrecht-secondary-action-button';
38
+ const SubtleButton = (_a) => {
39
+ var args = __rest(_a, []);
40
+ return jsx_runtime_1.jsx(exports.Button, Object.assign({}, args, { appearance: "subtle-button" }), void 0);
41
+ };
42
+ exports.SubtleButton = SubtleButton;
43
+ exports.SubtleButton.displayName = 'utrecht-subtle-button';
package/dist/cjs/ButtonLink.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Gemeente Utrecht
4
+ * Copyright (c) 2021 Robbert Broersma
5
+ */
6
+ import { AnchorHTMLAttributes } from 'react';
7
+ interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
8
+ external?: boolean;
9
+ focusStyle?: boolean;
10
+ focusVisibleStyle?: boolean;
11
+ hoverStyle?: boolean;
12
+ visitedStyle?: boolean;
13
+ }
14
+ export declare const ButtonLink: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
15
+ export {};
package/dist/cjs/ButtonLink.js ADDED
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.ButtonLink = void 0;
18
+ const jsx_runtime_1 = require("react/jsx-runtime");
19
+ /**
20
+ * @license EUPL-1.2
21
+ * Copyright (c) 2021 Gemeente Utrecht
22
+ * Copyright (c) 2021 Robbert Broersma
23
+ */
24
+ const clsx_1 = __importDefault(require("clsx"));
25
+ const react_1 = require("react");
26
+ const onKeyDown = (evt) => {
27
+ var _a;
28
+ if (evt.key === ' ' && typeof ((_a = evt.target) === null || _a === void 0 ? void 0 : _a.click) === 'function') {
29
+ // Prevent other side-effects, such as scrolling
30
+ evt.preventDefault();
31
+ // Navigate to the link target
32
+ evt.target.click();
33
+ }
34
+ };
35
+ exports.ButtonLink = react_1.forwardRef((_a, ref) => {
36
+ var { children, className, external, focusStyle, focusVisibleStyle, hoverStyle, role } = _a, restProps = __rest(_a, ["children", "className", "external", "focusStyle", "focusVisibleStyle", "hoverStyle", "role"]);
37
+ let props = restProps;
38
+ if (role === 'button') {
39
+ // When this link is announced as button by accessibility tools,
40
+ // it should also behave like a button. Links are not activated
41
+ // using `Space`, so we need to implement that behaviour here
42
+ // to reach parity with the `button` element.
43
+ props = Object.assign(Object.assign({}, restProps), { onKeyDown });
44
+ }
45
+ return (jsx_runtime_1.jsx("a", Object.assign({}, props, { ref: ref, role: role, className: clsx_1.default('utrecht-button-link', {
46
+ 'utrecht-button-link--external': external,
47
+ 'utrecht-button-link--focus': focusStyle,
48
+ 'utrecht-button-link--focus-visible': focusVisibleStyle,
49
+ 'utrecht-button-link--hover': hoverStyle,
50
+ }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
51
+ });
52
+ exports.ButtonLink.displayName = 'utrecht-button-link';
package/dist/cjs/CustomRadioButton.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+ import { InputHTMLAttributes } from 'react';
6
+ export declare type CustomRadioButtonProps = InputHTMLAttributes<HTMLInputElement> & {
7
+ invalid?: boolean;
8
+ };
9
+ export declare const CustomRadioButton: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
10
+ invalid?: boolean | undefined;
11
+ } & import("react").RefAttributes<HTMLInputElement>>;
package/dist/cjs/CustomRadioButton.js ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.CustomRadioButton = void 0;
18
+ const jsx_runtime_1 = require("react/jsx-runtime");
19
+ /**
20
+ * @license EUPL-1.2
21
+ * Copyright (c) 2021 Robbert Broersma
22
+ */
23
+ const clsx_1 = __importDefault(require("clsx"));
24
+ const react_1 = require("react");
25
+ exports.CustomRadioButton = react_1.forwardRef((_a, ref) => {
26
+ var { disabled, required, className, invalid } = _a, restProps = __rest(_a, ["disabled", "required", "className", "invalid"]);
27
+ return (jsx_runtime_1.jsx("input", Object.assign({ type: "radio", "aria-invalid": invalid || undefined, disabled: disabled, required: required, ref: ref, className: clsx_1.default('utrecht-custom-radio-button', disabled && 'utrecht-custom-radio-button--disabled', invalid && 'utrecht-custom-radio-button--invalid', className) }, restProps), void 0));
28
+ });
29
+ exports.CustomRadioButton.displayName = 'utrecht-custom-radio-button';
package/dist/cjs/RadioButton.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const react_1 = require("react");
21
21
  exports.RadioButton = react_1.forwardRef((_a, ref) => {
22
22
  var { checked, disabled, invalid, required, className } = _a, restProps = __rest(_a, ["checked", "disabled", "invalid", "required", "className"]);
23
- return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: "radio", checked: checked, className: clsx_1.default('utrecht-radio-button', 'utrecht-radio-button--html-input', checked && 'utrecht-radio-button--checked', disabled && 'utrecht-radio-button--disabled', invalid && 'utrecht-radio-button--invalid', required && 'utrecht-radio-button--required', className), disabled: disabled, required: required }), void 0));
23
+ return (jsx_runtime_1.jsx("input", Object.assign({}, restProps, { ref: ref, type: "radio", className: clsx_1.default('utrecht-radio-button', 'utrecht-radio-button--html-input', checked && 'utrecht-radio-button--checked', disabled && 'utrecht-radio-button--disabled', invalid && 'utrecht-radio-button--invalid', required && 'utrecht-radio-button--required', className), disabled: disabled, required: required }), void 0));
24
24
  });
25
25
  exports.RadioButton.displayName = 'utrecht-radio-button';
package/dist/cjs/index.d.ts CHANGED
@@ -4,8 +4,10 @@
4
4
  */
5
5
  export { Article } from './Article';
6
6
  export { Backdrop } from './Backdrop';
7
- export { Button } from './Button';
7
+ export { Button, PrimaryActionButton, SecondaryActionButton, SubtleButton } from './Button';
8
+ export { ButtonLink } from './ButtonLink';
8
9
  export { Checkbox } from './Checkbox';
10
+ export { CustomRadioButton } from './CustomRadioButton';
9
11
  export { Document } from './Document';
10
12
  export { Fieldset } from './Fieldset';
11
13
  export { FieldsetLegend } from './FieldsetLegend';
package/dist/cjs/index.js CHANGED
@@ -4,15 +4,22 @@
4
4
  * Copyright (c) 2022 Robbert Broersma
5
5
  */
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.UnorderedListItem = exports.UnorderedList = exports.URLValue = exports.Textbox = exports.Textarea = exports.TableRow = exports.TableHeaderCell = exports.TableHeader = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Surface = exports.Separator = exports.SelectOption = exports.Select = exports.RadioButton = exports.Paragraph = exports.PageHeader = exports.PageFooter = exports.PageContent = exports.Page = exports.OrderedListItem = exports.OrderedList = exports.Link = exports.Heading6 = exports.Heading5 = exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = exports.HTMLContent = exports.FormLabel = exports.FormFieldDescription = exports.FormField = exports.FieldsetLegend = exports.Fieldset = exports.Document = exports.Checkbox = exports.Button = exports.Backdrop = exports.Article = void 0;
7
+ exports.UnorderedListItem = exports.UnorderedList = exports.URLValue = exports.Textbox = exports.Textarea = exports.TableRow = exports.TableHeaderCell = exports.TableHeader = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Surface = exports.Separator = exports.SelectOption = exports.Select = exports.RadioButton = exports.Paragraph = exports.PageHeader = exports.PageFooter = exports.PageContent = exports.Page = exports.OrderedListItem = exports.OrderedList = exports.Link = exports.Heading6 = exports.Heading5 = exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = exports.HTMLContent = exports.FormLabel = exports.FormFieldDescription = exports.FormField = exports.FieldsetLegend = exports.Fieldset = exports.Document = exports.CustomRadioButton = exports.Checkbox = exports.ButtonLink = exports.SubtleButton = exports.SecondaryActionButton = exports.PrimaryActionButton = exports.Button = exports.Backdrop = exports.Article = void 0;
8
8
  var Article_1 = require("./Article");
9
9
  Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
10
10
  var Backdrop_1 = require("./Backdrop");
11
11
  Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
12
12
  var Button_1 = require("./Button");
13
13
  Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
14
+ Object.defineProperty(exports, "PrimaryActionButton", { enumerable: true, get: function () { return Button_1.PrimaryActionButton; } });
15
+ Object.defineProperty(exports, "SecondaryActionButton", { enumerable: true, get: function () { return Button_1.SecondaryActionButton; } });
16
+ Object.defineProperty(exports, "SubtleButton", { enumerable: true, get: function () { return Button_1.SubtleButton; } });
17
+ var ButtonLink_1 = require("./ButtonLink");
18
+ Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function () { return ButtonLink_1.ButtonLink; } });
14
19
  var Checkbox_1 = require("./Checkbox");
15
20
  Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
21
+ var CustomRadioButton_1 = require("./CustomRadioButton");
22
+ Object.defineProperty(exports, "CustomRadioButton", { enumerable: true, get: function () { return CustomRadioButton_1.CustomRadioButton; } });
16
23
  var Document_1 = require("./Document");
17
24
  Object.defineProperty(exports, "Document", { enumerable: true, get: function () { return Document_1.Document; } });
18
25
  var Fieldset_1 = require("./Fieldset");