@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Header/ImpersonatorBanner.jsx

@@ -1,57 +1,60 @@
-import React from 'react';
-import cookie from 'cookie';
-import axios from 'axios';
-import CloseIcon from '@mui/icons-material/Close';
+import React from "react";
+import cookie from "cookie";
+import axios from "axios";
+import CloseIcon from "@mui/icons-material/Close";
 
-import { TextButton } from '../Button';
-import { deleteImpersonatedUser, revertQppHasAuthsCookie } from '../../session/logout';
+import { TextButton } from "../Button";
+import {
+    deleteImpersonatedUser,
+    revertQppHasAuthsCookie,
+} from "../../session/logout";
 
 const ImpersonatorBanner = () => {
-  const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
-    cookie.parse(document.cookie);
+    const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
+        cookie.parse(document.cookie);
 
-  const className = [
-    'qpp-u-display--flex',
-    'qpp-u-justify-content--between',
-    'qpp-u-fill--gold-20',
-    'qpp-u-padding-x--40',
-    'qpp-u-padding-y--24',
-    'qpp-u-font-size--14',
-    'qpp-u-color--gray-80',
-  ].join(' ');
+    const className = [
+        "qpp-u-display--flex",
+        "qpp-u-justify-content--between",
+        "qpp-u-fill--gold-20",
+        "qpp-u-padding-x--40",
+        "qpp-u-padding-y--24",
+        "qpp-u-font-size--14",
+        "qpp-u-color--gray-80",
+    ].join(" ");
 
-  const onClick = () => {
-    const fn = () => {
-      deleteImpersonatedUser({ qpp_impersonated_user: user });
-      // Set qpp_has_authorizations cookie back to impersonator's value
-      revertQppHasAuthsCookie();
-      window.location.reload();
+    const onClick = () => {
+        const fn = () => {
+            deleteImpersonatedUser({ qpp_impersonated_user: user });
+            // Set qpp_has_authorizations cookie back to impersonator's value
+            revertQppHasAuthsCookie();
+            window.location.reload();
+        };
+        return axios
+            .delete("/api/auth/users/impersonate", {
+                headers: {
+                    Accept: "application/vnd.qpp.cms.gov.v1+json",
+                    Authorization: `Bearer ${token}`,
+                },
+            })
+            .then(fn, fn);
     };
-    return axios
-      .delete('/api/auth/users/impersonate', {
-        headers: {
-          Accept: 'application/vnd.qpp.cms.gov.v1+json',
-          Authorization: `Bearer ${token}`,
-        },
-      })
-      .then(fn, fn);
-  };
 
-  return (
-    token &&
-    user && (
-      <div className={className}>
-        <div>
-          VIEW ONLY | You are currently impersonating HARP user:{' '}
-          <strong>{user}</strong>
-        </div>
-        <TextButton onClick={onClick} className="qpp-u-color--gray-80">
-          Exit Impersonation Mode
-          <CloseIcon />
-        </TextButton>
-      </div>
-    )
-  );
+    return (
+        token &&
+        user && (
+            <div className={className}>
+                <div>
+                    VIEW ONLY | You are currently impersonating HARP user:{" "}
+                    <strong>{user}</strong>
+                </div>
+                <TextButton onClick={onClick} className="qpp-u-color--gray-80">
+                    Exit Impersonation Mode
+                    <CloseIcon />
+                </TextButton>
+            </div>
+        )
+    );
 };
 
 export default ImpersonatorBanner;

package/components/Header/NavigationButtonIcon.jsx

@@ -1,27 +1,27 @@
-import React from 'react';
+import React from "react";
 
 const NavigationButtonIcon = () => (
-  <svg
-    className="btn-navigation-icon"
-    width="15px"
-    height="24px"
-    viewBox="0 0 15 24"
-  >
-    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      <g
-        className="chevron-icon"
-        transform="translate(-20.000000, -114.000000)"
-        fillRule="nonzero"
-      >
-        <g
-          className="chevron-right"
-          transform="translate(20.000000, 114.000000)"
-        >
-          <path d="M14.6682692,12.2740385 L3.96634615,22.9759615 C3.78365385,23.1586538 3.56730769,23.25 3.31730769,23.25 C3.06730769,23.25 2.85096154,23.1586538 2.66826923,22.9759615 L0.274038462,20.5817308 C0.0913461538,20.3990385 0,20.1826923 0,19.9326923 C0,19.6826923 0.0913461538,19.4663462 0.274038462,19.2836538 L7.93269231,11.625 L0.274038462,3.96634615 C0.0913461538,3.78365385 0,3.56730769 0,3.31730769 C0,3.06730769 0.0913461538,2.85096154 0.274038462,2.66826923 L2.66826923,0.274038462 C2.85096154,0.0913461538 3.06730769,0 3.31730769,0 C3.56730769,0 3.78365385,0.0913461538 3.96634615,0.274038462 L14.6682692,10.9759615 C14.8509615,11.1586538 14.9423077,11.375 14.9423077,11.625 C14.9423077,11.875 14.8509615,12.0913462 14.6682692,12.2740385 Z"></path>
+    <svg
+        className="btn-navigation-icon"
+        width="15px"
+        height="24px"
+        viewBox="0 0 15 24"
+    >
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g
+                className="chevron-icon"
+                transform="translate(-20.000000, -114.000000)"
+                fillRule="nonzero"
+            >
+                <g
+                    className="chevron-right"
+                    transform="translate(20.000000, 114.000000)"
+                >
+                    <path d="M14.6682692,12.2740385 L3.96634615,22.9759615 C3.78365385,23.1586538 3.56730769,23.25 3.31730769,23.25 C3.06730769,23.25 2.85096154,23.1586538 2.66826923,22.9759615 L0.274038462,20.5817308 C0.0913461538,20.3990385 0,20.1826923 0,19.9326923 C0,19.6826923 0.0913461538,19.4663462 0.274038462,19.2836538 L7.93269231,11.625 L0.274038462,3.96634615 C0.0913461538,3.78365385 0,3.56730769 0,3.31730769 C0,3.06730769 0.0913461538,2.85096154 0.274038462,2.66826923 L2.66826923,0.274038462 C2.85096154,0.0913461538 3.06730769,0 3.31730769,0 C3.56730769,0 3.78365385,0.0913461538 3.96634615,0.274038462 L14.6682692,10.9759615 C14.8509615,11.1586538 14.9423077,11.375 14.9423077,11.625 C14.9423077,11.875 14.8509615,12.0913462 14.6682692,12.2740385 Z"></path>
+                </g>
+            </g>
         </g>
-      </g>
-    </g>
-  </svg>
+    </svg>
 );
 
 export default NavigationButtonIcon;

package/components/Header/header.js

@@ -1,40 +1,42 @@
-import React from 'react';
-import { render } from 'react-dom';
-import HeaderUI from './HeaderUI.jsx';
+import React from "react";
+import { render } from "react-dom";
+import HeaderUI from "./HeaderUI.jsx";
 
 /**
  * Renders the QPP Header content.
  */
 export default class Header {
-  /**
-   * @param {Object} options - An object containing content and config data
-   * @param {Boolean} options.isLoginEnabled
-   * @param {String} options.skipToContentId - The HTML ID of main content
-   * @param {Boolean} options.includeSkipToSidebar
-   * @param {Boolean} options.showCancelButton
-   * @param {Boolean} options.showCovidLink
-   * @param {Boolean} options.isIESupportPage
-   * @param {HTMLElement} options.rootElement - Elem inside which to render
-   */
-  constructor(options) {
-    render(
-      <HeaderUI
-        isLoginEnabled={options.isLoginEnabled}
-        skipToContentId={options.skipToContentId}
-        includeSkipToSidebar={options.includeSkipToSidebar}
-        showCancelButton={options.showCancelButton}
-        performanceYear={options.performanceYear}
-        feedbackPerformanceYear={options.feedbackPerformanceYear}
-        fbpPerformanceYear={options.fbpPerformanceYear}
-        showPhysicianCompareLink={options.showPhysicianCompareLink}
-        showFacilityBasedPreviewLink={options.showFacilityBasedPreviewLink}
-        showCovidLink={options.showCovidLink}
-        showMaqi={options.showMaqi}
-        isDevPre={options.isDevPre}
-        content={options.content}
-        isIESupportPage={options.isIESupportPage}
-      />,
-      options.rootElement
-    );
-  }
+    /**
+     * @param {Object} options - An object containing content and config data
+     * @param {Boolean} options.isLoginEnabled
+     * @param {String} options.skipToContentId - The HTML ID of main content
+     * @param {Boolean} options.includeSkipToSidebar
+     * @param {Boolean} options.showCancelButton
+     * @param {Boolean} options.showCovidLink
+     * @param {Boolean} options.isIESupportPage
+     * @param {HTMLElement} options.rootElement - Elem inside which to render
+     */
+    constructor(options) {
+        render(
+            <HeaderUI
+                isLoginEnabled={options.isLoginEnabled}
+                skipToContentId={options.skipToContentId}
+                includeSkipToSidebar={options.includeSkipToSidebar}
+                showCancelButton={options.showCancelButton}
+                performanceYear={options.performanceYear}
+                feedbackPerformanceYear={options.feedbackPerformanceYear}
+                fbpPerformanceYear={options.fbpPerformanceYear}
+                showPhysicianCompareLink={options.showPhysicianCompareLink}
+                showFacilityBasedPreviewLink={
+                    options.showFacilityBasedPreviewLink
+                }
+                showCovidLink={options.showCovidLink}
+                showMaqi={options.showMaqi}
+                isDevPre={options.isDevPre}
+                content={options.content}
+                isIESupportPage={options.isIESupportPage}
+            />,
+            options.rootElement
+        );
+    }
 }

package/components/Header/hooks.js

@@ -1,52 +1,59 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext, useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
 
 export function useWindowWidth() {
-  const [windowSize, setWindowSize] = useState(undefined);
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize(window.innerWidth);
-    }
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return windowSize;
+    const [windowSize, setWindowSize] = useState(undefined);
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize(window.innerWidth);
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
 export const HeaderStateContext = createContext(null);
 
 export const HeaderStateProvider = ({ children, RouterLink }) => {
-  const [currentOpenMenu, setCurrentOpenMenu] = useState('');
+    const [currentOpenMenu, setCurrentOpenMenu] = useState("");
 
-  const handleToggleMenu = (name) => {
-    if (currentOpenMenu === name) {
-      return setCurrentOpenMenu('');
-    }
-    return setCurrentOpenMenu(name);
-  };
+    const handleToggleMenu = (name) => {
+        if (currentOpenMenu === name) {
+            return setCurrentOpenMenu("");
+        }
+        return setCurrentOpenMenu(name);
+    };
 
-  const closeMenus = () => setCurrentOpenMenu('');
-  return (
-    <HeaderStateContext.Provider
-      value={{ currentOpenMenu, handleToggleMenu, closeMenus, RouterLink }}
-    >
-      {children}
-    </HeaderStateContext.Provider>
-  );
+    const closeMenus = () => setCurrentOpenMenu("");
+    return (
+        <HeaderStateContext.Provider
+            value={{
+                currentOpenMenu,
+                handleToggleMenu,
+                closeMenus,
+                RouterLink,
+            }}
+        >
+            {children}
+        </HeaderStateContext.Provider>
+    );
 };
 HeaderStateProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  RouterLink: PropTypes.func,
+    children: PropTypes.node.isRequired,
+    RouterLink: PropTypes.func,
 };
 HeaderStateProvider.defaultProps = {
-  RouterLink: null,
+    RouterLink: null,
 };
 
 export const useHeaderState = () => {
-  const context = useContext(HeaderStateContext);
-  if (context === undefined) {
-    throw new Error('useHeaderState must be used within a HeaderStateProvider');
-  }
-  return context;
+    const context = useContext(HeaderStateContext);
+    if (context === undefined) {
+        throw new Error(
+            "useHeaderState must be used within a HeaderStateProvider"
+        );
+    }
+    return context;
 };

