@madie/madie-design-system 1.2.62 → 2.0.1

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

@@ -1,8 +0,0 @@
-import React, { Component } from "react";
-import DSSpinner from "@cmsgov/design-system/dist/components/Spinner/Spinner";
-
-export default class SpinnerUI extends Component {
-    render() {
-        return <DSSpinner />;
-    }
-}