@madie/madie-design-system 1.2.62 → 2.0.0

package/components/Card/index.js

@@ -1,144 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import FeatherIcon from "feather-icons-react";
-
-const Card = ({
-    children,
-    className,
-    cta,
-    description,
-    eyebrow,
-    img,
-    parentTag,
-    responsive,
-    routerComponent,
-    size,
-    title,
-    variant,
-}) => {
-    const classes = [
-        "qppds",
-        "qpp-c-card",
-        size && `qpp-c-card--${size}`,
-        img && "qpp-c-card--image",
-        variant === "flag" && responsive && "qpp-c-xs-card--flag",
-        variant === "flag" && !responsive && "qpp-c-card--flag",
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-
-    const Container = parentTag || "div";
-    const HeadingComponent = title?.headingLevel || "h3";
-    const LinkComponent = routerComponent || "a";
-
-    return (
-        <Container className={classes}>
-            <div className="qpp-c-card__content">
-                <div className="qpp-c-card__header">
-                    {title && (
-                        <HeadingComponent className="h3 qpp-c-card__title">
-                            {typeof title === "object" ? title.text : title}
-                        </HeadingComponent>
-                    )}
-                    {eyebrow && (
-                        <span className="l2 qpp-c-card__eyebrow">
-                            {eyebrow}
-                        </span>
-                    )}
-                </div>
-                {description && (
-                    <div className="qpp-c-card__body">
-                        <p className="p1">{description}</p>
-                    </div>
-                )}
-                {children && <div className="qpp-c-card__body">{children}</div>}
-                {cta && (
-                    <div className="qpp-c-card__cta">
-                        {React.isValidElement(cta) ? (
-                            cta
-                        ) : (
-                            <LinkComponent
-                                href={cta.href}
-                                className="qpp-c-button qpp-c-button--text qpp-c-button--icon-after"
-                                {...cta}
-                            >
-                                {cta.text}{" "}
-                                <FeatherIcon
-                                    icon={cta.icon || "chevron-right"}
-                                />
-                            </LinkComponent>
-                        )}
-                    </div>
-                )}
-            </div>
-            {img &&
-                (() => {
-                    const { useBgImage, url, alt, ...restImg } = img;
-                    return (
-                        <div className="qpp-c-card__media">
-                            {useBgImage ? (
-                                <div
-                                    role="img"
-                                    style={{ backgroundImage: `url(${url})` }}
-                                    aria-label={alt}
-                                    {...restImg}
-                                />
-                            ) : (
-                                <img src={url} alt={alt} {...restImg} />
-                            )}
-                        </div>
-                    );
-                })()}
-        </Container>
-    );
-};
-
-Card.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    cta: PropTypes.oneOfType([
-        PropTypes.node,
-        PropTypes.shape({
-            href: PropTypes.string,
-            text: PropTypes.string,
-            icon: PropTypes.string,
-        }),
-    ]),
-    description: PropTypes.string,
-    eyebrow: PropTypes.string,
-    img: PropTypes.shape({
-        url: PropTypes.string,
-        alt: PropTypes.string,
-        useBgImage: PropTypes.bool,
-    }),
-    parentTag: PropTypes.string,
-    responsive: PropTypes.bool,
-    routerComponent: PropTypes.func,
-    size: PropTypes.oneOf(["small", "medium", "large"]),
-    title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.shape({
-            text: PropTypes.string,
-            headingLevel: PropTypes.string,
-        }),
-    ]),
-    variant: PropTypes.oneOf(["default", "flag"]),
-};
-
-Card.defaultProps = {
-    children: null,
-    className: null,
-    cta: null,
-    description: null,
-    eyebrow: null,
-    img: null,
-    parentTag: null,
-    responsive: false,
-    routerComponent: null,
-    size: null,
-    title: null,
-    variant: "default",
-};
-
-export default Card;

package/components/Dropdown/Dropdown.stories.js

