@madie/madie-design-system 1.2.62 → 2.0.1

package/webpack.config.mjs

@@ -0,0 +1,79 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+// import pkg from "./package.json" assert { type: "json" };
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const entry = ["./index.js"];
+
+const _module = {
+  rules: [
+    {
+      test: /\.(js|jsx)?$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader"
+      }
+    },
+    {
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(ttf|eot|woff|otf|woff2)$/,
+      loader: "file-loader",
+      options: {
+        name: "fonts/[name].[ext]",
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: ["raw-loader", "svgo-loader"],
+    },
+  ],
+};
+
+const plugins = [
+  new MiniCssExtractPlugin({ filename: "style.css" })
+];
+
+const resolve = {
+  extensions: [".js", ".jsx", ".json", ".svg"],
+};
+
+const optimization = {
+  minimize: true,
+  minimizer: [new TerserPlugin()],
+};
+
+export default {
+  mode: "production",
+  entry,
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+    module: true,
+    library: {
+      type: "module",
+    },
+    environment: {
+      module: true,
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  devtool: "source-map",
+  module: _module,
+  plugins,
+  resolve,
+  optimization,
+  externals: {
+    react: "react",
+    "react-dom": "react-dom"
+  }
+};

package/webpack.config.react.mjs

@@ -0,0 +1,72 @@
+import path from "path";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const _module = {
+  rules: [
+    {
+      test: /\.(js|jsx)?$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader"
+      }
+    },
+    {
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(ttf|eot|woff|otf|woff2)$/,
+      loader: "file-loader",
+      options: {
+        name: "fonts/[name].[ext]",
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: ["raw-loader", "svgo-loader"],
+    },
+  ],
+};
+
+export default {
+  mode: "production",
+  entry: "./components/index.mjs",
+  output: {
+    filename: "index.mjs",
+    path: path.resolve(__dirname, "dist/react"),
+    module: true,
+    library: {
+      type: "module",
+    },
+    environment: {
+      module: true,
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  devtool: "source-map",
+  module: _module,
+  plugins: [
+    new MiniCssExtractPlugin({ filename: "style.css" }),
+    new HtmlWebpackPlugin(),
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".json", ".svg"],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+  externals: {
+    react: "react",
+    "react-dom": "react-dom"
+  }
+};

package/.eslintignore

@@ -1,5 +0,0 @@
-_*
-css
-dist
-node_modules
-test

package/components/Alert/Alert.stories.js

@@ -1,70 +0,0 @@
-import React from "react";
-
-import Alert from "./index";
-
-export default {
-    title: "Alert",
-    component: Alert,
-};
-
-export const Default = () => (
-    <div className="qpp-u-padding--16">
-        <h1 className="h3">Information</h1>
-        <Alert
-            title="Information Alert"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida."
-        />
-        <h2 className="h3">Warning</h2>
-        <Alert
-            variant="warning"
-            title={{ headingLevel: "h3", text: "Warning Alert" }}
-        >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
-            eleifend gravida.
-        </Alert>
-        <h2 className="h3">Error</h2>
-        <Alert
-            variant="error"
-            title={{ headingLevel: "h3", text: "Error Alert" }}
-        >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
-            eleifend gravida.
-        </Alert>
-        <h2 className="h3">Success</h2>
-        <Alert
-            variant="success"
-            title={{ headingLevel: "h3", text: "Success Alert" }}
-        >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
-            eleifend gravida.
-        </Alert>
-    </div>
-);
-
-export const WithoutHeading = () => (
-    <div className="qpp-u-padding--16">
-        <h1 className="h3">Information</h1>
-        <Alert description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida." />
-        <h1 className="h3">Warning</h1>
-        <Alert variant="warning">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
-            eleifend gravida.
-        </Alert>
-        <h1 className="h3">Error</h1>
-        <Alert variant="error">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
-            eleifend gravida.
-        </Alert>
-        <h1 className="h3">Success</h1>
-        <Alert variant="success">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu
-            eleifend gravida.
-        </Alert>
-    </div>
-);

package/components/Alert/index.js

@@ -1,55 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Alert = ({
-    title,
-    children,
-    description,
-    variant,
-    className,
-    ...rest
-}) => {
-    const HeadingComponent = title?.headingLevel || "h2";
-    return (
-        <div
-            className={`qpp-c-alert qpp-c-alert--${variant} ${className}`}
-            role="alert"
-            {...rest}
-        >
-            <div className="qpp-c-alert__body">
-                {title && (
-                    <HeadingComponent className="h4 qpp-c-alert__heading">
-                        {typeof title === "object" ? title.text : title}
-                    </HeadingComponent>
-                )}
-                {description && (
-                    <p className="qpp-c-alert__text">{description}</p>
-                )}
-                {children}
-            </div>
-        </div>
-    );
-};
-
-Alert.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    description: PropTypes.string,
-    title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.shape({
-            text: PropTypes.string,
-            headingLevel: PropTypes.string,
-        }),
-    ]),
-    variant: PropTypes.oneOf(["info", "warning", "success", "error"]),
-};
-Alert.defaultProps = {
-    children: null,
-    className: "",
-    description: null,
-    title: null,
-    variant: "info",
-};
-
-export default Alert;

