@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Nav/DUMMYNAVDATA.json

@@ -0,0 +1,234 @@
+{
+    "DUMMYNAVDATA": [
+        {
+            "id": "1",
+            "title": "About",
+            "to": "",
+            "links": [
+                {
+                    "menuItem": "Features",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Pricing",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Support",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Forums",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                }
+            ]
+        },
+        {
+            "id": "2",
+            "title": "Projects",
+            "to": "",
+            "links": [
+                {
+                    "menuItem": "Contribute",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Media assets",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Changelog",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Releases",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Upcoming",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Past",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Extra",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Extra Two",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                }
+            ]
+        },
+        {
+            "id": "3",
+            "title": "Community",
+            "to": "fake link",
+            "links": [
+                {
+                    "menuItem": "Join Discord",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Follow on Twitter",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Email newsletter",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "GitHub discussions",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                }
+            ]
+        },
+        {
+            "id": "4",
+            "title": "Store",
+            "to": "",
+            "links": [
+                {
+                    "menuItem": "Computers",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "IpadsIpadsIpadsIpadsIpadsIpadsIpadsIpads",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Accessories",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                }
+            ]
+        }
+    ],
+    "DUMMYCOMPASSNAVDATA": [
+        {
+            "id": "1",
+            "title": "Products",
+            "to": "",
+            "links": [
+                {
+                    "menuItem": "Features",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Pricing",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Support",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Forums",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                }
+            ]
+        },
+        {
+            "id": "2",
+            "title": "Kits",
+            "to": "",
+            "links": [
+                {
+                    "menuItem": "Contribute",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Media assets",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Changelog",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Releases",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Upcoming",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Past",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Extra",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                },
+                {
+                    "menuItem": "Extra Two",
+                    "link": "#",
+                    "src": null,
+                    "alt": ""
+                }
+            ]
+        }
+    ]
+}

package/dist/components/Nav/Nav.d.ts

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

package/dist/components/Nav/Nav.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import data from "./DUMMYNAVDATA.json";
+import Image from "../Image/Image";
+import { Accordion } from "../../utils/generateAccordionItem";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const DUMMYNAVDATA = data.DUMMYNAVDATA;
+const Nav = ({ navData = DUMMYNAVDATA, navBackgroundColor = "bg-white", parentBackground = "bg-white", parentBorderColor = "border-gray-200", parentShape = "rounded-md", parentTextColor = "text-gray-800", parentTextSize = "text-base", parentHoverBackground = "hover:bg-gray-200", parentHoverFontColor = "hover:text-black", parentHoverUnderline = "hover:underline", parentHoverBorderColor = "hover:border-gray-400", submenuBackgroundColor = "bg-white", submenuTextColor = "text-gray-800", submenuTextSize = "text-sm", includeSubmenuImages = false, submenuHoverBackground = "hover:bg-gray-200", submenuHoverTextColor = "hover:text-black", submenuHoverBorderStyle = "hover:border-gray-400", submenuHoverBorderColor = "hover:border-gray-400", mobileBreakpoint = "max-xl", accordionParentStyle = "border-b border-black p-2 w-full", accordionExpandedStyle = "w-full py-3", }) => {
+    const [navExpanded, setNavExpanded] = useState(navData.reduce((acc, _, index) => ({
+        ...acc,
+        [index.toString()]: false,
+    }), {}));
+    const toggleNav = (index) => {
+        setNavExpanded((prevState) => ({
+            ...Object.fromEntries(Object.keys(prevState).map((key) => [
+                key,
+                key === index.toString() ? !prevState[key] : false,
+            ])),
+        }));
+    };
+    const handleParentClick = (index) => {
+        toggleNav(index);
+    };
+    const handleKeyDown = (event, index) => {
+        if (event.key === "Enter") {
+            toggleNav(index);
+        }
+    };
+    return (_jsxs("nav", { className: `flex justify-around ${navBackgroundColor}`, "data-testid": "nav", children: [_jsx("ul", { className: `flex w-full items-center ${mobileBreakpoint}:hidden`, "aria-label": "Main Menu", "data-testid": "main-menu", children: navData.map((item, index) => (_jsx("div", { className: `flex w-full justify-center`, children: item.to === "" ? (_jsxs("li", { className: `flex w-auto cursor-pointer relative`, role: "button", onClick: () => handleParentClick(index), "aria-expanded": navExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: [_jsx("div", { className: `flex w-full items-center border-2 h-10 ${parentHoverBackground} ${parentHoverBorderColor} ${parentShape} ${parentBackground}`, "data-testid": `parent-button-${item.title}`, children: _jsxs("div", { className: `flex w-full p-4 justify-between items-center ${parentTextSize} ${parentTextColor} ${parentHoverFontColor} ${parentHoverUnderline}`, children: [_jsx("div", { className: "px-2", children: item.title }), getFontAwesomeIcon("chevron-down", `text-xs transition-transform duration-300 transform ${navExpanded[index] ? "rotate-180" : ""}`)] }) }), _jsx("div", { className: `absolute min-w-navDropDown top-16 overflow-x-scroll transition-[max-height] duration-500 ease-in-out ${submenuBackgroundColor} ${navExpanded[index] ? "max-h-60" : "max-h-0"}`, "aria-hidden": !navExpanded[index], tabIndex: -1, children: _jsx("ul", { className: "w-full", children: item.links.map((link) => (_jsx("li", { className: `flex py-2 border-4 border-transparent w-auto align-center ${submenuBackgroundColor} ${submenuHoverBackground} ${submenuHoverBorderStyle} ${submenuHoverBorderColor} ${submenuTextSize} ${submenuTextColor}`, children: _jsxs("a", { href: link.link, className: "flex hover:underline w-full justify-start items-center pl-1", "data-testid": link.menuItem, tabIndex: navExpanded[index] ? 0 : -1, children: [includeSubmenuImages && (_jsx(Image, { src: link.src, alt: link.alt, background: false, additionalClasses: "w-12 h-12 mr-2", "data-testid": `submenu-image-${link.menuItem}` })), link.menuItem] }) }, link.menuItem))) }) })] })) : (_jsx("li", { className: "w-auto", onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: _jsx("a", { href: item.to, className: `flex flex-col p-4 w-full border-2 relative items-center h-10 justify-center ${parentHoverBackground} ${parentHoverFontColor} ${parentHoverUnderline} ${parentBackground} ${parentBorderColor} ${parentShape} ${parentTextSize} ${parentTextColor}`, tabIndex: 0, "data-testid": `parent-link-${item.title}`, children: _jsx("div", { className: "px-2", children: item.title }) }) })) }, item.title))) }), _jsx("div", { className: `hidden w-full items-center ${mobileBreakpoint}:flex`, "data-testid": "accordion-nav", children: _jsx(Accordion, { navData: navData, accordionParentStyle: accordionParentStyle, accordionExpandedStyle: accordionExpandedStyle }) })] }));
+};
+export default Nav;

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

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import { NavTypes } from ".";
+declare const _default: Meta<NavTypes>;
+export default _default;
+export declare const Default: any;
+export declare const Compass: any;

package/dist/components/Nav/Nav.stories.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Nav from ".";
+import { DUMMYCOMPASSNAVDATA } from "./DUMMYNAVDATA.json";
+import { withStoryBook } from "../../hoc";
+// Wrap your component with the HOC
+const StoryBookViewNav = withStoryBook(Nav);
+export default {
+    title: "Components/Nav",
+    argTypes: {
+        navBackgroundColor: {
+            control: {
+                type: "color",
+            },
+        },
+        navData: {
+            table: {
+                disable: true,
+            },
+        },
+        parentHoverBackground: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "grey", "white", "none"],
+        },
+        parentHoverFontColor: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "white", "black"],
+        },
+        parentHoverUnderline: {
+            control: {
+                type: "boolean",
+            },
+        },
+        parentHoverBorderColor: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "grey", "black", "none"],
+        },
+        parentBackground: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "grey", "black", "white", "none"],
+        },
+        parentBorderColor: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "grey", "black", "none"],
+        },
+        parentShape: {
+            control: {
+                type: "select",
+            },
+            options: ["cornered", "semiRounded", "rounded"],
+        },
+        parentTextSize: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg"],
+            description: "The font size for the parent menu item text.",
+        },
+        parentTextColor: {
+            control: {
+                type: "select",
+            },
+            options: ["black", "white"],
+        },
+        includeSubmenuImages: {
+            control: {
+                type: "boolean",
+            },
+        },
+        submenuTextSize: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg"],
+            description: "The font size for the submenu text.",
+        },
+        submenuBackgroundColor: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "grey", "white", "none"],
+        },
+        submenuHoverBackground: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "grey", "white", "none"],
+        },
+        submenuHoverTextColor: {
+            control: {
+                type: "select",
+            },
+            options: ["black", "white"],
+        },
+        submenuTextColor: {
+            control: {
+                type: "select",
+            },
+            options: ["black", "white"],
+        },
+        submenuHoverBorderStyle: {
+            control: {
+                type: "select",
+            },
+            options: ["top-bottom", "right-left", "bottom", "none"],
+        },
+        submenuHoverBorderColor: {
+            control: {
+                type: "select",
+            },
+            options: ["blue", "green", "black", "none"],
+        },
+        mobileBreakpoint: {
+            control: {
+                type: "select",
+            },
+            options: ["small", "medium", "large", "extraLarge"],
+        },
+    },
+};
+const Template = (args) => (_jsx(StoryBookViewNav, { ...args, storybookStyle: {
+        backgroundColor: args.navBackgroundColor,
+    } }));
+export const Default = Template.bind({});
+Default.args = {
+    navBackgroundColor: "#a7d2ff",
+    parentHoverBackground: "none",
+    parentHoverFontColor: "black",
+    parentHoverUnderline: true,
+    parentHoverBorderColor: "black",
+    parentShape: "cornered",
+    parentBackground: "none",
+    parentBorderColor: "none",
+    parentTextSize: "md",
+    includeSubmenuImages: false,
+    submenuBackgroundColor: "blue",
+    submenuHoverBackground: "white",
+    mobileBreakpoint: "small",
+};
+export const Compass = Template.bind({});
+Compass.args = {
+    navBackgroundColor: "#00b9a8",
+    navData: DUMMYCOMPASSNAVDATA,
+    parentHoverBackground: "none",
+    parentHoverFontColor: "black",
+    parentHoverUnderline: true,
+    parentHoverBorderColor: "none",
+    parentShape: "cornered",
+    parentBackground: "none",
+    parentBorderColor: "none",
+    parentTextColor: "white",
+    parentTextSize: "lg",
+    includeSubmenuImages: true,
+    submenuBackgroundColor: "white",
+    submenuHoverBackground: "white",
+    submenuHoverBorderStyle: "top-bottom",
+    submenuHoverBorderColor: "green",
+    mobileBreakpoint: "small",
+};

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

