@utrecht/component-library-react 1.0.0-alpha.100 → 1.0.0-alpha.103

package/README.md

@@ -48,7 +48,7 @@ import { Heading1 } from "@utrecht/component-library-react/Heading1";
 import "@utrecht/component-library-css";
 
 // Package with Utrecht design tokens for the white-label components
-// Substitute with your another theme for other organisations.
+// Substitute with your another theme for other organizations.
 import "@utrecht/design-tokens/dist/index.css";
 
 export const MyPage = () => (
@@ -59,6 +59,30 @@ export const MyPage = () => (
 );
 ```
 
+Only when you use the `<HTMLContent/>` component, you should import the `html.css` from the `component-library-css`
+
+```jsx
+import { HTMLContent } from "@utrecht/component-library-react";
+
+import "@utrecht/component-library-css/dist/html.css";
+import "@utrecht/design-tokens/dist/index.css";
+
+export const MyPage = () => (
+  // Class name to apply the design tokens from the theme
+  <HTMLContent
+    className="utrecht-theme"
+    dangerouslySetInnerHTML={{
+      _html: `<h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>`,
+    }}
+  />
+);
+```
+
 ## Components overview
 
 We make components for React available when needed in a project. Not every component is available yet, and we welcome you to discuss contributions.

package/dist/cjs/ButtonLink.d.ts

@@ -6,10 +6,6 @@
 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

@@ -33,7 +33,7 @@ const onKeyDown = (evt) => {
     }
 };
 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"]);
+    var { children, className, external, role } = _a, restProps = __rest(_a, ["children", "className", "external", "role"]);
     let props = restProps;
     if (role === 'button') {
         // When this link is announced as button by accessibility tools,
@@ -42,11 +42,6 @@ exports.ButtonLink = react_1.forwardRef((_a, ref) => {
         // 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));
+    return (jsx_runtime_1.jsx("a", Object.assign({}, props, { ref: ref, role: role, className: clsx_1.default('utrecht-button-link', 'utrecht-button-link--html-button', { 'utrecht-button-link--external': external }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
 });
 exports.ButtonLink.displayName = 'ButtonLink';

package/dist/cjs/Link.d.ts

@@ -5,11 +5,6 @@
  */
 import { AnchorHTMLAttributes } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    activeStyle?: boolean;
     external?: boolean;
-    focusStyle?: boolean;
-    focusVisibleStyle?: boolean;
-    hoverStyle?: boolean;
-    visitedStyle?: boolean;
 }
 export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/Link.js

@@ -24,19 +24,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 exports.Link = react_1.forwardRef((_a, ref) => {
-    var { children, className, activeStyle, external, focusStyle, focusVisibleStyle, hoverStyle, visitedStyle } = _a, restProps = __rest(_a, ["children", "className", "activeStyle", "external", "focusStyle", "focusVisibleStyle", "hoverStyle", "visitedStyle"]);
+    var { children, className, external } = _a, restProps = __rest(_a, ["children", "className", "external"]);
     return (
     // "utrecht-link--telephone" does not have a corresponding API,
     // since it is primarily a basis for implementing input[href^="tel"].
     // Telephone number rendering in React is best achieved using composition
     // of the TelephoneValue component.
-    jsx_runtime_1.jsx("a", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-link', {
-            'utrecht-link--active': activeStyle,
-            'utrecht-link--external': external,
-            'utrecht-link--focus': focusStyle,
-            'utrecht-link--focus-visible': focusVisibleStyle,
-            'utrecht-link--hover': hoverStyle,
-            'utrecht-link--visited': visitedStyle,
-        }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
+    jsx_runtime_1.jsx("a", Object.assign({}, restProps, { ref: ref, className: clsx_1.default('utrecht-link', { 'utrecht-link--external': external }, className), rel: external ? 'external noopener noreferrer' : undefined }, { children: children }), void 0));
 });
 exports.Link.displayName = 'Link';

package/dist/cjs/tsconfig.tsbuildinfo

@@ -247,8 +247,8 @@
         "affectsGlobalScope": false
       },
       "../../src/ButtonLink.tsx": {
-        "version": "694406ba1909b3fc21f22984853625991011d8ddd5804269dcca7b64e956c38a",
-        "signature": "aa12cb3bd2ebaa2ffdd640e5ad709dd3f9d219d91cb9de1e7a0f70f2daf3338f",
+        "version": "7c63627202382e76b9994bb5b2a22d9d01e8bb30eca2be5ff2627650c5d3e6fc",
+        "signature": "f673656c10a96499774be1103a847d59553a908e6e4aaecb95026b01b2381d2d",
         "affectsGlobalScope": false
       },
       "../../src/Checkbox.tsx": {
@@ -327,8 +327,8 @@
         "affectsGlobalScope": false
       },
       "../../src/Link.tsx": {
-        "version": "5d97281dd94a86ecd631ad31b33de46c5f1b5cb84fbe9347eca6b4abebd8459a",
-        "signature": "2c3dea1f70e4b6112a348617888556c22da0ddd9b6c11830666266abe3cb13bd",
+        "version": "912ebb7e21623103a4fd89a1de8724830d9b2dfd86215ca26462ee9d7fedce59",
+        "signature": "d663c57a4e5efebf3b2cd9bc0b84a92bfa0784dbcea1d026cce939c00db0359b",
         "affectsGlobalScope": false
       },
       "../../src/OrderedList.tsx": {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.100",
+  "version": "1.0.0-alpha.103",
   "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",
@@ -373,5 +373,5 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
-  "gitHead": "0e6201bcf27fee724a1b5cc43596d33e5932ccf2"
+  "gitHead": "fee03baa149ec04dae8fceca6281824851b900ea"
 }