@@ -1,94 +0,0 @@
-import React from "react";
-import Dropdown from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
-
-export default {
-    title: "Dropdown",
-    component: Dropdown,
-    decorators: [withKnobs],
-};
-
-export const DropdownField = () => (
-    <Dropdown
-        id="id-example"
-        value="value-example"
-        name="name-example"
-        ariaLabel="arial label example"
-        options={[
-            { name: "Name 1", value: "Value 1" },
-            { name: "Name 2", value: "Value 2" },
-            { name: "Name 3", value: "Value 3" },
-        ]}
-    />
-);
-
-export const DropdownFieldAutoWidth = () => (
-    <Dropdown
-        id="id-example"
-        value="value-example"
-        name="name-example"
-        ariaLabel="arial label example"
-        className="qpp-u-width--auto"
-        options={[
-            { name: "Name 1", value: "Value 1" },
-            { name: "Name 2", value: "Value 2" },
-            { name: "Name 3", value: "Value 3" },
-        ]}
-    />
-);
-
-export const DisabledDropdown = () => (
-    <Dropdown
-        disabled
-        id="id-example"
-        value="value-example"
-        name="name-example"
-        ariaLabel="arial label example"
-        options={[
-            { name: "Name 1", value: "Value 1" },
-            { name: "Name 2", value: "Value 2" },
-            { name: "Name 3", value: "Value 3" },
-        ]}
-    />
-);
-
-export const DropdownBigVariant = () => (
-    <Dropdown
-        id="id-example"
-        value="value-example"
-        name="name-example"
-        ariaLabel="arial label example"
-        size="big"
-        options={[
-            { name: "Name 1", value: "Value 1" },
-            { name: "Name 2", value: "Value 2" },
-            { name: "Name 3", value: "Value 3" },
-        ]}
-    />
-);
-
-export const DropdownWithDisabledOption = () => (
-    <Dropdown
-        id="id-example"
-        value="value-example"
-        name="name-example"
-        ariaLabel="arial label example"
-        options={[
-            { disabled: true, name: "Select Category", value: "default" },
-            { name: "Name 1", value: "Value 1" },
-            { name: "Name 2", value: "Value 2" },
-        ]}
-    />
-);
-
-export const DropdownUsingChildrenProp = () => (
-    <Dropdown
-        id="id-example"
-        value="value-example"
-        name="name-example"
-        ariaLabel="arial label example"
-    >
-        <option value="Value 1">Name 1</option>
-        <option value="Value 2">Name 2</option>
-    </Dropdown>
-);

package/components/Dropdown/index.js

@@ -1,85 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Dropdown = ({
-    className,
-    id,
-    ariaLabelledBy,
-    ariaLabel,
-    onChange,
-    dataTestId,
-    name,
-    dataType,
-    disabled,
-    size,
-    options,
-    children,
-    parentElement,
-    ...rest
-}) => {
-    const dropdownClass = [
-        "qpp-c-dropdown",
-        size === "big" && "qpp-c-dropdown--big",
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-
-    return (
-        <select
-            id={id}
-            aria-labelledby={ariaLabelledBy}
-            aria-label={ariaLabel}
-            className={dropdownClass || ""}
-            onChange={onChange}
-            data-testid={dataTestId}
-            name={name}
-            disabled={disabled}
-            data-type={dataType}
-            {...rest}
-        >
-            {children}
-            {options.map(({ disabled, name, value }) => (
-                <option disabled={disabled} key={value} value={value}>
-                    {name}
-                </option>
-            ))}
-        </select>
-    );
-};
-
-Dropdown.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    id: PropTypes.string,
-    ariaLabelledBy: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.string,
-    defaultValue: PropTypes.string,
-    dataTestId: PropTypes.string,
-    name: PropTypes.string,
-    dataType: PropTypes.string,
-    disabled: PropTypes.bool,
-    size: PropTypes.oneOf(["big"]),
-    options: PropTypes.array,
-    parentElement: PropTypes.string,
-};
-
-Dropdown.defaultProps = {
-    children: false,
-    className: "qpp-u-width--100",
-    id: null,
-    ariaLabelledBy: null,
-    ariaLabel: null,
-    onChange: () => null,
-    dataTestId: null,
-    name: null,
-    dataType: null,
-    disabled: false,
-    size: null,
-    options: [],
-    parentElement: "span",
-};
-
-export default Dropdown;

