@databiosphere/findable-ui 21.3.0 → 22.0.0

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.stories.js

@@ -1,11 +1,14 @@
-import React from "react";
 import { AzulFileDownload } from "./azulFileDownload";
-export default {
+const meta = {
     component: AzulFileDownload,
     title: "Components/Common/IconButton/Download",
 };
-const AzulFileDownloadTemplate = (args) => React.createElement(AzulFileDownload, { ...args });
-export const AzulFileDownloadStory = AzulFileDownloadTemplate.bind({});
-AzulFileDownloadStory.args = {
-    url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+export default meta;
+export const AzulFileDownloadStory = {
+    args: {
+        entityName: "",
+        relatedEntityId: "",
+        relatedEntityName: "",
+        url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+    },
 };

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.d.ts

@@ -1,5 +1,13 @@
-import { ComponentMeta } from "@storybook/react";
-import { Summaries } from "./summaries";
-declare const _default: ComponentMeta<typeof Summaries>;
-export default _default;
-export declare const SummariesStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./summaries").SummariesProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        summaries: {
+            control: "object";
+        };
+    };
+    component: ({ summaries }: import("./summaries").SummariesProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SummariesStory: Story;

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.js

@@ -1,18 +1,18 @@
-import React from "react";
 import { Summaries } from "./summaries";
-export default {
+const meta = {
     argTypes: {
-        summaries: { control: "array" },
+        summaries: { control: "object" },
     },
     component: Summaries,
     title: "Components/Summary",
 };
-const SummariesTemplate = (args) => (React.createElement(Summaries, { ...args }));
-export const SummariesStory = SummariesTemplate.bind({});
-SummariesStory.args = {
-    summaries: [
-        { count: "1", label: "Species" },
-        { count: "1.1k", label: "Donors" },
-        { count: "508.5k", label: "Files" },
-    ],
+export default meta;
+export const SummariesStory = {
+    args: {
+        summaries: [
+            { count: "1", label: "Species" },
+            { count: "1.1k", label: "Donors" },
+            { count: "508.5k", label: "Files" },
+        ],
+    },
 };

package/lib/components/Index/components/Hero/hero.stories.d.ts

@@ -1,5 +1,23 @@
-import { ComponentMeta } from "@storybook/react";
-import { Hero } from "./hero";
-declare const _default: ComponentMeta<typeof Hero>;
-export default _default;
-export declare const HeroStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./hero").HeroProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        Summaries: {
+            table: {
+                disable: true;
+            };
+        };
+        title: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ SideBarButton, Summaries, title, }: import("./hero").HeroProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HeroStory: Story;

package/lib/components/Index/components/Hero/hero.stories.js

@@ -1,7 +1,8 @@
 import React from "react";
+import { Summaries } from "./components/Summaries/summaries";
 import { SummariesStory } from "./components/Summaries/summaries.stories";
 import { Hero } from "./hero";
-export default {
+const meta = {
     argTypes: {
         Summaries: { table: { disable: true } },
         title: { table: { disable: true } },
@@ -12,9 +13,10 @@ export default {
     },
     title: "Components/Hero/ExploreView",
 };
-const HeroTemplate = (args) => React.createElement(Hero, { ...args });
-export const HeroStory = HeroTemplate.bind({});
-HeroStory.args = {
-    Summaries: React.createElement(SummariesStory, { ...SummariesStory.args }),
-    title: "Data Explorer",
+export default meta;
+export const HeroStory = {
+    args: {
+        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
+        title: "Data Explorer",
+    },
 };

package/lib/components/Index/components/NTagCell/nTagCell.stories.d.ts

@@ -1,5 +1,16 @@
-import { ComponentMeta } from "@storybook/react";
-import { NTagCell } from "./nTagCell";
-declare const _default: ComponentMeta<typeof NTagCell>;
-export default _default;
-export declare const NTagCellStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./nTagCell").NTagCellProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        values: {
+            control: "object";
+        };
+    };
+    component: ({ label, TypographyProps, values, }: import("./nTagCell").NTagCellProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const NTagCellStory: Story;

package/lib/components/Index/components/NTagCell/nTagCell.stories.js

@@ -1,16 +1,16 @@
-import React from "react";
 import { NTagCell } from "./nTagCell";
-export default {
+const meta = {
     argTypes: {
         label: { control: "text" },
-        values: { control: "array" },
+        values: { control: "object" },
     },
     component: NTagCell,
     title: "Components/Table/Cell/NTagCell",
 };
-const NTagCellTemplate = (args) => (React.createElement(NTagCell, { ...args }));
-export const NTagCellStory = NTagCellTemplate.bind({});
-NTagCellStory.args = {
-    label: "species",
-    values: ["Homo sapiens", "Mus musculus"],
+export default meta;
+export const NTagCellStory = {
+    args: {
+        label: "species",
+        values: ["Homo sapiens", "Mus musculus"],
+    },
 };

package/lib/components/Index/index.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Summaries } from "./components/Hero/components/Summaries/summaries";
 import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
 import { Index } from "./index";
 export default {
@@ -17,7 +18,7 @@ export default {
 export const IndexStory = {
     args: {
         List: undefined,
-        Summaries: React.createElement(SummariesStory, { ...SummariesStory.args }),
+        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
         Tabs: undefined,
         title: "Explore Data",
     },

package/lib/components/Layout/components/BackPage/backPageView.stories.d.ts

@@ -1,5 +1,31 @@
-import { ComponentMeta } from "@storybook/react";
-import { BackPageView } from "./backPageView";
-declare const _default: ComponentMeta<typeof BackPageView>;
-export default _default;
-export declare const BackPageViewStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./backPageView").BackPageViewProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        isDetailOverview: {
+            control: "boolean";
+        };
+        mainColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        sideColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        top: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }: import("./backPageView").BackPageViewProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BackPageViewStory: Story;

package/lib/components/Layout/components/BackPage/backPageView.stories.js

@@ -1,15 +1,23 @@
 import React from "react";
+import { CollaboratingOrganizations } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../../../Project/components/Contacts/contacts";
 import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../../../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../../../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../../../Project/components/Description/description";
 import { DescriptionStory } from "../../../Project/components/Description/description.stories";
+import { Details } from "../../../Project/components/Details/details";
 import { DetailsStory } from "../../../Project/components/Details/details.stories";
+import { Publications } from "../../../Project/components/Publications/publications";
 import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../../../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { BackPageView } from "./backPageView";
-export default {
+const meta = {
     argTypes: {
         isDetailOverview: { control: "boolean" },
         mainColumn: { table: { disable: true } },
@@ -22,20 +30,21 @@ export default {
     },
     title: "Views/BackPage",
 };
-const BackPageViewTemplate = (args) => (React.createElement(BackPageView, { ...args }));
-export const BackPageViewStory = BackPageViewTemplate.bind({});
-BackPageViewStory.args = {
-    isDetailOverview: true,
-    mainColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DescriptionStory, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
-        React.createElement(ContactsStory, { ...ContactsStory.args }),
-        React.createElement(PublicationsStory, { ...PublicationsStory.args }),
-        React.createElement(ContributorsStory, { ...ContributorsStory.args }),
-        React.createElement(CollaboratingOrganizationsStory, { ...CollaboratingOrganizationsStory.args }),
-        React.createElement(DataCuratorsStory, { ...DataCuratorsStory.args }),
-        React.createElement(SupplementaryLinksStory, { ...SupplementaryLinksStory.args }),
-        React.createElement(DataReleasePolicyStory, null))),
-    sideColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DetailsStory, { title: DetailsStory.args?.title ?? "", keyValuePairs: DetailsStory.args?.keyValuePairs }))),
-    top: React.createElement(React.Fragment, null),
+export default meta;
+export const BackPageViewStory = {
+    args: {
+        isDetailOverview: true,
+        mainColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Description, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
+            React.createElement(Contacts, { ...ContactsStory.args }),
+            React.createElement(Publications, { ...PublicationsStory.args }),
+            React.createElement(Contributors, { ...ContributorsStory.args }),
+            React.createElement(CollaboratingOrganizations, { ...CollaboratingOrganizationsStory.args }),
+            React.createElement(DataCurators, { ...DataCuratorsStory.args }),
+            React.createElement(SupplementaryLinks, { ...SupplementaryLinksStory.args }),
+            React.createElement(DataReleasePolicy, null))),
+        sideColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Details, { ...DetailsStory.args }))),
+        top: React.createElement(React.Fragment, null),
+    },
 };

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

