@madie/madie-design-system 1.2.62 → 2.0.1

package/jest.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-    roots: ["<rootDir>"],
-    modulePathIgnorePatterns: ["<rootDir>/dist/"],
-    testEnvironment: "jsdom",
-    transform: {
-        "^.+\\.(j|t)sx?$": "babel-jest",
-    },
-    setupFilesAfterEnv: ["@testing-library/jest-dom"],
-    globals: {
-        "ts-jest": {
-            tsconfig: {
-                jsx: "react-jsx",
-            },
-            useEsm: true,
-        },
-    },
-};

package/test/components/ErrorUI.test.js

@@ -1,32 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import ErrorUI from "../../components/Error/ErrorUI";
-
-describe("ErrorUI", () => {
-    it("renders a list of errors in HTML", () => {
-        const code = "404";
-        const type = "Bad thing happened";
-        const message = [
-            { contentTitle: "Not found", content: "test" },
-            { contentTitle: "Image not found", content: "test number 2" },
-        ];
-        const { debug, container } = render(
-            <ErrorUI type={type} code={code} message={message} />
-        );
-        expect(container.querySelector(".page-error")).toBeTruthy();
-        expect(container.querySelector(".collapsible-details")).toBeTruthy();
-        expect(container.querySelectorAll(".items li").length).toBe(2);
-    });
-
-    it("renders a string instead of an array", () => {
-        const code = "404";
-        const type = "Bad thing happened";
-        const message = "Not found";
-        const { getByText, container } = render(
-            <ErrorUI type={type} code={code} message={message} />
-        );
-        expect(container.querySelector(".page-error")).toBeTruthy();
-        expect(container.querySelector(".collapsible-details")).toBeTruthy();
-        expect(getByText(/not found/i)).toBeTruthy();
-    });
-});

package/test/components/FooterUI.test.js

@@ -1,122 +0,0 @@
-import React, { Component } from "react";
-import ReactDOM from "react-dom";
-import ReactTestUtils from "react-dom/test-utils";
-import { expect } from "chai";
-import FooterUI from "../../components/Footer/FooterUI";
-
-class Wrapper extends Component {
-    render() {
-        return this.props.children;
-    }
-}
-
-describe("FooterUI", () => {
-    it("renders the footer HTML", () => {
-        // Native elements and functional stateless react components don't have public instances and
-        // cannot be used with renderIntoDocument. React has a separate package install for a shallow
-        // renderer that allows this. Otherwise, you need a wrapper when testing presentational components.
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI />
-            </Wrapper>
-        );
-        const footer = ReactTestUtils.findRenderedDOMComponentWithTag(
-            component,
-            "footer"
-        );
-        const footerNode = ReactDOM.findDOMNode(footer);
-        expect(ReactTestUtils.isDOMComponent(footerNode)).to.be.true;
-    });
-
-    it("renders the footer HTML", () => {
-        const version = "1.2.3.4";
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI buildVersion={version} />
-            </Wrapper>
-        );
-        const buildVersion = ReactTestUtils.findRenderedDOMComponentWithClass(
-            component,
-            "build-version"
-        );
-        const buildVersionNode = ReactDOM.findDOMNode(buildVersion);
-        expect(ReactTestUtils.isDOMComponent(buildVersionNode)).to.be.true;
-        expect(buildVersion.textContent).to.equal(version);
-    });
-
-    it("renders the footer properly in the Authenticated experience", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isFullWidth={true} />
-            </Wrapper>
-        );
-        const isFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
-            component,
-            "container-full-width"
-        )[1];
-        const isFullWidthNode = ReactDOM.findDOMNode(isFullWidth);
-        expect(ReactTestUtils.isDOMComponent(isFullWidthNode)).to.be.true;
-    });
-
-    it("renders optional custom assets if passed", () => {
-        // Test render with default assets
-        const stockComponent = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isNewFooter={true} />
-            </Wrapper>
-        );
-        const defaultLogoNode =
-            ReactTestUtils.findRenderedDOMComponentWithClass(
-                stockComponent,
-                "hhs-logo"
-            );
-        expect(ReactTestUtils.isDOMComponent(defaultLogoNode)).to.be.true;
-
-        // Test render with custom asset
-        const assets = {
-            hhsLogo: <img src="/test-image.png" className="hhs-logo-custom" />,
-        };
-        const customAssetComponent = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isNewFooter={true} assets={assets} />
-            </Wrapper>
-        );
-        const customLogoNode = ReactTestUtils.findRenderedDOMComponentWithClass(
-            customAssetComponent,
-            "hhs-logo-custom"
-        );
-        expect(ReactTestUtils.isDOMComponent(customLogoNode)).to.be.true;
-    });
-});
-
-describe("renders the footer properly in the non-authenticated experience", () => {
-    it("renders by default the non-authenticated experience", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI />
-            </Wrapper>
-        );
-        const isNotFullWidth =
-            ReactTestUtils.scryRenderedDOMComponentsWithClass(
-                component,
-                "responsive-container"
-            )[1];
-        const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-        expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
-    });
-
-    it("explicitly renders the non-authenticated experience", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isFullWidth={false} />
-            </Wrapper>
-        );
-        const isNotFullWidth =
-            ReactTestUtils.scryRenderedDOMComponentsWithClass(
-                component,
-                "responsive-container"
-            )[1];
-        const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-        expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
-    });
-});

