Merge pull request #353 from cjdev/CJPM-18122

Add subtitle slot on TopNav

Author: khoberg

CHANGELOG.md

@@ -1,3 +1,8 @@
+# Upcoming
+
+## Updates
+- TopNav: add subtitle prop for centered text in nav
+
 # 7.3.2
 
 ## Fix

packages/visual-stack-docs/src/containers/Components/Docs/topnav.js

@@ -62,6 +62,7 @@ export const TopNavCodeSnippet1 = ({router}) => (
     /* s1:start */
     <TopNav
       title="Header Title"
+      subtitle="Subtitle"
       actionChildren={
         <Box direction="row" gap="xl" align="center" grow>
           <BackToCjLink title="Back to the Home Page" onClick={() => router.push('/components/topnav')}/>

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,16 @@ 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

@@ -9,6 +9,7 @@
   background: #4d5051;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   z-index: 20;
+  flex-wrap: wrap;
 }
 
 .vs-topnav-page-title {
@@ -82,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,6 +6,7 @@ import PropTypes from 'prop-types';
 export const TopNav = ({
   className,
   title,
+  subtitle,
   actionChildren,
   children,
   contentSize,
@@ -20,6 +21,7 @@ export const TopNav = ({
           </div>
           <h1 className="vs-topnav-title">{title}</h1>
         </div>
+        {subtitle ? <div className={'vs-topnav-text'}>{subtitle}</div> : ''}
         <div className="vs-topnav-button-bar">{actionChildren}</div>
       </div>
       <div
@@ -39,5 +41,6 @@ TopNav.propTypes = {
   title: PropTypes.string,
   actionChildren: PropTypes.object,
   children: 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,9 +75,9 @@ 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(
-      'title'
-    );
+    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(
       'link'
     );