@@ -1,6 +1,27 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Footer } from "./footer";
-declare const _default: Meta<typeof Footer>;
-export default _default;
+declare const meta: {
+    argTypes: {
+        Branding: {
+            control: {
+                disabled: boolean;
+            };
+        };
+        navLinks: {
+            control: "object";
+        };
+        socials: {
+            control: {
+                disabled: boolean;
+            };
+        };
+    };
+    component: ({ Branding, className, navLinks, socials, versionInfo, }: import("./footer").FooterProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Footer>;
 export declare const FooterStory: Story;

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

@@ -7,10 +7,10 @@ import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
 import { Logo } from "../Header/components/Content/components/Logo/logo";
 import { Footer } from "./footer";
-export default {
+const meta = {
     argTypes: {
         Branding: { control: { disabled: true } },
-        navLinks: { control: "array" },
+        navLinks: { control: "object" },
         socials: { control: { disabled: true } },
     },
     component: Footer,
@@ -19,9 +19,10 @@ export default {
     },
     title: "Components/Layout/Footer",
 };
+export default meta;
 export const FooterStory = {
     args: {
-        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo }),
+        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo.src }),
         navLinks: [
             {
                 label: "Help",

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -26,7 +26,7 @@ export const NavigationMenu = ({ closeAncestor, isSelected = false, isSubMenu =
             } },
             React.createElement(MPaper, { variant: "menu" },
                 React.createElement(MClickAwayListener, { onClickAway: onClose },
-                    React.createElement(MMenuList, null,
+                    React.createElement(MMenuList, { component: "div" },
                         React.createElement(NavigationMenuItems, { closeMenu: () => {
                                 onClose();
                                 closeAncestor?.();

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -1,5 +1,5 @@
-import { Divider, ListItemIcon, ListItemText, MenuItem as MMenuItem, } from "@mui/material";
-import { useRouter } from "next/router";
+import { Divider, ListItemIcon, ListItemText, Link as MLink, MenuItem as MMenuItem, } from "@mui/material";
+import Link from "next/link";
 import React, { Fragment } from "react";
 import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, TEXT_UPPERCASE_500, } from "../../../../../../../../../../theme/common/typography";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
@@ -8,23 +8,22 @@ import { isNavigationLinkSelected } from "../../common/utils";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 import { POPPER_PROPS } from "./common/constants";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
-    const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
-        React.createElement(MMenuItem, { disabled: !url, onClick: () => {
-                closeMenu();
-                isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, selected: isNavigationLinkSelected(pathname, selectedPatterns) },
-            icon && React.createElement(ListItemIcon, null, icon),
-            React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
-                    variant: url
-                        ? description
-                            ? TEXT_BODY_500
-                            : TEXT_BODY_400
-                        : TEXT_UPPERCASE_500,
-                }, secondary: description, secondaryTypographyProps: {
-                    variant: TEXT_BODY_SMALL_400_2_LINES,
-                } })),
-        divider && React.createElement(Divider, null))))));
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => {
+        const isClientSide = isClientSideNavigation(url);
+        return nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
+            React.createElement(MMenuItem, { component: isClientSide ? Link : MLink, disabled: !url, href: url, onClick: () => closeMenu(), rel: isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, selected: isNavigationLinkSelected(pathname, selectedPatterns), target: target },
+                icon && React.createElement(ListItemIcon, null, icon),
+                React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
+                        variant: url
+                            ? description
+                                ? TEXT_BODY_500
+                                : TEXT_BODY_400
+                            : TEXT_UPPERCASE_500,
+                    }, secondary: description, secondaryTypographyProps: {
+                        variant: TEXT_BODY_SMALL_400_2_LINES,
+                    } })),
+            divider && React.createElement(Divider, null)));
+    })));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/constants.d.ts

