Added user type badge to top bar and tweaked buttons states

packages/example/src/pages/Layouts.tsx

@@ -52,6 +52,12 @@ const Layouts: FC = () => {
           switchThemeText='SWITCH THEME'
           selectedThemeText={isLightMode ? 'LIGHT MODE' : 'DARK MODE' }
           onThemeToggle={onThemeToggle}
+          badge={{ 
+            text: 'Guest',
+            color: 'primary',
+            linkTo: '#',
+            linkText: 'Login'
+          }}
           hasSwitchTheme
           content={{
             items: [

packages/storybook/src/stories/Filters/molecules/DatePicker.stories.tsx

@@ -77,4 +77,4 @@ export const _DatePicker = () => {
         />
       </FilterDropdownContainer>
     </Container>);
-};
+};

packages/storybook/src/stories/Global/GlobalUI.stories.tsx

@@ -29,7 +29,7 @@ import { Route, Switch, RouteComponentProps } from 'react-router-dom';
 import logoMarkSvg from '../assets/logo-mark.svg';
 import logoTextSvg from '../assets/logo-text.svg';
 
-import { text, object, boolean } from '@storybook/addon-knobs';
+import { text, object, boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 export default {
@@ -419,6 +419,10 @@ export const _GlobalUI = () => {
     icon: 'Information',
     title: 'V12.3.4',
   });
+  const badgeText = text("Badge Text", "Guest");
+  const badgeColor = select("Badge Color", ['primary', 'grey', 'info', 'success', 'caution', 'warning'], 'info');
+  const badgeLinkTo = text("Badge To", "/login");
+  const badgeLinkText = text("Badge Link Text", "Login");
 
   const menuConfig = object("Menu Config", {
     items: [
@@ -557,6 +561,12 @@ export const _GlobalUI = () => {
         canAlwaysPin={canAlwaysPin}
         userDrawerMeta={userDrawerMetaConfig}
         legacyLayout={false}
+        badge={{ 
+          text: badgeText,
+          color: badgeColor,
+          linkTo: badgeLinkTo,
+          linkText: badgeLinkText
+        }}
         {...{ logoMark, logoText, supportUrl, maxWidth, paddingOverride, notificationsHistory, customDrawer}}
         {...{ loggedInUser, userSubmenu, hasSearch, hasLogout, hasNotifications, logoutLink, logoutText, searchPlaceholder, hasLanguage,
               hasCurrentUser, currentUserText, accountOptionText, userDrawerFooter, hasUserDrawerMeta, copySuccessMessage, includeCopyTitle, hasUserDrawerFooter,

packages/storybook/src/stories/Global/TopBar.stories.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import styled from 'styled-components';
-import { object, text, boolean } from "@storybook/addon-knobs";
+import { object, text, boolean, select } from "@storybook/addon-knobs";
 import { TopBar, ICustomDrawer, INotificationItem, INotificationsHistory, useThemeToggle } from 'scorer-ui-kit';
 import { action } from '@storybook/addon-actions';
 
@@ -159,6 +159,11 @@ export const _TopBar = () => {
   ]
 );
 
+  const badgeText = text("Badge Text", "Guest");
+  const badgeColor = select("Badge Color", ['primary', 'grey', 'info', 'success', 'caution', 'warning'], 'info');
+  const badgeLinkTo = text("Badge To", "/login");
+  const badgeLinkText = text("Badge Link Text", "Login");
+
   // userDrawerBespoke: See examples for implementation of this prop.
 
   const onLanguageToggle = () => {
@@ -167,7 +172,14 @@ export const _TopBar = () => {
 
   return (
     <Container>
-      <TopBar {...{
+      <TopBar 
+        badge={{ 
+          text: badgeText,
+          color: badgeColor,
+          linkTo: badgeLinkTo,
+          linkText: badgeLinkText
+        }}
+      {...{
         loggedInUser,
         userSubmenu,
         hasSearch,
@@ -191,7 +203,7 @@ export const _TopBar = () => {
         logoutText,
         userDrawerFooter,
         copySuccessMessage,
-        includeCopyTitle
+        includeCopyTitle,
       }}
         userDrawerMeta={userDrawerMetaConfig}
         customDrawer={drawerProps}

packages/ui-lib/src/Filters/index.ts

@@ -49,4 +49,4 @@ export type {
   IFilterDatePicker,
   FilterButtonDesign,
   DateRange
-};
+};

packages/ui-lib/src/Global/atoms/TopBarBadge.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useState, useRef, Fragment } from 'react';
+import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
+import { ITopBarBadge } from '..';
+
+const CoreStyle = css`
+  display: flex;
+  height: 32px;
+  padding: 8px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 8px;
+  border-radius: 3px;
+
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 12px; /* 85.714% */
+  white-space: nowrap;
+
+  transition: opacity var(--speed-fast) var(--easing-primary-out);
+
+`;
+
+const ContainerStatic = styled.div<{themeColor?: string}>`
+  ${CoreStyle};
+
+  ${({themeColor}) => themeColor ? css`
+    border: 2px solid var(--${themeColor}-9);
+    color: var(--${themeColor}-11);
+  ` : css`
+    border: 2px solid var(--info-9);
+    color: var(--info-11);
+  `};
+`;
+
+const DefaultText = styled.span`
+  display: inline-block;
+`;
+const LinkText = styled.span``;
+
+const ContainerLinked = styled.div<{themeColor?: string}>`
+  a {
+    ${CoreStyle};
+
+    text-decoration: none;
+
+    ${({themeColor}) => themeColor ? css`
+      background-color: transparent;
+      border: 2px solid var(--${themeColor}-9);
+      color: var(--${themeColor}-11);
+    ` : css`
+      background-color: transparent;
+      border: 2px solid var(--info-9);
+      color: var(--info-11);
+    `};
+
+    &:hover {
+      ${({themeColor}) => themeColor ? css`
+        background-color: var(--${themeColor}-9);
+        border: 2px solid var(--${themeColor}-9);
+        color: var(--white-12);
+      ` : css`
+        background-color: var(--info-9);
+        border: 2px solid var(--info-9);
+        color: var(--white-12);
+      `};
+    }
+  }
+`;
+
+const Container = styled.div<{ready: boolean, minWidth: number}>`
+  ${({ready, minWidth}) => css`
+
+    visibility: ${ready ? 'visible' : 'hidden'};
+    opacity: ${ready ? '1' : '0'};
+
+    transition: opacity var(--speed-fast) var(--easing-primary-in-out);
+
+    ${DefaultText}, ${LinkText}{
+      /* Required to accurately measure container sizes and ensure hover doesn't resize. */
+      ${ready && `min-width: ${minWidth}px;`};
+    }
+  `};
+`;
+
+const TopBarBadge: React.FC<ITopBarBadge> = ({text, color, linkHref, linkTo, linkText}) => {
+
+  const defaultTextRef = useRef() as React.MutableRefObject<HTMLSpanElement>;
+  const linkTextRef = useRef() as React.MutableRefObject<HTMLSpanElement>;
+
+  const [ready, setReady] = useState<boolean>(false);
+  const [hover, setHover] = useState<boolean>(false);
+  const [minWidth, setMinWidth] = useState<number>(0);
+
+  useEffect(() => {
+    setReady(false);
+    setTimeout(() => {
+      const defaultWidth = defaultTextRef.current.getBoundingClientRect().width;
+      const linkWidth = linkTextRef.current?.getBoundingClientRect().width || 0;
+      const largestWidth = defaultWidth >= linkWidth ? defaultWidth : linkWidth;
+      setMinWidth(Math.ceil(largestWidth));
+      setReady(true);
+    }, 100);
+  }, [defaultTextRef, linkTextRef, text, linkText, setMinWidth, setReady]);
+
+  const defaultTextElement = <DefaultText ref={defaultTextRef}>{text}</DefaultText>;
+  const linkTextElement = linkTo || linkHref ? <LinkText ref={linkTextRef}>{linkText || text}</LinkText> : null;
+
+  let badgeComponent;
+
+  if(linkTo){
+    badgeComponent = <ContainerLinked themeColor={color}>
+      <Link to={linkTo}>
+        { !ready ? <Fragment>
+          {defaultTextElement}
+          {linkTextElement}
+        </Fragment>
+        : <Fragment>
+          {!hover ? defaultTextElement : linkTextElement }
+        </Fragment>}
+      </Link>
+    </ContainerLinked>;
+  } else if(linkHref){
+    badgeComponent = <ContainerLinked themeColor={color}>
+      <a href={linkHref}>
+      { !ready ? <Fragment>
+          {defaultTextElement}
+          {linkTextElement}
+        </Fragment>
+        : <Fragment>
+          {!hover ? defaultTextElement : linkTextElement }
+        </Fragment>}
+      </a>
+    </ContainerLinked>;
+  } else {
+    badgeComponent = <ContainerStatic themeColor={color}>{defaultTextElement}</ContainerStatic>;
+  }
+
+  return (
+    <Container {...{ready, minWidth}} onPointerEnter={ () => ready && setHover(true) } onPointerLeave={ () => ready && setHover(false) }>
+      { badgeComponent }
+    </Container>
+  );
+};
+
+export default TopBarBadge;

packages/ui-lib/src/Global/index.ts

@@ -117,6 +117,7 @@ export interface IMenuTop {
     copySuccessMessage?: string,
     includeCopyTitle?: boolean
     hasUserDrawerFooter?: boolean
+    badge?: ITopBarBadge;
   }
 
   export interface INotificationItem {
@@ -132,4 +133,12 @@ export interface IMenuTop {
     noNotificationsText?: string
     readNotificationsText?: string
     unreadNotificationsText?: string
+  }
+
+  export interface ITopBarBadge {
+    text: string;
+    color?: string;
+    linkHref?: string;
+    linkTo?: string;
+    linkText?: string;
   }