@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Alert/Alert.d.ts

@@ -1,26 +1,26 @@
-import React from "react";
-import { FlexProps } from "../Flex/Flex";
-export declare const NotificationTypes: {
-    readonly danger: "danger";
-    readonly informative: "informative";
-    readonly success: "success";
-    readonly warning: "warning";
-};
-export type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
-export type AlertProps = FlexProps & {
-    isCloseable?: boolean;
-    closeAriaLabel?: string;
-    title?: string;
-    type?: NotificationType;
-    onClose?: any;
-    controlled?: boolean;
-};
-declare const _default: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FlexProps & {
-    isCloseable?: boolean;
-    closeAriaLabel?: string;
-    title?: string;
-    type?: NotificationType;
-    onClose?: any;
-    controlled?: boolean;
-}, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: AlertProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export default _default;
+import React from "react";
+import { FlexProps } from "../Flex/Flex";
+export declare const NotificationTypes: {
+    readonly danger: "danger";
+    readonly informative: "informative";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+export type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
+export type AlertProps = FlexProps & {
+    isCloseable?: boolean;
+    closeAriaLabel?: string;
+    title?: string;
+    type?: NotificationType;
+    onClose?: any;
+    controlled?: boolean;
+};
+declare const _default: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FlexProps & {
+    isCloseable?: boolean;
+    closeAriaLabel?: string;
+    title?: string;
+    type?: NotificationType;
+    onClose?: any;
+    controlled?: boolean;
+}, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: AlertProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export default _default;

package/dist/src/Alert/Alert.js

@@ -0,0 +1,70 @@
+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, { useState } from "react";
+import styled from "styled-components";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { Box } from "../Box";
+import { Icon } from "../Icon";
+import { Flex } from "../Flex";
+import { Text } from "../Type";
+import CloseButton from "./CloseButton";
+export const NotificationTypes = {
+    danger: "danger",
+    informative: "informative",
+    success: "success",
+    warning: "warning",
+};
+const styles = ({ theme }) => ({
+    a: {
+        color: theme.colors.black,
+    },
+});
+const alertColours = {
+    danger: {
+        borderColor: "red",
+        backgroundColor: "lightRed",
+    },
+    informative: {
+        borderColor: "blue",
+        backgroundColor: "lightBlue",
+    },
+    success: {
+        borderColor: "green",
+        backgroundColor: "lightGreen",
+    },
+    warning: {
+        borderColor: "yellow",
+        backgroundColor: "lightYellow",
+    },
+};
+const Alert = (_a) => {
+    var { children, isCloseable = false, title, type = "informative", closeAriaLabel, onClose, controlled = false } = _a, props = __rest(_a, ["children", "isCloseable", "title", "type", "closeAriaLabel", "onClose", "controlled"]);
+    const [isVisible, setIsVisible] = useState(true);
+    const componentVariant = useComponentVariant();
+    const hideAlert = () => {
+        if (onClose)
+            onClose();
+        if (!controlled) {
+            setIsVisible(false);
+        }
+    };
+    if (!isVisible)
+        return null;
+    return (React.createElement(Flex, Object.assign({ bg: alertColours[type].backgroundColor, p: "x2", borderRadius: "medium", borderLeftWidth: "4px", borderLeftColor: alertColours[type].borderColor, borderLeftStyle: "solid", role: "alert", alignItems: children ? "flex-start" : undefined }, props),
+        type === "danger" && React.createElement(Icon, { size: "x3", icon: "error", mr: "x1", color: alertColours[type].borderColor }),
+        type === "success" && React.createElement(Icon, { size: "x3", icon: "check", mr: "x1", color: alertColours[type].borderColor }),
+        React.createElement(Flex, { flexDirection: "column", gap: componentVariant === "touch" ? "half" : "none", mr: "auto" },
+            title && React.createElement(Text, { fontWeight: "bold" }, title),
+            React.createElement(Box, null, children)),
+        isCloseable && React.createElement(CloseButton, { onClick: hideAlert, "aria-label": closeAriaLabel })));
+};
+export default styled(Alert)(styles);

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

@@ -1,24 +1,24 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AlertTypes: () => React.JSX.Element;
-export declare const WithACloseButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithATitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithALink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AlertTypes: () => React.JSX.Element;
+export declare const WithACloseButton: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithATitle: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithALink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Alert/Alert.story.js

@@ -0,0 +1,27 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import React from "react";
+import { Alert, Flex } from "../index";
+import { Link } from "../Link";
+export default {
+    title: "Components/Alert",
+};
+const alertTypes = ["danger", "informative", "success", "warning"];
+export const AlertTypes = () => (React.createElement(Flex, { flexDirection: "column", gap: "x1" }, alertTypes.map((type) => (React.createElement(Alert, { key: type, type: type, title: type },
+    "This is an alert with type \"",
+    type,
+    "\"")))));
+export const WithACloseButton = () => (React.createElement(Alert, { isCloseable: boolean("isCloseable", true) }, text("Alert Text", "Warning alert")));
+WithACloseButton.story = {
+    name: "With a close button",
+};
+export const WithATitle = () => (React.createElement(Alert, { title: "Danger title!", type: "danger" }, text("Alert Text", "Danger alert")));
+WithATitle.story = {
+    name: "With a title",
+};
+export const WithALink = () => (React.createElement(Alert, null,
+    "An alert with ",
+    React.createElement(Link, { href: "/" }, "linked details"),
+    "."));
+WithALink.story = {
+    name: "With a link",
+};

package/dist/src/Alert/CloseButton.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-type CloseButtonProps = {
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    "aria-label": string;
-};
-declare const CloseButton: ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => React.JSX.Element;
-export default CloseButton;
+import React from "react";
+type CloseButtonProps = {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    "aria-label": string;
+};
+declare const CloseButton: ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => React.JSX.Element;
+export default CloseButton;

package/dist/src/Alert/CloseButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Flex } from "../Flex";
+import { ControlIcon } from "../Button";
+const CloseButton = ({ onClick, "aria-label": ariaLabel }) => {
+    const { t } = useTranslation();
+    return (React.createElement(Flex, { ml: "x2", height: "x3" },
+        React.createElement(ControlIcon, { size: "x3", icon: "close", onClick: onClick, "aria-label": ariaLabel || t("close"), label: t("close") })));
+};
+export default CloseButton;

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

