@utrecht/component-library-react 1.0.0-alpha.16 → 1.0.0-alpha.19

package/dist/cjs/ButtonLink.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { AnchorHTMLAttributes } from 'react';
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+    focusStyle?: boolean;
+    focusVisibleStyle?: boolean;
+    hoverStyle?: boolean;
+    visitedStyle?: boolean;
+}
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/cjs/ButtonLink.js

@@ -0,0 +1,52 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const onKeyDown = (evt) => {
+    var _a;
+    if (evt.key === ' ' && typeof ((_a = evt.target) === null || _a === void 0 ? void 0 : _a.click) === 'function') {
+        // Prevent other side-effects, such as scrolling
+        evt.preventDefault();
+        // Navigate to the link target
+        evt.target.click();
+    }
+};
+exports.ButtonLink = react_1.forwardRef((_a, ref) => {
+    var { children, className, external, focusStyle, focusVisibleStyle, hoverStyle, role } = _a, restProps = __rest(_a, ["children", "className", "external", "focusStyle", "focusVisibleStyle", "hoverStyle", "role"]);
+    let props = restProps;
+    if (role === 'button') {
+        // When this link is announced as button by accessibility tools,
+        // it should also behave like a button. Links are not activated
+        // using `Space`, so we need to implement that behaviour here
+        // to reach parity with the `button` element.
+        props = Object.assign(Object.assign({}, restProps), { onKeyDown });
+    }
+    return (jsx_runtime_1.jsx("a", Object.assign({}, props, { ref: ref, role: role, className: clsx_1.default('utrecht-button-link', {
+            'utrecht-button-link--external': external,
+            'utrecht-button-link--focus': focusStyle,
+            'utrecht-button-link--focus-visible': focusVisibleStyle,
+            'utrecht-button-link--hover': hoverStyle,
+        }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
+});
+exports.ButtonLink.displayName = 'utrecht-button-link';

package/dist/cjs/index.d.ts

@@ -5,6 +5,7 @@
 export { Article } from './Article';
 export { Backdrop } from './Backdrop';
 export { Button } from './Button';
+export { ButtonLink } from './ButtonLink';
 export { Checkbox } from './Checkbox';
 export { Document } from './Document';
 export { Fieldset } from './Fieldset';

package/dist/cjs/index.js

@@ -4,13 +4,15 @@
  * Copyright (c) 2022 Robbert Broersma
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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.ButtonLink = exports.Button = exports.Backdrop = exports.Article = void 0;
 var Article_1 = require("./Article");
 Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
 var Backdrop_1 = require("./Backdrop");
 Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var ButtonLink_1 = require("./ButtonLink");
+Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function () { return ButtonLink_1.ButtonLink; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var Document_1 = require("./Document");

package/dist/cjs/tsconfig.tsbuildinfo

@@ -191,6 +191,11 @@
         "signature": "b15639d90dff6cb5207f1a4fff8746882f0facf9737ee9c9be825825e856c167",
         "affectsGlobalScope": false
       },
+      "../../src/ButtonLink.tsx": {
+        "version": "6db70ce63edb9d2d733d8e713d24ee0650cf9551a192ec7651235c1d753385e4",
+        "signature": "aa12cb3bd2ebaa2ffdd640e5ad709dd3f9d219d91cb9de1e7a0f70f2daf3338f",
+        "affectsGlobalScope": false
+      },
       "../../src/Checkbox.tsx": {
         "version": "c76a571723e4f65f4a321ea296e6d230eca6eac2f23e3860ec2421d3711464b8",
         "signature": "19ebb05e622a7b936de314df131ae96f0278f1e377e92e936f521bad9e9cdceb",
@@ -387,8 +392,8 @@
         "affectsGlobalScope": false
       },
       "../../src/index.ts": {
-        "version": "e448c1234c52071b3c8bc0055737f776ec5eecacbb5c7f7b9c15eaf6c12891af",
-        "signature": "3093a005cd2ef3bd49b6a201d84888a83d7f5c3cdc43018808de149c33c84ab6",
+        "version": "ed671b86b20ba83070bd82d3c692139c7905125d349df7ee1f0fa8cd1ff1a3dc",
+        "signature": "b8355c166a0260065e7358f64340c2d2edeffa5b4b2b5a32eeeccc1abf5a5667",
         "affectsGlobalScope": false
       },
       "../../../../node_modules/@types/aria-query/index.d.ts": {
@@ -1483,6 +1488,11 @@
         "../../node_modules/@types/react/index.d.ts",
         "../../node_modules/@types/react/jsx-runtime.d.ts"
       ],
+      "../../src/ButtonLink.tsx": [
+        "../../../../node_modules/clsx/clsx.d.ts",
+        "../../node_modules/@types/react/index.d.ts",
+        "../../node_modules/@types/react/jsx-runtime.d.ts"
+      ],
       "../../src/Checkbox.tsx": [
         "../../../../node_modules/clsx/clsx.d.ts",
         "../../node_modules/@types/react/index.d.ts",
@@ -1683,6 +1693,7 @@
         "../../src/Article.tsx",
         "../../src/Backdrop.tsx",
         "../../src/Button.tsx",
+        "../../src/ButtonLink.tsx",
         "../../src/Checkbox.tsx",
         "../../src/Document.tsx",
         "../../src/Fieldset.tsx",
@@ -2162,6 +2173,9 @@
       "../../src/Button.tsx": [
         "../../node_modules/@types/react/index.d.ts"
       ],
+      "../../src/ButtonLink.tsx": [
+        "../../node_modules/@types/react/index.d.ts"
+      ],
       "../../src/Checkbox.tsx": [
         "../../node_modules/@types/react/index.d.ts"
       ],
@@ -2283,6 +2297,7 @@
         "../../src/Article.tsx",
         "../../src/Backdrop.tsx",
         "../../src/Button.tsx",
+        "../../src/ButtonLink.tsx",
         "../../src/Checkbox.tsx",
         "../../src/Document.tsx",
         "../../src/Fieldset.tsx",
@@ -2487,6 +2502,7 @@
       "../../src/Article.tsx",
       "../../src/Backdrop.tsx",
       "../../src/Button.tsx",
+      "../../src/ButtonLink.tsx",
       "../../src/Checkbox.tsx",
       "../../src/Document.tsx",
       "../../src/Fieldset.tsx",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.19",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -20,7 +20,8 @@
     "build": "tsc --project ./tsconfig.json",
     "clean": "rimraf dist/",
     "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose"
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "watch:test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
   },
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -41,6 +42,10 @@
       "types": "./dist/Button.d.ts",
       "default": "./dist/cjs/Button.js"
     },
+    "./ButtonLink": {
+      "types": "./dist/ButtonLink.d.ts",
+      "default": "./dist/cjs/ButtonLink.js"
+    },
     "./Checkbox": {
       "types": "./dist/Checkbox.d.ts",
       "default": "./dist/cjs/Checkbox.js"
@@ -221,5 +226,5 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
-  "gitHead": "7324d7dfead6c5c43b2f9f7ccbea6f94cb787975"
+  "gitHead": "c72b6f278896d14ea62919fd33438d19f475277b"
 }