qpp-style 9.13.4 → 9.14.0

package/README.md

@@ -3,3 +3,40 @@
 This directory contains react implementations of the components for QPP.
 
 A storybook with examples is published at [https://cmsgov.github.io/qpp-style](https://cmsgov.github.io/qpp-style)
+
+## Github Branch and Pull Request process
+1. Create branch off main and create a Pull Request into main for the feature.
+>Example Branch Name: feature/QPPXX-XXXX_make_icon_better
+2. Once merged into main, create release branch from main.
+3. Name the new branch release/x.xx.x
+4. Run the version bump:
+
+```bash
+cd qpp-style/react
+npm version --no-git-tag-version patch
+```
+
+Example Commit Message:
+> x.xx.x release
+
+5. Create a pull request against main with the PR Title: x.xx.x release [Example PR](https://github.com/CMSgov/qpp-style/pull/1065)
+6. Enter the change in the description of the pull request i.e.:
+> Added new svg for Icon Name
+
+## Generate an NPM token with Publish permissions
+1. If you do not already have an access token, sign in to npmjs.com and navigate to access tokens.
+2. Click generate new token.
+3. Select publish under type.
+4. Copy the npm token and set its value as the environment variable: NPM_TOKEN
+
+```bash
+export NPM_TOKEN={npm_token}
+```
+
+## Publish the react qpp-style npm package (used by both react and angular)
+```bash
+cd qpp-style/react
+npm i
+npm publish
+```
+7. Once published successfully, merge into main.

package/components/Footer/Footer.stories.js

@@ -12,8 +12,8 @@ export const ExampleFooter = () => (
   <Footer
     isFullWidth={boolean('isFullWidth', false)}
     buildVersion={text('buildVersion', 'BUILD VERSION')}
-    isNewFooter={boolean('isNewFooter', false)}
-    showHcdResearch={boolean('showHcdResearch', false)}
+    isNewFooter={boolean('isNewFooter', true)}
+    showHcdResearch={boolean('showHcdResearch', true)}
   />
 );
 

package/components/Footer/FooterUI.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 
 import InfoTip from '../Infotip/Infotip';
 import LegacyFooterUI from './LegacyFooterUI';
@@ -145,7 +146,7 @@ const FooterUI = (props) => {
                   </div>
                   <div className="footer-contact-cms">
                     <p className="sub-title">Contact CMS</p>
-                    <p className="contact-title">By Phone:</p>
+                    <p className="contact-title">Phone:</p>
                     <p>Monday - Friday 8 a.m - 8 p.m ET</p>
                     <p>
                       1-866-288-8292 (TRS: 711)
@@ -154,7 +155,7 @@ const FooterUI = (props) => {
                       </span>
                     </p>
 
-                    <p className="contact-title">By Email:</p>
+                    <p className="contact-title">Email:</p>
                     <p>
                       <a
                         aria-label="QPP@cms.hhs.gov"
@@ -164,6 +165,20 @@ const FooterUI = (props) => {
                         QPP@cms.hhs.gov
                       </a>
                     </p>
+
+                    <p className="contact-title">QPP Service Center:</p>
+                    <a
+                      href="https://cmsqualitysupport.servicenowservices.com/ccsq_support_central"
+                      aria-label="CCSQ Support Central"
+                      className="email-link"
+                      target="__blank"
+                      rel="noopener noreferrer"
+                    >
+                      <strong>
+                        Create or Track a QPP Service Center Ticket
+                      </strong>
+                      <OpenInNewIcon classes={{ root: 'ccsq-link-icon' }} />
+                    </a>
                   </div>
                   <div className="footer-social-newsletter">
                     <p className="sub-title">Stay Connected</p>