@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Description/Description.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Description from './Description';
+export default {
+    title: 'Components/Description',
+    component: Description,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        containerClassName: {
+            control: 'none',
+            description: 'Styles for the container.',
+        },
+        titleClassName: {
+            control: 'none',
+            description: 'Styles for the title.',
+        },
+        contentClassName: {
+            control: 'none',
+            description: 'Styles for the content.',
+        },
+        title: {
+            control: 'none',
+            description: 'Title of the description.',
+        },
+        children: {
+            control: 'none',
+            description: 'Content of the description.',
+        },
+        style: {
+            control: 'none',
+            description: 'Styles for the description.',
+            table: { disable: true }
+        }
+    },
+};
+const Template = (args) => _jsx(Description, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Sample Title',
+    children: _jsx("span", { children: "This is a sample description content." }),
+    containerClassName: 'p-4 sm:p-6 md:p-8 lg:p-10',
+    titleClassName: 'text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-4',
+    contentClassName: 'text-base sm:text-lg md:text-xl lg:text-2xl',
+};
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+    title: 'Styled Title',
+    children: (_jsx("span", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })),
+    containerClassName: 'p-4 sm:p-6 md:p-8 lg:p-10 bg-gray-100',
+    titleClassName: 'text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-blue-500',
+    contentClassName: 'text-base sm:text-lg md:text-xl lg:text-2xl text-blue-500',
+};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export interface DescriptionProps {
+    title: string;
+    children: ReactNode;
+    containerClassName?: string;
+    titleClassName?: string;
+    contentClassName?: string;
+}

package/dist/components/Description/Description.types.js

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

package/dist/components/DropDownIconButton/DropDownIconButton.d.ts

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

package/dist/components/DropDownIconButton/DropDownIconButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import IconButton from "../IconButton/IconButton";
+const DropDownIconButton = ({ icon, iconSize, iconColor, hasNotification, notificationTextColor, notificationBgColor, notificationCount, text, textContainerClasses, hoverBorderColor, hoverBackgroundColor, backgroundColor, borderColor, textClasses, submenu, menuPlacementClasses, onClick, }) => {
+    const [open, setOpen] = useState(false);
+    const menuTrigger = useRef(null);
+    const menuRef = useRef(null);
+    const useClickOutside = (refs, isOpen, setIsOpen) => {
+        useEffect(() => {
+            const clickHandler = ({ target }) => {
+                if (!refs.some((ref) => ref.current) ||
+                    !isOpen ||
+                    refs.some((ref) => ref.current?.contains(target)))
+                    return;
+                setIsOpen(false);
+            };
+            document.addEventListener("click", clickHandler);
+            return () => document.removeEventListener("click", clickHandler);
+        }, [refs, isOpen, setIsOpen]);
+    };
+    useClickOutside([menuRef, menuTrigger], open, setOpen);
+    return (_jsxs("div", { className: "relative z-20", children: [_jsx("div", { ref: menuTrigger, onClick: () => setOpen(!open), className: "flex flex-col items-center justify-center group", children: _jsx(IconButton, { icon: icon, iconSize: iconSize, iconColor: iconColor, hasNotification: hasNotification, notificationTextClasses: notificationTextColor, notificationBgColor: notificationBgColor, notificationCount: notificationCount, text: text, textClasses: textClasses, hoverBorderColor: hoverBorderColor, hoverBackgroundColor: hoverBackgroundColor, backgroundColor: backgroundColor, borderColor: borderColor, additionalContainerClasses: textContainerClasses, onClick: onClick }) }), _jsx("div", { ref: menuRef, className: `absolute ${menuPlacementClasses} ${!open ? "hidden" : ""}`, children: submenu })] }));
+};
+export default DropDownIconButton;

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

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

