@databiosphere/findable-ui 0.0.0

package/lib/components/Layout/components/Floating/floating.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Floating = void 0;
+const react_1 = __importStar(require("react"));
+const ComponentCreator_1 = require("../../../ComponentCreator/ComponentCreator");
+const Floating = ({ components }) => {
+    return (react_1.default.createElement(react_1.Fragment, null, components && react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: components, response: {} })));
+};
+exports.Floating = Floating;

package/lib/components/Layout/components/Footer/footer.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Social } from "../../../common/Socials/socials";
+import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
+export interface FooterProps {
+    Branding: ReactNode;
+    className?: string;
+    navLinks?: NavLinkItem[];
+    socials?: Social[];
+}
+export declare const Footer: ({ Branding, className, navLinks, socials, }: FooterProps) => JSX.Element;

package/lib/components/Layout/components/Footer/footer.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const iconButton_styles_1 = require("../../../common/IconButton/iconButton.styles");
+const entities_1 = require("../../../Links/common/entities");
+const footer_styles_1 = require("./footer.styles");
+const Footer = ({ Branding, className, navLinks, socials, }) => {
+    return (react_1.default.createElement(footer_styles_1.AppBar, { className: className, color: "inherit", component: "footer", variant: "footer" },
+        react_1.default.createElement(material_1.Toolbar, { variant: "dense" },
+            Branding,
+            (navLinks || socials) && (react_1.default.createElement(footer_styles_1.Links, null,
+                navLinks &&
+                    navLinks.map(({ label, target = entities_1.ANCHOR_TARGET.SELF, url }, i) => (react_1.default.createElement(footer_styles_1.Link, { key: `${url}${i}`, label: label, target: target, url: url }))),
+                socials && (react_1.default.createElement(footer_styles_1.Socials, { buttonSize: "small", IconButtonElType: iconButton_styles_1.IconButtonSocialsFooter, socials: socials })))))));
+};
+exports.Footer = Footer;

package/lib/components/Layout/components/Footer/footer.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { Footer } from "./footer";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./footer").FooterProps>;
+export default _default;
+declare type Story = StoryObj<typeof Footer>;
+export declare const FooterStory: Story;

package/lib/components/Layout/components/Footer/footer.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterStory = void 0;
+const react_1 = __importDefault(require("react"));
+const logo_svg_1 = __importDefault(require("../../../../images/logo.svg"));
+const discourseIcon_1 = require("../../../common/CustomIcon/components/DiscourseIcon/discourseIcon");
+const facebookIcon_1 = require("../../../common/CustomIcon/components/FacebookIcon/facebookIcon");
+const gitHubIcon_1 = require("../../../common/CustomIcon/components/GitHubIcon/gitHubIcon");
+const xIcon_1 = require("../../../common/CustomIcon/components/XIcon/xIcon");
+const youTubeIcon_1 = require("../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon");
+const logo_1 = require("../Header/components/Content/components/Logo/logo");
+const footer_1 = require("./footer");
+exports.default = {
+    argTypes: {
+        Branding: { control: { disabled: true } },
+        navLinks: { control: "array" },
+        socials: { control: { disabled: true } },
+    },
+    component: footer_1.Footer,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Layout/Footer",
+};
+exports.FooterStory = {
+    args: {
+        Branding: react_1.default.createElement(logo_1.Logo, { alt: "logo", height: 24, link: "/", src: logo_svg_1.default }),
+        navLinks: [
+            {
+                label: "Help",
+                url: "https://support.google.com/",
+            },
+            {
+                label: "Privacy",
+                url: "https://policies.google.com/privacy?hl=en-US",
+            },
+        ],
+        socials: [
+            {
+                Icon: discourseIcon_1.DiscourseIcon,
+                label: null,
+                url: "https://www.discourse.org/",
+            },
+            {
+                Icon: xIcon_1.XIcon,
+                label: null,
+                url: "https://twitter.com",
+            },
+            {
+                Icon: facebookIcon_1.FacebookIcon,
+                label: null,
+                url: "https://facebook.com",
+            },
+            {
+                Icon: youTubeIcon_1.YouTubeIcon,
+                label: null,
+                url: "https://www.youtube.com",
+            },
+            {
+                Icon: gitHubIcon_1.GitHubIcon,
+                label: null,
+                url: "https://github.com",
+            },
+        ],
+    },
+};