package/test/components/Infotip.test.js

@@ -1,76 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { act, Simulate } from "react-dom/test-utils";
-import { expect } from "chai";
-import { spy } from "sinon";
-import Infotip from "../../components/Infotip";
-
-describe("Infotip", () => {
-    let container;
-
-    beforeEach(() => {
-        container = document.createElement("div");
-        document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-        document.body.removeChild(container);
-        container = null;
-    });
-
-    it("renders an svg icon for tooltip anchor", () => {
-        act(() => {
-            ReactDOM.render(<Infotip label="tooltip text" />, container);
-        });
-        const svg = container.querySelector("svg");
-        expect(svg).to.be.ok;
-    });
-
-    it("renders white icon when lightIcon prop is true", () => {
-        act(() => {
-            ReactDOM.render(
-                <Infotip lightIcon label="tooltip text" />,
-                container
-            );
-        });
-        const paths = container.querySelectorAll("path");
-        expect(paths[1].getAttribute("fill")).to.equal("#FFF");
-        expect(paths[2].getAttribute("fill")).to.equal("#04838A");
-    });
-
-    it('overrides "touchstart" events for button', () => {
-        act(() => {
-            ReactDOM.render(<Infotip label="tooltip text" />, container);
-        });
-        const button = container.querySelector("button");
-        const stopPropagation = spy();
-        Simulate.touchStart(button, { stopPropagation });
-        expect(stopPropagation.called).to.be.true;
-    });
-
-    it('uses "touchend" event on button to prevent default and toggle focus', () => {
-        act(() => {
-            ReactDOM.render(<Infotip label="tooltip text" />, container);
-        });
-        const button = container.querySelector("button");
-        const preventDefault = spy();
-        const focus = spy(button, "focus");
-        const blur = spy(button, "blur");
-        Simulate.touchEnd(button, {
-            preventDefault,
-        });
-        expect(preventDefault.calledOnce).to.be.true;
-        expect(button.focus.calledOnce).to.be.true;
-        expect(button.blur.calledOnce).to.be.false;
-        Simulate.touchEnd(button, {
-            preventDefault,
-            currentTarget: {
-                focus,
-                blur,
-            },
-        });
-        expect(preventDefault.calledTwice).to.be.true;
-        expect(focus.calledOnce).to.be.true;
-        expect(blur.calledOnce).to.be.true;
-    });
-});

package/test/components/Tooltip.test.js

