feat(Header): new component

configs/rollup.config.js

@@ -29,7 +29,8 @@ const TSComponentsList = [
     'Image',
     'Rating',
     'InteractiveWidget',
-    'GeneUIProvider'
+    'GeneUIProvider',
+    'Header'
 ];
 
 const getInputs = (name, dir) => {

src/index.ts

@@ -144,6 +144,7 @@ export { default as TransferList } from './lib/organisms/TransferList';
 export { default as RichEditor } from './lib/organisms/RichEditor';
 export { default as Drawer } from './lib/organisms/Drawer';
 export { default as ActionableList } from './lib/organisms/ActionableList';
+export { default as Header } from './lib/organisms/Header';
 
 // Providers
 export { default as GeneUIProvider, GeneUIDesignSystemContext } from './lib/providers/GeneUIProvider';

src/lib/organisms/Header/Header.scss

@@ -0,0 +1,5 @@
+.header {
+    // Your styles here
+    color: var(--guit-ref-color-magenta-500base);
+    font-size: var(--guit-sem-font-caption-large-medium-font-size);
+}

src/lib/organisms/Header/Header.stories.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { Meta } from '@storybook/react';
+
+// Helpers
+import { args, propCategory } from '../../../../stories/assets/storybook.globals';
+
+// Components
+import Header, { IHeaderProps } from './index';
+
+const meta: Meta<typeof Header> = {
+    title: 'Organisms/Header',
+    component: Header,
+    argTypes: {
+        type: args({ control: false, ...propCategory.others })
+    },
+    args: {
+        type: 'fill the type prop value'
+    } as IHeaderProps
+};
+
+export default meta;
+
+const Template: FC<IHeaderProps> = (args) => <Header {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {} as IHeaderProps;

src/lib/organisms/Header/Header.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ReactWrapper, mount } from 'enzyme';
+
+// Components
+import Header, { IHeaderProps } from './index';
+
+describe('Header ', () => {
+    let setup: ReactWrapper<IHeaderProps>;
+    beforeEach(() => (setup = mount(<Header />)));
+
+    it('renders without crashing', () => {
+        expect(setup.exists()).toBeTruthy();
+    });
+
+    // Your tests here
+});

src/lib/organisms/Header/Header.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+// Styles
+import './Header.scss';
+
+interface IHeaderProps {
+    /**
+     * type description
+     */
+    type?: unknown;
+}
+
+/**
+ * Global Header component is a persistent navigation element that appears at the top of an application or website. It serves as a central hub for accessing key features and tools, ensuring consistent and intuitive navigation across all pages.
+ */
+const Header: FC<IHeaderProps> = ({ type }) => {
+    return <header className="header">Header component</header>;
+};
+
+export { IHeaderProps, Header as default };

src/lib/organisms/Header/index.tsx

@@ -0,0 +1 @@
+export { IHeaderProps, default as default } from './Header';