package/lib/components/Layout/components/Footer/footer.styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const AppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
+export declare const Links: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Link: import("@emotion/styled").StyledComponent<import("../../../Links/components/Link/link").LinkProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Socials: import("@emotion/styled").StyledComponent<import("../../../common/Socials/socials").SocialsProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Footer/footer.styles.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Socials = exports.Link = exports.Links = exports.AppBar = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
+const colors_1 = require("../../../../styles/common/mixins/colors");
+const fonts_1 = require("../../../../styles/common/mixins/fonts");
+const socials_1 = require("../../../common/Socials/socials");
+const link_1 = require("../../../Links/components/Link/link");
+exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
+  padding: 16px 0;
+
+  .MuiToolbar-root {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 24px;
+    justify-content: space-between;
+    min-height: unset;
+    padding: 0 16px;
+  }
+
+  ${breakpoints_1.mediaTabletUp} {
+    padding: 0;
+
+    .MuiToolbar-root {
+      align-items: center;
+      flex-direction: row;
+      gap: unset;
+      min-height: 56px;
+    }
+  }
+`;
+exports.Links = styled_1.default.div `
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  ${breakpoints_1.mediaTabletUp} {
+    flex-direction: row;
+  }
+`;
+exports.Link = (0, styled_1.default)(link_1.Link) `
+  ${fonts_1.textBodySmall400};
+  align-items: center;
+  color: ${colors_1.inkMain};
+  display: flex;
+`;
+exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+  gap: 8px;
+`;

package/lib/components/Layout/components/Header/common/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const HEADER_HEIGHT = 56;
+export declare const HEADER_FADE_TIMEOUT = 0;
+export declare const FADE_TRANSITION_PROPS: {
+    timeout: number;
+    unmountOnExit: boolean;
+};
+export declare const HEADER_NAVIGATION_LABEL: {
+    MORE: string;
+    SOCIALS: string;
+};
+export declare const SWITCH_TRANSITION_PROPS: {
+    timeout: number;
+    unmountOnExit: boolean;
+};

package/lib/components/Layout/components/Header/common/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SWITCH_TRANSITION_PROPS = exports.HEADER_NAVIGATION_LABEL = exports.FADE_TRANSITION_PROPS = exports.HEADER_FADE_TIMEOUT = exports.HEADER_HEIGHT = void 0;
+exports.HEADER_HEIGHT = 56;
+exports.HEADER_FADE_TIMEOUT = 0;
+exports.FADE_TRANSITION_PROPS = {
+    timeout: exports.HEADER_FADE_TIMEOUT,
+    unmountOnExit: true,
+};
+exports.HEADER_NAVIGATION_LABEL = {
+    MORE: "More",
+    SOCIALS: "Follow Us",
+};
+exports.SWITCH_TRANSITION_PROPS = {
+    timeout: 0,
+    unmountOnExit: true,
+};

package/lib/components/Layout/components/Header/common/entities.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { Social } from "../../../../common/Socials/socials";
+export interface SocialMedia {
+    label: ReactNode;
+    socials: Social[];
+}

package/lib/components/Layout/components/Header/common/entities.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/Layout/components/Header/common/utils.d.ts

