✨ Added possibility of react node as child for InformationalNotice (#1186)

Author: mariush2

src/molecules/InformationalNotice/InformationalNotice.stories.tsx

@@ -1,7 +1,10 @@
+import { Typography } from '@equinor/eds-core-react';
 import { info_circle } from '@equinor/eds-icons';
 import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { InformationalNotice } from './InformationalNotice';
+import { spacings } from 'src/atoms/style';
+import { Chip } from 'src/molecules/Chip/Chip';
 import { VariantShowcase } from 'src/storybook/VariantShowcase';
 
 import { expect } from 'storybook/test';
@@ -37,7 +40,7 @@ export const Default: Story = {
       'd',
       info_circle.svgPathData as string
     );
-    await expect(canvas.getByText(args.children)).toBeInTheDocument();
+    await expect(canvas.getByText(args.children as string)).toBeInTheDocument();
   },
 };
 
@@ -57,3 +60,32 @@ export const Variants: Story = {
     />
   ),
 };
+
+export const ElementsAsChildren: Story = {
+  args: {
+    children: (
+      <>
+        <Typography variant="body_long">
+          <b>Section mismatch.</b> The current sections differ from Wellcom.
+          Please review before proceeding.
+        </Typography>
+        <div style={{ display: 'flex', gap: spacings.small }}>
+          <Typography variant="body_long">
+            <b>Sections missing:</b>
+          </Typography>
+          <Chip>18&#34;</Chip>
+          <Chip>8&#34;</Chip>
+        </div>
+      </>
+    ),
+  },
+  decorators: (StoryFn) => (
+    <div style={{ width: '400px' }}>
+      <StoryFn />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('18"')).toBeInTheDocument();
+    await expect(canvas.getByText('8"')).toBeInTheDocument();
+  },
+};

src/molecules/InformationalNotice/InformationalNotice.styles.ts

@@ -1,5 +1,5 @@
 import { InformationalNoticeProps } from './InformationalNotice';
-import { colors, spacings } from 'src/atoms/style';
+import { colors, shape, spacings } from 'src/atoms/style';
 
 import styled, { css } from 'styled-components';
 
@@ -28,6 +28,7 @@ interface ContainerProps {
 export const Container = styled.div<ContainerProps>`
   display: grid;
   grid-template-columns: auto 1fr;
+  border-radius: ${shape.corners.borderRadius};
   background: ${({ $color }) =>
     $color === 'white'
       ? colors.ui.background__default.rgba

src/molecules/InformationalNotice/InformationalNotice.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { info_circle } from '@equinor/eds-icons';
@@ -10,7 +10,7 @@ import { colors } from 'src/atoms/style';
 export interface InformationalNoticeProps {
   color?: 'grey' | 'white';
   spacing?: 'compact' | 'comfortable';
-  children: string;
+  children: string | ReactNode | ReactNode[];
 }
 
 export const InformationalNotice: FC<InformationalNoticeProps> = ({
@@ -24,6 +24,10 @@ export const InformationalNotice: FC<InformationalNoticeProps> = ({
       color={colors.text.static_icons__default.rgba}
       size={getIconSize(spacing)}
     />
-    <Typography variant="body_long">{children}</Typography>
+    {typeof children === 'string' ? (
+      <Typography variant="body_long">{children}</Typography>
+    ) : (
+      children
+    )}
   </Container>
 );