package/components/Header/utag-helpers.js

@@ -1,9 +1,9 @@
 export const setUtagLink = (eventCategory, eventAction, eventLabel) =>
-  window?.utag?.link({
-    ga_event_category: eventCategory,
-    ga_event_action: eventAction,
-    ga_event_label: eventLabel,
-    page_title: `${window.document.title}`,
-    page_url: `${window.location.pathname}`,
-    event: 'trackEvent',
-  });
+    window?.utag?.link({
+        ga_event_category: eventCategory,
+        ga_event_action: eventAction,
+        ga_event_label: eventLabel,
+        page_title: `${window.document.title}`,
+        page_url: `${window.location.pathname}`,
+        event: "trackEvent",
+    });

package/components/Infotip/Infotip.jsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip';
-import InfotipIcon from './InfotipIcon';
+import React from "react";
+import PropTypes from "prop-types";
+import Tooltip from "../Tooltip";
+import InfotipIcon from "./InfotipIcon";
 
-const BUTTON_SIZE = '16px';
+const BUTTON_SIZE = "16px";
 
 const buttonStyle = {
-  background: 'transparent',
-  border: 0,
-  padding: 0,
-  width: BUTTON_SIZE,
-  height: BUTTON_SIZE,
-  WebkitTouchCallout: 'none',
-  WebkitUserSelect: 'none',
-  userSelect: 'none',
+    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
@@ -23,53 +23,53 @@ const buttonStyle = {
 // 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();
-    }
-  },
+    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>
+    <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,
+    label: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string,
+    lightIcon: PropTypes.bool,
+    DEBUG_STYLE: PropTypes.bool,
 };
 
 Infotip.defaultProps = {
-  ariaLabel: undefined,
-  lightIcon: false,
-  DEBUG_STYLE: undefined,
+    ariaLabel: undefined,
+    lightIcon: false,
+    DEBUG_STYLE: undefined,
 };
 
 export default Infotip;

package/components/Infotip/Infotip.stories.js

@@ -1,50 +1,52 @@
-import React from 'react';
-import Infotip from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+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>
-    ),
-  ],
+    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)} />
+    <Infotip label="Tooltip Content!" lightIcon={boolean("lightIcon", false)} />
 );
 
-ExampleInfoTip.storyName = 'qpp themed Infotip';
+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
+    <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';
+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>
+    <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';
+LongContentInfotip.storyName = "long content";
 
 export const LightIconInfotip = () => (
-  <div style={{ backgroundColor: '#04838A', padding: '20px', width: '16px' }}>
-    <Infotip lightIcon label="Light Icon Infotip" />
-  </div>
+    <div style={{ backgroundColor: "#04838A", padding: "20px", width: "16px" }}>
+        <Infotip lightIcon label="Light Icon Infotip" />
+    </div>
 );
 
-LightIconInfotip.storyName = 'alternate light icon';
+LightIconInfotip.storyName = "alternate light icon";

package/components/Infotip/InfotipIcon.jsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+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>
+    <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,
+    lightIcon: PropTypes.bool,
 };
 
 InfotipIcon.defaultProps = {
-  lightIcon: false,
+    lightIcon: false,
 };

package/components/Infotip/index.js

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