@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Layout/Sidebar.js

@@ -0,0 +1,121 @@
+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, { useEffect, useState, useRef } from "react";
+import { AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { IconicButton } from "../Button";
+import { Heading2, Text } from "../Type";
+import { AnimatedBox } from "../Box/Box";
+import { NAVBAR_HEIGHT } from "../BrandedNavBar/NavBar";
+import { useScrollLock } from "../utils/useScrollLock";
+import { useFeatureFlags } from "../NDSProvider/FeatureFlagsContext";
+import { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "../Navigation/components/shared/constants";
+const sidebarWidths = {
+    xs: "400px",
+    s: "520px",
+    m: "640px",
+    l: "768px",
+    xl: "1024px",
+};
+const focusFirstElement = () => {
+    const FOCUSABLE_EL_SELECTOR = "button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])";
+    const focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);
+    if (focusable && focusable[0]) {
+        focusable[0].focus();
+    }
+};
+const SidebarOverlay = ({ transitionDuration, top, transparent, zIndex = 799, onClick }) => (React.createElement(AnimatedBox, { position: "fixed", top: top, bottom: "0", left: "0", right: "0", zIndex: zIndex, bg: !transparent && "rgba(18, 43, 71, 0.5)", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: transitionDuration }, "data-testid": "sidebar-overlay", onMouseDown: onClick }));
+function Sidebar(_a) {
+    var _b;
+    var { p = "x2", width = "xs", children, onClose, title, isOpen, footer, closeButtonTestId = "sidebar-close-button", closeButtonAriaLabel, offset = "0px", triggerRef, duration = 0.25, top, closeOnOutsideClick = true, overlay = "show", disableScroll = true, hideCloseButton = false, zIndex = "sidebar", helpText, renderHelpText } = _a, props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex", "helpText", "renderHelpText"]);
+    const closeButton = useRef(null);
+    const [shouldUpdateFocus, setShouldUpdateFocus] = useState(false);
+    const { t } = useTranslation();
+    const sideBarRef = useRef(null);
+    const contentRef = useRef(null);
+    const selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
+    const { navigationV3 } = useFeatureFlags();
+    const theme = useTheme();
+    top || (top = navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT);
+    useScrollLock({
+        autoLock: overlay && disableScroll && isOpen,
+    });
+    useEffect(() => {
+        var _a;
+        if (closeButton.current && isOpen) {
+            if (closeButton && closeButton.current) {
+                closeButton.current.focus();
+                setShouldUpdateFocus(true);
+                return;
+            }
+        }
+        else if (shouldUpdateFocus) {
+            if (triggerRef) {
+                (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                focusFirstElement();
+            }
+        }
+    }, [isOpen, setShouldUpdateFocus]);
+    const variants = {
+        open: {
+            x: 0,
+            right: offset,
+            visiblility: "visible",
+            transition: {
+                duration: duration,
+                when: "beforeChildren",
+            },
+        },
+        closed: {
+            x: "100%",
+            right: "0px",
+            visiblility: "hidden",
+            transition: {
+                duration: duration,
+            },
+        },
+    };
+    const childVariants = {
+        open: {
+            opacity: 1,
+            transition: {
+                duration: 0.2,
+            },
+        },
+        closed: {
+            opacity: 0,
+            transition: {
+                duration: 0.2,
+            },
+        },
+    };
+    return (React.createElement(React.Fragment, null,
+        closeOnOutsideClick && (React.createElement(AnimatePresence, null, isOpen && overlay !== "hide" && (React.createElement(SidebarOverlay, { top: top, transparent: overlay === "transparent" || overlay === false, transitionDuration: duration, zIndex: zIndex, onClick: closeOnOutsideClick && isOpen && onClose })))),
+        React.createElement(AnimatedBox, Object.assign({ role: "dialog", paddingX: "x1", bg: "white", display: "flex", flexDirection: "column", height: `calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`, borderLeftWidth: "1px", borderLeftStyle: "solid", borderLeftColor: "lightGrey", animate: isOpen ? "open" : "closed", variants: variants, initial: isOpen ? "open" : "closed", position: "fixed", top: top, right: offset, width: typeof selectedWidth === "string" ? { default: "100%", small: selectedWidth } : selectedWidth, zIndex: zIndex, ref: sideBarRef }, props),
+            React.createElement(Flex, { flexDirection: "column", p: "x2", borderBottomWidth: "1px", borderBottomStyle: "solid", borderBottomColor: "lightGrey" },
+                React.createElement(Flex, { flexDirection: "column", gap: "x1" },
+                    React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start" },
+                        title && (React.createElement(Flex, { alignItems: "center", height: "100%" },
+                            React.createElement(Heading2, { mb: 0 }, title))),
+                        !hideCloseButton && (React.createElement(Box, { marginLeft: "x2" },
+                            React.createElement(IconicButton, { type: "button", ref: closeButton, icon: "close", onClick: onClose, "data-testid": closeButtonTestId, "aria-label": closeButtonAriaLabel || t("close") })))),
+                    renderHelpText ? renderHelpText() : helpText && React.createElement(Text, { color: "midGrey" }, helpText))),
+            React.createElement(Flex, { p: p, maxHeight: "100%", overflow: "auto", flexGrow: 1, flexDirection: "column", style: { overflowBehaviour: "contain" } },
+                React.createElement(AnimatedBox, { variants: childVariants, animate: isOpen ? "open" : "closed", flexGrow: 1, ref: contentRef }, children)),
+            footer && (React.createElement(Box, { position: "sticky", backgroundColor: "white", borderTopWidth: "1px", borderTopStyle: "solid", borderTopColor: "lightGrey", alignSelf: "flex-end", width: "100%", p: p, pt: "x2" }, footer)))));
+}
+export default Sidebar;

