@madie/madie-design-system 1.2.62 → 2.0.1

package/components/Infotip/Infotip.jsx

@@ -1,75 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Tooltip from "../Tooltip";
-import InfotipIcon from "./InfotipIcon";
-
-const BUTTON_SIZE = "16px";
-
-const buttonStyle = {
-    background: "transparent",
-    border: 0,
-    padding: 0,
-    width: BUTTON_SIZE,
-    height: BUTTON_SIZE,
-    WebkitTouchCallout: "none",
-    WebkitUserSelect: "none",
-    userSelect: "none",
-};
-
-// Use basic touch handlers for mobile "tap-to-open" ui.  Mobile touch
-// is currently not supported by @reach/tooltip; this may change in future.
-// Leverages @reach/tooltip "focus" behavior to open tooltip on tap,
-// and close tooltip on second tap or loss of focus.
-// TODO: We may want to improve this by tracking touch positions to ensure
-// that a 'touchend' event must be reasonably close to the tooltip target.
-const touchHandlers = {
-    onTouchStart: (e) => {
-        e.stopPropagation();
-    },
-    onTouchEnd: (e) => {
-        if (document.activeElement !== e.currentTarget) {
-            e.preventDefault();
-            e.currentTarget.focus();
-        } else {
-            e.preventDefault();
-            e.currentTarget.blur();
-        }
-    },
-};
-
-/**
- * Tooltip with styled information icon
- */
-const Infotip = ({ label, lightIcon, ...props }) => (
-    <Tooltip label={label} {...props}>
-        <button
-            type="button"
-            aria-label="Information"
-            style={buttonStyle}
-            {...touchHandlers}
-        >
-            <InfotipIcon
-                lightIcon={lightIcon}
-                width={BUTTON_SIZE}
-                height={BUTTON_SIZE}
-                aria-hidden
-                style={{ float: "left" }}
-            />
-        </button>
-    </Tooltip>
-);
-
-Infotip.propTypes = {
-    label: PropTypes.string.isRequired,
-    ariaLabel: PropTypes.string,
-    lightIcon: PropTypes.bool,
-    DEBUG_STYLE: PropTypes.bool,
-};
-
-Infotip.defaultProps = {
-    ariaLabel: undefined,
-    lightIcon: false,
-    DEBUG_STYLE: undefined,
-};
-
-export default Infotip;

package/components/Infotip/Infotip.stories.js

@@ -1,52 +0,0 @@
-import React from "react";
-import Infotip from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-
-export default {
-    title: "Infotip",
-    component: Infotip,
-    decorators: [
-        withKnobs,
-        (storyFn) => (
-            <div style={{ marginTop: "120px", marginLeft: "100px" }}>
-                {storyFn()}
-            </div>
-        ),
-    ],
-};
-
-export const ExampleInfoTip = () => (
-    <Infotip label="Tooltip Content!" lightIcon={boolean("lightIcon", false)} />
-);
-
-ExampleInfoTip.storyName = "qpp themed Infotip";
-
-export const PositionCollisionInfotip = () => (
-    <Infotip
-        DEBUG_STYLE
-        label="The DEBUG_STYLE prop is supported by the useTooltip hook and should only
-  be used for development."
-    />
-);
-
-PositionCollisionInfotip.storyName = "position collision";
-
-export const LongContentInfotip = () => (
-    <div style={{ paddingTop: "50px" }}>
-        <span style={{ marginLeft: "120px" }} />
-        <Infotip
-            DEBUG_STYLE
-            label="Initial Eligibility determination covers data collected from Oct. 1, 2018 to Sept. 31, 2019. Determination was released in Dec. 2019. Final eligibility will be released in Nov. 2020."
-        />
-    </div>
-);
-
-LongContentInfotip.storyName = "long content";
-
-export const LightIconInfotip = () => (
-    <div style={{ backgroundColor: "#04838A", padding: "20px", width: "16px" }}>
-        <Infotip lightIcon label="Light Icon Infotip" />
-    </div>
-);
-
-LightIconInfotip.storyName = "alternate light icon";

