@madie/madie-design-system 1.2.62 → 2.0.1

package/components/Card/Card.stories.js

@@ -1,163 +0,0 @@
-import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
-
-import Card from "./index";
-
-export default {
-    title: "Card",
-    component: Card,
-    decorators: [withKnobs],
-};
-
-export const Default = () => {
-    return (
-        <div className="qpp-u-padding--12 qpp-u-width--33">
-            <Card
-                title="Card Heading"
-                eyebrow="Eyebrow"
-                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-                cta={{
-                    text: "Call to Action",
-                    href: "#",
-                }}
-            />
-        </div>
-    );
-};
-
-export const CustomButton = () => (
-    <div className="qpp-u-padding--12 qpp-u-width--33">
-        <Card
-            title="Card Heading"
-            eyebrow="Eyebrow"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-            cta={
-                <button
-                    className="qpp-c-button"
-                    onClick={() => console.log("I've been clicked")}
-                    style={{
-                        padding: "0.75rem 1rem",
-                    }}
-                >
-                    Click me
-                </button>
-            }
-        />
-    </div>
-);
-
-export const Image = () => (
-    <div className="qpp-u-padding--12 qpp-u-width--33">
-        <Card
-            title="Card 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."
-            eyebrow="Eyebrow"
-            cta={{
-                text: "Call to Action",
-                href: "#",
-            }}
-            img={{
-                url: "https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png",
-                alt: "Card image alt",
-            }}
-        />
-    </div>
-);
-
-export const SmallImageCard = () => (
-    <div className="qpp-u-padding--12 wrap qpp-u-width--25">
-        <Card
-            title="Card Heading"
-            eyebrow="Eyebrow"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-            size="small"
-            cta={{
-                text: "Call to Action",
-                href: "#",
-            }}
-            img={{
-                url: "https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png",
-                alt: "Card image alt",
-            }}
-        />
-    </div>
-);
-
-export const MediumImageCard = () => (
-    <div className="qpp-u-padding--12 wrap qpp-u-width--33">
-        <Card
-            title="Card Heading"
-            eyebrow="Eyebrow"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-            size="medium"
-            cta={{
-                text: "Call to Action",
-                href: "#",
-            }}
-            img={{
-                url: "https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png",
-                alt: "Card image alt",
-            }}
-        />
-    </div>
-);
-
-export const LargeImageCard = () => (
-    <div className="qpp-u-padding--12 wrap qpp-u-width--100">
-        <Card
-            title="Card Heading"
-            eyebrow="Eyebrow"
-            variant="flag"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-            size="large"
-            cta={{
-                text: "Call to Action",
-                href: "#",
-            }}
-            img={{
-                url: "https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png",
-                alt: "Card image alt",
-            }}
-        />
-    </div>
-);
-
-export const ResponsiveFlagCard = () => (
-    <div className="qpp-u-padding--12 wrap qpp-u-width--100">
-        <Card
-            title="Card Heading"
-            eyebrow="Eyebrow"
-            responsive
-            variant="flag"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
-            size="large"
-            cta={{
-                text: "Call to Action",
-                href: "#",
-            }}
-            img={{
-                url: "https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png",
-                alt: "Card image alt",
-            }}
-        />
-    </div>
-);
-
-export const BackgroundImageCard = () => (
-    <div className="qpp-u-padding--12 wrap qpp-u-width--33">
-        <Card
-            className="qpp-c-card--medium qpp-c-card--image qpp-c-xs-card--flag qpp-c-sm-card--default qpp-u-flex--auto qpp-u-sm-flex--1"
-            title="QPP Access User Guide"
-            description="Download zip file"
-            cta={{
-                text: "Call to Action",
-                href: "#",
-            }}
-            img={{
-                url: "https://qpp.cms.gov/images/public/images/resource-pdf.png",
-                alt: "Card image alt",
-                useBgImage: true,
-            }}
-        />
-    </div>
-);

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
-        );
-    }
-}