@@ -0,0 +1 @@
+export declare const NAVIGATION_TEST_ID = "navigation";

package/lib/components/Layout/components/Header/components/Content/components/Navigation/constants.js

@@ -0,0 +1 @@
+export const NAVIGATION_TEST_ID = "navigation";

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { TestIdProps } from "../../../../../../../types";
 import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
@@ -15,7 +16,7 @@ export interface NavLinkItem {
     url: string;
     visible?: Partial<Record<BreakpointKey, boolean>>;
 }
-export interface NavigationProps {
+export interface NavigationProps extends TestIdProps {
     className?: string;
     closeAncestor?: () => void;
     headerProps?: HeaderProps;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.js

@@ -1,5 +1,5 @@
-import { Button, Divider } from "@mui/material";
-import { useRouter } from "next/router";
+import { Button, Divider, Link as MLink } from "@mui/material";
+import Link from "next/link";
 import React, { forwardRef, Fragment } from "react";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
@@ -8,19 +8,18 @@ import { NavigationButtonLabel } from "./components/NavigationButtonLabel/naviga
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { Navigation as Links } from "./navigation.styles";
-export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, }, ref) {
-    const router = useRouter();
-    return (React.createElement(Links, { ref: ref, className: className, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => menuItems ? (React.createElement(Fragment, { key: i },
-        isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
-        divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
-        React.createElement(Button, { disabled: !url, onClick: () => {
-                closeAncestor?.();
-                isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, variant: isNavigationLinkSelected(pathname, selectedPatterns)
-                ? "activeNav"
-                : "nav" },
-            React.createElement(NavigationButtonLabel, { label: label })),
-        divider && React.createElement(Divider, null))))));
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, testId, }, ref) {
+    return (React.createElement(Links, { ref: ref, className: className, "data-testid": testId, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => {
+        const isClientSide = isClientSideNavigation(url);
+        return menuItems ? (React.createElement(Fragment, { key: i },
+            isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
+            divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
+            React.createElement(Button, { component: isClientSide ? Link : MLink, disabled: !url, href: url, onClick: () => closeAncestor?.(), rel: isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target, variant: isNavigationLinkSelected(pathname, selectedPatterns)
+                    ? "activeNav"
+                    : "nav" },
+                React.createElement(NavigationButtonLabel, { label: label })),
+            divider && React.createElement(Divider, null)));
+    })));
 });

