@nulogy/components 14.8.2 → 15.0.1

package/dist/src/TopBar/TopBar.styled.js

@@ -0,0 +1,140 @@
+import { DialogOverlay } from "@reach/dialog";
+import { motion } from "framer-motion";
+import { transparentize } from "polished";
+import styled from "styled-components";
+import { addStyledProps } from "../StyledProps";
+import { TOPBAR } from "./constants";
+const MenuItemList = styled.ul(({ theme }) => ({
+    display: "grid",
+    width: "100%",
+    gap: theme.space.x1,
+    flexWrap: "wrap",
+    listStyle: "none",
+    padding: theme.space.x1_5,
+    margin: 0,
+    maxHeight: `calc(100dvh - ${theme.space[TOPBAR.themedHeight]})`,
+    overflow: "auto",
+    gridTemplateColumns: "1fr",
+    [`@media (min-width: ${theme.breakpoints.medium})`]: {
+        gridTemplateColumns: "repeat(2, 1fr)",
+    },
+    [`@media (min-width: ${theme.breakpoints.large})`]: {
+        gridTemplateColumns: "repeat(3, 1fr)",
+    },
+}));
+const Header = styled.header(({ theme }) => ({
+    userSelect: "none",
+    touchAction: "none",
+    position: "sticky",
+    top: "0",
+    zIndex: theme.zIndices.navBar,
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderBottomColor: theme.colors.lightGrey,
+    background: transparentize(0.4, theme.colors.white),
+    backdropFilter: "blur(8px)",
+    width: "100dvw",
+}));
+const Navigation = styled.nav(({ theme }) => ({
+    height: theme.space[TOPBAR.themedHeight],
+    display: "flex",
+    alignItems: "center",
+    paddingLeft: theme.space.x2,
+    paddingRight: theme.space.x1,
+}));
+const StylelessButton = styled.button({
+    backgroundColor: "transparent",
+    border: "none",
+    margin: 0,
+    padding: 0,
+    textAlign: "inherit",
+    font: "inherit",
+    borderRadius: 0,
+    appearance: "none",
+}, addStyledProps);
+const MenuButton = styled(StylelessButton)(({ theme }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space.x1,
+    borderRadius: theme.radii.medium,
+    transition: "background-color 0.2s",
+    cursor: "pointer",
+    "&:active, &:hover": {
+        backgroundColor: theme.colors.lightGrey,
+    },
+}));
+const NavigationItemsList = styled.ul({
+    padding: 0,
+    margin: 0,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    listStyle: "none",
+    whiteSpace: "nowrap",
+});
+const StyledBackLink = styled.a(({ theme }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    color: theme.colors.midGrey,
+    textDecoration: "none",
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+}));
+const StyledPageTitle = styled.li(({ theme }) => ({
+    paddingLeft: theme.space.x1,
+    paddingRight: theme.space.x1,
+    color: theme.colors.darkGrey,
+    textDecoration: "none",
+    fontSize: theme.fontSizes.small,
+    fontWeight: theme.fontWeights.medium,
+    lineHeight: theme.lineHeights.base,
+    whiteSpace: "nowrap",
+    flex: "auto",
+    textAlign: "center",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+}));
+const Overlay = styled(motion(DialogOverlay))(({ theme }) => ({
+    position: "fixed",
+    top: theme.space[TOPBAR.themedHeight],
+    bottom: theme.space.none,
+    left: theme.space.none,
+    right: theme.space.none,
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "flex-end",
+    backgroundColor: transparentize(0.85, theme.colors.white),
+}));
+const TileLink = styled.a(({ theme }) => ({
+    backgroundColor: transparentize(0.15)(theme.colors.blackBlue),
+    borderRadius: theme.radii.large,
+    display: "flex",
+    height: "100%",
+    alignItems: "flex-start",
+    padding: theme.space.x2,
+    textDecoration: "none",
+    color: theme.colors.white,
+    gap: theme.space.x1_5,
+    whiteSpace: "nowrap",
+    outlineOffset: theme.space.x0_25,
+    outlineColor: theme.colors.blue,
+}));
+const StyledMenuItem = styled(motion.li)(({ theme }) => ({
+    "&:only-child": {
+        [`@media (min-width: ${theme.breakpoints.medium})`]: {
+            gridColumn: "span 2",
+        },
+        [`@media (min-width: ${theme.breakpoints.large})`]: {
+            gridColumn: "span 3",
+        },
+    },
+    [`@media (min-width: ${theme.breakpoints.large})`]: {
+        "&:first-child:nth-last-child(2), &:last-child:nth-child(2)": {
+            gridColumn: "span 3",
+        },
+    },
+}));
+export { Navigation, Header, NavigationItemsList, StyledBackLink, StyledPageTitle, Overlay, TileLink, StylelessButton, MenuItemList, MenuButton, StyledMenuItem, };