package/components/Breadcrumb/Breadcrumb.md

@@ -1,28 +0,0 @@
-# Breadcrumb Component
-
-The Breadcrumb component is a secondary navigation scheme that reveals the user's location.
-
-### Props
-
-| Property name         | Type       | Required | Default Value | Description                               |
-| --------------------- | ---------- | -------- | ------------- | ----------------------------------------- |
-| `breadcrumbClass`     | `String`   | `false`  | ''            | class to append to Breadcrumb nav element |
-| `crumbs`              | `Array`    | `true`   |               | array of breadcrumbs                      |
-| `dark`                | `Boolean`  | `false`  | `false`       | Use dark mode theme                       |
-| `RouterLink`          | `Function` | `false`  | `null`        | Link component to use instead of `<a>`    |
-| `routerExcludedLinks` | `Array`    | `false`  | `[]`          | Array of paths to exclude from using Link |
-
-### Crumbs
-
-Each crumb can be a string or an object with the following properties.
-
-| Property name | Type     | Required | Description                |
-| ------------- | -------- | -------- | -------------------------- |
-| `url`         | `String` | `true`   | url                        |
-| `title`       | `String` | `true`   | Menu item string displayed |
-| `category`    | `String` | `true`   | Data tracking category     |
-| `label`       | `String` | `true`   | Data tracking label        |
-
-### RouterLink
-
-The `RouterLink` is only used by the Frontend to enable using push state for navigation. The `routerExcludedLinks` provides a way to opt certain links out of using the RouterLink.

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -1,76 +0,0 @@
-import React from "react";
-import Breadcrumb from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-
-export default {
-    title: "Breadcrumb",
-    component: Breadcrumb,
-    decorators: [withKnobs],
-};
-
-export const ExampleLightBreadcrumb = () => (
-    <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
-        <Breadcrumb
-            newBreadcrumb={boolean("newBreadcrumb", true)}
-            crumbs={[
-                {
-                    url: "/",
-                    category: "MainContent",
-                    label: "Home",
-                    title: "Home",
-                },
-                {
-                    url: "/",
-                    category: "MainContent",
-                    label: "Mips Overview",
-                    title: "Mips Overview",
-                },
-            ]}
-        />
-    </div>
-);
-
-ExampleLightBreadcrumb.storyName = "Light";
-
-export const ExampleScreenreaderOnlyBreadcrumb = () => (
-    <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
-        <Breadcrumb
-            newBreadcrumb={boolean("newBreadcrumb", true)}
-            crumbs={[
-                {
-                    url: "/",
-                    category: "MainContent",
-                    label: "Home",
-                    title: "Home",
-                },
-                "Mips Overview",
-            ]}
-        />
-    </div>
-);
-ExampleScreenreaderOnlyBreadcrumb.storyName = "SR Only Breadcrumb";
-
-export const ExampleDarkBreadcrumb = () => (
-    <div className="qppds qpp-u-padding--16">
-        <Breadcrumb
-            newBreadcrumb={boolean("newBreadcrumb", true)}
-            dark
-            crumbs={[
-                {
-                    url: "/",
-                    category: "MainContent",
-                    label: "Home",
-                    title: "Home",
-                },
-                {
-                    url: "/",
-                    category: "MainContent",
-                    label: "Mips Overview",
-                    title: "Mips Overview",
-                },
-            ]}
-        />
-    </div>
-);
-
-ExampleDarkBreadcrumb.storyName = "Dark";