@@ -0,0 +1 @@
+import "../../../dist/main.css";

package/dist/components/Nav/Nav.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../dist/main.css";
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import Nav from "./Nav";
+import { DUMMYNAVDATA } from "./DUMMYNAVDATA.json";
+describe("<Nav /> without submenu images", () => {
+    beforeEach(() => {
+        render(_jsx(Nav, { navData: DUMMYNAVDATA, navBackgroundColor: "gray", parentBackground: "grey", parentBorderColor: "none", parentShape: "cornered", parentTextColor: "black", parentTextSize: "sm", parentHoverBackground: "black", parentHoverFontColor: "white", parentHoverUnderline: true, parentHoverBorderColor: "none", submenuBackgroundColor: "blue", submenuTextColor: "white", submenuTextSize: "text-base", submenuHoverBackground: "blue", submenuHoverTextColor: "white", submenuHoverBorderStyle: "border-b", submenuHoverBorderColor: "black", mobileBreakpoint: "medium", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "w-full py-3" }));
+    });
+    test("renders Nav component", () => {
+        expect(screen.getByTestId("nav")).toBeInTheDocument();
+    });
+    test("ul element has correct classes and aria-label", () => {
+        const ulElement = screen.getByTestId("main-menu");
+        expect(ulElement).toHaveAttribute("aria-label", "Main Menu");
+    });
+    test("nav has correct mobile breakpoint", () => {
+        const nav = screen.getByTestId("main-menu");
+        expect(nav).toHaveClass("max-md:hidden");
+    });
+    test("correct number of parent menu items are rendered", () => {
+        const parentMenuItems = screen.getAllByTestId("parent-menu-item");
+        expect(parentMenuItems).toHaveLength(DUMMYNAVDATA.length);
+    });
+    test("renders correct parent menu button text", () => {
+        const parentMenuItemAbout = screen.getByTestId("parent-button-About");
+        expect(parentMenuItemAbout).toBeInTheDocument();
+        expect(parentMenuItemAbout).toHaveTextContent("About");
+    });
+    test("renders correct parent menu background color", () => {
+        const parentMenuItemAbout = screen.getByTestId("parent-button-About");
+        expect(parentMenuItemAbout).toHaveClass("bg-gray-800");
+    });
+    test("renders correct parent linked menu item text", () => {
+        const parentMenuItemCommunity = screen.getByTestId("parent-link-Community");
+        expect(parentMenuItemCommunity).toBeInTheDocument();
+        expect(parentMenuItemCommunity).toHaveTextContent("Community");
+    });
+    test("parent linked menu item has correct link", () => {
+        const parentMenuItemCommunity = screen.getByTestId("parent-link-Community");
+        expect(parentMenuItemCommunity).toHaveAttribute("href", "fake link");
+    });
+    test("accordion component is rendered", () => {
+        const accordion = screen.getByTestId("accordion-nav");
+        expect(accordion).toBeInTheDocument();
+    });
+    test("accordion nav has correct mobile breakpoint", () => {
+        const nav = screen.getByTestId("accordion-nav");
+        expect(nav).toHaveClass("max-md:flex");
+    });
+});

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

