@nulogy/components 14.8.2 → 15.0.1

package/dist/src/pages/ErrorPage.story.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import { Alert, Box, Branding, Flex, Link } from "../index";
+import { Text } from "../Type";
+const ErrorPageWidth = "672px";
+const ErrorPageAlertWidth = "432px";
+export default {
+    title: "Pages/ErrorPage",
+};
+export const Static = () => (React.createElement(Text, null,
+    "For non-React, static HTML error pages see the Nulogy error pages repository",
+    " ",
+    React.createElement(Link, { href: "https://github.com/nulogy/error-pages" }, "on GitHub"),
+    " or preview them",
+    " ",
+    React.createElement(Link, { href: "https://nulogy.github.io/error-pages/" }, "here"),
+    "."));
+Static.parameters = {
+    chromatic: { disable: true },
+};
+export const Base = () => (React.createElement(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2" },
+    React.createElement(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto" },
+        React.createElement(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center" },
+            React.createElement(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" } },
+                React.createElement(Branding, { size: "large" })),
+            React.createElement(Box, { maxWidth: ErrorPageAlertWidth },
+                React.createElement(Alert, { type: "danger", title: "We're sorry, but something went wrong." }, "We've been notified about this issue and we'll take a look at it shortly."))))));
+/* eslint-disable jsx-a11y/anchor-is-valid */
+export const WithALink = () => {
+    const theme = useTheme();
+    return (React.createElement(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2" },
+        React.createElement(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto" },
+            React.createElement(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center" },
+                React.createElement(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: `-${theme.space.x4}` }, mr: { extraSmall: 0, large: "x3" } },
+                    React.createElement(Branding, { size: "large" })),
+                React.createElement(Box, { maxWidth: ErrorPageAlertWidth },
+                    React.createElement(Alert, { type: "danger", title: "We're sorry, but something went wrong.", mb: "x2" }, "We've been notified about this issue and we'll take a look at it shortly."),
+                    React.createElement(Link, { href: "#" }, "Back to homepage"))))));
+};
+/* eslint-enable jsx-a11y/anchor-is-valid */
+WithALink.story = {
+    name: "With a link",
+};
+export const Maintenance = () => (React.createElement(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2" },
+    React.createElement(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto" },
+        React.createElement(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center" },
+            React.createElement(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" } },
+                React.createElement(Branding, { size: "large" })),
+            React.createElement(Box, { maxWidth: ErrorPageAlertWidth },
+                React.createElement(Alert, null, "We are currently adding new features to Nulogy Quality Control. We should be online shortly."))))));

package/dist/src/pages/LoginPage.story.d.ts