package/dist/src/TopBar/components/BackLink.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentProps } from "react";
-import { MaxWidthProps } from "styled-system";
-import { StyledBackLink } from "../TopBar.styled";
-interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
-}
-export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): React.JSX.Element;
-export {};
+import React, { ComponentProps } from "react";
+import { MaxWidthProps } from "styled-system";
+import { StyledBackLink } from "../TopBar.styled";
+interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
+}
+export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): React.JSX.Element;
+export {};

package/dist/src/TopBar/components/BackLink.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box } from "../../Box";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import { Icon } from "../../Icon";
+import { Text } from "../../Type";
+import { StyledBackLink } from "../TopBar.styled";
+const BACK_LINK_MAX_WIDTH = {
+    phoneLandscape: "20ch",
+    tabletPortrait: "18ch",
+    tabletLandscape: "20ch",
+    laptop: "24ch",
+};
+export function BackLink(_a) {
+    var { children, maxWidth = BACK_LINK_MAX_WIDTH } = _a, props = __rest(_a, ["children", "maxWidth"]);
+    const md = useMediaQuery("phoneLandscape");
+    return (React.createElement(Box, { as: "li", flex: "1 1" },
+        React.createElement(StyledBackLink, Object.assign({}, props, { "data-testid": "topbar-back-link" }),
+            React.createElement(Icon, { icon: "arrowBack" }),
+            md && (React.createElement(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small" }, children)))));
+}

package/dist/src/TopBar/components/Menu.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-export declare function Menu({ children, defaultOpened, ...props }: {
-    defaultOpened?: boolean;
-    children: React.ReactNode;
-    "aria-label"?: string;
-}): React.JSX.Element;
+import React from "react";
+export declare function Menu({ children, defaultOpened, ...props }: {
+    defaultOpened?: boolean;
+    children: React.ReactNode;
+    "aria-label"?: string;
+}): React.JSX.Element;

package/dist/src/TopBar/components/Menu.js

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { DialogContent } from "@reach/dialog";
+import { AnimatePresence } from "framer-motion";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Flex } from "../../Flex";
+import { Icon } from "../../Icon";
+import { MenuButton, Overlay, MenuItemList } from "../TopBar.styled";
+const blurVariants = {
+    hidden: {
+        backdropFilter: "blur(0px)",
+        WebkitBackdropFilter: "blur(0px)",
+    },
+    visible: {
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        transition: {
+            duration: 0.5,
+            ease: "easeInOut",
+        },
+    },
+    exit: {
+        backdropFilter: "blur(0px)",
+        WebkitBackdropFilter: "blur(0px)",
+        transition: {
+            duration: 0.5,
+            ease: "easeOut",
+        },
+    },
+};
+export function Menu(_a) {
+    var _b;
+    var { children, defaultOpened = false } = _a, props = __rest(_a, ["children", "defaultOpened"]);
+    const [showMenu, setShowMenu] = React.useState(defaultOpened);
+    const [animationComplete, setAnimationComplete] = React.useState(false);
+    const { t } = useTranslation();
+    function close() {
+        setShowMenu(false);
+        setAnimationComplete(false);
+    }
+    function toggle() {
+        if (!showMenu) {
+            setAnimationComplete(false);
+        }
+        setShowMenu((s) => !s);
+    }
+    return (React.createElement(Flex, { justifyContent: "flex-end", as: "li", color: "black", flex: "1 1" },
+        React.createElement(MenuButton, { onClick: toggle, "data-testid": "topbar-menu-button" },
+            React.createElement(Icon, { size: "x3", color: "midGrey", icon: showMenu ? "close" : "apps" })),
+        React.createElement(AnimatePresence, null, showMenu && (React.createElement(Overlay, { "data-testid": "topbar-menu-overlay", "data-visible": animationComplete ? "true" : undefined, initial: "hidden", animate: "visible", exit: "exit", variants: blurVariants, isOpen: showMenu, onAnimationComplete: () => {
+                if (showMenu) {
+                    setAnimationComplete(true);
+                }
+            }, onDismiss: close },
+            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : t("menu options") },
+                React.createElement(MenuItemList, null, children)))))));
+}

package/dist/src/TopBar/components/MenuItem.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
-export declare function MenuItem({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+import React from "react";
+export declare function MenuItem({ children }: React.PropsWithChildren<{}>): React.JSX.Element;

package/dist/src/TopBar/components/MenuItem.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { StyledMenuItem } from "../TopBar.styled";
+const fadeInVariants = {
+    hidden: {
+        opacity: 0,
+        filter: "blur(8px)",
+        y: -16,
+        scale: 0.95,
+        transition: {
+            ease: "easeOut",
+            duration: 0.25,
+        },
+    },
+    visible: {
+        opacity: 1,
+        filter: "blur(0px)",
+        y: 0,
+        scale: 1,
+        transition: {
+            type: "spring",
+            duration: 0.75,
+        },
+    },
+};
+export function MenuItem({ children }) {
+    return (React.createElement(StyledMenuItem, { "data-testid": "topbar-menu-item", initial: "hidden", animate: "visible", exit: "hidden", variants: fadeInVariants }, children));
+}

package/dist/src/TopBar/components/MenuItemLink.d.ts

@@ -1,9 +1,9 @@
-import { IconName } from "@nulogy/icons";
-import React, { ComponentProps } from "react";
-import { TileLink } from "../TopBar.styled";
-export interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {
-    title: string;
-    description?: string;
-    icon: IconName;
-}
-export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): React.JSX.Element;
+import { IconName } from "@nulogy/icons";
+import React, { ComponentProps } from "react";
+import { TileLink } from "../TopBar.styled";
+export interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {
+    title: string;
+    description?: string;
+    icon: IconName;
+}
+export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): React.JSX.Element;

package/dist/src/TopBar/components/MenuItemLink.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { motion } from "framer-motion";
+import React from "react";
+import { Flex } from "../../Flex";
+import { Icon } from "../../Icon";
+import { Text } from "../../Type";
+import { TileLink } from "../TopBar.styled";
+const MotionText = motion(Text);
+export function MenuItemLink(_a) {
+    var { description, title, icon } = _a, props = __rest(_a, ["description", "title", "icon"]);
+    return (React.createElement(TileLink, Object.assign({}, props),
+        React.createElement(Icon, { icon: icon, size: "x3" }),
+        React.createElement(Flex, { flexDirection: "column", justifyContent: "center" },
+            React.createElement(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base" }, title),
+            React.createElement(MotionText, { fontSize: "xs" }, description))));
+}

package/dist/src/TopBar/components/PageTitle.d.ts

@@ -1,3 +1,3 @@
-import React, { ComponentProps } from "react";
-import { StyledPageTitle } from "../TopBar.styled";
-export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): React.JSX.Element;
+import React, { ComponentProps } from "react";
+import { StyledPageTitle } from "../TopBar.styled";
+export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): React.JSX.Element;

package/dist/src/TopBar/components/PageTitle.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { StyledPageTitle } from "../TopBar.styled";
+export function PageTitle(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledPageTitle, Object.assign({ "data-testid": "topbar-page-title" }, props), children));
+}