@@ -0,0 +1,38 @@
+export interface NavLink {
+    menuItem: string;
+    link: string;
+    src: string | null;
+    alt: string;
+}
+export interface NavItem {
+    id: string | number;
+    title: string;
+    to: string;
+    links: NavLink[];
+}
+export interface NavTypes {
+    navData?: NavItem[];
+    navBackgroundColor?: string;
+    parentHoverBackground?: string;
+    parentHoverFontColor?: string;
+    parentHoverUnderline?: boolean;
+    parentHoverBorderColor?: string;
+    parentBorderColor?: string;
+    parentBackground?: string;
+    parentShape?: string;
+    parentTextColor?: string;
+    parentTextSize?: string;
+    parentTextWeight?: string;
+    submenuBackgroundColor?: string;
+    submenuTextColor?: string;
+    submenuTextSize?: string;
+    submenuTextWeight?: string;
+    includeSubmenuImages?: boolean;
+    submenuHoverBackground?: string;
+    submenuHoverTextColor?: string;
+    submenuHoverBorderStyle?: string;
+    submenuHoverBorderColor?: string;
+    mobileBreakpoint?: string;
+    accordionParentStyle?: string;
+    accordionExpandedStyle?: string;
+}

package/dist/components/Nav/Nav.types.js

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