package/dist/components/DropDownIconButton/DropDownIconButton.stories.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DropDownIconButton from "./DropDownIconButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import AlertSubmenu from "../Submenus/AlertSubmenu";
+import AdminSubmenu from "../Submenus/AdminSubmenu";
+export default {
+    title: "Components/DropDownIconButton",
+    component: DropDownIconButton,
+    tags: ['autodocs'],
+    argTypes: {
+        iconSize: {
+            control: 'none',
+            description: "Tailwind classes for the icon size. Example: `h-6 w-6`",
+        },
+        iconColor: {
+            control: 'none',
+            description: "Tailwind classes for the icon color. Example: `text-blue-500`",
+        },
+        backgroundColor: {
+            control: 'none',
+            description: "Tailwind classes for the background color. Example: `bg-gray-200`",
+        },
+        borderColor: {
+            control: 'none',
+            description: "Tailwind classes for the border color. Example: `border-gray-300`",
+        },
+        hoverBorderColor: {
+            control: 'none',
+            description: "Tailwind classes for the border color on hover. Example: `hover:border-blue-500`",
+        },
+        hoverBackgroundColor: {
+            control: 'none',
+            description: "Tailwind classes for the background on hover. Example: `hover:bg-gray-300`",
+        },
+        hasNotification: {
+            control: 'none',
+            description: "Flag to indicate if the button has a notification badge.",
+        },
+        notificationTextColor: {
+            control: 'none',
+            description: "Tailwind classes for the notification text color. Example: `text-white`",
+        },
+        notificationBgColor: {
+            control: 'none',
+            description: "Tailwind classes for the notification background color. Example: `bg-red-500`",
+        },
+        notificationCount: {
+            control: 'none',
+            description: "The number to be displayed inside the notification badge. Example: `12`",
+        },
+        text: {
+            control: 'none',
+            description: "The text to be displayed below the button. Example: `Profile`",
+        },
+        textClasses: {
+            control: 'none',
+            description: "Tailwind classes to style the text. Example: `text-sm text-black`",
+        },
+        menuPlacementClasses: {
+            control: 'none',
+            description: "Tailwind classes to position the dropdown menu. Example: `right-0 top-full mt-5 w-[200px]`",
+        },
+        submenu: {
+            control: 'none',
+            description: "React node representing the submenu to be displayed in the dropdown.",
+        },
+        onClick: {
+            table: {
+                disable: true,
+            },
+            control: 'none',
+            description: "Callback function to handle click events.",
+        },
+        icon: {
+            control: 'none',
+            description: "React node representing the icon to be displayed in the button.",
+        },
+        textContainerClasses: {
+            control: 'none',
+            description: "Tailwind classes to style the container of the text. Example: `text-center`",
+        },
+    },
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(DropDownIconButton, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    icon: getFontAwesomeIcon("cog"),
+    iconSize: "h-8 w-8",
+    iconColor: "text-black",
+    hasNotification: true,
+    notificationTextColor: "text-white",
+    notificationBgColor: "bg-green-600",
+    notificationCount: 5,
+    text: "Settings",
+    textClasses: "text-black font-serif text-md",
+    hoverBackgroundColor: "hover:bg-gray-300",
+    backgroundColor: "bg-gray-200",
+    borderColor: "border-gray-300",
+    hoverBorderColor: "hover:border-black",
+    menuPlacementClasses: "right-0 top-full mt-2 w-[200px]",
+    submenu: (_jsx(AdminSubmenu, { menuClasses: "p-4 bg-white rounded-lg shadow-lg", callToActionChildren: _jsx("div", { className: "text-gray-800 font-medium", children: "Manage Settings" }), secondCallToActionChildren: _jsx("div", { className: "text-gray-600", children: "More settings options..." }) })),
+};
+export const Alerts = Template.bind({});
+Alerts.args = {
+    icon: getFontAwesomeIcon("bell"),
+    iconSize: "h-8 w-8",
+    iconColor: "text-black",
+    hasNotification: true,
+    notificationTextColor: "text-white",
+    notificationBgColor: "bg-red-600",
+    notificationCount: 3,
+    text: "Alerts",
+    textClasses: "text-black font-serif text-md",
+    hoverBackgroundColor: "hover:bg-gray-300",
+    backgroundColor: "bg-gray-200",
+    borderColor: "border-gray-300",
+    hoverBorderColor: "hover:border-black",
+    menuPlacementClasses: "right-0 top-full mt-2 w-[344px]",
+    submenu: (_jsx(AlertSubmenu, { data: [
+            { title: "Order SA100000 status updated to Fulfilled", subtitle: "14h ago", link: "#" },
+            { title: "You have a new request from Gina Prince", subtitle: "Open TOGa Supply", link: "#" },
+            { title: "Order SA100002 status updated to Fulfilled", subtitle: "2d ago", link: "#" },
+        ], newAlertCount: 4, newAlertColor: "bg-light-green-800", clearAlertsText: "Mark all as Read", clearAlertsTextClasses: "text-gray-3 hover:text-dark-green-800", newAlertCountClasses: "text-gray-900 font-semibold", menuContainerClasses: "overflow-hidden rounded-lg border-1 border-stroke bg-white shadow-lg", menuHeaderContainerClasses: "flex justify-between items-center p-4 border-b border-gray-200", alertListContainerClasses: "overflow-y-auto max-h-[300px] divide-y divide-gray-200" })),
+};
+export const Admin = Template.bind({});
+Admin.args = {
+    icon: getFontAwesomeIcon("user"),
+    iconSize: "h-8 w-8",
+    iconColor: "text-black",
+    hasNotification: false,
+    notificationTextColor: "text-white",
+    notificationBgColor: "bg-blue-600",
+    notificationCount: 0,
+    text: "Admin",
+    textClasses: "text-black font-serif text-md",
+    hoverBackgroundColor: "hover:bg-gray-300",
+    backgroundColor: "bg-gray-200",
+    borderColor: "border-gray-300",
+    hoverBorderColor: "hover:border-black",
+    menuPlacementClasses: "right-0 top-full mt-2 w-[344px]",
+    submenu: (_jsx(AdminSubmenu, { menuClasses: "overflow-hidden rounded-lg border-1 border-stroke bg-white shadow-lg p-6", callToActionChildren: _jsx("div", { className: "flex items-center text-gray-700", children: _jsxs("a", { href: "#", className: "hover:text-dark-green-800", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("inbox", "regular") }), "Manage Requests"] }) }), secondCallToActionChildren: _jsxs("div", { className: "flex flex-col text-gray-700", children: [_jsxs("p", { className: "pb-3", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("glasses", "regular") }), "View As"] }), _jsx("div", { className: "border rounded-md border-stroke p-4", children: "Placeholder Input - Behavior TBD" })] }) })),
+};

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

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