@@ -1,30 +1,30 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Base: () => React.JSX.Element;
-export declare const WithRememberMe: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithForgotPasswordLink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithError: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorAndNoAdditionalText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Base: () => React.JSX.Element;
+export declare const WithRememberMe: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithForgotPasswordLink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithError: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorAndNoAdditionalText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/pages/LoginPage.story.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { Alert, Box, Branding, Checkbox, Flex, Form, Input, Link, PrimaryButton, Text } from "../index";
+export default {
+    title: "Pages/LoginPage",
+};
+export const Base = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
+    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+        React.createElement(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center" },
+            React.createElement(Box, { mb: "x2", width: "100%" },
+                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
+            React.createElement(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
+            React.createElement(Form, null,
+                React.createElement(Input, { labelText: "Email" }),
+                React.createElement(Input, { type: "password", labelText: "Password" }),
+                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+export const WithRememberMe = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
+    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+        React.createElement(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center" },
+            React.createElement(Box, { mb: "x2", width: "100%" },
+                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
+            React.createElement(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
+            React.createElement("form", { style: { width: "100%" } },
+                React.createElement(Input, { mb: "x3", labelText: "Email" }),
+                React.createElement(Input, { type: "password", labelText: "Password" }),
+                React.createElement(Checkbox, { mb: "x3", labelText: "Remember me" }),
+                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+WithRememberMe.story = {
+    name: "with remember me",
+};
+export const WithForgotPasswordLink = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
+    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+        React.createElement(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center" },
+            React.createElement(Box, { mb: "x2", width: "100%" },
+                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
+            React.createElement(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
+            React.createElement(Form, { style: { width: "100%" } },
+                React.createElement(Input, { labelText: "Email" }),
+                React.createElement(Input, { type: "password", labelText: "Password" }),
+                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In")),
+            React.createElement(Box, { py: "x1", mt: "x1" },
+                React.createElement(Link, { href: "/" }, "Forgot your password?"))))));
+WithForgotPasswordLink.story = {
+    name: "with forgot password link",
+};
+export const WithError = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
+    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+        React.createElement(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center" },
+            React.createElement(Box, { mb: "x2", width: "100%" },
+                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
+            React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", mb: "x4" }, "Additional Text"),
+            React.createElement(Alert, { mb: "x4", width: "100%", type: "danger" }, "text"),
+            React.createElement(Form, { style: { width: "100%" } },
+                React.createElement(Input, { labelText: "Email" }),
+                React.createElement(Input, { type: "password", labelText: "Password" }),
+                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+WithError.story = {
+    name: "with error",
+};
+export const WithErrorAndNoAdditionalText = () => (React.createElement(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%" },
+    React.createElement(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+        React.createElement(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center" },
+            React.createElement(Box, { mb: "x4", width: "100%" },
+                React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" })),
+            React.createElement(Alert, { mb: "x4", width: "100%", type: "danger" }, "text"),
+            React.createElement(Form, null,
+                React.createElement(Input, { labelText: "Email" }),
+                React.createElement(Input, { type: "password", labelText: "Password" }),
+                React.createElement(PrimaryButton, { fullWidth: true }, "Sign In"))))));
+WithErrorAndNoAdditionalText.story = {
+    name: "with error and no additional text",
+};

package/dist/src/testing/matchers/toMatchDate.js

@@ -0,0 +1,20 @@
+"use strict";
+expect.extend({
+    toMatchDate(received, date) {
+        const pass = date.getMonth() === received.getMonth() &&
+            date.getYear() === received.getYear() &&
+            date.getDay() === received.getDay();
+        if (pass) {
+            return {
+                message: () => `expected ${received} not to match ${date}`,
+                pass: true,
+            };
+        }
+        else {
+            return {
+                message: () => `expected ${received} to match ${date}`,
+                pass: false,
+            };
+        }
+    },
+});

package/dist/src/testing/mockUtils/mockDates.d.ts

@@ -0,0 +1,2 @@
+export function mockDate(date: any): void;
+export function resetDate(): void;

package/dist/src/testing/mockUtils/mockDates.js

@@ -0,0 +1,17 @@
+let realDate;
+export const mockDate = (date) => {
+    const currentDate = new Date(date);
+    realDate = Date;
+    global.Date = class extends Date {
+        constructor(...args) {
+            if (args.length > 0) {
+                // eslint-disable-next-line constructor-super
+                return super(...args);
+            }
+            return currentDate;
+        }
+    };
+};
+export const resetDate = () => {
+    global.Date = realDate;
+};

package/dist/src/theme/NDSThemeProvider.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-export default function NDSThemeProvider({ customTheme, children }: {
-    customTheme: any;
-    children: any;
-}): React.JSX.Element;
+import React from "react";
+export default function NDSThemeProvider({ customTheme, children }: {
+    customTheme: any;
+    children: any;
+}): React.JSX.Element;

package/dist/src/theme/NDSThemeProvider.js

@@ -0,0 +1,17 @@
+import React from "react";
+import isPropValid from "@emotion/is-prop-valid";
+import { StyleSheetManager, ThemeProvider } from "styled-components";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { useNDSTheme } from "./useNDSTheme";
+export default function NDSThemeProvider({ customTheme, children }) {
+    const variant = useComponentVariant();
+    const theme = useNDSTheme(variant, customTheme);
+    return (React.createElement(StyleSheetManager, { enableVendorPrefixes: true, shouldForwardProp: shouldForwardProp },
+        React.createElement(ThemeProvider, { theme: theme }, children)));
+}
+function shouldForwardProp(propName, target) {
+    if (typeof target === "string") {
+        return isPropValid(propName);
+    }
+    return true;
+}

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

@@ -1,2 +1,2 @@
-export { themes, phone, tablet, legacy as desktop } from "./theme";
-export type { ThemeType, DefaultNDSThemeType } from "./theme.type";
+export { themes, phone, tablet, legacy as desktop } from "./theme";
+export type { ThemeType, DefaultNDSThemeType } from "./theme.type";

package/dist/src/theme/index.js

@@ -0,0 +1 @@
+export { themes, phone, tablet, legacy as desktop } from "./theme";

package/dist/src/theme/mergeThemes.util.d.ts

@@ -1,2 +1,2 @@
-import { DefaultNDSThemeType, ThemeType } from "./theme.type";
-export declare const mergeThemes: (theme: DefaultNDSThemeType, customTheme: ThemeType) => DefaultNDSThemeType;
+import { DefaultNDSThemeType, ThemeType } from "./theme.type";
+export declare const mergeThemes: (theme: DefaultNDSThemeType, customTheme: ThemeType) => DefaultNDSThemeType;

package/dist/src/theme/mergeThemes.util.js

@@ -0,0 +1,6 @@
+export const mergeThemes = (theme, customTheme) => Object.keys(theme).reduce((mergedTheme, group) => {
+    if (customTheme && mergedTheme[group] && customTheme[group]) {
+        return Object.assign(Object.assign({}, mergedTheme), { [group]: Object.assign(Object.assign({}, mergedTheme[group]), customTheme[group]) });
+    }
+    return mergedTheme;
+}, theme);

package/dist/src/theme/theme.d.ts

@@ -1,5 +1,5 @@
-import { DefaultNDSThemeType } from "./theme.type";
-type ThemeKey = "legacy" | "experimental" | "tablet" | "phone";
-export declare const themes: Record<ThemeKey, DefaultNDSThemeType>;
-export declare const legacy: DefaultNDSThemeType, experimental: DefaultNDSThemeType, tablet: DefaultNDSThemeType, phone: DefaultNDSThemeType;
-export {};
+import { DefaultNDSThemeType } from "./theme.type";
+type ThemeKey = "legacy" | "experimental" | "tablet" | "phone";
+export declare const themes: Record<ThemeKey, DefaultNDSThemeType>;
+export declare const legacy: DefaultNDSThemeType, experimental: DefaultNDSThemeType, tablet: DefaultNDSThemeType, phone: DefaultNDSThemeType;
+export {};