@madie/madie-design-system 1.2.62 → 2.0.0

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/Link/index.js

@@ -1,61 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const VARIANTS = ["white", "gray"];
-
-const DSLink = ({
-    className,
-    href,
-    download,
-    ariaLabel,
-    onClick,
-    children,
-    variant,
-    ...rest
-}) => {
-    let linkClass = "qpp-c-link";
-    if (VARIANTS.includes(variant)) {
-        variant === "gray"
-            ? (linkClass = linkClass.concat(" ", "qpp-u-color--gray-60"))
-            : (linkClass = linkClass.concat(" ", `qpp-u-color--${variant}`));
-    }
-
-    if (className) {
-        linkClass = linkClass.concat(" ", className);
-    }
-
-    return (
-        <a
-            aria-label={ariaLabel}
-            className={linkClass || ""}
-            href={href}
-            download={download}
-            onClick={onClick}
-            {...rest}
-        >
-            {children}
-        </a>
-    );
-};
-
-DSLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    href: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    onClick: PropTypes.func,
-    download: PropTypes.bool,
-    variant: PropTypes.oneOf(VARIANTS),
-};
-
-DSLink.defaultProps = {
-    children: null,
-    className: "",
-    href: "",
-    ariaLabel: null,
-    onClick: () => null,
-    download: false,
-    variant: null,
-};
-
-export default DSLink;

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

package/components/TextInput/index.js

@@ -1,137 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const TextInput = ({
-    id,
-    name,
-    placeholder,
-    disabled,
-    required,
-    size,
-    className,
-    label,
-    minLength,
-    maxLength,
-    hint,
-    errorLabel,
-    error,
-    autoComplete,
-    onChange,
-    onKeyPress,
-    style,
-    dataTestId,
-    type,
-    innerRef,
-    number,
-    variant,
-    parentElement,
-    ...props
-}) => {
-    const ContainerElement = parentElement || "span";
-    const numberProps = {
-        pattern: "[0-9]*",
-    };
-
-    const textInputClass = [
-        "qpp-c-text-input",
-        variant === "success" && !error && "qpp-c-text-input--success",
-        error && "qpp-c-text-input--error",
-        size === "big" && "qpp-c-text-input--big",
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-
-    return (
-        <ContainerElement className="qppds ds-text-input-container">
-            {label && (
-                <label className="qpp-u-margin-bottom--8" htmlFor={id}>
-                    {label}
-                </label>
-            )}
-            <input
-                {...(number ? numberProps : {})}
-                style={style}
-                data-testid={dataTestId}
-                type={type}
-                className={textInputClass || ""}
-                id={id}
-                name={name}
-                placeholder={placeholder}
-                disabled={disabled}
-                minLength={minLength}
-                maxLength={maxLength}
-                required={required}
-                autoComplete={autoComplete}
-                onChange={onChange}
-                onKeyPress={onKeyPress}
-                ref={innerRef}
-                {...props}
-            />
-            {hint && <span className="qpp-hint-message">{hint}</span>}
-            {error && (
-                <span
-                    aria-label={errorLabel}
-                    role="alert"
-                    className="qpp-error-message"
-                >
-                    {error}
-                </span>
-            )}
-        </ContainerElement>
-    );
-};
-
-TextInput.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    placeholder: PropTypes.string,
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    className: PropTypes.string,
-    minLength: PropTypes.string,
-    maxLength: PropTypes.string,
-    hint: PropTypes.string,
-    errorLabel: PropTypes.string,
-    error: PropTypes.string,
-    autoComplete: PropTypes.string,
-    onChange: PropTypes.func,
-    onKeyPress: PropTypes.func,
-    style: PropTypes.object,
-    dataTestId: PropTypes.string,
-    type: PropTypes.string,
-    innerRef: PropTypes.string,
-    number: PropTypes.bool,
-    variant: PropTypes.oneOf(["success"]),
-    parentElement: PropTypes.string,
-    label: PropTypes.string,
-    size: PropTypes.oneOf(["big"]),
-};
-
-TextInput.defaultProps = {
-    id: "",
-    name: "",
-    placeholder: null,
-    disabled: false,
-    required: false,
-    className: "",
-    minLength: "",
-    maxLength: "",
-    error: null,
-    errorLabel: null,
-    hint: null,
-    autoComplete: "on",
-    onChange: () => null,
-    onKeyPress: () => null,
-    style: null,
-    dataTestId: "",
-    type: "text",
-    innerRef: null,
-    number: false,
-    variant: null,
-    parentElement: "span",
-    label: null,
-    size: null,
-};
-
-export default TextInput;

