@madie/madie-design-system 1.0.2 → 1.0.3

package/components/SideNav/Links/NavLinkInline.jsx

@@ -1,107 +1,109 @@
-import React, { useState } from 'react';
-import { handleNavigation } from '../helpers';
-import AnimationGroup from '../AnimationGroup/AnimationGroup';
-import PropTypes from 'prop-types';
+import React, { useState } from "react";
+import { handleNavigation } from "../helpers";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+import PropTypes from "prop-types";
 
 const NavLinkInline = ({
-  url,
-  urlExpressionToMatch,
-  className,
-  icon,
-  label,
-  isActive,
-  showLabel,
-  linkCallback,
-  disabled,
-  useTooltips,
-  target,
+    url,
+    urlExpressionToMatch,
+    className,
+    icon,
+    label,
+    isActive,
+    showLabel,
+    linkCallback,
+    disabled,
+    useTooltips,
+    target,
 }) => {
-  const localUrl = urlExpressionToMatch || url;
-  const urlRegExp = new RegExp(`${localUrl}/?$`);
-  const path = window.location.href && window.location.href.split('?')[0];
-  const currentPage = path && path.match(urlRegExp);
-  const svgRef = React.useRef();
-  const [showTooltip, setShowTooltip] = useState(false);
-  const tooltipRef = React.useRef();
+    const localUrl = urlExpressionToMatch || url;
+    const urlRegExp = new RegExp(`${localUrl}/?$`);
+    const path = window.location.href && window.location.href.split("?")[0];
+    const currentPage = path && path.match(urlRegExp);
+    const svgRef = React.useRef();
+    const [showTooltip, setShowTooltip] = useState(false);
+    const tooltipRef = React.useRef();
 
-  React.useEffect(() => {
-    if (!showLabel && useTooltips && svgRef.current) {
-      const existingMouseenter = svgRef.current.onmouseover;
-      const existingMouseout = svgRef.current.onmouseout;
+    React.useEffect(() => {
+        if (!showLabel && useTooltips && svgRef.current) {
+            const existingMouseenter = svgRef.current.onmouseover;
+            const existingMouseout = svgRef.current.onmouseout;
 
-      svgRef.current.onmouseover = () => {
-        if (tooltipRef.current && useTooltips) {
-          const svgOffset = svgRef.current.getBoundingClientRect();
-          tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
-          tooltipRef.current.style.display = 'block';
-        }
-        if (typeof existingMouseenter === 'function') {
-          existingMouseenter();
-        }
-      };
+            svgRef.current.onmouseover = () => {
+                if (tooltipRef.current && useTooltips) {
+                    const svgOffset = svgRef.current.getBoundingClientRect();
+                    tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
+                    tooltipRef.current.style.display = "block";
+                }
+                if (typeof existingMouseenter === "function") {
+                    existingMouseenter();
+                }
+            };
 
-      svgRef.current.onmouseout = () => {
-        if (tooltipRef.current) {
-          tooltipRef.current.style.display = 'none';
+            svgRef.current.onmouseout = () => {
+                if (tooltipRef.current) {
+                    tooltipRef.current.style.display = "none";
+                }
+                if (typeof existingMouseout === "function") {
+                    existingMouseout();
+                }
+            };
+            setShowTooltip(true);
         }
-        if (typeof existingMouseout === 'function') {
-          existingMouseout();
+        if (showLabel) {
+            setShowTooltip(false);
         }
-      };
-      setShowTooltip(true);
-    }
-    if (showLabel) {
-      setShowTooltip(false);
-    }
-  }, [svgRef.current, showLabel]);
+    }, [svgRef.current, showLabel]);
 
-  return (
-    <React.Fragment>
-      <a
-        href={disabled ? undefined : url}
-        onClick={(e) => handleNavigation(e, linkCallback, label)}
-        className={`${className} ${currentPage || isActive ? 'active' : ''} ${
-          disabled ? 'disabled' : ''
-        }`}
-        data-track-category="SidebarNav"
-        data-track-action={`GoTo${label ? label.split(' ').join('') : ''}`}
-        data-track-label={label}
-        aria-label={label}
-        target={`${target ? target : '_self'}`}
-      >
-        <svg
-          className={`left-icon ${disabled ? 'disabled' : ''}`}
-          aria-hidden="true"
-          focusable="false"
-          ref={svgRef}
-        >
-          {icon}
-        </svg>
-        <AnimationGroup display={showLabel}>
-          <span tabIndex="-1">{label}</span>
-        </AnimationGroup>
-      </a>
-      {showTooltip && (
-        <div ref={tooltipRef} className="sidebar-tooltip">
-          <span className="sidebar-tooltip-text">{label}</span>
-        </div>
-      )}
-    </React.Fragment>
-  );
+    return (
+        <React.Fragment>
+            <a
+                href={disabled ? undefined : url}
+                onClick={(e) => handleNavigation(e, linkCallback, label)}
+                className={`${className} ${
+                    currentPage || isActive ? "active" : ""
+                } ${disabled ? "disabled" : ""}`}
+                data-track-category="SidebarNav"
+                data-track-action={`GoTo${
+                    label ? label.split(" ").join("") : ""
+                }`}
+                data-track-label={label}
+                aria-label={label}
+                target={`${target ? target : "_self"}`}
+            >
+                <svg
+                    className={`left-icon ${disabled ? "disabled" : ""}`}
+                    aria-hidden="true"
+                    focusable="false"
+                    ref={svgRef}
+                >
+                    {icon}
+                </svg>
+                <AnimationGroup display={showLabel}>
+                    <span tabIndex="-1">{label}</span>
+                </AnimationGroup>
+            </a>
+            {showTooltip && (
+                <div ref={tooltipRef} className="sidebar-tooltip">
+                    <span className="sidebar-tooltip-text">{label}</span>
+                </div>
+            )}
+        </React.Fragment>
+    );
 };
 
 NavLinkInline.propTypes = {
-  urlExpressionToMatch: PropTypes.string,
-  url: PropTypes.string,
-  className: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.string,
-  isActive: PropTypes.bool,
-  showLabel: PropTypes.bool,
-  linkCallback: PropTypes.func,
-  disabled: PropTypes.bool,
-  useTooltips: PropTypes.bool,
-  target: PropTypes.string,
+    urlExpressionToMatch: PropTypes.string,
+    url: PropTypes.string,
+    className: PropTypes.string,
+    icon: PropTypes.element,
+    label: PropTypes.string,
+    isActive: PropTypes.bool,
+    showLabel: PropTypes.bool,
+    linkCallback: PropTypes.func,
+    disabled: PropTypes.bool,
+    useTooltips: PropTypes.bool,
+    target: PropTypes.string,
 };
 
 export default NavLinkInline;

package/components/SideNav/Links/NavLinkToggle.jsx

@@ -1,34 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NavCollapse, NavExpand } from '../../../lib/SvgComponents';
+import React from "react";
+import PropTypes from "prop-types";
+import { NavCollapse, NavExpand } from "../../../lib/SvgComponents";
 
 const NavLinkToggle = ({ isAltStyle, collapseRef, isExpanded, onClick }) => {
-  const expandedStyle = isExpanded ? 'link-collapse' : 'link-expand';
-  const altStyle = isAltStyle ? 'alt-style' : '';
+    const expandedStyle = isExpanded ? "link-collapse" : "link-expand";
+    const altStyle = isAltStyle ? "alt-style" : "";
 
-  return (
-    <button
-      type="button"
-      aria-label={`Click to ${
-        isExpanded ? 'collapse' : 'expand'
-      } the sidebar menu`}
-      ref={collapseRef}
-      className={`${expandedStyle} ${altStyle}`}
-      onClick={onClick}
-    >
-      <svg className="left-icon" aria-hidden="true" focusable="false">
-        {isExpanded ? <NavCollapse /> : <NavExpand />}
-      </svg>
-      <span>{isExpanded ? 'Collapse' : 'Expand'}</span>
-    </button>
-  );
+    return (
+        <button
+            type="button"
+            aria-label={`Click to ${
+                isExpanded ? "collapse" : "expand"
+            } the sidebar menu`}
+            ref={collapseRef}
+            className={`${expandedStyle} ${altStyle}`}
+            onClick={onClick}
+        >
+            <svg className="left-icon" aria-hidden="true" focusable="false">
+                {isExpanded ? <NavCollapse /> : <NavExpand />}
+            </svg>
+            <span>{isExpanded ? "Collapse" : "Expand"}</span>
+        </button>
+    );
 };
 
 NavLinkToggle.propTypes = {
-  isAltStyle: PropTypes.bool,
-  collapseRef: PropTypes.object,
-  isExpanded: PropTypes.bool,
-  onClick: PropTypes.func,
+    isAltStyle: PropTypes.bool,
+    collapseRef: PropTypes.object,
+    isExpanded: PropTypes.bool,
+    onClick: PropTypes.func,
 };
 
 export default NavLinkToggle;

package/components/SideNav/Links/index.js

@@ -1,13 +1,13 @@
-import NavLinkContainer from './NavLinkContainer';
-import NavLinkDrawer from './NavLinkDrawer';
-import NavLinkInline from './NavLinkInline';
-import NavLinkToggle from './NavLinkToggle';
-import NavItemInline from './NavItemInline';
+import NavLinkContainer from "./NavLinkContainer";
+import NavLinkDrawer from "./NavLinkDrawer";
+import NavLinkInline from "./NavLinkInline";
+import NavLinkToggle from "./NavLinkToggle";
+import NavItemInline from "./NavItemInline";
 
 export {
-  NavLinkContainer,
-  NavLinkDrawer,
-  NavLinkInline,
-  NavLinkToggle,
-  NavItemInline,
+    NavLinkContainer,
+    NavLinkDrawer,
+    NavLinkInline,
+    NavLinkToggle,
+    NavItemInline,
 };