refactor: Header component

IFRCGo · Jun 18, 2024 · 5576240 · 5576240
1 parent 9cc2b1b
commit 5576240
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/packages/go-ui-storybook/src/stories/Header.stories.tsx b/packages/go-ui-storybook/src/stories/Header.stories.tsx
@@ -4,16 +4,13 @@ import {
     HeaderProps,
 } from '@ifrc-go/ui';
 import type {
-    Args,
     Meta,
     StoryObj,
 } from '@storybook/react';
 
 import Header from './Header';
 
-type HeaderSpecificProps = HeaderProps;
-
-type Story = StoryObj<HeaderSpecificProps>;
+type Story = StoryObj<HeaderProps>;
 
 const meta: Meta<typeof Header> = {
     title: 'Components/Header',
@@ -29,55 +26,51 @@ const meta: Meta<typeof Header> = {
 };
 
 export default meta;
-function Template(args:Args) {
-    return (
-        <Header
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
-            heading="Company Overview"
-        />
-    );
-}
 
 export const Default: Story = {
-    render: Template,
     args: {
-        headingDescription: 'Learn more about our company and what sets us apart in the market.',
+        heading: 'Overview of the International Federation of Red Cross and Red Crescent Societies (IFRC)',
+        headingDescription: 'The International Federation of Red Cross and Red Crescent Societies (IFRC) is the world’s largest humanitarian network.',
         headingLevel: 2,
+        headingContainerClassName: 'header-children',
     },
 };
 
-export const EllipsizeHeading: Story = {
-    render: Template,
+export const WithEllipsizedHeading: Story = {
     args: {
-        headingDescription: 'Learn more about our company and what sets us apart in the market.',
+        ...Default.args,
+        headingContainerClassName: 'header-ellipsized',
         ellipsizeHeading: true,
     },
 };
 
+export const WithWrapHeadingContent: Story = {
+    args: {
+        ...Default.args,
+        wrapHeadingContent: true,
+        headingContainerClassName: 'header-children',
+        className: 'header-wrapped',
+    },
+};
+
 export const WithIcon: Story = {
-    render: Template,
     args: {
-        headingLevel: 2,
-        heading: 'Introduction',
+        ...Default.args,
+        iconsContainerClassName: 'header-icon',
         icons: <WikiHelpSectionLineIcon />,
     },
 };
 
 export const WithAction: Story = {
-    render: Template,
     args: {
-        heading: 'Company Overview',
-        headingDescription: 'Learn more about our company and what sets us apart in the market.',
-        headingLevel: 2,
-        actions: [
+        ...Default.args,
+        actions: (
             <Button
                 name={undefined}
                 variant="primary"
             >
-                Export
-            </Button>,
-        ],
-
+                Learn More
+            </Button>
+        ),
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/Header.tsx b/packages/go-ui-storybook/src/stories/Header.tsx
@@ -1,11 +1,9 @@
 import {
     Header as PureHeader,
-    HeaderProps as PureHeaderProps,
+    HeaderProps,
 } from '@ifrc-go/ui';
 
-type HeaderProps = PureHeaderProps
-
-function Header(props:HeaderProps) {
+function Header(props: HeaderProps) {
     return (
         <PureHeader {...props} /> // eslint-disable-line react/jsx-props-no-spreading
     );

diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css
@@ -75,3 +75,22 @@
 .progress-bar{
     width:20rem;
 }
+
+.header-children {
+    display: flex;
+    flex-direction: column;
+}
+
+.header-ellipsized {
+    display: flex;
+    flex-direction: column;
+    width: 30rem;
+}
+
+.header-wrapped {
+    width: 30rem;
+}
+
+.header-icon {
+    font-size: var(--go-ui-font-size-4xl);
+}