qpp-style 9.11.1 → 9.12.1

package/components/Header/ImpersonatorBanner.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import CloseIcon from '@material-ui/icons/Close';
 
 import { TextButton } from '../Button';
-import { deleteImpersonatedUser } from '../../session/logout';
+import { deleteImpersonatedUser, revertQppHasAuthsCookie } from '../../session/logout';
 
 const ImpersonatorBanner = () => {
   const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
@@ -21,8 +21,10 @@ const ImpersonatorBanner = () => {
   ].join(' ');
 
   const onClick = () => {
-    const fn = () => {
+    const fn = () => {      
       deleteImpersonatedUser({ qpp_impersonated_user: user });
+      // Set qpp_has_authorizations cookie back to impersonator's value
+      revertQppHasAuthsCookie();
       window.location.reload();
     };
     return axios

package/components/Link/Link.stories.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import DSLink from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+
+export default {
+  title: 'Link',
+  component: DSLink,
+  decorators: [withKnobs],
+};
+
+export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;
+
+export const LinkColorVariants = () => (
+  <>
+    <div className=" qpp-dark-background qpp-u-padding--16">
+      <DSLink href="#" variant="white">
+        Link Label
+      </DSLink>
+    </div>
+    <p>
+      <DSLink href="#" variant="gray">
+        Link Label
+      </DSLink>
+    </p>
+  </>
+);
+
+export const inlineLinks = () => (
+  <div className="qpp-u-padding--16">
+    <p className="qpp-u-width--60">
+      Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{' '}
+      <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
+      venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
+      venenatis <DSLink href="#">inline link</DSLink> dapibus posuere velit
+      aliquet.
+    </p>
+  </div>
+);
+
+export const inlineLinksDarkBackground = () => (
+  <div className="qpp-dark-background qpp-u-padding--16">
+    Aenean lacinia{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    nulla sed{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>
+    . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+    Integer posuere erat a ante venenatis{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    dapibus posuere velit aliquet.
+  </div>
+);
+
+export const linkWithIcon = () => {
+  const icon = <OpenInNewIcon classes={{ root: 'qpp-icon-mat' }} />;
+  return (
+    <div className="qpp-u-padding--16">
+      <DSLink href="#">
+        Standalone Link With Icon
+        {icon}
+      </DSLink>{' '}
+      <p className=" qpp-u-width--60">
+        Aenean lacinia{' '}
+        <DSLink href="#">
+          inline link
+          {icon}
+        </DSLink>{' '}
+        nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer posuere
+        erat a ante venenatis dapibus posuere velit aliquet. Integer posuere
+        erat a ante venenatis <DSLink href="#">inline link {icon}</DSLink>{' '}
+        dapibus posuere velit aliquet.
+      </p>
+    </div>
+  );
+};

package/components/Link/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VARIANTS = ['white', 'gray'];
+
+const DSLink = ({
+  className,
+  href,
+  download,
+  ariaLabel,
+  onClick,
+  children,
+  variant,
+  ...rest
+}) => {
+  let linkClass = 'qpp-c-link';
+  if (VARIANTS.includes(variant)) {
+    variant === 'gray'
+      ? (linkClass = linkClass.concat(' ', 'qpp-u-color--gray-60'))
+      : (linkClass = linkClass.concat(' ', `qpp-u-color--${variant}`));
+  }
+
+  if (className) {
+    linkClass = linkClass.concat(' ', className);
+  }
+
+  return (
+    <a
+      aria-label={ariaLabel}
+      className={linkClass || ''}
+      href={href}
+      download={download}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+DSLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  download: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+DSLink.defaultProps = {
+  children: null,
+  className: '',
+  href: '',
+  ariaLabel: null,
+  onClick: () => null,
+  download: false,
+  variant: null,
+};
+
+export default DSLink;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -48,9 +48,10 @@ const getIcon = (url) =>
     '/user/targeted-review/#/landing': TargetIcon,
     '/user/test-data': MyTestDataIcon,
     '/user/self-nomination/#/landing': IndividualReporting,
+    '/user/reviewers': DashboardIcon,
     '/reviewer/exception': HardshipIcon,
     '/reviewer/targeted-review': TargetIcon,
-    '/reviewer/self-nomination': IndividualReporting,
+    '/self-nomination': IndividualReporting,
   }[url] || null);
 
 const LevelOneContent = ({
@@ -115,7 +116,7 @@ const LevelOneContent = ({
     '/reviewer/targeted-review': (internalReviewerNames || []).includes(
       'QPP Targeted Review & Exceptions'
     ),
-    '/reviewer/self-nomination': (internalReviewerNames || []).includes(
+    '/self-nomination': (internalReviewerNames || []).includes(
       'QPP Self-Nomination'
     ),
 

package/components/SideNav/UI/default-content.json

@@ -78,7 +78,7 @@
   ],
   "internalReviewers": [
     {
-      "url": "/user/submissions",
+      "url": "/user/reviewers",
       "label": "Dashboard Home"
     },
     {
@@ -91,7 +91,7 @@
       "label": "Targeted Review"
     },
     {
-      "url": "/reviewer/self-nomination",
+      "url": "/self-nomination",
       "label": "Self Nomination"
     }
   ],

package/components/index.js

@@ -17,6 +17,7 @@ import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
 import Dropdown from './Dropdown';
+import DSLink from './Link';
 import {
   MyApplicationsIcon,
   UserSignInIcon,
@@ -121,4 +122,5 @@ export {
   TextInput,
   Dropdown,
   Tooltip,
+  DSLink,
 };