Add Icon as jsx child and extend story to cover errorLayout inside a card

Author: Younes Chellaf

src/layouts/ErrorLayout/ErrorLayout.module.scss

@@ -22,7 +22,7 @@
 
       .bk-error-icon {
         color: bk.$color-blackberry-100;
-        font-size: 7rem;
+        font-size: 5rem;
         padding: bk.$spacing-4;
       }
 

src/layouts/ErrorLayout/ErrorLayout.stories.tsx

@@ -5,8 +5,10 @@
 import * as React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from '../../components/graphics/Icon/Icon.tsx';
 import { Button } from '../../components/actions/Button/Button.tsx';
 import { ErrorLayout } from './ErrorLayout.tsx';
+import { Card } from '../../components/containers/Card/Card.tsx';
 
 type ErrorLayoutArgs = React.ComponentProps<typeof ErrorLayout>;
 type Story = StoryObj<ErrorLayoutArgs>;
@@ -19,13 +21,13 @@ export default {
   },
 } satisfies Meta<ErrorLayoutArgs>;
 
-export const ErrorApp: Story = {
-  render: () => {
-    return (
+export const ErrorLayoutStandard : Story = {
+  args: {
+    children: (
       <ErrorLayout
         title="Error"
         description="In case there is a secondary text to be added withIn case there is a secondary text to be added with"
-        icon="badge-dashboard"
+        icon={<Icon icon="badge-dashboard"/>}
         redirectLinkLabel="Link"
         redirectTo="#"
       >
@@ -38,6 +40,32 @@ export const ErrorApp: Story = {
           </Button>
         </ErrorLayout.Actions>
       </ErrorLayout>
-    );
+    )
+  }
+};
+
+export const ErrorLayoutInCard : Story = {
+  decorators: [Story => <Card><Story/></Card>],
+  args: {
+    children: (
+      <>
+        <ErrorLayout
+          title="Error"
+          description="In case there is a secondary text to be added withIn case there is a secondary text to be added with"
+          icon={<Icon icon="audit-log"/>}
+          redirectLinkLabel="Link"
+          redirectTo="#"
+        >
+          <ErrorLayout.Actions>
+            <Button kind ='secondary'>
+              Back
+            </Button>
+            <Button kind ='primary'>
+              Refresh
+            </Button>
+          </ErrorLayout.Actions>
+        </ErrorLayout>
+      </>
+    ),
   },
 };

src/layouts/ErrorLayout/ErrorLayout.tsx

@@ -23,7 +23,7 @@ export type ErorrLayoutProps = Omit<ComponentProps<'div'>, 'title'> & {
   flat?: undefined | boolean,
 
   /** The error icon */
-  icon: IconName,
+  icon?: undefined | React.ReactElement,
 
   /** The title of the error, to be displayed in the under the icon. */
   title: string,
@@ -63,7 +63,7 @@ export const ErrorLayout = Object.assign(
         )}
       >
         <div className={cl['bk-error-layout__content']}>
-          <Icon className={cl['bk-error-icon']} icon={icon}/>
+          {icon && <span className={cx('_icon', cl['bk-error-icon'])}>{icon}</span>}
           <H2 className={cl['bk-error-title']}>{title}</H2>
           {description &&
             <div className={cl['bk-error-description']}>