@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/GenericList/GenericList.stories.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import GenericList from "./GenericList";
+import DUMMYICONDATA from "../Header/DUMMYICONDATA.json";
+import DUMMYLISTDATA from "./DUMMYLISTDATA.json";
+import TreeList from "./templates/DummyDataList";
+export default {
+    title: "Components/GenericList",
+    component: GenericList,
+    argTypes: {
+        listDirection: {
+            control: "select",
+            options: ["horizontal", "vertical"],
+            description: "Whether the list is horizontal or vertical",
+        },
+        listType: {
+            table: {
+                disable: true,
+            },
+        },
+        hasVirtualization: {
+            table: {
+                disable: true,
+            },
+        },
+        containerClasses: {
+            table: {
+                disable: true,
+            },
+        },
+        itemHeight: {
+            table: {
+                disable: true,
+            },
+        },
+        containerHeight: {
+            table: {
+                disable: true,
+            },
+        },
+        renderItem: {
+            table: {
+                disable: true,
+            },
+        },
+        data: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => (_jsx(GenericList, { ...args }));
+export const Default = Template.bind({});
+Default.args = {
+    containerClasses: "flex justify-center w-96 bg-slate-100",
+    data: DUMMYICONDATA.DUMMYICONCOMPASSDATA,
+    itemHeight: 20,
+    containerHeight: 72,
+    hasVirtualization: true,
+    listDirection: "horizontal",
+    listType: "none",
+};
+export const VerticalList = Template.bind({});
+VerticalList.args = {
+    containerClasses: "w-96 bg-slate-100",
+    data: DUMMYICONDATA.DUMMYICONCOMPASSDATA,
+    itemHeight: 150,
+    containerHeight: 300,
+    hasVirtualization: true,
+    listDirection: "vertical",
+    listType: "none",
+};
+export const LargeDataSet = Template.bind({});
+LargeDataSet.args = {
+    containerClasses: "bg-slate-100 w-120 h-120 p-8",
+    data: DUMMYLISTDATA.trees.flatMap((tree) => [tree, tree]),
+    itemHeight: 50,
+    containerHeight: 300,
+    hasVirtualization: true,
+    renderItem: (item) => _jsx(TreeList, { item: item }),
+    listDirection: "vertical",
+    listType: "unordered",
+};

package/dist/components/GenericList/GenericList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/GenericList/GenericList.test.js

@@ -0,0 +1,24 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+describe("<GenericList />", () => {
+    // beforeEach(() => {
+    // 	render(
+    // 		<GenericList
+    // 			data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
+    // 			renderItem={(item) => <DynamicIconList  />}
+    // 			itemHeight={20}
+    // 			containerHeight={72}
+    // 			listType="unordered"
+    // 			containerClasses="bg-gray-100 w-36 border-2 border-teal-500"
+    // 			listDirection="vertical"
+    // 			hasVirtualization={false}
+    // 		/>
+    // 	);
+    // });
+    test("contains correct icon images", () => {
+        expect(screen.getByTestId("user")).toBeInTheDocument();
+        expect(screen.getByTestId("circle-info")).toBeInTheDocument();
+        expect(screen.getByTestId("bell")).toBeInTheDocument();
+        expect(screen.getByTestId("cart-shopping")).toBeInTheDocument();
+    });
+});

package/dist/components/GenericList/templates/DummyDataList.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export type TreeListProps = {
+    item: string;
+};
+declare const TreeList: React.FC<TreeListProps>;
+export default TreeList;

package/dist/components/GenericList/templates/DummyDataList.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import Text from "../../Text/index";
+const TreeList = ({ item }) => {
+    return (_jsx(_Fragment, { children: _jsx(Text, { size: "lg", color: "black", text: item, fontFamily: "font-mono", tag: "p", additionalClasses: "" }) }));
+};
+export default TreeList;

package/dist/components/GenericList/templates/DynamicIconList.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { TagName } from "../../Text/index";
+export type IconButtonsListProps = {
+    id: string;
+    iconColor?: string;
+    iconLabel?: string;
+    backgroundColor?: string;
+    size?: "xs" | "sm" | "md" | "lg" | string;
+    icon: string;
+    hoverBorder?: "border" | "none" | string;
+    limitCharacters?: (text: string) => string;
+    indicatorSize?: "sm" | "md" | "lg" | string;
+    iconBorder?: "border" | "none" | string;
+    hoverBackground: string;
+    hoverColor: string;
+    limitIndicator: boolean;
+    indicatorNumber: string;
+    additionalContainerClasses: string;
+    onClick?: () => void;
+    text: {
+        size: string;
+        color: string;
+        text: string;
+        fontFamily: string;
+        tag: TagName;
+        additionalClasses: string;
+    };
+    to?: string;
+    href?: string;
+};
+declare const DynamicIconButtonList: React.FC<IconButtonsListProps>;
+export default DynamicIconButtonList;

package/dist/components/GenericList/templates/DynamicIconList.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import IconButton from "../../IconButton/index";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+const DynamicIconButtonList = (props) => {
+    return (_jsx(IconButton, { onClick: props.onClick, backgroundColor: props.backgroundColor, iconColor: props.iconColor, iconLabel: props.iconLabel, iconBorder: props.iconBorder, icon: getFontAwesomeIcon(props.icon), hoverBackgroundColor: props.hoverBackground, hoverBorderColor: props.hoverBorder, indicatorNumber: props.indicatorNumber, indicatorSize: props.indicatorSize, additionalContainerClasses: props.additionalContainerClasses, text: props.text.text }, props.id));
+};
+export default DynamicIconButtonList;

package/dist/components/GetSupport/GetSupport.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GetSupportTypes } from "./GetSupport.types";
+declare const GetSupport: React.FC<GetSupportTypes>;
+export default GetSupport;

package/dist/components/GetSupport/GetSupport.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "../FormButton/FormButton";
+import Text from "../Text/Text";
+const GetSupport = ({ as, to, icon, iconClasses, title, titleClasses, subTitle, subTitleClasses, containerClasses, }) => {
+    return (_jsx(FormButton, { as: as, to: to, text: _jsxs("div", { className: `flex  items-center gap-4 ${containerClasses}`, children: [_jsx("div", { className: `flex items-center justify-center ${iconClasses}`, children: icon }), _jsxs("div", { className: "flex flex-col", children: [_jsx(Text, { size: "text-md", color: "text-black", text: title, fontFamily: "font-serif", tag: "p", additionalClasses: titleClasses }), subTitle && (_jsx(Text, { size: "text-md", color: "text-black", text: subTitle, fontFamily: "font-serif", tag: "p", additionalClasses: subTitleClasses }))] })] }), backgroundColor: "bg-transparent", borderColor: "border-none", shape: "rounded-md", additionalClasses: containerClasses }));
+};
+export default GetSupport;

package/dist/components/GetSupport/GetSupport.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const WithoutPhoneNumber: any;

package/dist/components/GetSupport/GetSupport.stories.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import GetSupport from "./GetSupport";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+export default {
+    title: "Components/GetSupport",
+    component: GetSupport,
+    argTypes: {
+        to: {
+            control: "none",
+            description: "URL to navigate to when the button is clicked.",
+        },
+        icon: {
+            control: "none",
+            description: "FontAwesome icon to be displayed.",
+        },
+        iconClasses: {
+            control: "none",
+            description: "Tailwind CSS classes for icon styling.",
+        },
+        title: {
+            control: "none",
+            description: "The main title text.",
+        },
+        titleClasses: {
+            control: "none",
+            description: "Tailwind CSS classes for title styling.",
+        },
+        subTitle: {
+            control: "none",
+            description: "Optional subtitle text.",
+        },
+        subTitleClasses: {
+            control: "none",
+            description: "Tailwind CSS classes for subtitle styling.",
+        },
+        containerClasses: {
+            control: "none",
+            description: "Tailwind CSS classes for container styling.",
+        },
+        as: {
+            control: "none",
+            description: "The element type to use for the button.",
+        },
+    },
+    tags: ["autodocs"],
+};
+const Template = (args) => (_jsx(GetSupport, { to: "", icon: null, title: "", ...args }));
+export const Default = Template.bind({});
+Default.args = {
+    icon: getFontAwesomeIcon("phone"),
+    as: "a",
+    to: "/support",
+    title: "Get Support",
+    iconClasses: "p-4 bg-slate-600 text-white group-hover:text-slate-600 rounded-full group-hover:bg-slate-200",
+    titleClasses: "text-xl font-bold",
+    subTitle: "1-800-123-4567",
+    subTitleClasses: "text-md text-gray-500",
+    containerClasses: "flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group",
+};
+export const WithoutPhoneNumber = Template.bind({});
+WithoutPhoneNumber.args = {
+    icon: getFontAwesomeIcon("phone"),
+    as: "a",
+    to: "/support",
+    title: "Get Support",
+    iconClasses: "p-4 bg-slate-600 text-white group-hover:text-slate-600 rounded-full group-hover:bg-slate-200",
+    titleClasses: "text-xl font-bold",
+    subTitleClasses: "text-md text-gray-500",
+    containerClasses: "flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group",
+};

package/dist/components/GetSupport/GetSupport.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/GetSupport/GetSupport.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import GetSupport from './GetSupport';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+describe('GetSupport Component', () => {
+    const defaultProps = {
+        as: 'link',
+        to: '/support',
+        icon: _jsx("div", { children: "Icon" }),
+        iconClasses: 'p-2 w-12 h-12 bg-gray-200 rounded-full',
+        title: 'Get Support',
+        titleClasses: 'text-xl font-bold',
+        subTitle: '1-800-123-4567',
+        subTitleClasses: 'text-md text-gray-500',
+        containerClasses: 'flex items-center gap-4 p-2 bg-white rounded-lg',
+    };
+    it('renders without crashing', () => {
+        render(_jsx(GetSupport, { ...defaultProps }), { wrapper: MemoryRouter });
+        expect(screen.getByText('Get Support')).toBeInTheDocument();
+    });
+    it('renders the title', () => {
+        render(_jsx(GetSupport, { ...defaultProps }), { wrapper: MemoryRouter });
+        expect(screen.getByText('Get Support')).toBeInTheDocument();
+    });
+    it('renders the subtitle', () => {
+        render(_jsx(GetSupport, { ...defaultProps }), { wrapper: MemoryRouter });
+        expect(screen.getByText('1-800-123-4567')).toBeInTheDocument();
+    });
+    it('applies container classes', () => {
+        render(_jsx(GetSupport, { ...defaultProps }), { wrapper: MemoryRouter });
+        const container = screen.getByRole('link').firstChild;
+        expect(container).toHaveClass('flex items-center gap-4 p-2 bg-white rounded-lg');
+    });
+    it('applies title classes', () => {
+        render(_jsx(GetSupport, { ...defaultProps }), { wrapper: MemoryRouter });
+        const title = screen.getByText('Get Support');
+        expect(title).toHaveClass('text-xl font-bold');
+    });
+    it('applies subtitle classes', () => {
+        render(_jsx(GetSupport, { ...defaultProps }), { wrapper: MemoryRouter });
+        const subTitle = screen.getByText('1-800-123-4567');
+        expect(subTitle).toHaveClass('text-md text-gray-500');
+    });
+    it('renders without subtitle', () => {
+        const { container } = render(_jsx(GetSupport, { ...defaultProps, subTitle: undefined }), { wrapper: MemoryRouter });
+        expect(container.querySelector('.text-md.text-gray-500')).toBeNull();
+    });
+});

package/dist/components/GetSupport/GetSupport.types.d.ts

@@ -0,0 +1,11 @@
+export type GetSupportTypes = {
+    as?: string;
+    to: string;
+    icon: JSX.Element | null;
+    iconClasses?: string;
+    title: string;
+    titleClasses?: string;
+    subTitle?: string;
+    subTitleClasses?: string;
+    containerClasses?: string;
+};

package/dist/components/GetSupport/GetSupport.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/HamburgerButton/Hamburger.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import HamburgerButton from './HamburgerButton';
+declare const _default: Meta<typeof HamburgerButton>;
+export default _default;
+export declare const ToggleMenu: any;

package/dist/components/HamburgerButton/Hamburger.stories.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/HamburgerButton.stories.tsx
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import HamburgerButton from './HamburgerButton';
+import GetSupport from '../GetSupport/GetSupport';
+import { getFontAwesomeIcon } from '../../utils/getFontAwesomeIcon';
+import IconButton from '../IconButton';
+export default {
+    title: 'Components/HamburgerButton',
+    component: HamburgerButton,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+The **HamburgerButton** component toggles between a hamburger icon and an "X" icon with smooth animations using Framer Motion.
+It overlays on top of everything, and a gray background appears on toggle.
+`,
+            },
+        },
+    },
+    argTypes: {
+        containerClasses: {
+            control: 'none',
+            description: 'CSS classes for styling the container of the button.',
+            defaultValue: 'bg-gray-200',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'bg-gray-200' },
+            },
+        },
+        burgerAriaLabel: {
+            control: 'none',
+            description: 'Aria-label for accessibility to describe the button.',
+            defaultValue: 'Toggle navigation',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Toggle navigation' },
+            },
+        },
+        burgerExpandedAlert: {
+            control: 'none',
+            description: 'Indicates whether the burger is in the expanded state.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+        },
+        animateBoolean: {
+            control: 'none',
+            description: 'Determines whether the burger animations should play.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+        },
+        handleNav: {
+            action: 'clicked',
+            description: 'Action triggered when the button is clicked.',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+    },
+    tags: ['autodocs'],
+};
+const Template = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleIcon = () => {
+        setIsOpen(!isOpen);
+        args.handleNav();
+    };
+    return (_jsxs("div", { className: "relative h-screen bg-gray-50 overflow-hidden flex items-start justify-end p-4", children: [_jsx(AnimatePresence, { children: isOpen && (_jsxs(motion.div, { className: "fixed inset-0 bg-white z-30 flex flex-col items-start p-6 space-y-8", initial: { x: '-100%' }, animate: { x: '0%' }, exit: { x: '-100%' }, transition: { duration: 0.3 }, children: [_jsx("div", { className: "flex items-center space-x-3", children: _jsx("img", { src: "../../../assets/compass-logo.png", alt: "Compass Technology", className: "h-10" }) }), _jsxs("div", { className: "flex items-center w-full bg-gray-100 p-1 rounded-full shadow-inner", children: [_jsx("input", { type: "text", placeholder: "Search for product...", className: "flex-grow bg-transparent outline-none px-1 text-gray-700 placeholder-gray-400" }), _jsx("button", { className: "bg-teal-600 flex justify-center items-center rounded-full p-3 w-10 h-10 text-white", children: getFontAwesomeIcon('search') })] }), _jsxs("div", { className: "flex flex-row justify-start items-center gap-6", children: [_jsx(IconButton, { iconColor: "text-black", text: "Admin", backgroundColor: "bg-gray-200 hover:bg-slate-300", iconSize: "h-8 w-8", icon: getFontAwesomeIcon("cog"), notificationCount: 0, textClasses: "text-black font-serif text-md", onClick: () => alert("Redirect to admin") }), _jsx(IconButton, { iconColor: "text-black", text: "Profile", backgroundColor: "bg-gray-200 hover:bg-slate-300", iconSize: "h-8 w-8", icon: getFontAwesomeIcon("user"), hoverBackgroundColor: "hover:bg-gray-300", hoverBorderColor: "hover:border-black", notificationCount: 34, textClasses: "text-black font-serif text-md", onClick: () => alert("Redirect to user") }), _jsx(IconButton, { iconColor: "text-black", text: "Notifications", backgroundColor: "bg-gray-200 hover:bg-slate-300", iconSize: "h-8 w-8", icon: getFontAwesomeIcon("bell"), hoverBackgroundColor: "hover:bg-gray-300", hoverBorderColor: "hover:border-black", notificationCount: 6, textClasses: "text-black font-serif text-md", onClick: () => alert("Redirect to notifications") }), _jsx(IconButton, { iconColor: "text-black", text: "Cart", backgroundColor: "bg-gray-200 hover:bg-slate-300", iconSize: "h-8 w-8", icon: getFontAwesomeIcon("shoppingCart"), hoverBackgroundColor: "hover:bg-gray-300", hoverBorderColor: "hover:border-black", notificationCount: 124, textClasses: "text-black font-serif text-md", onClick: () => alert("Redirect to cart") })] }), _jsx(GetSupport, { icon: getFontAwesomeIcon("phone"), as: "a", to: "/support", title: "Get Support", iconClasses: "p-4 bg-gray-200 rounded-full group-hover:bg-slate-300", titleClasses: "text-xl font-bold", subTitle: "1-800-123-4567", subTitleClasses: "text-md text-gray-500", containerClasses: "flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group" })] })) }), _jsx(motion.button, { onClick: toggleIcon, className: "p-2 z-40 relative", "aria-label": args.burgerAriaLabel, "aria-expanded": isOpen, initial: false, animate: isOpen ? 'open' : 'closed', children: _jsxs(motion.div, { className: "relative flex items-center justify-center w-8 h-8", children: [_jsx(motion.span, { className: "absolute w-full h-0.5 bg-black", variants: {
+                                closed: { rotate: 0, y: -8 },
+                                open: { rotate: 45, y: 0 },
+                            }, transition: { duration: 0.3 } }), _jsx(motion.span, { className: "absolute w-full h-0.5 bg-black", variants: {
+                                closed: { opacity: 1 },
+                                open: { opacity: 0 },
+                            }, transition: { duration: 0.2 } }), _jsx(motion.span, { className: "absolute w-full h-0.5 bg-black", variants: {
+                                closed: { rotate: 0, y: 8 },
+                                open: { rotate: -45, y: 0 },
+                            }, transition: { duration: 0.3 } })] }) })] }));
+};
+export const ToggleMenu = Template.bind({});
+ToggleMenu.args = {
+    containerClasses: 'bg-gray-100',
+    burgerAriaLabel: 'Toggle navigation',
+};
+ToggleMenu.parameters = {
+    docs: {
+        description: {
+            story: 'This story demonstrates the toggle functionality of the HamburgerButton, transitioning between the hamburger and "X" icons on click, with a gray background appearing on toggle.',
+        },
+    },
+};

package/dist/components/HamburgerButton/HamburgerButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HamburgerButtonProps } from './HamburgerButton.types';
+declare const HamburgerButton: React.FC<HamburgerButtonProps>;
+export default HamburgerButton;

package/dist/components/HamburgerButton/HamburgerButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+const HamburgerButton = ({ containerClasses, burgerAriaLabel, burgerExpandedAlert, animateBoolean, handleNav, }) => {
+    return (_jsx("div", { className: `relative ${containerClasses}`, children: _jsxs(motion.button, { "aria-label": burgerAriaLabel, "aria-expanded": burgerExpandedAlert === 'True', initial: "hide", animate: animateBoolean ? 'show' : 'hide', onClick: handleNav, className: `flex flex-col space-y-1 p-2 ${burgerExpandedAlert === 'True' ? 'fixed' : ''}`, tabIndex: 0, children: [_jsx(motion.span, { variants: {
+                        hide: { rotate: 0 },
+                        show: { rotate: 45, y: 5 },
+                    }, className: "w-6 bg-black h-px block" }), _jsx(motion.span, { variants: {
+                        hide: { opacity: 1 },
+                        show: { opacity: 0 },
+                    }, className: "w-6 bg-black h-px block" }), _jsx(motion.span, { variants: {
+                        hide: { rotate: 0 },
+                        show: { rotate: -45, y: -5 },
+                    }, className: "w-6 bg-black h-px block" })] }) }));
+};
+export default HamburgerButton;

package/dist/components/HamburgerButton/HamburgerButton.types.d.ts

@@ -0,0 +1,7 @@
+export interface HamburgerButtonProps {
+    containerClasses: string;
+    burgerAriaLabel: string;
+    burgerExpandedAlert: string;
+    animateBoolean: boolean;
+    handleNav: () => void;
+}

package/dist/components/HamburgerButton/HamburgerButton.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/HamburgerButton/index.js

@@ -0,0 +1,2 @@
+export { default } from "./HamburgerButton";
+export * from "./HamburgerButton.types";

package/dist/components/Header/DUMMYICONDATA.json

@@ -0,0 +1,136 @@
+{
+    "DUMMYICONCOMPASSDATA": [
+        {
+            "id": "1",
+            "icon": "user",
+            "href": "#",
+            "to": "",
+            "iconColor": "black",
+            "iconLabel": "account",
+            "iconBorder": "none",
+            "backgroundColor": "green",
+            "hoverBackground": "green",
+            "hoverBorder": "green",
+            "hoverColor": "green",
+            "size": "xs",
+            "additionalContainerClasses": "",
+            "indicatorNumber": "",
+            "limitIndicator": true,
+            "indicatorSize": "sm",
+            "text": {
+                "size": "xs",
+                "color": "primary",
+                "text": "Account",
+                "fontFamily": "serif",
+                "tag": "span",
+                "additionalClasses": "m-0 p-0"
+            }
+        },
+        {
+            "id": "2",
+            "icon": "infoCircle",
+            "href": "#",
+            "to": "",
+            "iconColor": "black",
+            "iconLabel": "information",
+            "iconBorder": "none",
+            "backgroundColor": "green",
+            "hoverBackground": "green",
+            "hoverBorder": "green",
+            "hoverColor": "green",
+            "size": "xs",
+            "additionalContainerClasses": "",
+            "indicatorNumber": "",
+            "limitIndicator": true,
+            "indicatorSize": "sm",
+            "text": {
+                "size": "xs",
+                "color": "primary",
+                "text": "Info",
+                "fontFamily": "serif",
+                "tag": "span",
+                "additionalClasses": "m-0 p-0"
+            }
+        },
+        {
+            "id": "3",
+            "icon": "bell",
+            "href": "#",
+            "to": "",
+            "iconColor": "black",
+            "iconLabel": "notifications",
+            "iconBorder": "none",
+            "backgroundColor": "green",
+            "hoverBackground": "green",
+            "hoverBorder": "green",
+            "hoverColor": "green",
+            "size": "xs",
+            "additionalContainerClasses": "",
+            "indicatorNumber": "100",
+            "limitIndicator": true,
+            "indicatorSize": "sm",
+            "text": {
+                "size": "xs",
+                "color": "primary",
+                "text": "Notifications",
+                "fontFamily": "serif",
+                "tag": "span",
+                "additionalClasses": "m-0 p-0"
+            }
+        },
+        {
+            "id": "4",
+            "icon": "shoppingCart",
+            "href": "#",
+            "to": "",
+            "iconColor": "black",
+            "iconLabel": "shopping cart",
+            "iconBorder": "none",
+            "backgroundColor": "green",
+            "hoverBackground": "green",
+            "hoverBorder": "green",
+            "hoverColor": "green",
+            "size": "xs",
+            "additionalContainerClasses": "",
+            "indicatorNumber": "",
+            "limitIndicator": true,
+            "indicatorSize": "sm",
+            "text": {
+                "size": "xs",
+                "color": "primary",
+                "text": "Cart",
+                "fontFamily": "serif",
+                "tag": "span",
+                "additionalClasses": "m-0 p-0"
+            }
+        }
+    ],
+    "DUMMYICONTOGADATA": [
+        {
+            "id": "1",
+            "icon": "user",
+            "href": "#",
+            "to": "",
+            "iconColor": "black",
+            "iconLabel": "account",
+            "iconBorder": "none",
+            "backgroundColor": "blue",
+            "hoverBackground": "blue",
+            "hoverBorder": "none",
+            "hoverColor": "blue",
+            "size": "xs",
+            "additionalContainerClasses": "",
+            "indicatorNumber": "",
+            "limitIndicator": true,
+            "indicatorSize": "sm",
+            "text": {
+                "size": "xs",
+                "color": "primary",
+                "text": "Account",
+                "fontFamily": "serif",
+                "tag": "span",
+                "additionalClasses": "m-0 p-0"
+            }
+        }
+    ]
+}

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { HeaderTypes } from "./Header.types";
+declare const Header: React.FC<HeaderTypes>;
+export default Header;