qpp-style 9.24.3 → 9.25.0

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Add, Remove } from './DetailsIcons';
+
+const Details = ({ children, title, variant, className, ...rest }) => {
+  if (variant === 'header') {
+    return (
+      <details className="qpp-c-details qpp-c-details--header">
+        <summary>
+          {title}
+          <span className="qpp-c-details--icon-closed" aria-hidden="true">
+            <Add iconText="View" />
+          </span>
+          <span className="qpp-c-details--icon-open" aria-hidden="true">
+            <Remove iconText="Hide" />
+          </span>
+        </summary>
+        {children}
+      </details>
+    );
+  }
+
+  return (
+    <details className={`qpp-c-details ${className}`} {...rest}>
+      <summary
+        className={
+          variant === 'text-button' ? 'qpp-c-button qpp-c-button--text' : ''
+        }
+      >
+        <Add />
+        <Remove />
+        {title}
+      </summary>
+      {children}
+    </details>
+  );
+};
+
+Details.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.node,
+  variant: PropTypes.oneOf(['header', 'text-button']),
+  className: PropTypes.string,
+};
+
+Details.defaultProps = {
+  children: false,
+  title: null,
+  variant: null,
+  className: '',
+};
+
+export default Details;

package/components/Header/HeaderContainer.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import HeaderLogo from './HeaderLogo';
 import NotificationBanner from '../NotificationBanner';
 import GovBanner from '../GovBanner';
-
+import { useHeaderState } from './hooks';
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
  * @param {Object} e - The native JS event
@@ -21,32 +21,41 @@ const HeaderContainer = ({
   showCancelButton,
   skipToContentId,
   isIESupportPage,
-}) => (
-  <>
-    <a
-      className="skip"
-      onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
-      href={`#${skipToContentId || 'mainContent'}`}
-    >
-      Skip to content
-    </a>
-    {includeSkipToSidebar && (
+}) => {
+  const { currentOpenMenu } = useHeaderState();
+  const cssCancelBtn = showCancelButton ? 'show-cancel-button' : '';
+  const cssMenuDropdownStatus =
+    currentOpenMenu === ''
+      ? 'header-dropdown--closed'
+      : 'header-dropdown--open';
+
+  return (
+    <>
       <a
         className="skip"
-        onClick={(e) => jumpToLink(e, 'qppSidebar')}
-        href="#qppSidebar"
+        onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
+        href={`#${skipToContentId || 'mainContent'}`}
       >
-        Skip to sidebar
+        Skip to content
       </a>
-    )}
-    <GovBanner />
-    {!isIESupportPage && <NotificationBanner />}
-    <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
-      <HeaderLogo />
-      {children}
-    </header>
-  </>
-);
+      {includeSkipToSidebar && (
+        <a
+          className="skip"
+          onClick={(e) => jumpToLink(e, 'qppSidebar')}
+          href="#qppSidebar"
+        >
+          Skip to sidebar
+        </a>
+      )}
+      <GovBanner />
+      {!isIESupportPage && <NotificationBanner />}
+      <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
+        <HeaderLogo />
+        {children}
+      </header>
+    </>
+  );
+};
 
 HeaderContainer.propTypes = {
   children: PropTypes.node.isRequired,

package/components/index.js

@@ -16,6 +16,7 @@ import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
 import Dropdown from './Dropdown';
+import Details from './Details';
 import DSLink from './Link';
 import {
   MyApplicationsIcon,
@@ -121,6 +122,7 @@ export {
   TextButton,
   TextInput,
   Dropdown,
+  Details,
   Tooltip,
   DSLink,
 };