package/dist/src/TopBar/constants.d.ts

@@ -1,3 +1,3 @@
-export declare const TOPBAR: {
-    themedHeight: string;
-};
+export declare const TOPBAR: {
+    themedHeight: string;
+};

package/dist/src/TopBar/constants.js

@@ -0,0 +1,3 @@
+export const TOPBAR = {
+    themedHeight: "x6",
+};

package/dist/src/TopBar/index.d.ts

@@ -1,2 +1,2 @@
-export { TopBar } from "./TopBar";
-export type { MenuItemLinkProps } from "./components/MenuItemLink";
+export { TopBar } from "./TopBar";
+export type { MenuItemLinkProps } from "./components/MenuItemLink";

package/dist/src/TopBar/index.js

@@ -0,0 +1 @@
+export { TopBar } from "./TopBar";

package/dist/src/TopBar/stories/TopBar.backButton.story.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-declare const _default: {
-    parameters: {
-        layout: string;
-        chromatic: {
-            modes: {
-                locale: string;
-                desktopScale: string;
-                theme: string;
-                viewports: number[];
-            };
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const WithNoLabel: () => React.JSX.Element;
-export declare const WithACustomMaxWidth: () => React.JSX.Element;
-export declare const WithARouterLink: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    parameters: {
+        layout: string;
+        chromatic: {
+            modes: {
+                locale: string;
+                desktopScale: string;
+                theme: string;
+                viewports: number[];
+            };
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const WithNoLabel: () => React.JSX.Element;
+export declare const WithACustomMaxWidth: () => React.JSX.Element;
+export declare const WithARouterLink: () => React.JSX.Element;

package/dist/src/TopBar/stories/TopBar.backButton.story.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Link, BrowserRouter } from "react-router-dom";
+import { TopBar } from "../TopBar";
+import { legacy as theme } from "../../theme/theme";
+import numberFromDimension from "../../utils/numberFromDimension";
+import { menuItems } from "./fixtures";
+export default {
+    parameters: {
+        layout: "fullscreen",
+        chromatic: {
+            modes: {
+                locale: "en",
+                desktopScale: "standard",
+                theme: "touch",
+                viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
+            },
+        },
+    },
+    title: "Components/TopBar/BackLink",
+};
+export const WithNoLabel = () => (React.createElement(TopBar.Root, null,
+    React.createElement(TopBar.BackLink, { href: "/cycle-counts" }),
+    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, Object.assign({ key: props.title }, props)))))));
+export const WithACustomMaxWidth = () => (React.createElement(TopBar.Root, null,
+    React.createElement(TopBar.BackLink, { href: "/cycle-counts", maxWidth: {
+            small: "10ch",
+            medium: "8ch",
+            large: "12ch",
+            extraLarge: "16ch",
+        } }, "Cycle counts"),
+    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+export const WithARouterLink = () => (React.createElement(BrowserRouter, null,
+    React.createElement(TopBar.Root, null,
+        React.createElement(Link, { component: TopBar.BackLink, to: "/cycle-counts" }, "Cycle counts"),
+        React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+        React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+            React.createElement(TopBar.MenuItemLink, Object.assign({}, props)))))))));