package/dist/src/Layout/Sidebar.story.d.ts

@@ -1,22 +1,22 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-        chromatic: {
-            delay: number;
-        };
-    };
-};
-export default _default;
-export declare const _Sidebar: () => React.JSX.Element;
-export declare const WithoutOverlay: () => React.JSX.Element;
-export declare const OpenByDefault: () => React.JSX.Element;
-export declare const WithCustomOffset: () => React.JSX.Element;
-export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
-export declare const WithoutCloseButton: () => React.JSX.Element;
-export declare const WithALongTitle: () => React.JSX.Element;
-export declare const WithDifferentWidths: () => React.JSX.Element;
-export declare const WithHelpText: () => React.JSX.Element;
-export declare const WithOtherElementsInHelpText: () => React.JSX.Element;
-export declare const WithARenderedHelpText: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+        chromatic: {
+            delay: number;
+        };
+    };
+};
+export default _default;
+export declare const _Sidebar: () => React.JSX.Element;
+export declare const WithoutOverlay: () => React.JSX.Element;
+export declare const OpenByDefault: () => React.JSX.Element;
+export declare const WithCustomOffset: () => React.JSX.Element;
+export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
+export declare const WithoutCloseButton: () => React.JSX.Element;
+export declare const WithALongTitle: () => React.JSX.Element;
+export declare const WithDifferentWidths: () => React.JSX.Element;
+export declare const WithHelpText: () => React.JSX.Element;
+export declare const WithOtherElementsInHelpText: () => React.JSX.Element;
+export declare const WithARenderedHelpText: () => React.JSX.Element;

package/dist/src/Layout/Sidebar.story.js

