CJPM-18122 Change subtitle in TopNav

Author: Kadinvanvalin

packages/visual-stack-redux/package-lock.json

@@ -17,10 +17,10 @@ export const BackToCjLink = ({ className, title, onClick, ...restProps }) => {
       onClick={onClick}
       className="topnav-action"
     >
-      <Text id="topnav-back-icon" className="vs-topnav-action-text">
+      <Text id="topnav-back-icon" className="vs-topnav-action vs-topnav-text">
         <ArrowLeftIcon />
       </Text>
-      <Text id="topnav-back-title" className="vs-topnav-action-text">
+      <Text id="topnav-back-title" className="vs-topnav-action vs-topnav-text">
         {title}
       </Text>
     </Box>

packages/visual-stack/src/components/TopNav/BackToCjLink.js

@@ -21,10 +21,10 @@ export const CjSupportLink = ({ className, title, link, ...restProps }) => {
           align="center"
           className="vs-topnav-action"
         >
-          <Text id="topnav-help-icon" className="vs-topnav-action-text">
+          <Text id="topnav-help-icon" className="vs-topnav-action vs-topnav-text">
             <InformationOutlineIcon />
           </Text>
-          <Text id="topnav-help-title" className="vs-topnav-action-text">
+          <Text id="topnav-help-title" className="vs-topnav-action vs-topnav-text">
             {title}
           </Text>
         </Box>

packages/visual-stack/src/components/TopNav/CjSupportLink.js

@@ -83,13 +83,11 @@
 }
 
 .vs-topnav-action {
-  color: #bebfc0 !important;
   cursor: pointer;
 }
 
-.vs-topnav-action-text {
+.vs-topnav-text {
   color: #bebfc0 !important;
-  cursor: pointer;
 }
 
 a.vs-cj-support-link-container:hover {

packages/visual-stack/src/components/TopNav/TopNav.css

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 export const TopNav = ({
                          className,
                          title,
-                         subTitle,
+                         subtitle,
                          actionChildren,
                          children,
                          contentSize,
@@ -22,7 +22,7 @@ export const TopNav = ({
           </div>
           <h1 className="vs-topnav-title">{title}</h1>
         </div>
-        {subTitle ? <div className={"vs-topnav-action-text"}>{subTitle}</div> : ""}
+        {subtitle ? <div className={"vs-topnav-text"}>{subtitle}</div> : ""}
         <div className="vs-topnav-button-bar">
           {actionChildren}
         </div>
@@ -44,6 +44,6 @@ TopNav.propTypes = {
   title: PropTypes.string,
   actionChildren: PropTypes.object,
   children: PropTypes.object,
-  subTitle: PropTypes.object,
+  subtitle: PropTypes.string,
   contentSize: PropTypes.string,
 };

packages/visual-stack/src/components/TopNav/TopNav.js

@@ -65,7 +65,7 @@ describe('BackToCjLink', () => {
     expect(wrapper.find(BackToCjLink).prop('title')).toBe('title');
     expect(wrapper.find(BackToCjLink).prop('onClick')()).toBe(2);
     expect(
-      wrapper.find('.vs-topnav-action-text>#topnav-back-title').text()
+      wrapper.find('.vs-topnav-action.vs-topnav-text>#topnav-back-title').text()
     ).toEqual('title');
   });
 });
@@ -75,7 +75,7 @@ describe('CjSupportLink', () => {
     const wrapper = mount(<CjSupportLink title="title" link="link" />);
     expect(wrapper.find(CjSupportLink).prop('title')).toBe('title');
     expect(wrapper.find(CjSupportLink).prop('link')).toBe('link');
-    expect(wrapper.find('.vs-topnav-action>#topnav-help-title').text()).toEqual(
+    expect(wrapper.find('.vs-topnav-action.vs-topnav-text>#topnav-help-title').text()).toEqual(
       'title'
     );
     expect(wrapper.find('.vs-cj-support-link-container').props().href).toEqual(