package/components/Error/Collapsible.jsx

@@ -1,93 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-class Collapsible extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isExpanded: false,
-        };
-
-        this._toggleExpanded = this.toggleExpanded.bind(this);
-        this._renderShowButton = this.renderShowButton.bind(this);
-        this._renderHideButton = this.renderHideButton.bind(this);
-    }
-
-    toggleExpanded() {
-        this.setState({
-            isExpanded: !this.state.isExpanded,
-        });
-    }
-
-    renderShowButton() {
-        return (
-            <span className="collapsible-show-label">
-                {this.props.showLabel}
-            </span>
-        );
-    }
-
-    renderHideButton() {
-        if (this.props.hideLabel) {
-            return (
-                <span className="collapsible-hide-label">
-                    {this.props.hideLabel}
-                </span>
-            );
-        } else {
-            return "";
-        }
-    }
-
-    render() {
-        const isArray = Array.isArray(this.props.content);
-        const isHidden = this.state.isExpanded ? undefined : true;
-
-        return (
-            <div className="collapsible-container">
-                <button
-                    onClick={this._toggleExpanded}
-                    className="collapsible-summary"
-                    type="button"
-                    aria-expanded={this.state.isExpanded ? true : false}
-                >
-                    {this._renderShowButton()}
-                    {this._renderHideButton()}
-                </button>
-
-                <div className="collapsible-details" hidden={isHidden}>
-                    {isArray ? (
-                        <ul className="items">
-                            {this.props.content.map((c) => (
-                                <li key={c.contentTitle}>
-                                    <p>
-                                        <b>{c.contentTitle}</b>
-                                    </p>
-                                    <p>{c.content}</p>
-                                </li>
-                            ))}
-                        </ul>
-                    ) : (
-                        <div>
-                            <p>
-                                <b>{this.props.contentTitle}</b>
-                            </p>
-                            <p>{this.props.content}</p>
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-Collapsible.propTypes = {
-    showLabel: PropTypes.string.isRequired,
-    hideLabel: PropTypes.string.isRequired,
-    content: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
-        .isRequired,
-    contentTitle: PropTypes.string,
-};
-
-export default Collapsible;

package/components/Error/ErrorUI.jsx

@@ -1,31 +0,0 @@
-import React from "react";
-import Collapsible from "./Collapsible";
-import PropTypes from "prop-types";
-
-const ErrorUI = (props) => {
-    let errorTitle = `${props.type || "Error"} ${props.code || ""}`;
-    let errorDetails = props.message;
-
-    return (
-        <section className="page-error">
-            <div className="responsive-container">
-                <h1>We’re sorry.</h1>
-                <p className="h2">We cannot access this page.</p>
-                <Collapsible
-                    showLabel="Open technical details about the error"
-                    hideLabel="Close technical details about the error"
-                    contentTitle={errorTitle}
-                    content={errorDetails}
-                />
-            </div>
-        </section>
-    );
-};
-
-ErrorUI.propTypes = {
-    code: PropTypes.string,
-    message: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-    type: PropTypes.string,
-};
-
-export default ErrorUI;

package/components/Error/error.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import ErrorUI from "./ErrorUI";
-
-/**
- * Renders the QPP Error Page content.
- */
-export default class ErrorPage {
-    /**
-     * @param {Object} options - An object containing content and config data
-     * @param {String} options.type - The error type
-     * @param {String} options.code - The error code
-     * @param {String} options.message - The error message
-     * @param {HTMLElement} options.rootElement - Elem inside which to render
-     */
-    constructor(options) {
-        render(
-            <ErrorUI
-                type={options.type}
-                code={options.code}
-                message={options.message}
-            />,
-            options.rootElement
-        );
-    }
-}

package/components/FlashNotification/FlashNotificationUI.jsx

@@ -1,91 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import reactDOM from "react-dom";
-import { CloseXIcon } from "../../lib/SvgComponents.jsx";
-
-class FlashNotification extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { isClosed: true };
-        this._closeFlashNotification = this.closeFlashNotification.bind(this);
-        this._fadeOutNotification = this.fadeOutNotification.bind(this);
-    }
-
-    render() {
-        return (
-            <div
-                className={
-                    this.state.isClosed
-                        ? "flash-notification notification-closed"
-                        : "flash-notification"
-                }
-                ref={(elem) => {
-                    this.element = elem;
-                }}
-            >
-                <div className={this.props.success ? "success" : "error"}>
-                    <div className="icon"></div>
-                    <div className="text-content">
-                        <p className="title-text">{this.props.titleText}</p>
-                        <p className="body-text">{this.props.bodyText}</p>
-                    </div>
-                    <div className="close-notification-container">
-                        <button
-                            className="closeNotification"
-                            aria-label="Close notification"
-                            onClick={this._closeFlashNotification}
-                        >
-                            <svg className="close-icon" aria-hidden="true">
-                                {/* <use xlinkHref="#closex" /> */}
-                                <CloseXIcon />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    componentDidMount() {
-        setTimeout(
-            function () {
-                this.setState({ isClosed: false });
-            }.bind(this),
-            250
-        );
-
-        this.timer = setTimeout(
-            function () {
-                this._fadeOutNotification();
-            }.bind(this),
-            10000
-        );
-    }
-
-    fadeOutNotification() {
-        this.setState({ isClosed: true });
-        setTimeout(
-            function () {
-                reactDOM.unmountComponentAtNode(this.element.parentElement);
-                if (typeof this.props.onClose === "function") {
-                    this.props.onClose();
-                }
-            }.bind(this),
-            500
-        );
-    }
-
-    closeFlashNotification() {
-        clearTimeout(this.timer);
-        this._fadeOutNotification();
-    }
-}
-
-FlashNotification.propTypes = {
-    bodyText: PropTypes.string,
-    success: PropTypes.bool.isRequired,
-    titleText: PropTypes.string,
-    onClose: PropTypes.func,
-};
-
-export default FlashNotification;

package/components/FlashNotification/index.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import FlashNotificationUI from "./FlashNotificationUI";
-
-/**
- * Renders the Confirmation/Error Flash Component
- */
-export default class FlashNotification {
-    /**
-     * @param {Object} options - An object containing content and config data
-     * @param {Boolean} options.success - Whether to render a confirmation or error notification
-     * @param {String} options.titleText - The title text displayed on the notification
-     * @param {String} options.bodyText - The body text displayed on the notification
-     * @param {HTMLElement} options.rootElement - Elem inside which to render
-     */
-    constructor(options) {
-        if (options.hasOwnProperty("rootElement")) {
-            render(
-                <FlashNotificationUI
-                    success={options.success}
-                    titleText={options.titleText}
-                    bodyText={options.bodyText}
-                />,
-                options.rootElement
-            );
-        } else {
-            render(<FlashNotificationUI />, options);
-        }
-    }
-}

package/components/Footer/Footer.stories.js

@@ -1,20 +0,0 @@
-import React from "react";
-import Footer from "./FooterUI";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs";
-
-export default {
-    title: "Footer",
-    component: Footer,
-    decorators: [withKnobs],
-};
-
-export const ExampleFooter = () => (
-    <Footer
-        isFullWidth={boolean("isFullWidth", false)}
-        buildVersion={text("buildVersion", "BUILD VERSION")}
-        isNewFooter={boolean("isNewFooter", false)}
-        showHcdResearch={boolean("showHcdResearch", false)}
-    />
-);
-
-ExampleFooter.storyName = "example Footer";