feat(HeaderIdentity): Allow customization of 'Log out' link text (#204)

indiana-university · Jul 17, 2019 · 6daefaa · 6daefaa
1 parent 8e43771
commit 6daefaa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/components/Header/HeaderIdentity.test.tsx b/src/components/Header/HeaderIdentity.test.tsx
@@ -104,4 +104,19 @@ describe('<Navigation />', () => {
             expect(cut.find('HeaderCollapse').find('a#example-one')).toHaveLength(1);
         });
     });
+
+    describe('should display "Log out" as the logout link text', () => {
+        const onLogout = jest.fn();
+        cut = mount(<HeaderIdentity avatar="RS" username="rswanson" className="rvt-header-id--drawer" onLogout={onLogout} />);
+        const logoutLink = cut.find('.rvt-header-id__log-out');
+        expect(logoutLink.text()).toBe('Log out');
+    });
+
+    describe('should allow users to customize the logout link text', () => {
+        const onLogout = jest.fn();
+        const logoutText = 'End backdoor';
+        cut = mount(<HeaderIdentity avatar="RS" username="rswanson" className="rvt-header-id--drawer" onLogout={onLogout} logoutLinkText={logoutText} />);
+        const logoutLink = cut.find('.rvt-header-id__log-out');
+        expect(logoutLink.text()).toBe(logoutText);
+    });
 });
diff --git a/src/components/Header/HeaderIdentity.tsx b/src/components/Header/HeaderIdentity.tsx
@@ -14,6 +14,11 @@ export interface HeaderIdentityProps {
      * @see https://rivet.uits.iu.edu/components/navigation/header/#header-with-identity-menu
      */
     avatar?: string | React.ReactNode;
+
+    /**
+     * Override default text for logout link
+     */
+    logoutLinkText?: string; 
     /**
      * An optional action to take when the user logs out.  If provided a "log out" link will be included.
      * @see https://rivet.uits.iu.edu/components/navigation/header/#header-with-identity-menu
@@ -61,7 +66,7 @@ const drawerWithChildren = (classes, label, logout, children) =>
         {logout}
     </HeaderCollapse>
 
-const HeaderIdentity: React.SFC<HeaderIdentityProps & React.HTMLAttributes<HTMLDivElement>> = ({ avatar, children, className, onLogout, username }) => {
+const HeaderIdentity: React.SFC<HeaderIdentityProps & React.HTMLAttributes<HTMLDivElement>> = ({ avatar, children, className, logoutLinkText, onLogout, username }) => {
     const wrapperClasses = classNames('rvt-header-id', className);
     const drawerOpen = wrapperClasses.includes('rvt-header-id--drawer');
     const avatarIcon = avatar && <span className="rvt-header-id__avatar" aria-hidden="true">{avatar}</span>;
@@ -72,9 +77,9 @@ const HeaderIdentity: React.SFC<HeaderIdentityProps & React.HTMLAttributes<HTMLD
 
     let logout;
     if (children && onLogout) {
-        logout = <a href="javascript:void(0)" onClick={onLogout}>Log out</a>
+        logout = <a href="javascript:void(0)" onClick={onLogout}>{logoutLinkText}</a>
     } else if (!children && onLogout) {
-        logout = <a href="javascript:void(0)" className="rvt-header-id__log-out" onClick={onLogout}>Log out</a>
+        logout = <a href="javascript:void(0)" className="rvt-header-id__log-out" onClick={onLogout}>{logoutLinkText}</a>
     }
 
     return children
@@ -87,5 +92,8 @@ const HeaderIdentity: React.SFC<HeaderIdentityProps & React.HTMLAttributes<HTMLD
 }
 
 HeaderIdentity.displayName = 'HeaderIdentity';
+HeaderIdentity.defaultProps = {
+    logoutLinkText: 'Log out'
+};
 
 export default HeaderIdentity;