package/dist/components/DropDownIconButton/DropDownIconButton.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import DropDownIconButton from "./DropDownIconButton";
+import { describe, expect, test } from "vitest";
+const alertData = [
+    {
+        link: "#",
+        title: "New Comment",
+        subtitle: "You have a new comment on your post.",
+        status: true,
+        externalLink: "View Comment",
+    },
+    {
+        link: "#",
+        title: "New Like",
+        subtitle: "Someone liked your post.",
+        status: true,
+        externalLink: "View Post",
+    },
+];
+const AlertSubmenu = ({ data }) => (_jsx("div", { "data-testid": "alert-submenu", children: data.map((alert, index) => (_jsxs("div", { children: [_jsx("h6", { children: alert.title }), _jsx("p", { children: alert.subtitle })] }, index))) }));
+describe("DropDownIconButton", () => {
+    test("renders correctly with AlertSubmenu", () => {
+        render(_jsx(DropDownIconButton, { icon: _jsx("img", { src: "/path/to/icon.png", alt: "icon" }), iconSize: "text-sm", iconColor: "text-black", hasNotification: true, notificationTextColor: "text-white", notificationBgColor: "bg-dark-green-800", notificationCount: 4, text: "Notifications", textClasses: "text-sm pt-1 font-medium text-black", hoverBackgroundColor: "group-hover:bg-dark-green-200", backgroundColor: "bg-gray-2", menuPlacementClasses: "right-0 top-full mt-5 w-[344px]", submenu: _jsx(AlertSubmenu, { data: alertData }) }));
+        const button = screen.getByLabelText(/Notifications/);
+        fireEvent.click(button);
+        expect(screen.getByTestId("alert-submenu")).toBeInTheDocument();
+        expect(screen.getByText(/New Comment/)).toBeInTheDocument();
+        expect(screen.getByText(/New Like/)).toBeInTheDocument();
+    });
+    test("toggles menu visibility on button click", () => {
+        render(_jsx(DropDownIconButton, { icon: _jsx("img", { src: "/path/to/icon.png", alt: "icon" }), iconSize: "text-sm", iconColor: "text-black", hasNotification: true, notificationTextColor: "text-white", notificationBgColor: "bg-dark-green-800", notificationCount: 4, text: "Notifications", textClasses: "text-sm pt-1 font-medium text-black", hoverBackgroundColor: "group-hover:bg-dark-green-200", backgroundColor: "bg-gray-2", menuPlacementClasses: "right-0 top-full mt-5 w-[344px]", submenu: _jsx(AlertSubmenu, { data: alertData }) }));
+        const button = screen.getByLabelText(/Notifications/);
+        fireEvent.click(button);
+        const submenu = screen.getByTestId("alert-submenu");
+        expect(submenu).toBeVisible();
+        fireEvent.click(button);
+        expect(submenu).not.toBeVisible();
+    });
+});

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