@@ -1,2 +1,2 @@
-export { default as Alert, NotificationTypes } from "./Alert";
-export type { NotificationType } from "./Alert";
+export { default as Alert, NotificationTypes } from "./Alert";
+export type { NotificationType } from "./Alert";

package/dist/src/Alert/index.js

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

package/dist/src/AppTag/AppTag.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { NulogyAppName } from "../types/NulogyApp";
-import { AppTagType } from "./types";
-export type AppTagProps = {
-    app: NulogyAppName;
-    type?: AppTagType;
-    hideTooltip?: boolean;
-};
-export default function AppTag({ app, type, hideTooltip }: AppTagProps): React.JSX.Element;
+import React from "react";
+import { NulogyAppName } from "../types/NulogyApp";
+import { AppTagType } from "./types";
+export type AppTagProps = {
+    app: NulogyAppName;
+    type?: AppTagType;
+    hideTooltip?: boolean;
+};
+export default function AppTag({ app, type, hideTooltip }: AppTagProps): React.JSX.Element;

package/dist/src/AppTag/AppTag.js

@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { Text } from "../Type";
+import { APP_ABBREVIATIONS, APP_DISPLAY_NAMES } from "../types/NulogyApp";
+import { MiniTooltip } from "../MiniTooltip";
+import { LogoWrapper } from "./components/LogoWrapper";
+import NulogyLogo from "./components/NulogyLogo";
+import { appTagColors } from "./constants";
+export default function AppTag({ app, type = "active", hideTooltip = false }) {
+    const theme = useTheme();
+    const abbreviation = APP_ABBREVIATIONS[app];
+    const displayName = APP_DISPLAY_NAMES[app];
+    return (React.createElement(MiniTooltip, { content: displayName, hideTooltip: hideTooltip },
+        React.createElement(Wrapper, { "$type": type },
+            React.createElement(LogoWrapper, { "$type": type },
+                React.createElement(NulogyLogo, { width: theme.space.x1, height: theme.space.x1 })),
+            React.createElement(Text, { fontSize: "smaller", fontWeight: "bold", color: theme.colors[appTagColors[type].primary], px: "x0_75", pl: "x0_5", lineHeight: "smallerText", letterSpacing: ".05em" }, abbreviation))));
+}
+const Wrapper = styled.span(({ theme, $type }) => {
+    const color = theme.colors[appTagColors[$type].secondary];
+    return {
+        margin: theme.space.none,
+        paddingTop: theme.space.none,
+        paddingBottom: theme.space.none,
+        fontSize: theme.fontSizes.smaller,
+        lineHeight: theme.lineHeights.smallerText,
+        alignSelf: "center",
+        display: "inline-flex",
+        fontWeight: theme.fontWeights.bold,
+        userSelect: "none",
+        boxShadow: `inset 0 0 0 1px ${color}`,
+        borderRadius: theme.radii.rounded,
+        backgroundColor: theme.colors.white,
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover, a:hover &": {
+            backgroundColor: color,
+        },
+    };
+});