@@ -0,0 +1,22 @@
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+import { SocialMedia } from "./entities";
+/**
+ * Returns the navigation links as configured, where the "More" menu is flattened.
+ * @param links - Header navigation links.
+ * @returns header navigation links, without links grouped under the "More" menu.
+ */
+export declare function flattenMoreLink(links: NavLinkItem[]): NavLinkItem[];
+/**
+ * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
+ * @param links - Header navigation links.
+ * @returns header navigation links.
+ */
+export declare function flattenNavigationLinks(links: NavLinkItem[]): NavLinkItem[];
+/**
+ * Returns header navigation links with socials appended with the corresponding label "Follow Us".
+ * @param links - Header navigation links.
+ * @param socialMedia - Header social media.
+ * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
+ * @returns header navigation links.
+ */
+export declare function getHeaderNavigationLinks(links: NavLinkItem[], socialMedia: SocialMedia | undefined, onlySmDesktop: boolean): NavLinkItem[];

package/lib/components/Layout/components/Header/common/utils.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHeaderNavigationLinks = exports.flattenNavigationLinks = exports.flattenMoreLink = void 0;
+const renderComponent_1 = require("../../../../ComponentCreator/components/RenderComponent/renderComponent");
+const entities_1 = require("../../../../Links/common/entities");
+const constants_1 = require("./constants");
+/**
+ * Returns the navigation links as configured, where the "More" menu is flattened.
+ * @param links - Header navigation links.
+ * @returns header navigation links, without links grouped under the "More" menu.
+ */
+function flattenMoreLink(links) {
+    return links.flatMap((link) => {
+        if (link.label === constants_1.HEADER_NAVIGATION_LABEL.MORE) {
+            if (link.flatten === false) {
+                return link;
+            }
+            return link.menuItems;
+        }
+        return link;
+    });
+}
+exports.flattenMoreLink = flattenMoreLink;
+/**
+ * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
+ * @param links - Header navigation links.
+ * @returns header navigation links.
+ */
+function flattenNavigationLinks(links) {
+    return links.flatMap((link) => {
+        if (link.flatten || link.label === constants_1.HEADER_NAVIGATION_LABEL.MORE) {
+            return link.menuItems;
+        }
+        return link;
+    });
+}
+exports.flattenNavigationLinks = flattenNavigationLinks;
+/**
+ * Returns header navigation links with socials appended with the corresponding label "Follow Us".
+ * @param links - Header navigation links.
+ * @param socialMedia - Header social media.
+ * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
+ * @returns header navigation links.
+ */
+function getHeaderNavigationLinks(links, socialMedia, onlySmDesktop) {
+    if (onlySmDesktop) {
+        const navLinks = [...links];
+        if (socialMedia) {
+            navLinks.push({
+                label: socialMedia.label,
+                menuItems: getFollowUsMenuItems(socialMedia.socials),
+                url: "",
+            });
+        }
+        return navLinks;
+    }
+    // Return the links without the "More" or "Follow Us" menu.
+    return flattenMoreLink(links);
+}
+exports.getHeaderNavigationLinks = getHeaderNavigationLinks;
+/**
+ * Returns menu items for the "Follow Us" menu.
+ * @param socials - Social configuration.
+ * @returns a list of social menu items for the "Follow Us" menu.
+ */
+function getFollowUsMenuItems(socials) {
+    return socials.map(({ Icon, label, url }) => {
+        return {
+            icon: (0, renderComponent_1.RenderComponent)(Object.assign({ Component: Icon }, { fontSize: "small" })),
+            label,
+            target: entities_1.ANCHOR_TARGET.BLANK,
+            url,
+        };
+    });
+}

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface ActionsProps {
+    children: ReactNode | ReactNode[];
+    showActions?: boolean;
+}
+export declare const Actions: ({ children, showActions, }: ActionsProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Actions = void 0;
+const react_1 = __importDefault(require("react"));
+const actions_styles_1 = require("./actions.styles");
+const Actions = ({ children, showActions = true, }) => {
+    return react_1.default.createElement(react_1.default.Fragment, null, showActions && react_1.default.createElement(actions_styles_1.HeaderActions, null, children));
+};
+exports.Actions = Actions;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const HeaderActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderActions = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../../../../../theme/common/breakpoints");
+exports.HeaderActions = styled_1.default.div `
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  justify-content: flex-end;
+
+  ${({ theme }) => theme.breakpoints.up(breakpoints_1.DESKTOP_SM)} {
+    flex: none;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface AuthenticationProps {
+    authenticationEnabled?: boolean;
+    closeMenu: () => void;
+}
+export declare const Authentication: ({ authenticationEnabled, closeMenu, }: AuthenticationProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Authentication = void 0;
+const router_1 = require("next/router");
+const react_1 = __importStar(require("react"));
+const useAuthentication_1 = require("../../../../../../../../../../hooks/useAuthentication/useAuthentication");
+const authenticationMenu_1 = require("./components/AuthenticationMenu/authenticationMenu");
+const requestAuthentication_1 = require("./components/RequestAuthentication/requestAuthentication");
+const Authentication = ({ authenticationEnabled, closeMenu, }) => {
+    const { isAuthenticated, requestAuthentication, userProfile } = (0, useAuthentication_1.useAuthentication)();
+    const router = (0, router_1.useRouter)();
+    const onLogout = (0, react_1.useCallback)(() => {
+        location.href = router.basePath;
+    }, [router]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, authenticationEnabled &&
+        (isAuthenticated && userProfile ? (react_1.default.createElement(authenticationMenu_1.AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (react_1.default.createElement(requestAuthentication_1.RequestAuthentication, { closeMenu: closeMenu, requestAuthorization: requestAuthentication })))));
+};
+exports.Authentication = Authentication;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
+export interface AuthenticationMenuProps {
+    onLogout: () => void;
+    userProfile: UserProfile;
+}
+export declare const AuthenticationMenu: ({ onLogout, userProfile, }: AuthenticationMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthenticationMenu = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const authenticationMenu_styles_1 = require("./authenticationMenu.styles");
+const AuthenticationMenu = ({ onLogout, userProfile, }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const open = Boolean(anchorEl);
+    const onOpenMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCloseMenu = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(authenticationMenu_styles_1.UserIcon, { onClick: onOpenMenu },
+            react_1.default.createElement(authenticationMenu_styles_1.Avatar, { alt: `${userProfile.given_name} ${userProfile.family_name}`, src: userProfile.picture })),
+        react_1.default.createElement(authenticationMenu_styles_1.AuthenticationMenu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, autoFocus: false, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+                horizontal: "right",
+                vertical: "top",
+            } },
+            react_1.default.createElement(authenticationMenu_styles_1.UserSummary, null,
+                "You are signed in as:",
+                react_1.default.createElement(authenticationMenu_styles_1.UserNames, { noWrap: true },
+                    userProfile.given_name,
+                    " ",
+                    userProfile.family_name)),
+            react_1.default.createElement(material_1.MenuItem, { onClick: () => {
+                    onCloseMenu();
+                    onLogout();
+                } }, "Logout"))));
+};
+exports.AuthenticationMenu = AuthenticationMenu;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./authenticationMenu").AuthenticationMenuProps>;
+export default _default;
+export declare const AuthenticationMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./authenticationMenu").AuthenticationMenuProps>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthenticationMenuStory = void 0;
+const react_1 = __importDefault(require("react"));
+const authenticationMenu_1 = require("./authenticationMenu");
+exports.default = {
+    argTypes: {
+        onLogout: {
+            description: "Callback to be called when 'Logout' button is clicked",
+        },
+        userProfile: {
+            description: "User profile with name and avatar",
+        },
+    },
+    component: authenticationMenu_1.AuthenticationMenu,
+    title: "Components/Navigation/AuthenticationMenu",
+};
+const AuthenticationMenuTemplate = (args) => react_1.default.createElement(authenticationMenu_1.AuthenticationMenu, Object.assign({}, args));
+exports.AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
+exports.AuthenticationMenuStory.args = {
+    userProfile: {
+        email: "john@smith.com",
+        email_verified: true,
+        family_name: "Smith",
+        given_name: "John",
+        hd: "",
+        locale: "",
+        name: "john_smith",
+        picture: "https://i.pravatar.cc/200",
+        sub: "",
+    },
+};