@@ -1,147 +0,0 @@
-import React, { Component } from "react";
-import ReactDOM from "react-dom";
-import ReactTestUtils from "react-dom/test-utils";
-import { expect } from "chai";
-import Tooltip from "../../components/Tooltip";
-import positionTip, {
-    positionTriangle,
-} from "../../components/Tooltip/position";
-
-class Wrapper extends Component {
-    render() {
-        return this.props.children;
-    }
-}
-
-describe("Tooltip", () => {
-    it("renders children into document", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <Tooltip label="tooltip text">
-                    <button>Tooltip Button</button>
-                </Tooltip>
-            </Wrapper>
-        );
-        const tooltipButton = ReactTestUtils.findRenderedDOMComponentWithTag(
-            component,
-            "button"
-        );
-        const node = ReactDOM.findDOMNode(tooltipButton);
-        expect(ReactTestUtils.isDOMComponent(node)).to.be.true;
-    });
-
-    it("tooltip is not rendered until activted", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <Tooltip label="tooltip text">
-                    <button>Tooltip Button</button>
-                </Tooltip>
-            </Wrapper>
-        );
-        const tooltip = document.body.querySelector("div[data-reach-tooltip]");
-        expect(tooltip).to.equal(null);
-    });
-
-    it("renders a tooltip when activated", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <Tooltip DEBUG_STYLE label="tooltip text">
-                    <button>Tooltip Button</button>
-                </Tooltip>
-            </Wrapper>
-        );
-        const tooltip = document.body.querySelector("div[data-reach-tooltip]");
-        expect(tooltip).not.to.equal(null);
-    });
-
-    describe("position", () => {
-        it("returns empty object if triggerRect or tooltipRect are falsy", () => {
-            const position = positionTip();
-            expect(position).to.deep.equal({});
-        });
-
-        it("calculates tooltip position above trigger", () => {
-            const triggerRect = {
-                x: 100,
-                y: 100,
-                width: 16,
-                height: 16,
-                top: 100,
-                right: 116,
-                bottom: 116,
-                left: 100,
-            };
-            const tooltipRect = {
-                width: 130,
-                height: 50,
-            };
-            const position = positionTip(triggerRect, tooltipRect);
-            expect(position).to.deep.equal({
-                left: "43px",
-                top: "38px",
-            });
-        });
-
-        it("calculates tooltip position below trigger", () => {
-            const triggerRect = {
-                x: 100,
-                y: 40,
-                width: 16,
-                height: 16,
-                top: 40,
-                right: 116,
-                bottom: 56,
-                left: 100,
-            };
-            const tooltipRect = {
-                width: 130,
-                height: 50,
-            };
-            const position = positionTip(triggerRect, tooltipRect);
-            expect(position).to.deep.equal({
-                left: "43px",
-                top: "68px",
-            });
-        });
-
-        it("calculates triangle tip position above trigger", () => {
-            const triggerRect = {
-                x: 100,
-                y: 100,
-                width: 16,
-                height: 16,
-                top: 100,
-                right: 116,
-                bottom: 116,
-                left: 100,
-            };
-            const tooltipRect = {
-                width: 130,
-                height: 50,
-            };
-            const positionCSS = positionTriangle(triggerRect, tooltipRect);
-            expect(positionCSS).to.match(/border-top: 8px solid;/);
-            expect(positionCSS).to.match(/top: 88px;/);
-        });
-
-        it("calculates triangle tip position below trigger", () => {
-            const triggerRect = {
-                x: 100,
-                y: 40,
-                width: 16,
-                height: 16,
-                top: 40,
-                right: 116,
-                bottom: 56,
-                left: 100,
-            };
-            const tooltipRect = {
-                width: 130,
-                height: 50,
-            };
-            const positionCSS = positionTriangle(triggerRect, tooltipRect);
-            expect(positionCSS).to.match(/border-bottom: 8px solid;/);
-            expect(positionCSS).to.match(/top: 60px;/);
-        });
-    });
-});

package/webpack.config.js

