ROOS-338: Heading component updated to support Icons and changed HTML structure of the component (#1583)

Author: PLassche-dictu

.changeset/calm-olives-exercise.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/component-library-react": minor
+---
+
+Update Heading component so html strutures inside of content to be properly handled

.changeset/clever-rocks-rescue.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/css-heading": minor
+---
+
+Update Heading component to support Icons before and after and not have issues with spans or other html inside the content of the Heading

.changeset/rare-carpets-double.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/component-library-css": minor
+---
+
+Remove styling from heading css that is not used anymore for the component

components/heading/src/index.scss

@@ -10,10 +10,6 @@
   color: var(--rvo-color-lintblauw);
   display: flex;
 
-  & .rvo-icon {
-    --utrecht-icon-color: var(--rvo-color-lintblauw);
-  }
-
   &--normal {
     font-weight: var(--rvo-font-weight-normal);
   }
@@ -32,26 +28,13 @@
       margin-block-start: var(--utrecht-heading-#{$i}-margin-block-start);
     }
   }
-}
 
-// If there is an RVO Icon available then override the sizes through these selectors
-h1.rvo-heading,
-h2.rvo-heading {
-  .rvo-icon {
-    --utrecht-icon-size: var(--rvo-icon-xl-width);
+  &__icon {
+    display: flex;
   }
-}
-
-h3.rvo-heading,
-h4.rvo-heading {
-  .rvo-icon {
-    --utrecht-icon-size: var(--rvo-icon-lg-width);
-  }
-}
 
-h5.rvo-heading,
-h6.rvo-heading {
-  .rvo-icon {
-    --utrecht-icon-size: var(--rvo-icon-md-width);
+  &__content {
+    display: block;
+    font-size: inherit;
   }
 }

components/heading/stories/heading.stories.tsx

@@ -1,4 +1,4 @@
-import { Heading, Icon } from '@nl-rvo/component-library-react';
+import { Heading } from '@nl-rvo/component-library-react';
 import { defaultArgs } from '@nl-rvo/component-library-react/src/components/heading/defaultArgs';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
@@ -13,6 +13,13 @@ const argTypes = {
   fontWeightNormal: {
     control: 'boolean',
   },
+  showIcon: {
+    options: ['no', 'before', 'after'],
+    control: { type: 'select' },
+  },
+  icon: {
+    control: 'string',
+  },
   children: {
     table: {
       disable: true,
@@ -46,9 +53,8 @@ export const HeadingIconBefore: Story = {
   args: defaultArgs,
   name: 'Heading with Icon Before',
   render: (args) => (
-    <Heading {...args}>
-      <Icon icon={'home'} />
-      Heading with Icon
+    <Heading {...args} showIcon="before" icon="home">
+      Heading with Icon before
     </Heading>
   ),
 };
@@ -57,9 +63,8 @@ export const HeadingIconAfter: Story = {
   args: defaultArgs,
   name: 'Heading with Icon After',
   render: (args) => (
-    <Heading {...args}>
-      Heading with Icon
-      <Icon icon={'home'} />
+    <Heading {...args} showIcon="before" icon="home">
+      Heading with Icon after
     </Heading>
   ),
 };

packages/component-library-react/src/components/heading/index.tsx

@@ -6,13 +6,17 @@ import clsx from 'clsx';
 import React, { createElement, ReactNode } from 'react';
 import parseContentMarkup from '../../utils/parseContentMarkup';
 import '@nl-rvo/component-library-css/dist/components/heading.css';
+import Icon from '../icon';
+import { IconType } from '../icon/types';
 
 export interface IHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   noMargins?: boolean;
   fontWeightNormal?: boolean;
   children?: string | ReactNode;
   className?: string;
+  showIcon?: 'before' | 'after';
+  icon?: IconType;
 }
 
 export const Heading: React.FC<IHeadingProps> = ({
@@ -21,8 +25,29 @@ export const Heading: React.FC<IHeadingProps> = ({
   fontWeightNormal,
   className,
   children,
+  showIcon,
+  icon,
   ...rest
 }: IHeadingProps) => {
+  let iconSize: 'xl' | 'lg' | 'md' = 'xl';
+  switch (type) {
+    case 'h1':
+    case 'h2':
+      iconSize = 'xl';
+      break;
+    case 'h3':
+    case 'h4':
+      iconSize = 'lg';
+      break;
+    case 'h5':
+    case 'h6':
+      iconSize = 'md';
+      break;
+    default:
+      iconSize = 'xl';
+      break;
+  }
+
   const Tag = createElement(
     type,
     {
@@ -36,7 +61,19 @@ export const Heading: React.FC<IHeadingProps> = ({
       ),
       ...rest,
     },
-    children && parseContentMarkup(children),
+    <>
+      {showIcon === 'before' && icon && (
+        <div className="rvo-heading__icon">
+          <Icon icon={icon} color="lintblauw" size={iconSize} />
+        </div>
+      )}
+      <div className="rvo-heading__content">{children && parseContentMarkup(children)}</div>
+      {showIcon === 'after' && icon && (
+        <div className="rvo-heading__icon">
+          <Icon icon={icon} color="lintblauw" size={iconSize} />
+        </div>
+      )}
+    </>,
   );
 
   return Tag;