@@ -0,0 +1,20 @@
+import React from "react";
+export interface DropDownIconButtonProps {
+    icon: React.ReactNode;
+    iconSize: string;
+    iconColor: string;
+    hasNotification: boolean;
+    notificationTextColor: string;
+    notificationBgColor: string;
+    notificationCount: number;
+    text: string;
+    textContainerClasses?: string;
+    hoverBorderColor?: string;
+    hoverBackgroundColor?: string;
+    backgroundColor: string;
+    borderColor?: string;
+    textClasses?: string;
+    submenu: React.ReactNode;
+    menuPlacementClasses: string;
+    onClick?: () => void;
+}

package/dist/components/DropDownIconButton/DropDownIconButton.types.js

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

package/dist/components/DropDownIconButton/index.js

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

package/dist/components/Footer/ContactInfoItem.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+interface ContactInfoItemProps {
+    icon: JSX.Element | null;
+    children: ReactNode;
+}
+export declare const ContactInfoItem: React.FC<ContactInfoItemProps>;
+export {};

package/dist/components/Footer/ContactInfoItem.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ContactInfoItem = ({ icon, children, }) => {
+    return (_jsxs("div", { className: "flex w-full space-between pb-3", children: [_jsx("div", { className: "flex w-[10%] my-1", children: icon }), _jsx("div", { className: "my-1", children: children })] }));
+};

package/dist/components/Footer/DUMMYFOOTERDATA.json

@@ -0,0 +1,132 @@
+{
+    "DUMMYCONTACTDATA": [
+        {
+            "id": "1",
+            "address": "3 Seaview Boulevard",
+            "city": "Port Washington",
+            "state": "NY 11050",
+            "googleLink": "https://maps.app.goo.gl/kyLZNYZHfyKxSnSH8",
+            "phone": "217.472.0953",
+            "email": "generic-company@email.com"
+        }
+    ],
+    "DUMMYNAVDATA": [
+        {
+            "id": "1",
+            "title": "About",
+            "link": "#",
+            "links": [
+                {
+                    "menuItem": "Features",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Pricing",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Support",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Forums",
+                    "link": "#"
+                }
+            ]
+        },
+        {
+            "id": 2,
+            "title": "Projects",
+            "links": [
+                {
+                    "menuItem": "Contribute",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Media assets",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Changelog",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Releases",
+                    "link": "#"
+                }
+            ]
+        },
+        {
+            "id": 3,
+            "title": "Community",
+            "links": [
+                {
+                    "menuItem": "Join Discord",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Follow on Twitter",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Email newsletter",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "GitHub discussions",
+                    "link": "#"
+                }
+            ]
+        },
+        {
+            "id": 4,
+            "title": "Store",
+            "links": [
+                {
+                    "menuItem": "Computers",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "IpadsIpads",
+                    "link": "#"
+                },
+                {
+                    "menuItem": "Accessories",
+                    "link": "#"
+                }
+            ]
+        },
+        {
+            "title": "Extra Row",
+            "links": [
+                {
+                    "menuItem": "One submenu",
+                    "link": "#"
+                }
+            ]
+        }
+    ],
+    "DUMMYSOCIALDATA": [
+        {
+            "type": "Twitter",
+            "xmlns": "http://www.w3.org/2000/svg",
+            "path": "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z",
+            "ariaLabel": "Twitter",
+            "href": "https://twitter.com/"
+        },
+        {
+            "type": "YouTube",
+            "xmlns": "http://www.w3.org/2000/svg",
+            "path": "M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z",
+            "ariaLabel": "YouTube",
+            "href": "https://youtube.com/"
+        },
+        {
+            "type": "Facebook",
+            "xmlns": "http://www.w3.org/2000/svg",
+            "path": "M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z",
+            "ariaLabel": "Facebook",
+            "href": "https://facebook.com/"
+        }
+    ]
+}