package/components/Infotip/InfotipIcon.jsx

@@ -1,41 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const InfotipIcon = ({ lightIcon, ...props }) => (
-    <svg
-        width="20px"
-        height="20px"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-    >
-        <g fill="none" fillRule="evenodd">
-            <path
-                d="M9.721 19.158c-4.947 0-8.973-4.126-8.973-9.196C.748 4.892 4.774.766 9.72.766c4.948 0 8.974 4.126 8.974 9.196 0 5.07-4.026 9.196-8.974 9.196z"
-                fill="#2EB1ED"
-                fillRule="nonzero"
-            />
-            <path
-                d="M9.721 0C4.361 0 0 4.469 0 9.962c0 5.493 4.36 9.962 9.721 9.962 5.36 0 9.722-4.469 9.722-9.962C19.443 4.469 15.082 0 9.72 0z"
-                fill={lightIcon ? "#FFF" : "#04838A"}
-            />
-            <path
-                d="M9.721 14.765c-.206 0-.374.112-.374.25v.5c0 .138.168.25.374.25.207 0 .374-.112.374-.25v-.5c0-.138-.167-.25-.374-.25zM9.764 4.706H9.72c-.792 0-1.536.29-2.1.821a2.767 2.767 0 0 0-.89 2.03c0 .197.166.356.373.356s.374-.159.374-.356c0-.577.237-1.118.668-1.523a2.268 2.268 0 0 1 1.607-.615c1.182.016 2.195.98 2.211 2.107.011.743-.373 1.427-1.028 1.83-.995.61-1.589 1.691-1.589 2.89v1.013c0 .197.168.357.374.357.207 0 .374-.16.374-.357v-1.013c0-.941.477-1.82 1.246-2.292.873-.537 1.386-1.448 1.371-2.438-.022-1.527-1.345-2.788-2.948-2.81z"
-                stroke={lightIcon ? "#04838A" : "#FFF"}
-                strokeWidth=".5"
-                fill={lightIcon ? "#04838A" : "#FFF"}
-                fillRule="nonzero"
-            />
-        </g>
-    </svg>
-);
-
-export default InfotipIcon;
-
-InfotipIcon.propTypes = {
-    lightIcon: PropTypes.bool,
-};
-
-InfotipIcon.defaultProps = {
-    lightIcon: false,
-};

package/components/Infotip/index.js

@@ -1,3 +0,0 @@
-import Infotip from "./Infotip";
-
-export default Infotip;

package/components/Link/Link.stories.js