package/dist/src/TopBar/stories/TopBar.menu.story.d.ts

@@ -1,22 +1,22 @@
-import React from "react";
-declare const _default: {
-    parameters: {
-        layout: string;
-        chromatic: {
-            delay: number;
-            modes: {
-                locale: string;
-                desktopScale: string;
-                theme: string;
-                viewports: number[];
-            };
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const withDefaultOpenMenu: () => React.JSX.Element;
-export declare const WithOneMenuItem: () => React.JSX.Element;
-export declare const WithTwoItems: () => React.JSX.Element;
-export declare const WithThreeItems: () => React.JSX.Element;
-export declare const WithRouterLinks: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    parameters: {
+        layout: string;
+        chromatic: {
+            delay: number;
+            modes: {
+                locale: string;
+                desktopScale: string;
+                theme: string;
+                viewports: number[];
+            };
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const withDefaultOpenMenu: () => React.JSX.Element;
+export declare const WithOneMenuItem: () => React.JSX.Element;
+export declare const WithTwoItems: () => React.JSX.Element;
+export declare const WithThreeItems: () => React.JSX.Element;
+export declare const WithRouterLinks: () => React.JSX.Element;

package/dist/src/TopBar/stories/TopBar.menu.story.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Link, BrowserRouter } from "react-router-dom";
+import { TopBar } from "../TopBar";
+import { legacy as theme } from "../../theme/theme";
+import numberFromDimension from "../../utils/numberFromDimension";
+import { menuItems } from "./fixtures";
+export default {
+    parameters: {
+        layout: "fullscreen",
+        chromatic: {
+            delay: 3000,
+            modes: {
+                locale: "en",
+                desktopScale: "standard",
+                theme: "touch",
+                viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
+            },
+        },
+    },
+    title: "Components/TopBar/Menu",
+};
+export const withDefaultOpenMenu = () => (React.createElement(TopBar.Root, null,
+    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
+    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+export const WithOneMenuItem = () => (React.createElement(TopBar.Root, null,
+    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
+    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 1).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+export const WithTwoItems = () => (React.createElement(TopBar.Root, null,
+    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
+    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 2).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+export const WithThreeItems = () => (React.createElement(TopBar.Root, null,
+    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
+    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 3).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+export const WithRouterLinks = () => {
+    const routerMenuItems = menuItems.map((_a) => {
+        var { href } = _a, item = __rest(_a, ["href"]);
+        return (Object.assign(Object.assign({}, item), { to: href }));
+    });
+    return (React.createElement(TopBar.Root, null,
+        React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
+        React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+        React.createElement(TopBar.Menu, { defaultOpened: true },
+            React.createElement(BrowserRouter, { basename: "/" }, routerMenuItems.map((item) => (React.createElement(TopBar.MenuItem, { key: item.title },
+                React.createElement(Link, Object.assign({ component: TopBar.MenuItemLink }, item)))))))));
+};

package/dist/src/TopBar/stories/TopBar.story.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-        chromatic: {
-            modes: {
-                locale: string;
-                desktopScale: string;
-                theme: string;
-                viewports: number[];
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithALongTitle: () => React.JSX.Element;
-export declare const WithAnApplicationFrame: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+        chromatic: {
+            modes: {
+                locale: string;
+                desktopScale: string;
+                theme: string;
+                viewports: number[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithALongTitle: () => React.JSX.Element;
+export declare const WithAnApplicationFrame: () => React.JSX.Element;