package/lib/components/Layout/components/Header/header.js

@@ -7,6 +7,7 @@ import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication, renderButton as renderAuthenticationButton, renderIconButton as renderAuthenticationIconButton, } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { renderButton as renderSearchButton, renderIconButton as renderSearchIconButton, Search, } from "./components/Content/components/Actions/components/Search/search";
+import { NAVIGATION_TEST_ID } from "./components/Content/components/Navigation/constants";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -38,7 +39,7 @@ export const Header = ({ ...headerProps }) => {
                     isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
                     isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsL })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
-                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsC })))),
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, testId: NAVIGATION_TEST_ID, links: navItemsC })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
                 React.createElement(Right, null,
                     isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsR })),

package/lib/components/Layout/components/Header/header.stories.js

@@ -25,7 +25,7 @@ const url = "/";
 export const HeaderStory = {
     args: {
         authenticationEnabled: false,
-        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
+        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo.src }),
         navigation: [
             undefined,
             [

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.d.ts

@@ -1,5 +1,13 @@
-import { ComponentMeta } from "@storybook/react";
-import { SidebarLabel } from "./sidebarLabel";
-declare const _default: ComponentMeta<typeof SidebarLabel>;
-export default _default;
-export declare const SidebarLabelStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./sidebarLabel").SidebarLabelProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+    };
+    component: ({ label }: import("./sidebarLabel").SidebarLabelProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SidebarLabelStory: Story;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { SidebarLabel } from "./sidebarLabel";
-export default {
+const meta = {
     argTypes: {
         label: { control: "text" },
     },
     component: SidebarLabel,
     title: "Components/Label",
 };
-const SidebarLabelTemplate = (args) => (React.createElement(SidebarLabel, { ...args }));
-export const SidebarLabelStory = SidebarLabelTemplate.bind({});
-SidebarLabelStory.args = {
-    label: "Filter",
+export default meta;
+export const SidebarLabelStory = {
+    args: {
+        label: "Filter",
+    },
 };

package/lib/components/Layout/components/Sidebar/sidebar.stories.js

@@ -1,3 +1,4 @@
+import { fn } from "@storybook/test";
 import React from "react";
 import { Sidebar } from "./sidebar";
 export default {
@@ -34,5 +35,6 @@ export const TemporaryOpenSidebarStory = {
     args: {
         children: React.createElement("div", null),
         drawerOpen: true,
+        onDrawerClose: fn(),
     },
 };

package/lib/components/Links/links.stories.d.ts

@@ -1,5 +1,13 @@
-import { ComponentMeta } from "@storybook/react";
-import { Links } from "./links";
-declare const _default: ComponentMeta<typeof Links>;
-export default _default;
-export declare const LinksStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./links").LinksProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        links: {
+            control: "object";
+        };
+    };
+    component: ({ divider, links }: import("./links").LinksProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LinksStory: Story;