@@ -0,0 +1,205 @@
+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 { text } from "@storybook/addon-knobs";
+import React, { useState, useRef } from "react";
+import { ApplicationFrame, Breadcrumbs, Link, Page, Sidebar, Select, PrimaryButton, Box, Textarea, Heading3, Navigation, } from "..";
+import { useUrlProps } from "../utils/testing/useUrlProps";
+export default {
+    title: "Components/Sidebar",
+    parameters: {
+        layout: "fullscreen",
+        chromatic: { delay: 300 }, // time for sidebar animation
+    },
+};
+const ExampleSidebar = (_a) => {
+    var { isOpen, onClose } = _a, props = __rest(_a, ["isOpen", "onClose"]);
+    return (React.createElement(Sidebar, Object.assign({ isOpen: isOpen, title: "Filters", onClose: onClose, footer: React.createElement(PrimaryButton, null, "Apply") }, props),
+        React.createElement(Select, { options: [{ label: "first option", value: 1 }], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Delivery:" }),
+        React.createElement(Select, { options: [], labelText: "Last Delivery:" })));
+};
+export const _Sidebar = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const urlProps = useUrlProps();
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
+            React.createElement(ExampleSidebar, Object.assign({ isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }, urlProps)))));
+};
+export const WithoutOverlay = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" },
+                    "Space for more content",
+                    React.createElement("input", null))),
+            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", overlay: false }))));
+};
+export const OpenByDefault = () => {
+    const [isOpen, setIsOpen] = useState(true);
+    const triggerRef = useRef(null);
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
+            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
+};
+export const WithCustomOffset = () => {
+    const [isOpen, setIsOpen] = useState(true);
+    const triggerRef = useRef(null);
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
+            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", offset: text("offset", "400px"), duration: text("duration", "0.5") }))));
+};
+export const DontCloseOnOutsideClick = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
+            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSideBarTrigger", closeOnOutsideClick: false }))));
+};
+export const WithoutCloseButton = () => {
+    const [isOpen, setIsOpen] = useState(true);
+    const triggerRef = useRef(null);
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
+            React.createElement(ExampleSidebar, { hideCloseButton: true, isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
+};
+export const WithALongTitle = () => {
+    const [isOpen, setIsOpen] = useState(true);
+    const triggerRef = useRef(null);
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeSidebar = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
+        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+                React.createElement(Link, { href: "/" }, "Home"),
+                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
+            React.createElement(Box, { minWidth: "300px" },
+                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
+                React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
+            React.createElement(ExampleSidebar, { title: "A very very very very very very very long title", isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
+};
+export const WithDifferentWidths = () => {
+    const [width, setWidth] = useState({ value: "xs", label: "Extra small (xs)" });
+    const options = [
+        { value: "xs", label: "Extra small (xs) - Default" },
+        { value: "s", label: "Small (s)" },
+        { value: "m", label: "Medium (m)" },
+        { value: "l", label: "Large (l)" },
+        { value: "xl", label: "Extra large (xl)" },
+        { value: "700px", label: "Custom value (700px)" },
+        { value: "75ch", label: "Custom value (75ch)" },
+        { value: "100%", label: "Custom value (100%)" },
+    ];
+    return (React.createElement(Sidebar, { hideCloseButton: true, top: 0, height: "100%", width: width.value, isOpen: true, title: `${width.label} sidebar` },
+        React.createElement(Select, { value: width.value, options: options, onChange: (s) => {
+                const [option] = options.filter(({ value }) => value === s);
+                setWidth(option);
+            }, labelText: "Sidebar size" })));
+};
+export const WithHelpText = () => {
+    const [helpText, setHelpText] = useState("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lacus nec finibus egestas.");
+    return (React.createElement(Sidebar, { footer: React.createElement(PrimaryButton, null, "Apply"), top: 0, height: "100%", isOpen: true, title: "With help text", helpText: helpText },
+        React.createElement(Textarea, { value: helpText, labelText: "Help Text", placeholder: "Enter some text...", onChange: (event) => {
+                setHelpText(event.target.value);
+            } })));
+};
+export const WithOtherElementsInHelpText = () => {
+    return (React.createElement(Sidebar, { hideCloseButton: true, top: 0, height: "100%", isOpen: true, title: "With help text", helpText: React.createElement(React.Fragment, null,
+            "Carry over remaining quantity to a future PO line item.",
+            " ",
+            React.createElement(Link, { underline: false, href: "/" }, "Learn more"),
+            " ") }));
+};
+export const WithARenderedHelpText = () => {
+    return (React.createElement(Sidebar, { hideCloseButton: true, top: 0, height: "100%", isOpen: true, title: "With help text", renderHelpText: () => (React.createElement(Heading3, { color: "red", fontWeight: "bold" },
+            "This is a custom help text",
+            " ",
+            React.createElement(Link, { href: "/", underline: false }, "Learn more"))) }));
+};

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

@@ -1,4 +1,4 @@
-export { default as ApplicationFrame } from "./ApplicationFrame";
-export { default as Page } from "./Page";
-export { default as Sidebar } from "./Sidebar";
-export { default as Header } from "./Header";
+export { default as ApplicationFrame } from "./ApplicationFrame";
+export { default as Page } from "./Page";
+export { default as Sidebar } from "./Sidebar";
+export { default as Header } from "./Header";

package/dist/src/Layout/index.js

@@ -0,0 +1,4 @@
+export { default as ApplicationFrame } from "./ApplicationFrame";
+export { default as Page } from "./Page";
+export { default as Sidebar } from "./Sidebar";
+export { default as Header } from "./Header";

package/dist/src/Link/Link.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { StyledProps } from "../StyledProps";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { NulogyAppName } from "../types/NulogyApp";
-export interface LinkProps extends React.ComponentPropsWithRef<"a">, Partial<StyledProps> {
-    underline?: boolean;
-    hover?: string;
-    variant?: ComponentVariant;
-    to?: string;
-    as?: React.ElementType | string;
-    forApp?: NulogyAppName;
-    openInNewTab?: boolean;
-}
-export default function Link({ children, forApp, openInNewTab, ...props }: LinkProps): React.JSX.Element;
+import React from "react";
+import { StyledProps } from "../StyledProps";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { NulogyAppName } from "../types/NulogyApp";
+export interface LinkProps extends React.ComponentPropsWithRef<"a">, Partial<StyledProps> {
+    underline?: boolean;
+    hover?: string;
+    variant?: ComponentVariant;
+    to?: string;
+    as?: React.ElementType | string;
+    forApp?: NulogyAppName;
+    openInNewTab?: boolean;
+}
+export default function Link({ children, forApp, openInNewTab, ...props }: LinkProps): React.JSX.Element;

package/dist/src/Link/Link.js

@@ -0,0 +1,54 @@
+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 styled from "styled-components";
+import { darken } from "polished";
+import { themeGet } from "@styled-system/theme-get";
+import React from "react";
+import { addStyledProps } from "../StyledProps";
+import { AppTag } from "../AppTag";
+import { InlineFlex } from "../Flex";
+import { Icon } from "../Icon";
+export default function Link(_a) {
+    var { children, forApp, openInNewTab } = _a, props = __rest(_a, ["children", "forApp", "openInNewTab"]);
+    const openInNewTabProps = openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    const renderContent = () => {
+        if (forApp || openInNewTab) {
+            return (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(LinkWrapper, { underline: props.underline }, children),
+                forApp && React.createElement(AppTag, { app: forApp, type: "interactive" }),
+                openInNewTab && React.createElement(Icon, { icon: "openInNew", size: "x2", color: "midGrey" })));
+        }
+        return children;
+    };
+    return (React.createElement(Anchor, Object.assign({}, openInNewTabProps, props), renderContent()));
+}
+const LinkWrapper = styled.span(({ underline = true }) => ({
+    textDecoration: underline ? "underline" : "none",
+}));
+const resetButtonStyles = {
+    background: "none",
+    border: "none",
+};
+function getColorFromProps(props) {
+    return themeGet(`colors.${props.color}`, props.color)(props);
+}
+function getColor(props) {
+    return getColorFromProps(props) || props.theme.colors.blue;
+}
+const getHoverColor = (props) => (props.hover ? getColor(props) : darken("0.1", getColor(props)));
+const Anchor = styled.a((_a) => {
+    var { underline = true, as } = _a, props = __rest(_a, ["underline", "as"]);
+    return (Object.assign(Object.assign({}, resetButtonStyles), { padding: as === "button" ? "0" : undefined, textDecoration: underline ? "underline" : "none", fontSize: props.theme.fontSizes.base, color: getColor(props), "&:hover": {
+            cursor: "pointer",
+            color: getHoverColor(props),
+        } }));
+}, addStyledProps);

package/dist/src/Link/Link.story.d.ts

@@ -1,55 +1,55 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Link: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomFontSize: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithoutUnderline: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithADifferentColor: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithADifferentFontSize: () => React.JSX.Element;
-export declare const AsAButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const _ReactRouterLink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAppTag: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const OpenInNewTab: () => React.JSX.Element;
-export declare const OpenInNewTabWithAppTag: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Link: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomFontSize: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithoutUnderline: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithADifferentColor: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithADifferentFontSize: () => React.JSX.Element;
+export declare const AsAButton: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const _ReactRouterLink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAppTag: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const OpenInNewTab: () => React.JSX.Element;
+export declare const OpenInNewTabWithAppTag: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Link/Link.story.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
+import { Link } from "../index";
+export default {
+    title: "Components/Link",
+};
+export const _Link = () => React.createElement(Link, { href: "http://nulogy.design" }, "Link");
+_Link.story = {
+    name: "Link ",
+};
+export const WithCustomFontSize = () => (React.createElement(Link, { href: "http://nulogy.design", fontSize: "small" }, "Link"));
+WithCustomFontSize.story = {
+    name: "with custom font size",
+};
+export const WithoutUnderline = () => (React.createElement(Link, { underline: false, href: "http://nulogy.design" }, "Link"));
+WithoutUnderline.story = {
+    name: "Without underline",
+};
+export const WithADifferentColor = () => (React.createElement(Link, { color: "black", hover: "red", href: "http://nulogy.design" }, "Link"));
+WithADifferentColor.story = {
+    name: "With a different color",
+};
+export const WithADifferentFontSize = () => (React.createElement(Link, { fontSize: "large", href: "http://nulogy.design" }, "Link"));
+export const AsAButton = () => React.createElement(Link, { as: "button" }, "Link");
+AsAButton.story = {
+    name: "As a <button>",
+};
+export const _ReactRouterLink = () => (React.createElement(BrowserRouter, null,
+    React.createElement(ReactRouterLink, { component: Link, to: "/place" }, "Link")));
+_ReactRouterLink.story = {
+    name: "with react router",
+};
+export const WithAppTag = () => (React.createElement(Link, { href: "#production-scheduling", forApp: "production-scheduling" }, "POLI-120392"));
+WithAppTag.story = {
+    // This story is referenced in the AppTag story. If you change the name, update the URL in the AppTag story.
+    name: "With AppTag",
+};
+export const OpenInNewTab = () => (React.createElement(Link, { href: "#production-scheduling", openInNewTab: true }, "POLI-120392"));
+export const OpenInNewTabWithAppTag = () => (React.createElement(Link, { href: "#production-scheduling", forApp: "production-scheduling", openInNewTab: true }, "POLI-120392"));
+OpenInNewTabWithAppTag.story = {
+    name: "Open in new tab with AppTag",
+};

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

@@ -1 +1 @@
-export { default as Link } from "./Link";
+export { default as Link } from "./Link";

package/dist/src/Link/index.js

@@ -0,0 +1 @@
+export { default as Link } from "./Link";