package/dist/src/AppTag/components/LogoWrapper.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { AppTagType } from "../types";
-export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    $type?: AppTagType;
-}>> & string;
+/// <reference types="react" />
+import { AppTagType } from "../types";
+export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $type?: AppTagType;
+}>> & string;

package/dist/src/AppTag/components/LogoWrapper.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { appTagColors } from "../constants";
+export const LogoWrapper = styled.span(({ theme, $type }) => {
+    const color = theme.colors[appTagColors[$type].primary];
+    return {
+        background: color,
+        display: "inline-block",
+        padding: theme.space.half,
+        borderRadius: theme.radii.circle,
+        lineHeight: 0,
+    };
+});

package/dist/src/AppTag/components/NulogyLogo.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
-export default function NulogyLogo({ width, height, ...props }: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+import React from "react";
+export default function NulogyLogo({ width, height, ...props }: React.SVGProps<SVGSVGElement>): React.JSX.Element;

package/dist/src/AppTag/components/NulogyLogo.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";
+export default function NulogyLogo(_a) {
+    var { width = 8, height = 8 } = _a, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", Object.assign({ width: width, height: height, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M6.75004 0.290783L8 0.872348V6.10892C8 7.23335 6.80591 7.43084 5.99989 7.56333C6.4609 7.43084 6.7526 7.28197 6.75004 6.10892V1.45441L5.50008 0.872348L6.75004 0.290783ZM1.49987 7.27255V4.07344C1.49987 3.7514 1.70755 3.38717 1.95959 3.26163L3.25007 2.61655V4.65104L4.50003 5.52785C4.75207 5.67671 5.25017 5.68019 5.25017 5.23657V4.36373L4.74951 4.07245V0L0.938216 1.63404C0.420065 1.85585 0 2.55502 0 3.2001V8L1.49987 7.27255Z", fill: "white" })));
+}

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

@@ -1,5 +1,5 @@
-import { AppTagType, ColorName } from "./types";
-export declare const appTagColors: Record<AppTagType, {
-    primary: ColorName;
-    secondary: ColorName;
-}>;
+import { AppTagType, ColorName } from "./types";
+export declare const appTagColors: Record<AppTagType, {
+    primary: ColorName;
+    secondary: ColorName;
+}>;

package/dist/src/AppTag/constants.js

@@ -0,0 +1,14 @@
+export const appTagColors = {
+    active: {
+        primary: "darkGrey",
+        secondary: "lightGrey",
+    },
+    inactive: {
+        primary: "midGrey",
+        secondary: "whiteGrey",
+    },
+    interactive: {
+        primary: "blue",
+        secondary: "lightBlue",
+    },
+};

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

@@ -1,2 +1,2 @@
-export { default as AppTag } from "./AppTag";
-export type { AppTagProps } from "./AppTag";
+export { default as AppTag } from "./AppTag";
+export type { AppTagProps } from "./AppTag";

package/dist/src/AppTag/index.js

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

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