package/dist/components/Footer/Footer.d.ts

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

package/dist/components/Footer/Footer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from "../Image/Image";
+import { DUMMYCONTACTDATA, DUMMYNAVDATA, DUMMYSOCIALDATA } from "./DUMMYFOOTERDATA.json";
+import { SocialList } from "../../utils/generateSocialList";
+import { NavList } from "../../utils/generateNavMenu";
+import { Accordion } from "../../utils/generateAccordionItem";
+import { FooterContacts } from "../../utils/generateFooterContacts";
+const Footer = ({ logo = (_jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: "w-40 p-2" })), hasTitle, hasSlogan, title, slogan, backgroundColor = "bg-gray-800", logoBorderRadius = "rounded-md", logoHoverColor = "hover:bg-gray-700", hasNavItems = true, hasSocial = true, hasContact = true, hasCopyRight = true, copyRightText, socialData = DUMMYSOCIALDATA, navData = DUMMYNAVDATA, contactData = DUMMYCONTACTDATA, socialTitle, contactTitle, copyRightTextPlacement = "text-center", socialPlacement = "flex justify-center mt-4", accordionParentStyle = "border-2 rounded-md border-black p-2 w-full", accordionExpandedStyle = "pl-3", accordionGap = "gap-4", }) => {
+    const logoClasses = `${logoHoverColor} ${logoBorderRadius}`;
+    return (_jsxs("footer", { className: `footer flex flex-col ${backgroundColor} py-6 px-6`, "data-testid": "footer", children: [_jsxs("div", { className: "flex justify-between w-full max-xl:px-2 max-lg:flex max-lg:flex-col max-xl:gap-10", children: [_jsxs("div", { className: "max-lg:flex max-lg:justify-between max-lg:w-full", children: [_jsx("div", { className: logoClasses, children: _jsx("a", { tabIndex: 0, href: "", "data-testid": "footer-logo", children: logo }) }), _jsxs("div", { "data-testid": "title-slogan", children: [hasTitle ? (_jsx("div", { "data-testid": "title", children: title })) : null, hasSlogan ? (_jsx("div", { "data-testid": "slogan", children: slogan })) : null] })] }), hasNavItems ? (_jsxs(_Fragment, { children: [_jsx("nav", { className: "flex gap-12 max-sm:hidden", "aria-label": "Site navigation", "data-testid": "footer-site-navigation", tabIndex: 0, children: _jsx(NavList, { navDataList: navData }) }), _jsx("nav", { className: `hidden flex-col ${accordionGap} col-span-6 w-3/4 max-sm:w-full max-sm:flex`, "aria-label": "Site navigation", "data-testid": "footer-mobile-navigation", children: _jsx(Accordion, { navData: navData, accordionParentStyle: accordionParentStyle, accordionExpandedStyle: accordionExpandedStyle }) })] })) : null, hasContact ? (_jsxs("div", { className: "flex flex-col space-between", "data-testid": "footer-contact-info", children: [contactTitle ? contactTitle : null, _jsx(FooterContacts, { contactDataList: contactData })] })) : null] }), hasSocial ? (_jsxs("nav", { className: `w-full ${socialPlacement}`, "aria-hidden": "false", "aria-label": "Social media navigation", "data-testid": "footer-social-navigation", children: [socialTitle ? socialTitle : null, _jsx("div", { className: "flex justify-center gap-4 mt-4", children: _jsx(SocialList, { socialDataList: socialData }) })] })) : null, hasCopyRight ? (_jsx("div", { className: `w-full ${copyRightTextPlacement}`, "aria-hidden": "false", children: copyRightText })) : null] }));
+};
+export default Footer;

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

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/react";
+import { FooterProps } from "./Footer.types";
+declare const _default: Meta<FooterProps>;
+export default _default;
+export declare const Default: any;
+export declare const CompassFooter: any;
+export declare const AlternateMobileNavStyle: any;