package/components/Tooltip/Tooltip.jsx

@@ -1,88 +0,0 @@
-import React, { cloneElement, useLayoutEffect, useRef } from "react";
-import PropTypes from "prop-types";
-import positionTip, { positionTriangle } from "./position";
-import { useTooltip, TooltipPopup } from "@reach/tooltip";
-import Portal from "@reach/portal";
-
-// TODO: investigate ways to allow more styling via css? the triangle
-// positioning effect issue may need to be resolved to allow for this.
-const TEXT_COLOR = "#FFF";
-const BACKGROUND_COLOR = "#333";
-
-/**
- * Generic styled tooltip component.
- * Corresponding styles: /styles/components/_tooltip.scss
- *
- * Extends implementation from @reach/tooltip:
- * https://reacttraining.com/reach-ui/tooltip
- */
-const Tooltip = ({ children, label, ariaLabel, DEBUG_STYLE }) => {
-    const [trigger, tooltip] = useTooltip({ DEBUG_STYLE });
-    const { isVisible, triggerRect } = tooltip;
-    const tooltipPopupRef = useRef();
-    const triangleRef = useRef();
-
-    useLayoutEffect(() => {
-        // For some reason, the forwardRef for the tooltipPopup points to an undefined
-        // dom element when we first render the portal containing the triangle. Using
-        // an effect here will ensure that the ref is available when applying styles.
-        // TODO: investigate and make issue for @reach-ui/tooltip?
-        if (isVisible && tooltipPopupRef.current && triggerRect) {
-            const tooltipRect = tooltipPopupRef.current.getBoundingClientRect();
-            const positionCssText = positionTriangle(triggerRect, tooltipRect);
-            const cssText = `
-                  position: absolute;
-                  width: 0;
-                  height: 0;
-                  ${positionCssText}
-                  border-top-color: ${BACKGROUND_COLOR};
-                  border-bottom-color: ${BACKGROUND_COLOR};
-                  z-index: 1;
-                `;
-            triangleRef.current.style.cssText = cssText;
-        }
-    });
-
-    return (
-        <>
-            {cloneElement(children, trigger)}
-            <TooltipPopup
-                {...tooltip}
-                label={label}
-                ariaLabel={ariaLabel}
-                style={{
-                    background: BACKGROUND_COLOR,
-                    color: TEXT_COLOR,
-                }}
-                ref={tooltipPopupRef}
-                position={positionTip}
-            />
-            {isVisible && (
-                <Portal>
-                    <div
-                        ref={triangleRef}
-                        style={{
-                            position: "absolute",
-                            width: 0,
-                            height: 0,
-                        }}
-                    />
-                </Portal>
-            )}
-        </>
-    );
-};
-
-Tooltip.propTypes = {
-    children: PropTypes.node.isRequired,
-    label: PropTypes.node.isRequired,
-    ariaLabel: PropTypes.string,
-    DEBUG_STYLE: PropTypes.bool,
-};
-
-Tooltip.defaultProps = {
-    ariaLabel: undefined,
-    DEBUG_STYLE: undefined,
-};
-
-export default Tooltip;

package/components/Tooltip/Tooltip.stories.js

