@madie/madie-design-system 1.0.2 → 1.0.3

package/components/TextInput/index.js

@@ -1,137 +1,137 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+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
+    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 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(' ');
+    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>
-  );
+    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'])
+    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,
+    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,13 +1,13 @@
-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';
+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';
+const TEXT_COLOR = "#FFF";
+const BACKGROUND_COLOR = "#333";
 
 /**
  * Generic styled tooltip component.
@@ -17,20 +17,20 @@ const BACKGROUND_COLOR = '#333';
  * 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();
+    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 = `
+    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;
@@ -39,50 +39,50 @@ const Tooltip = ({ children, label, ariaLabel, DEBUG_STYLE }) => {
                   border-bottom-color: ${BACKGROUND_COLOR};
                   z-index: 1;
                 `;
-      triangleRef.current.style.cssText = cssText;
-    }
-  });
+            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>
-      )}
-    </>
-  );
+    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,
+    children: PropTypes.node.isRequired,
+    label: PropTypes.node.isRequired,
+    ariaLabel: PropTypes.string,
+    DEBUG_STYLE: PropTypes.bool,
 };
 
 Tooltip.defaultProps = {
-  ariaLabel: undefined,
-  DEBUG_STYLE: undefined,
+    ariaLabel: undefined,
+    DEBUG_STYLE: undefined,
 };
 
 export default Tooltip;

package/components/Tooltip/Tooltip.stories.js

@@ -1,80 +1,80 @@
-import React from 'react';
-import Tooltip from './index';
+import React from "react";
+import Tooltip from "./index";
 
 const offsetDecorator = (storyFn) => (
-  <div style={{ margin: '80px' }}>{storyFn()}</div>
+    <div style={{ margin: "80px" }}>{storyFn()}</div>
 );
 
 export default {
-  title: 'Tooltip',
-  component: Tooltip,
+    title: "Tooltip",
+    component: Tooltip,
 };
 
 export const ExampleTooltip = () => (
-  <Tooltip label="FOOBAR">
-    <button>
-      <span>Tooltip Trigger</span>
-    </button>
-  </Tooltip>
+    <Tooltip label="FOOBAR">
+        <button>
+            <span>Tooltip Trigger</span>
+        </button>
+    </Tooltip>
 );
 
-ExampleTooltip.storyName = 'example Tooltip';
+ExampleTooltip.storyName = "example Tooltip";
 ExampleTooltip.decorators = [offsetDecorator];
 
 export const AriaLabelTooltip = () => (
-  <Tooltip label="FOOBAR" ariaLabel="foobar">
-    <button>
-      <span>Tooltip Trigger</span>
-    </button>
-  </Tooltip>
+    <Tooltip label="FOOBAR" ariaLabel="foobar">
+        <button>
+            <span>Tooltip Trigger</span>
+        </button>
+    </Tooltip>
 );
 
-AriaLabelTooltip.storyName = 'using ariaLabel';
+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>
-  </>
+    <>
+        <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.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>
+    <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.storyName = "on text input";
 InputElementTooltip.decorators = [offsetDecorator];
 
 export const PositionedBelowTargetTooltip = () => (
-  <Tooltip label="FOOBAR">
-    <button>
-      <span>Tooltip Trigger</span>
-    </button>
-  </Tooltip>
+    <Tooltip label="FOOBAR">
+        <button>
+            <span>Tooltip Trigger</span>
+        </button>
+    </Tooltip>
 );
 
-PositionedBelowTargetTooltip.storyName = 'positioned below trigger';
+PositionedBelowTargetTooltip.storyName = "positioned below trigger";

package/components/Tooltip/index.js

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

package/components/Tooltip/position.js

@@ -3,40 +3,48 @@ 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,
-  };
+    const collisions = {
+        top: triggerRect.top - tooltipRect.height < 0,
+        bottom:
+            window.innerHeight <
+            triggerRect.bottom + tooltipRect.height + OFFSET,
+    };
 
-  return !collisions.top || collisions.bottom;
+    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 {};
-  }
+    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 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);
+    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`,
-  };
+    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;
@@ -46,19 +54,19 @@ export default positionTip;
 // 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 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 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;`;
+    const triangleBorder = directionUp
+        ? `border-top: ${TRIANGLE_SCALE_Y}px solid;`
+        : `border-bottom: ${TRIANGLE_SCALE_Y}px solid;`;
 
-  return `
+    return `
         border-left: ${TRIANGLE_SCALE_X}px solid transparent;
         border-right: ${TRIANGLE_SCALE_X}px solid transparent;
         left: ${triangleLeft}px;

package/components/UnwrappedSpinner/index.js

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