@@ -1,82 +0,0 @@
-import React from "react";
-import DSLink from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-
-export default {
-    title: "Link",
-    component: DSLink,
-    decorators: [withKnobs],
-};
-
-export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;
-
-export const LinkColorVariants = () => (
-    <>
-        <div className=" qpp-dark-background qpp-u-padding--16">
-            <DSLink href="#" variant="white">
-                Link Label
-            </DSLink>
-        </div>
-        <p>
-            <DSLink href="#" variant="gray">
-                Link Label
-            </DSLink>
-        </p>
-    </>
-);
-
-export const inlineLinks = () => (
-    <div className="qpp-u-padding--16">
-        <p className="qpp-u-width--60">
-            Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{" "}
-            <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
-            venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
-            venenatis <DSLink href="#">inline link</DSLink> dapibus posuere
-            velit aliquet.
-        </p>
-    </div>
-);
-
-export const inlineLinksDarkBackground = () => (
-    <div className="qpp-dark-background qpp-u-padding--16">
-        Aenean lacinia{" "}
-        <DSLink href="#" variant="white">
-            inline link
-        </DSLink>{" "}
-        nulla sed{" "}
-        <DSLink href="#" variant="white">
-            inline link
-        </DSLink>
-        . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
-        Integer posuere erat a ante venenatis{" "}
-        <DSLink href="#" variant="white">
-            inline link
-        </DSLink>{" "}
-        dapibus posuere velit aliquet.
-    </div>
-);
-
-export const linkWithIcon = () => {
-    const icon = <OpenInNewIcon classes={{ root: "qpp-icon-mat" }} />;
-    return (
-        <div className="qpp-u-padding--16">
-            <DSLink href="#">
-                Standalone Link With Icon
-                {icon}
-            </DSLink>{" "}
-            <p className=" qpp-u-width--60">
-                Aenean lacinia{" "}
-                <DSLink href="#">
-                    inline link
-                    {icon}
-                </DSLink>{" "}
-                nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer
-                posuere erat a ante venenatis dapibus posuere velit aliquet.
-                Integer posuere erat a ante venenatis{" "}
-                <DSLink href="#">inline link {icon}</DSLink> dapibus posuere
-                velit aliquet.
-            </p>
-        </div>
-    );
-};

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,23 +0,0 @@
-import React from "react";
-import NotificationBanner from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-
-export default {
-    title: "NotificationBanner",
-    component: NotificationBanner,
-    decorators: [withKnobs],
-};
-
-export const ExampleNotificationBanner = () => (
-    <NotificationBanner
-        result={{
-            content: "CONTENT",
-            label: "Label",
-            name: "name",
-            color: "blue",
-            dismissable: boolean("dismissable", false),
-        }}
-    />
-);
-
-ExampleNotificationBanner.storyName = "example NotificationBanner";

package/components/NotificationBanner/index.js