@@ -1,80 +0,0 @@
-import React from "react";
-import Tooltip from "./index";
-
-const offsetDecorator = (storyFn) => (
-    <div style={{ margin: "80px" }}>{storyFn()}</div>
-);
-
-export default {
-    title: "Tooltip",
-    component: Tooltip,
-};
-
-export const ExampleTooltip = () => (
-    <Tooltip label="FOOBAR">
-        <button>
-            <span>Tooltip Trigger</span>
-        </button>
-    </Tooltip>
-);
-
-ExampleTooltip.storyName = "example Tooltip";
-ExampleTooltip.decorators = [offsetDecorator];
-
-export const AriaLabelTooltip = () => (
-    <Tooltip label="FOOBAR" ariaLabel="foobar">
-        <button>
-            <span>Tooltip Trigger</span>
-        </button>
-    </Tooltip>
-);
-
-AriaLabelTooltip.storyName = "using ariaLabel";
-AriaLabelTooltip.decorators = [offsetDecorator];
-
-export const MultipleTooltip = () => (
-    <>
-        <Tooltip label="Tooltip 1">
-            <button>
-                <span>Tooltip 1 Trigger</span>
-            </button>
-        </Tooltip>
-        <Tooltip label="Tooltip 2">
-            <button>
-                <span>Tooltip 2 Trigger</span>
-            </button>
-        </Tooltip>
-        <Tooltip label="Tooltip 3">
-            <button>
-                <span>Tooltip 3 Trigger</span>
-            </button>
-        </Tooltip>
-    </>
-);
-
-MultipleTooltip.storyName = "multiple Tooltips";
-MultipleTooltip.decorators = [offsetDecorator];
-
-export const InputElementTooltip = () => (
-    <form>
-        <label htmlFor="foobar" style={{ marginRight: "5px " }}>
-            Text Input
-        </label>
-        <Tooltip label="example input label tooltip">
-            <input type="text" name="foobar" />
-        </Tooltip>
-    </form>
-);
-
-InputElementTooltip.storyName = "on text input";
-InputElementTooltip.decorators = [offsetDecorator];
-
-export const PositionedBelowTargetTooltip = () => (
-    <Tooltip label="FOOBAR">
-        <button>
-            <span>Tooltip Trigger</span>
-        </button>
-    </Tooltip>
-);
-
-PositionedBelowTargetTooltip.storyName = "positioned below trigger";

package/components/Tooltip/index.js

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

package/components/Tooltip/position.js

@@ -1,76 +0,0 @@
-const OFFSET = 12; // modified from reach-ui/tooltip OFFSET value
-const TRIANGLE_SCALE_X = 6;
-const TRIANGLE_SCALE_Y = 8;
-
-const isDirectionUp = (triggerRect, tooltipRect) => {
-    const collisions = {
-        top: triggerRect.top - tooltipRect.height < 0,
-        bottom:
-            window.innerHeight <
-            triggerRect.bottom + tooltipRect.height + OFFSET,
-    };
-
-    return !collisions.top || collisions.bottom;
-};
-
-// modified from @reach/tooltip default positioning function
-// positions Tooltip relative to trigger
-// https://github.com/reach/reach-ui/blob/master/packages/tooltip/src/index.tsx#L532
-const positionTip = (triggerRect, tooltipRect) => {
-    if (!triggerRect || !tooltipRect) {
-        return {};
-    }
-
-    const triggerCenter = triggerRect.left + triggerRect.width / 2;
-    const left = triggerCenter - tooltipRect.width / 2;
-    const maxLeft = window.innerWidth - tooltipRect.width - 2;
-    const centerLeft =
-        Math.min(Math.max(2, left), maxLeft) + window.pageXOffset;
-
-    const directionUp = isDirectionUp(triggerRect, tooltipRect);
-
-    return {
-        left: `${centerLeft}px`,
-        top: directionUp
-            ? `${
-                  triggerRect.top -
-                  OFFSET -
-                  tooltipRect.height +
-                  window.pageYOffset
-              }px`
-            : `${
-                  triggerRect.top +
-                  OFFSET +
-                  triggerRect.height +
-                  window.pageYOffset
-              }px`,
-    };
-};
-
-export default positionTip;
-
-// position triangle relative to tooltip position
-// TODO: figure out a better way to render these updates from within react
-// rendering. This method causes an additional repaint after the Tooltip
-// has been rendered. may require changes to @reach/tooltip.
-export const positionTriangle = (triggerRect, tooltipRect) => {
-    const directionUp = isDirectionUp(triggerRect, tooltipRect);
-    const triangleTop = directionUp
-        ? triggerRect.top + window.pageYOffset - OFFSET
-        : triggerRect.bottom + window.pageYOffset + OFFSET - TRIANGLE_SCALE_Y;
-
-    const triangleLeft =
-        triggerRect.left - TRIANGLE_SCALE_X + triggerRect.width / 2;
-
-    const triangleBorder = directionUp
-        ? `border-top: ${TRIANGLE_SCALE_Y}px solid;`
-        : `border-bottom: ${TRIANGLE_SCALE_Y}px solid;`;
-
-    return `
-        border-left: ${TRIANGLE_SCALE_X}px solid transparent;
-        border-right: ${TRIANGLE_SCALE_X}px solid transparent;
-        left: ${triangleLeft}px;
-        top: ${triangleTop}px;
-        ${triangleBorder}
-    `;
-};

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