package/components/Breadcrumb/index.js

@@ -1,92 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Breadcrumb = ({
-    breadcrumbClass,
-    crumbs,
-    dark,
-    RouterLink,
-    routerExcludedLinks,
-}) => {
-    return (
-        <nav
-            className={`qpp-c-breadcrumbs ${
-                !dark ? "qpp-c-breadcrumbs--light" : ""
-            } ${breadcrumbClass}`}
-            aria-label="Breadcrumbs"
-        >
-            <ol className="qpp-c-breadcrumbs__list">
-                {crumbs.map((crumb, i) => {
-                    if (crumb.url) {
-                        if (
-                            RouterLink &&
-                            !routerExcludedLinks.includes(crumb.url)
-                        ) {
-                            return (
-                                <li
-                                    className="qpp-c-breadcrumbs__list-item"
-                                    key={crumb.title}
-                                >
-                                    <RouterLink
-                                        className="qpp-c-breadcrumbs__link"
-                                        to={crumb.url}
-                                        data-track-category={crumb.category}
-                                        data-track-action="Click"
-                                        data-track-label={crumb.label}
-                                    >
-                                        <span>{crumb.title}</span>
-                                    </RouterLink>
-                                </li>
-                            );
-                        }
-                        return (
-                            <li
-                                className="qpp-c-breadcrumbs__list-item"
-                                key={crumb.title}
-                            >
-                                <a
-                                    className="qpp-c-breadcrumbs__link"
-                                    href={crumb.url}
-                                    data-track-category={crumb.category}
-                                    data-track-action="Click"
-                                    data-track-label={crumb.label}
-                                >
-                                    <span>{crumb.title}</span>
-                                </a>
-                            </li>
-                        );
-                    } else {
-                        return (
-                            <li
-                                key={crumb}
-                                className={`${
-                                    i === crumbs.length - 1 ? "sr-only" : ""
-                                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
-                                aria-current="page"
-                            >
-                                <span>{crumb}</span>
-                            </li>
-                        );
-                    }
-                })}
-            </ol>
-        </nav>
-    );
-};
-
-Breadcrumb.propTypes = {
-    breadcrumbClass: PropTypes.string,
-    crumbs: PropTypes.array.isRequired,
-    dark: PropTypes.bool,
-    RouterLink: PropTypes.func,
-    routerExcludedLinks: PropTypes.array,
-};
-
-Breadcrumb.defaultProps = {
-    breadcrumbClass: "",
-    dark: false,
-    RouterLink: null,
-    routerExcludedLinks: [],
-};
-
-export default Breadcrumb;

package/components/CalloutBox/CalloutBox.stories.js

@@ -1,94 +0,0 @@
-import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
-
-import CalloutBox from "./index";
-
-export default {
-    title: "CalloutBox",
-    component: CalloutBox,
-    decorators: [withKnobs],
-};
-
-export const Default = () => {
-    return (
-        <div className="qpp-u-padding--12" style={{ maxWidth: "80ch" }}>
-            <CalloutBox
-                title="Call to Action Heading"
-                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-                button={{
-                    text: "Call to Action",
-                    onClick: () => console.log("cta clicked"),
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithHref = () => {
-    return (
-        <div className="qpp-u-padding--12" style={{ maxWidth: "80ch" }}>
-            <CalloutBox
-                title="Call to Action Heading"
-                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-                button={{
-                    text: "Call to Action",
-                    href: "https://example.com",
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithTextInput = () => {
-    const [value, setValue] = useState("");
-    return (
-        <div className="qpp-u-padding--12" style={{ maxWidth: "80ch" }}>
-            <CalloutBox
-                title="Call to Action Heading"
-                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-                input={{
-                    placeholder: "Placeholder",
-                    onChange: (e) => setValue(e.target.value),
-                    value,
-                }}
-                button={{
-                    text: "Call to Action",
-                    onClick: () => {
-                        console.log("cta clicked");
-                        console.log("input value --- ", value);
-                    },
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithHeaderLevel = () => {
-    return (
-        <div className="qpp-u-padding--12" style={{ maxWidth: "80ch" }}>
-            <CalloutBox
-                title="H5 Heading"
-                headerLevel={5}
-                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                button={{
-                    text: "Call to Action",
-                    href: "https://example.com",
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithButtonOverride = () => {
-    const Button = () => <button>My custom button</button>;
-    return (
-        <div className="qpp-u-padding--12" style={{ maxWidth: "80ch" }}>
-            <CalloutBox
-                title="H5 Heading"
-                headerLevel={5}
-                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                button={<Button />}
-            />
-        </div>
-    );
-};

package/components/CalloutBox/index.js

@@ -1,109 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import FeatherIcon from "feather-icons-react";
-
-import Button from "../Button";
-
-const getCtaButton = (button) => {
-    if (button) {
-        if (React.isValidElement(button)) {
-            return button;
-        }
-        if (button.href) {
-            const { href, text, ...restLink } = button;
-            return (
-                <a
-                    className="qpp-c-button qpp-c-button--secondary qpp-c-button--icon-after"
-                    href={href}
-                    {...restLink}
-                >
-                    {text}
-                    <FeatherIcon icon="chevron-right" />
-                </a>
-            );
-        }
-        const { onClick, text, ...restButton } = button;
-        return (
-            <Button
-                variant="secondary"
-                className="qpp-c-button--icon-after"
-                onClick={onClick}
-                {...restButton}
-            >
-                {text}
-                <FeatherIcon icon="chevron-right" />
-            </Button>
-        );
-    }
-    return null;
-};
-
-const CalloutBox = ({
-    title,
-    description,
-    button,
-    input,
-    children,
-    headerLevel,
-}) => {
-    const Header = `h${headerLevel}`;
-    return (
-        <aside className="qppds qpp-u-sm-padding--32 qpp-u-padding--24 qpp-u-fill--blue-70">
-            {title && (
-                <Header className="qpp-u-font-size--24 qpp-u-color--white qpp-u-margin-bottom--16 qpp-u-margin-top--0 qpp-u-font-weight--regular">
-                    {title}
-                </Header>
-            )}
-            {description && (
-                <p className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
-                    {description}
-                </p>
-            )}
-            {children && (
-                <div className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
-                    {children}
-                </div>
-            )}
-            {(input || button) && (
-                <div className="qpp-u-display--flex qpp-u-align-items--center qpp-u-flex-wrap--wrap qpp-u-margin-top--24">
-                    {input && (
-                        <input
-                            className="qpp-c-text-input qpp-u-sm-margin-right--16 qpp-u-margin-bottom--16 qpp-u-sm-margin-bottom--0 qpp-u-sm-width--auto qpp-u-width--100"
-                            type="text"
-                            {...input}
-                        />
-                    )}
-                    {getCtaButton(button)}
-                </div>
-            )}
-        </aside>
-    );
-};
-
-CalloutBox.propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-    button: PropTypes.shape({
-        text: PropTypes.string,
-        onClick: PropTypes.func,
-        href: PropTypes.string,
-    }),
-    input: PropTypes.shape({
-        value: PropTypes.string,
-        name: PropTypes.string,
-        id: PropTypes.string,
-    }),
-    children: PropTypes.node,
-    headerLevel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
-CalloutBox.defaultProps = {
-    title: null,
-    description: null,
-    button: null,
-    input: null,
-    children: null,
-    headerLevel: 2,
-};
-
-export default CalloutBox;