@@ -1,279 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-import SanitizedContent from "../SanitizedContent";
-import { CloseXIcon, BellOutline } from "../../lib/SvgComponents.jsx";
-import { withGetConfig } from "../hooks/useGetConfig";
-
-class NotificationBanner extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            height: "100%",
-            expanded: true,
-        };
-
-        this._renderCloseButton = this.renderCloseButton.bind(this);
-        this._collapseNotification = this.collapseNotification.bind(this);
-        this._expandNotification = this.expandNotification.bind(this);
-        this._setBannerHeight = this.setBannerHeight.bind(this);
-    }
-
-    componentDidMount() {
-        if (window.innerWidth <= 767) {
-            this.setState({
-                expanded: false,
-            });
-        }
-
-        window.addEventListener("load", this._setBannerHeight);
-        window.addEventListener("resize", this._setBannerHeight);
-    }
-
-    // Populate state with notification from localStorage
-    componentDidUpdate(prevProps) {
-        if (prevProps.result !== this.props?.result) {
-            const { result: notifications } = this.props;
-            if (Object.keys(notifications).length > 0) {
-                this.setState({
-                    expanded: this.isNotificationExpanded(
-                        notifications.content
-                    ),
-                });
-            }
-        }
-    }
-
-    setBannerHeight() {
-        const {
-            result: {
-                content: { content },
-            },
-        } = this.props;
-        if (content) {
-            this.bannerContainer.style.transition = "none";
-
-            this.state.expanded
-                ? this.collapsedBanner.setAttribute("tabIndex", "-1")
-                : this.collapsedBanner.setAttribute("tabIndex", " ");
-
-            this.setState({
-                height: this.state.expanded
-                    ? "100%"
-                    : this.collapsedWrapper.offsetHeight + "px",
-            });
-        }
-    }
-
-    isNotificationExpanded(notification) {
-        const dateDismissed = new Date(notification.dateDismissed);
-        const dateUpdated = new Date(notification.dateUpdated);
-        const notDismissed =
-            (this.isDateValid(dateUpdated) &&
-                this.isDateValid(dateDismissed) &&
-                dateUpdated >= dateDismissed) ||
-            !this.isDateValid(dateDismissed);
-
-        return notDismissed;
-    }
-
-    /**
-     * Whether the date is valid, i.e. not null
-     *
-     * @param {Date} date
-     * @return {Boolean}
-     */
-    isDateValid(date) {
-        return !isNaN(Date.parse(date));
-    }
-
-    /**
-     * Try to find this NotificationBanner instance in localStorage, or else add
-     * a minimal version of it, and mark it with a dateDismissed, then update
-     * localStorage.
-     */
-    markNotificationClosed() {
-        const { result } = this.props;
-        const dateDismissed = new Date().toISOString();
-        const storageNotification = result || {};
-
-        if (
-            storageNotification &&
-            Object.keys(storageNotification).length > 0
-        ) {
-            window.localStorage.setItem(
-                "notifications",
-                JSON.stringify({
-                    ...storageNotification,
-                    content: {
-                        ...storageNotification.content,
-                        dateDismissed,
-                    },
-                })
-            );
-        } else {
-            window.localStorage.setItem(
-                "notifications",
-                JSON.stringify({
-                    ...storageNotification,
-                    content: {
-                        name: "header-notification",
-                        dateDismissed,
-                    },
-                })
-            );
-        }
-    }
-
-    /**
-     * Callback when the user dimisses a notification. Mark it as dismissed in
-     * localStorage, empty the contents, and dispatch a custom event to notify
-     * any observers that it has been dismissed.
-     */
-    collapseNotification(e) {
-        e.stopPropagation();
-        this.markNotificationClosed();
-        this.collapsedBanner.setAttribute("tabIndex", " ");
-        this.bannerContainer.style.transition = "height .2s ease-out";
-        this.setState({
-            expanded: false,
-            height: this.collapsedWrapper.offsetHeight + "px",
-        });
-    }
-
-    expandNotification() {
-        if (!this.state.expanded) {
-            this.collapsedBanner.setAttribute("tabIndex", "-1");
-            this.bannerContainer.style.transition = "height .2s ease-out";
-            this.setState({
-                expanded: true,
-                height: "100%",
-            });
-        }
-    }
-
-    /**
-     * Renders the close button if the notification instance is dismissable.
-     *
-     * @return {String} HTML content
-     */
-    renderCloseButton() {
-        const {
-            result: {
-                content: { dismissable },
-            },
-        } = this.props;
-        if (dismissable) {
-            return (
-                <button
-                    onClick={this._collapseNotification}
-                    type="button"
-                    className="notification-banner-close"
-                >
-                    <svg
-                        className="close-icon"
-                        aria-hidden="true"
-                        focusable="false"
-                    >
-                        <CloseXIcon />
-                    </svg>
-                    <span className="sr-only">Close</span>
-                </button>
-            );
-        } else {
-            return "";
-        }
-    }
-
-    /**
-     * Render the notification if it has any contents.
-     *
-     * @return {String} HTML content
-     */
-    render() {
-        const { expanded, height } = this.state;
-        const { result: { content: { enabled, content } = {} } = {} } =
-            this.props;
-        if (!content || !enabled) {
-            return <div id="notification-banner" />;
-        } else {
-            const notificationStatus = expanded ? "expanded" : "collapsed";
-            const { color = "blue", label = "Update" } = content;
-            const className = `notification-banner  notification-banner-${color} ${notificationStatus}`;
-
-            return (
-                <div
-                    style={{ height }}
-                    ref={(elem) => (this.bannerContainer = elem)}
-                    className={className}
-                >
-                    <div
-                        ref={(elem) => (this.expandedWrapper = elem)}
-                        className={`notification-banner-wrapper expanded-view`}
-                    >
-                        <div className="notification-banner-label">{label}</div>
-                        <div className="notification-banner-content">
-                            <SanitizedContent
-                                html={
-                                    expanded
-                                        ? content
-                                        : "<p>Nothing to see here</p>"
-                                }
-                            />
-                        </div>
-                        {expanded && this._renderCloseButton()}
-                    </div>
-
-                    <div
-                        ref={(elem) => (this.collapsedWrapper = elem)}
-                        className={`notification-banner-wrapper collapsed-view`}
-                        onClick={this._expandNotification}
-                    >
-                        <button
-                            ref={(elem) => (this.collapsedBanner = elem)}
-                            className={`notification-banner-label`}
-                        >
-                            {label}
-                            <span className="bell-icon">
-                                <svg aria-hidden="true" focusable="false">
-                                    <BellOutline />
-                                </svg>
-                            </span>
-                        </button>
-                    </div>
-                </div>
-            );
-        }
-    }
-}
-
-NotificationBanner.propTypes = {
-    result: PropTypes.shape({
-        content: PropTypes.shape({
-            content: PropTypes.string,
-            label: PropTypes.string,
-            color: PropTypes.string,
-            dismissable: PropTypes.bool,
-        }),
-    }),
-};
-
-NotificationBanner.defaultProps = {
-    result: {
-        content: {
-            content: null,
-            label: "Update",
-            color: "blue",
-            dismissable: true,
-        },
-    },
-};
-
-export default withGetConfig(NotificationBanner, {
-    timeout: 5,
-    url: "/config/notification",
-    localStorageName: "active_notification",
-    equalityCheckExclude: ["dateDismissed", "dateUpdated"],
-    defaultContent: {},
-});

