refactor: use the utrecht typography react components, instead of onl…

…y the css classes

components/Typography/package.json

@@ -32,7 +32,8 @@
   "dependencies": {
     "@gemeente-denhaag/design-tokens-common": "workspace:*",
     "@gemeente-denhaag/design-tokens-components": "workspace:*",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/component-library-react": "6.0.0",
+    "@utrecht/components": "7.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

components/Typography/src/Heading1.tsx

@@ -1,13 +1,5 @@
-import React from 'react';
+import { Heading1, Heading1Props } from '@utrecht/component-library-react';
 import './heading.scss';
-import clsx from 'clsx';
 
-export interface Heading1Props {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const Heading1: React.FC<Heading1Props> = (props: Heading1Props) => {
-  const rootClassNames = clsx('utrecht-heading-1', props.className);
-  return <h1 className={rootClassNames}>{props.children}</h1>;
-};
+export { Heading1, Heading1Props };
+export default Heading1;

components/Typography/src/Heading2.tsx

@@ -1,13 +1,5 @@
-import React from 'react';
+import { Heading2, Heading2Props } from '@utrecht/component-library-react';
 import './heading.scss';
-import clsx from 'clsx';
 
-export interface Heading2Props {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const Heading2 = (props: Heading2Props) => {
-  const rootClassNames = clsx('utrecht-heading-2', props.className);
-  return <h2 className={rootClassNames}>{props.children}</h2>;
-};
+export { Heading2, Heading2Props };
+export default Heading2;

components/Typography/src/Heading3.tsx

@@ -1,13 +1,5 @@
-import React from 'react';
+import { Heading3, Heading3Props } from '@utrecht/component-library-react';
 import './heading.scss';
-import clsx from 'clsx';
 
-export interface Heading3Props {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const Heading3: React.FC<Heading3Props> = (props: Heading3Props) => {
-  const rootClassNames = clsx('utrecht-heading-3', props.className);
-  return <h3 className={rootClassNames}>{props.children}</h3>;
-};
+export { Heading3, Heading3Props };
+export default Heading3;

components/Typography/src/Heading4.tsx

@@ -1,13 +1,5 @@
-import React from 'react';
+import { Heading4, Heading4Props } from '@utrecht/component-library-react';
 import './heading.scss';
-import clsx from 'clsx';
 
-export interface Heading4Props {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const Heading4: React.FC<Heading4Props> = (props: Heading4Props) => {
-  const rootClassNames = clsx('utrecht-heading-4', props.className);
-  return <h4 className={rootClassNames}>{props.children}</h4>;
-};
+export { Heading4, Heading4Props };
+export default Heading4;

components/Typography/src/Heading5.tsx

@@ -1,13 +1,5 @@
-import React from 'react';
+import { Heading5, Heading5Props } from '@utrecht/component-library-react';
 import './heading.scss';
-import clsx from 'clsx';
 
-export interface Heading5Props {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const Heading5: React.FC<Heading5Props> = (props: Heading5Props) => {
-  const rootClassNames = clsx('utrecht-heading-5', props.className);
-  return <h5 className={rootClassNames}>{props.children}</h5>;
-};
+export { Heading5, Heading5Props };
+export default Heading5;