@@ -1,12 +1,12 @@
-import React from "react";
-import { AppTag } from "..";
-declare const _default: {
-    title: string;
-    component: typeof AppTag;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithoutATooltip: {
-    (): React.JSX.Element;
-    storyName: string;
-};
+import React from "react";
+import { AppTag } from "..";
+declare const _default: {
+    title: string;
+    component: typeof AppTag;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithoutATooltip: {
+    (): React.JSX.Element;
+    storyName: string;
+};

package/dist/src/AppTag/stories/AppTag.story.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { AppTag } from "..";
+import { APP_DISPLAY_NAMES } from "../../types/NulogyApp";
+import { Table } from "../../Table";
+import { Flex } from "../../Flex";
+import { Heading1 } from "../../Type";
+export default {
+    title: "Components/AppTag",
+    component: AppTag,
+};
+export const Default = () => {
+    const appNames = Object.keys(APP_DISPLAY_NAMES);
+    const columns = [
+        { label: "Application Name", dataKey: "name", width: "25%" },
+        { label: "Active (default)", dataKey: "active", width: "25%" },
+        { label: "Inactive", dataKey: "inactive", width: "25%" },
+        { label: "Interactive", dataKey: "interactive", width: "25%" },
+    ];
+    const rows = appNames.map((appName) => ({
+        id: appName,
+        name: APP_DISPLAY_NAMES[appName],
+        active: React.createElement(AppTag, { app: appName, type: "active" }),
+        inactive: React.createElement(AppTag, { app: appName, type: "inactive" }),
+        interactive: React.createElement(AppTag, { app: appName, type: "interactive" }),
+    }));
+    return React.createElement(Table, { rowHovers: false, columns: columns, rows: rows });
+};
+export const WithoutATooltip = () => {
+    const appNames = Object.keys(APP_DISPLAY_NAMES);
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Heading1, { compact: true }, "AppTag without tooltip"),
+        React.createElement(Flex, { gap: "x2" }, appNames.map((appName) => (React.createElement(AppTag, { key: appName, app: appName, type: "active", hideTooltip: true }))))));
+};
+WithoutATooltip.storyName = "Without a tooltip";

package/dist/src/AppTag/stories/AppTag.usecases.story.d.ts

@@ -1,27 +1,27 @@
-import React from "react";
-import { AppTag } from "..";
-declare const _default: {
-    title: string;
-    component: typeof AppTag;
-};
-export default _default;
-export declare const WithALink: {
-    (): React.JSX.Element;
-    storyName: string;
-};
-export declare const WithText: {
-    (): React.JSX.Element;
-    storyName: string;
-};
-export declare const WithMessages: {
-    (): React.JSX.Element;
-    storyName: string;
-};
-export declare const WithTooltip: {
-    (): React.JSX.Element;
-    storyName: string;
-};
-export declare const InsideAModal: {
-    (): React.JSX.Element;
-    storyName: string;
-};
+import React from "react";
+import { AppTag } from "..";
+declare const _default: {
+    title: string;
+    component: typeof AppTag;
+};
+export default _default;
+export declare const WithALink: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const WithText: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const WithMessages: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const WithTooltip: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const InsideAModal: {
+    (): React.JSX.Element;
+    storyName: string;
+};

package/dist/src/AppTag/stories/AppTag.usecases.story.js