package/components/Spinner/index.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import DSSpinner from "@cmsgov/design-system/dist/components/Spinner/Spinner";
-
-export default class Spinner {
-    constructor(options) {
-        render(<DSSpinner />, options.rootElement);
-    }
-}

package/components/TextInput/TextInput.stories.js

@@ -1,118 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import TextInput from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
-
-export default {
-    title: "Text Input",
-    component: TextInput,
-    decorators: [withKnobs],
-};
-
-const optionalProps = {
-    "aria-label": "example label",
-};
-
-const Wrapper = ({ children }) => (
-    <div className="qpp-u-padding--16">{children}</div>
-);
-Wrapper.propTypes = {
-    children: PropTypes.node,
-};
-
-export const InputField = () => (
-    <Wrapper>
-        <TextInput
-            style={{ width: "auto" }}
-            id="example"
-            name="single-example"
-            value="Example value"
-            label="Input Field"
-            {...optionalProps}
-        />
-    </Wrapper>
-);
-
-export const InputFieldWithPlaceholder = () => (
-    <Wrapper>
-        <TextInput
-            id="placeholder-example"
-            name="placheholder"
-            label="Placeholder Example"
-            placeholder="Placeholder value"
-        />
-    </Wrapper>
-);
-export const DisabledInputField = () => (
-    <Wrapper>
-        <TextInput
-            disabled={true}
-            id="disabled-example"
-            name="disabled_example"
-            value="Example value"
-            label="Disabled Example"
-        />
-    </Wrapper>
-);
-
-export const FocusedInputField = () => (
-    <Wrapper>
-        <TextInput
-            id="focused-example"
-            name="focused_example"
-            value="Example value"
-            label="Focused Example"
-            className="qpp-c-text-input--focus"
-        />
-    </Wrapper>
-);
-
-export const ErrorInputField = () => (
-    <Wrapper>
-        <TextInput
-            className="qpp-u-margin-bottom--8"
-            id="error-example"
-            name="error_example"
-            value="Example value"
-            error="Error Message"
-            label="Error Example"
-        />
-    </Wrapper>
-);
-
-export const SuccessInputField = () => (
-    <Wrapper>
-        <TextInput
-            variant="success"
-            id="success-example"
-            name="success"
-            value="Example value"
-            label="Success Example"
-        />
-    </Wrapper>
-);
-
-export const InputFieldWithHint = () => (
-    <Wrapper>
-        <TextInput
-            className="qpp-u-margin-bottom--8"
-            id="hint-example"
-            name="hint"
-            value="Example value"
-            label="Hint Example"
-            hint="Hint Message"
-        />
-    </Wrapper>
-);
-
-export const BigInput = () => (
-    <Wrapper>
-        <TextInput
-            id="big-example"
-            name="hint"
-            value="Example value"
-            label="Big Example"
-            size="big"
-        />
-    </Wrapper>
-);