package/dist/components/Nav/index.js

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

package/dist/components/Page/TableDataDummy.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const TableDataDummy: React.FC;
+export default TableDataDummy;

package/dist/components/Page/TableDataDummy.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TableDataDummy = () => {
+    return (_jsx("div", { className: "overflow-x-auto min-w-full", children: _jsxs("table", { className: "table ", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Name" }), _jsx("th", { children: "Job" }), _jsx("th", { children: "company" }), _jsx("th", { children: "location" }), _jsx("th", { children: "Last Login" }), _jsx("th", { children: "Favorite Color" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: "1" }), _jsx("td", { children: "Cy Ganderton" }), _jsx("td", { children: "Quality Control Specialist" }), _jsx("td", { children: "Littel, Schaden and Vandervort" }), _jsx("td", { children: "Canada" }), _jsx("td", { children: "12/16/2020" }), _jsx("td", { children: "Blue" })] }), _jsxs("tr", { children: [_jsx("th", { children: "2" }), _jsx("td", { children: "Hart Hagerty" }), _jsx("td", { children: "Desktop Support Technician" }), _jsx("td", { children: "Zemlak, Daniel and Leannon" }), _jsx("td", { children: "United States" }), _jsx("td", { children: "12/5/2020" }), _jsx("td", { children: "Purple" })] }), _jsxs("tr", { children: [_jsx("th", { children: "3" }), _jsx("td", { children: "Brice Swyre" }), _jsx("td", { children: "Tax Accountant" }), _jsx("td", { children: "Carroll Group" }), _jsx("td", { children: "China" }), _jsx("td", { children: "8/15/2020" }), _jsx("td", { children: "Red" })] }), _jsxs("tr", { children: [_jsx("th", { children: "4" }), _jsx("td", { children: "Marjy Ferencz" }), _jsx("td", { children: "Office Assistant I" }), _jsx("td", { children: "Rowe-Schoen" }), _jsx("td", { children: "Russia" }), _jsx("td", { children: "3/25/2021" }), _jsx("td", { children: "Crimson" })] }), _jsxs("tr", { children: [_jsx("th", { children: "5" }), _jsx("td", { children: "Yancy Tear" }), _jsx("td", { children: "Community Outreach Specialist" }), _jsx("td", { children: "Wyman-Ledner" }), _jsx("td", { children: "Brazil" }), _jsx("td", { children: "5/22/2020" }), _jsx("td", { children: "Indigo" })] }), _jsxs("tr", { children: [_jsx("th", { children: "6" }), _jsx("td", { children: "Irma Vasilik" }), _jsx("td", { children: "Editor" }), _jsx("td", { children: "Wiza, Bins and Emard" }), _jsx("td", { children: "Venezuela" }), _jsx("td", { children: "12/8/2020" }), _jsx("td", { children: "Purple" })] }), _jsxs("tr", { children: [_jsx("th", { children: "7" }), _jsx("td", { children: "Meghann Durtnal" }), _jsx("td", { children: "Staff Accountant IV" }), _jsx("td", { children: "Schuster-Schimmel" }), _jsx("td", { children: "Philippines" }), _jsx("td", { children: "2/17/2021" }), _jsx("td", { children: "Yellow" })] }), _jsxs("tr", { children: [_jsx("th", { children: "8" }), _jsx("td", { children: "Sammy Seston" }), _jsx("td", { children: "Accountant I" }), _jsx("td", { children: "O'Hara, Welch and Keebler" }), _jsx("td", { children: "Indonesia" }), _jsx("td", { children: "5/23/2020" }), _jsx("td", { children: "Crimson" })] }), _jsxs("tr", { children: [_jsx("th", { children: "9" }), _jsx("td", { children: "Lesya Tinham" }), _jsx("td", { children: "Safety Technician IV" }), _jsx("td", { children: "Turner-Kuhlman" }), _jsx("td", { children: "Philippines" }), _jsx("td", { children: "2/21/2021" }), _jsx("td", { children: "Maroon" })] }), _jsxs("tr", { children: [_jsx("th", { children: "10" }), _jsx("td", { children: "Zaneta Tewkesbury" }), _jsx("td", { children: "VP Marketing" }), _jsx("td", { children: "Sauer LLC" }), _jsx("td", { children: "Chad" }), _jsx("td", { children: "6/23/2020" }), _jsx("td", { children: "Green" })] }), _jsxs("tr", { children: [_jsx("th", { children: "11" }), _jsx("td", { children: "Andy Tipple" }), _jsx("td", { children: "Librarian" }), _jsx("td", { children: "Hilpert Group" }), _jsx("td", { children: "Poland" }), _jsx("td", { children: "7/9/2020" }), _jsx("td", { children: "Indigo" })] }), _jsxs("tr", { children: [_jsx("th", { children: "12" }), _jsx("td", { children: "Sophi Biles" }), _jsx("td", { children: "Recruiting Manager" }), _jsx("td", { children: "Gutmann Inc" }), _jsx("td", { children: "Indonesia" }), _jsx("td", { children: "2/12/2021" }), _jsx("td", { children: "Maroon" })] }), _jsxs("tr", { children: [_jsx("th", { children: "13" }), _jsx("td", { children: "Florida Garces" }), _jsx("td", { children: "Web Developer IV" }), _jsx("td", { children: "Gaylord, Pacocha and Baumbach" }), _jsx("td", { children: "Poland" }), _jsx("td", { children: "5/31/2020" }), _jsx("td", { children: "Purple" })] }), _jsxs("tr", { children: [_jsx("th", { children: "14" }), _jsx("td", { children: "Maribeth Popping" }), _jsx("td", { children: "Analyst Programmer" }), _jsx("td", { children: "Deckow-Pouros" }), _jsx("td", { children: "Portugal" }), _jsx("td", { children: "4/27/2021" }), _jsx("td", { children: "Aquamarine" })] }), _jsxs("tr", { children: [_jsx("th", { children: "15" }), _jsx("td", { children: "Moritz Dryburgh" }), _jsx("td", { children: "Dental Hygienist" }), _jsx("td", { children: "Schiller, Cole and Hackett" }), _jsx("td", { children: "Sri Lanka" }), _jsx("td", { children: "8/8/2020" }), _jsx("td", { children: "Crimson" })] }), _jsxs("tr", { children: [_jsx("th", { children: "16" }), _jsx("td", { children: "Reid Semiras" }), _jsx("td", { children: "Teacher" }), _jsx("td", { children: "Sporer, Sipes and Rogahn" }), _jsx("td", { children: "Poland" }), _jsx("td", { children: "7/30/2020" }), _jsx("td", { children: "Green" })] }), _jsxs("tr", { children: [_jsx("th", { children: "17" }), _jsx("td", { children: "Alec Lethby" }), _jsx("td", { children: "Teacher" }), _jsx("td", { children: "Reichel, Glover and Hamill" }), _jsx("td", { children: "China" }), _jsx("td", { children: "2/28/2021" }), _jsx("td", { children: "Khaki" })] }), _jsxs("tr", { children: [_jsx("th", { children: "18" }), _jsx("td", { children: "Aland Wilber" }), _jsx("td", { children: "Quality Control Specialist" }), _jsx("td", { children: "Kshlerin, Rogahn and Swaniawski" }), _jsx("td", { children: "Czech Republic" }), _jsx("td", { children: "9/29/2020" }), _jsx("td", { children: "Purple" })] }), _jsxs("tr", { children: [_jsx("th", { children: "19" }), _jsx("td", { children: "Teddie Duerden" }), _jsx("td", { children: "Staff Accountant III" }), _jsx("td", { children: "Pouros, Ullrich and Windler" }), _jsx("td", { children: "France" }), _jsx("td", { children: "10/27/2020" }), _jsx("td", { children: "Aquamarine" })] }), _jsxs("tr", { children: [_jsx("th", { children: "20" }), _jsx("td", { children: "Lorelei Blackstone" }), _jsx("td", { children: "Data Coordiator" }), _jsx("td", { children: "Witting, Kutch and Greenfelder" }), _jsx("td", { children: "Kazakhstan" }), _jsx("td", { children: "6/3/2020" }), _jsx("td", { children: "Red" })] })] }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Name" }), _jsx("th", { children: "Job" }), _jsx("th", { children: "company" }), _jsx("th", { children: "location" }), _jsx("th", { children: "Last Login" }), _jsx("th", { children: "Favorite Color" })] }) })] }) }));
+};
+export default TableDataDummy;

package/dist/components/Page/ViewPageTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ViewPageTemplateTypes } from ".";
+declare const ViewTemplatePage: React.FC<ViewPageTemplateTypes>;
+export default ViewTemplatePage;

package/dist/components/Page/ViewPageTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ViewTemplatePage = ({ children, bgColor = "bg-gray-100", }) => {
+    return _jsx("div", { className: `${bgColor}`, children: children });
+};
+export default ViewTemplatePage;

package/dist/components/Page/ViewPageTemplate.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const DefaultView: any;
+export declare const ViewWithHeroAndCardsWithGlassHeader: any;
+export declare const ViewWithTable: any;
+export declare const ViewWithTableAndTitle: any;
+export declare const CompassPageView: any;