@@ -0,0 +1,118 @@
+import React from "react";
+import { AppTag } from "..";
+import { Flex, InlineFlex } from "../../Flex";
+import { Icon } from "../../Icon";
+import { Link } from "../../Link";
+import { StatusIndicator } from "../../StatusIndicator";
+import { TruncatedText } from "../../TruncatedText";
+import { Heading1, Text } from "../../Type";
+import { Code } from "../../utils/story/code";
+import { Table } from "../../Table";
+import { Tooltip } from "../../Tooltip";
+import { Modal } from "../../Modal";
+export default {
+    title: "Components/AppTag/Usecases",
+    component: AppTag,
+};
+export const WithALink = () => {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
+            React.createElement(Heading1, { compact: true }, "AppTag with Link"),
+            React.createElement(Text, { fontSize: "sm" },
+                "These examples show the ",
+                React.createElement(Code, null, "Link"),
+                " component used with the ",
+                React.createElement(Code, null, "forApp"),
+                " prop. See the",
+                " ",
+                React.createElement(Link, { href: "/?path=/story/components-link--with-app-tag" }, "With AppTag"),
+                " Link story for more examples.")),
+        React.createElement(InlineFlex, { flexDirection: "column", gap: "x2" },
+            React.createElement(Link, { href: "#app", forApp: "digital-quality-inspection" }, "POLI-120392"),
+            React.createElement(Link, { underline: false, href: "#app", forApp: "supplier-collaboration" }, "POLI-120392"))));
+};
+WithALink.storyName = "With a Link";
+export const WithText = () => {
+    return (React.createElement(InlineFlex, { flexDirection: "column", gap: "x2" },
+        React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+            React.createElement(Text, null, "Entity reference"),
+            React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" })),
+        React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+            React.createElement(Text, { color: "midGrey" }, "Inactive entity reference"),
+            React.createElement(AppTag, { app: "supplier-collaboration", type: "inactive" }))));
+};
+WithText.storyName = "With text";
+export const WithMessages = () => {
+    const columns = [
+        { label: "Use-case", dataKey: "type", width: "20%" },
+        { label: "Example", dataKey: "example", width: "80%" },
+    ];
+    const rows = [
+        {
+            id: "status-indicator",
+            type: "Using a StatusIndicator",
+            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
+                React.createElement(StatusIndicator, { type: "informative" }, "New"))),
+        },
+        {
+            id: "custom-component",
+            type: "Using a custom component",
+            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
+                React.createElement(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded" },
+                    React.createElement(Icon, { icon: "error", size: "x2", color: "red" }),
+                    React.createElement(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red" }, "Transaction failed")))),
+        },
+        {
+            id: "icon-text",
+            type: "Using Icon and Text",
+            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
+                React.createElement(InlineFlex, { alignItems: "center", gap: "x0_25", pl: "x0_5", pr: "x1", borderRadius: "rounded" },
+                    React.createElement(Icon, { icon: "warning", size: "x2", color: "yellow" }),
+                    React.createElement(Text, { fontSize: "small", color: "black" }, "Requires attention")))),
+        },
+        {
+            id: "text-icon",
+            type: "Using Text and Icon",
+            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
+                React.createElement(InlineFlex, { alignItems: "center", gap: "x0_75" },
+                    React.createElement(Text, { fontSize: "small" }, "Processing"),
+                    React.createElement(Icon, { icon: "loading" })))),
+        },
+        {
+            id: "text-only",
+            type: "Using Text",
+            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
+                React.createElement(Text, { fontSize: "small" }, "Processed"))),
+        },
+        {
+            id: "truncated-text",
+            type: "Using TruncatedText",
+            example: (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }),
+                React.createElement(TruncatedText, { fontSize: "small", color: "red" }, "Transaction failed because the supplier did not provide the required information."))),
+        },
+    ];
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Table, { rowHovers: false, columns: columns, rows: rows })));
+};
+WithMessages.storyName = "With messages";
+export const WithTooltip = () => {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Tooltip, { tooltip: "This is a tooltip" },
+            React.createElement(InlineFlex, { alignItems: "center", gap: "half", alignSelf: "flex-start" },
+                React.createElement(Text, null, "Entity reference"),
+                React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" })))));
+};
+WithTooltip.storyName = "With Tooltip";
+export const InsideAModal = () => {
+    return (React.createElement(Modal, { title: "Modal Title" },
+        React.createElement(Flex, { flexDirection: "column", gap: "half" },
+            React.createElement(Text, null, "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay"),
+            React.createElement(AppTag, { app: "digital-quality-inspection", type: "active" }))));
+};
+InsideAModal.storyName = "Inside a Modal";

package/dist/src/AppTag/types.d.ts

@@ -1,3 +1,3 @@
-import { DefaultNDSThemeType } from "../theme/theme.type";
-export type AppTagType = "active" | "inactive" | "interactive";
-export type ColorName = keyof DefaultNDSThemeType["colors"];
+import { DefaultNDSThemeType } from "../theme/theme.type";
+export type AppTagType = "active" | "inactive" | "interactive";
+export type ColorName = keyof DefaultNDSThemeType["colors"];

package/dist/src/AppTag/types.js

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