qpp-style 2.0.2-sm.1 → 2.0.2-sm.3

package/components/Details/Details.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Details from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Details',
+  component: Details,
+  decorators: [withKnobs],
+};
+
+export const DefaultDetails = () => <Details title="default" />;
+
+export const HeaderDetails = () => <Details variant="header" title="Header" />;
+
+export const TextButtonDetails = () => (
+  <Details variant="text-button" title="Text Button" />
+);
+
+export const HeaderListDetails = () => (
+  <ul className="qpp-c-details-list">
+    <li>
+      <Details title="Header 1" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+        <hr />
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+      </Details>
+    </li>
+    <li>
+      <Details title="Header 2" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+        <ul>
+          <li>foo</li>
+          <li>bar</li>
+        </ul>
+      </Details>
+    </li>
+    <li>
+      <Details title="Header 3" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+      </Details>
+    </li>
+  </ul>
+);

package/components/Details/DetailsIcons.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Add = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-closed qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>{' '}
+    {iconText}
+  </>
+);
+
+Add.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Add.defaultProps = {
+  iconText: null,
+};
+
+export const Remove = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-open qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13H5v-2h14v2z" />
+    </svg>
+    {iconText}
+  </>
+);
+
+Remove.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Remove.defaultProps = {
+  iconText: null,
+};

package/components/Details/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Add from '@material-design-icons/svg/filled/add.svg';
-import Remove from '@material-design-icons/svg/filled/remove.svg';
+import { Add, Remove } from './DetailsIcons';
 
 const Details = ({ children, title, variant, className, ...rest }) => {
   if (variant === 'header') {
@@ -10,12 +9,10 @@ const Details = ({ children, title, variant, className, ...rest }) => {
         <summary>
           {title}
           <span className="qpp-c-details--icon-closed" aria-hidden="true">
-            <Add className="qpp-c-details--icon-closed qpp-icon-mat qpp-icon-inline--md" />
-            <span>View</span>
+            <Add iconText="View" />
           </span>
           <span className="qpp-c-details--icon-open" aria-hidden="true">
-            <Remove className="qpp-c-details--icon-open qpp-icon-mat qpp-icon-inline--md" />
-            <span>Hide</span>
+            <Remove iconText="Hide" />
           </span>
         </summary>
         {children}

package/components/SideNav/Content/index.js

@@ -1,4 +1,3 @@
 import LevelOneContent from './LevelOneContent';
-import LevelTwoContent from './LevelTwoContent';
 
-export { LevelOneContent, LevelTwoContent };
+export { LevelOneContent };

package/components/SideNav/Links/NavLinkInline.jsx

@@ -14,7 +14,6 @@ const NavLinkInline = ({
   showLabel,
   linkCallback,
   disabled,
-  useTooltips,
   target,
 }) => {
   const localUrl = urlExpressionToMatch || url;
@@ -26,12 +25,12 @@ const NavLinkInline = ({
   const tooltipRef = React.useRef();
 
   React.useEffect(() => {
-    if (!showLabel && useTooltips && svgRef.current) {
+    if (!showLabel && svgRef.current) {
       const existingMouseenter = svgRef.current.onmouseover;
       const existingMouseout = svgRef.current.onmouseout;
 
       svgRef.current.onmouseover = () => {
-        if (tooltipRef.current && useTooltips) {
+        if (tooltipRef.current) {
           const svgOffset = svgRef.current.getBoundingClientRect();
           tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
           tooltipRef.current.style.display = 'block';
@@ -105,7 +104,6 @@ NavLinkInline.propTypes = {
   showLabel: PropTypes.bool,
   linkCallback: PropTypes.func,
   disabled: PropTypes.bool,
-  useTooltips: PropTypes.bool,
   target: PropTypes.string,
 };
 

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { withGetConfig } from '../../hooks/useGetConfig';
-import { LevelOneContent, LevelTwoContent } from '../Content';
+import { LevelOneContent } from '../Content';
 import {
   NavLinkContainer,
   NavLinkInline,
@@ -18,21 +18,16 @@ import CmsSwitchLink from '../Links/CmsSwitchLink';
 import defaultContent from './default-content';
 
 const SideNavUI = ({
-  chartData,
   config,
-  currentLevel,
   isAltStyle,
   isExpanded,
   items,
   onCollapsed,
   onExpanded,
   performanceYear,
-  showReportingLinks,
   result,
 }) => {
   const [isExpandedState, setIsExpandedState] = useState(isExpanded);
-  const [itemsState, setItemsState] = useState(items);
-  const [currentLevelState, setCurrentLevelState] = useState(currentLevel);
 
   const collapseRef = useRef(null);
 
@@ -54,30 +49,8 @@ const SideNavUI = ({
     isExpandedState ? collapse() : expand();
   };
 
-  const getLevelContent = () => {
-    return (
-      {
-        2: (
-          <LevelTwoContent
-            showReportingLinks={showReportingLinks}
-            isExpanded={isExpandedState}
-            chartData={chartData}
-            config={config}
-          />
-        ),
-      }[currentLevelState] || (
-        <LevelOneContent
-          levelOneContent={result?.content}
-          isExpanded={isExpandedState}
-          config={config}
-        />
-      )
-    );
-  };
-
   const getDynamicContent = (contentItems, className, recursionId) => {
-    const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
-      config;
+    const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
     let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
     const containerRecursionId = recursionId || 0;
 
@@ -117,7 +90,6 @@ const SideNavUI = ({
                 label={item.label}
                 linkCallback={linkCallback}
                 showLabel={true}
-                useTooltips={useTooltips}
               />
             </AnimationGroup>
           ),
@@ -130,7 +102,6 @@ const SideNavUI = ({
                 label={item.label}
                 linkCallback={linkCallback}
                 showLabel={true}
-                useTooltips={useTooltips}
               />
             </AnimationGroup>
           ),
@@ -220,7 +191,6 @@ const SideNavUI = ({
             linkCallback={linkCallback}
             showLabel={isExpandedState}
             disabled={item.disabled}
-            useTooltips={useTooltips}
             target={item.target}
           />
         )
@@ -244,24 +214,18 @@ const SideNavUI = ({
     }
   };
 
-  const content = itemsState
-    ? getDynamicContent(
-        itemsState,
-        'sidebar-content' + (isAltStyle ? ' alt-style' : '')
-      )
-    : getLevelContent();
-
-  useEffect(() => {
-    setIsExpandedState(isExpanded);
-  }, [isExpanded]);
-
-  useEffect(() => {
-    setCurrentLevelState(currentLevel);
-  }, [currentLevel]);
-
-  useEffect(() => {
-    setItemsState(items);
-  }, [items]);
+  const content = !items?.length ? (
+    <LevelOneContent
+      levelOneContent={result?.content}
+      isExpanded={isExpandedState}
+      config={config}
+    />
+  ) : (
+    getDynamicContent(
+      items,
+      'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+    )
+  );
 
   return (
     <aside