@utrecht/component-library-react 1.0.0-alpha.98 → 1.0.0

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.
@@ -105,7 +129,7 @@ import { TableHeaderCell } from "@utrecht/component-library-react/TableHeaderCel
 import { TableRow } from "@utrecht/component-library-react/TableRow";
 import { Textarea } from "@utrecht/component-library-react/Textarea";
 import { Textbox } from "@utrecht/component-library-react/Textbox";
-import { URLValue } from "@utrecht/component-library-react/URLValue";
+import { URLData } from "@utrecht/component-library-react/URLData";
 import { UnorderedList } from "@utrecht/component-library-react/UnorderedList";
 import { UnorderedListItem } from "@utrecht/component-library-react/UnorderedListItem";
 ```