@@ -1,124 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-
-const pkg = require("./package.json");
-const entry = ["./index.js"];
-
-const _module = {
-    rules: [
-        {
-            test: /\.(js|jsx)?$/,
-            loader: "babel-loader",
-            exclude: /node_modules/,
-        },
-        {
-            test: /\.scss$/,
-            use: [
-                {
-                    loader: MiniCssExtractPlugin.loader,
-                },
-                "css-loader",
-                {
-                    loader: "sass-loader",
-                    options: {
-                        sassOptions: {
-                            includePaths: ["styles"],
-                        },
-                    },
-                },
-                "sass-loader",
-            ],
-            exclude: /node_modules/,
-        },
-        {
-            test: /\.(ttf|eot|woff|otf|woff2)$/,
-            loader: "file-loader",
-            options: {
-                name: "fonts/[name].[ext]",
-            },
-        },
-        {
-            test: /\.svg$/,
-            use: [
-                "raw-loader",
-                {
-                    loader: "svgo-loader",
-                    options: {
-                        plugins: [
-                            { removeTitle: true },
-                            { convertColors: { shorthex: false } },
-                            { convertPathData: false },
-                        ],
-                    },
-                },
-            ],
-        },
-    ],
-};
-
-const plugins = [
-    new MiniCssExtractPlugin({
-        filename: "default.css",
-    }),
-    new webpack.DefinePlugin({
-        "process.env": {
-            NODE_ENV: JSON.stringify("production"),
-        },
-    }),
-    new webpack.DefinePlugin({
-        buildVersion: JSON.stringify(pkg.version),
-    }),
-];
-
-const resolve = {
-    extensions: [".js", ".jsx", ".json", ".svg", "*"],
-    alias: {
-        react: "preact/compat",
-        "react-dom": "preact/compat",
-    },
-};
-
-const optimization = {
-    minimizer: [new TerserPlugin()],
-};
-
-const defaultConfig = (env, argv) => {
-    return {
-        mode: "production",
-        entry,
-        output: {
-            library: "QPPStyle",
-            libraryTarget: "umd",
-            filename: "index.js",
-            path: path.resolve(__dirname, "dist"),
-        },
-        devtool: env.production === "true" ? "source-map" : "eval-source-map",
-        module: _module, // module is already defined
-        plugins,
-        resolve,
-        optimization,
-    };
-};
-
-const browserConfig = (env, argv) => {
-    return {
-        mode: "production",
-        entry,
-        output: {
-            libraryTarget: "var",
-            library: "QPPStyle",
-            filename: "browser.js",
-            path: path.resolve(__dirname, "dist"),
-        },
-        devtool: env.production === "true" ? "source-map" : "eval-source-map",
-        module: _module, // module is already defined
-        plugins,
-        resolve,
-        optimization,
-    };
-};
-
-module.exports = [defaultConfig, browserConfig];

package/webpack.config.react.js

@@ -1,104 +0,0 @@
-const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-
-// const ESLintPlugin = require('eslint-webpack-plugin');
-
-const _module = {
-    rules: [
-        {
-            test: /\.(js|jsx)?$/,
-            exclude: /node_modules/,
-            use: {
-                loader: "babel-loader",
-            },
-        },
-        {
-            test: /\.scss$/,
-            use: [
-                {
-                    loader: MiniCssExtractPlugin.loader,
-                },
-                "css-loader",
-                {
-                    loader: "sass-loader",
-                    options: {
-                        sassOptions: {
-                            includePaths: ["styles"],
-                        },
-                    },
-                },
-                "style-loader",
-            ],
-            exclude: /node_modules/,
-        },
-        {
-            test: /\.(ttf|eot|woff|otf|woff2)$/,
-            loader: "file-loader",
-            options: {
-                name: "fonts/[name].[ext]",
-            },
-        },
-        {
-            test: /\.svg$/,
-            use: [
-                "raw-loader",
-                {
-                    loader: "svgo-loader",
-                    options: {
-                        plugins: [
-                            { removeTitle: true },
-                            { convertColors: { shorthex: false } },
-                            { convertPathData: false },
-                        ],
-                    },
-                },
-            ],
-        },
-    ],
-};
-
-const optimization = {
-    minimizer: [new TerserPlugin()],
-};
-
-const plugins = [
-    new MiniCssExtractPlugin({
-        filename: "default.css",
-    }),
-    new HtmlWebpackPlugin(),
-];
-
-module.exports = {
-    mode: "production",
-    entry: "./components/index.js",
-    output: {
-        filename: "index.js",
-        path: path.resolve(__dirname, "dist/react"),
-        library: "$",
-        libraryTarget: "umd",
-        globalObject: "this",
-    },
-    // below lines fix hot reload but put CI/CD into a hanging state
-    // watch: true,
-    // watchOptions: {
-    //     ignored: /node_modules/, // Don't watch files in node_modules
-    //     aggregateTimeout: 300,
-    //     poll: 1000, 
-    //   },
-    //   devServer: {
-    //     // static: path.join(__dirname, "dist/react"),
-    //     // compress: true,
-    //     hot: true, // Enable hot module replacement
-    //     watchFiles: ["src/**/*", "components/**/*"], // Watch these files
-    // },
-    devtool: "source-map",
-    module: _module,
-    plugins,
-    resolve: {
-        extensions: [".js", ".jsx", ".json", ".svg", "*"],
-    },
-    optimization,
-    externals: { react: "react" },
-};