Merge pull request #385 from topcoder-platform/PROD-1561_details-summary

PROD-1561 details summary -> qa

Author: brooketopcoder

src-ts/header/Header.module.scss

@@ -24,4 +24,9 @@
     @include ltesm {
         height: $header-height-sm;
     }
-}
+}
+
+.subheader {
+    width: 100%;
+    position: relative;
+}

src-ts/header/Header.tsx

@@ -14,6 +14,7 @@ const Header: FC<{}> = () => {
                 <ToolSelectors isWide={true} />
                 <UtilitySelectors />
             </header>
+            <div id='page-subheader-portal-el' className={styles.subheader}></div>
         </div>
     )
 }

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
-import { FC, MutableRefObject, useContext } from 'react'
-import { Link, NavigateFunction, useNavigate } from 'react-router-dom'
+import { FC, useContext } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
 
 import {
     authUrlLogout,
@@ -37,9 +37,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
     const name: string = `${profile.firstName} ${profile.lastName?.substring(0, 1)}${!!profile.lastName ? '.' : undefined}`
 
     return (
-        <div
-            className={styles['profile-panel']}
-        >
+        <div className={styles['profile-panel']}>
             <div className={styles['arrow-tip']}>
                 <TooltipArrowIcon />
             </div>

src-ts/index.ts

@@ -1,5 +1,14 @@
 export { default as AppNextGen } from './App'
 export { EnvironmentConfig } from './config'
-export { logInitialize, ProfileProvider, RouteProvider } from './lib'
+export {
+     ChallengeMetadataName,
+     Breadcrumb,
+     logInitialize,
+     ProfileProvider,
+     RouteProvider,
+     TabsNavbar,
+     workContext,
+     WorkStatusItem,
+} from './lib'
 export * from './utils'
 export * from './tools'

src/components/Breadcrumb/style.scss renamed to src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -1,38 +1,55 @@
-@import "styles/include";
+@import '../styles';
+
+.breadcrumb-wrap {
+    width: 100%;
+    background: $black-5;
+}
 
 .breadcrumb {
-    padding: 12px 24px;
-    background: $grey-bg;
+    padding: $pad-md 0;
+    max-width: $xxl-min;
+    margin: 0 auto;
+    @include pagePaddings;
+
     ol {
         display: flex;
+
         > li {
             display: inline-flex;
             align-items: center;
             padding: 0;
+
             a {
                 @extend .overline;
                 display: block;
-                padding: 12px;
-                color: $gray-80;
+                padding: $pad-md;
+                color: $black-80;
                 cursor: pointer;
             }
+
+            &:first-child a {
+                padding-left: 0;
+            }
+
             &:not(:last-child)::after {
                 content: '';
-                display:inline-block;
-                width: 8px;
-                height: 8px;
+                display: inline-block;
+                width: $pad-sm;
+                height: $pad-sm;
                 border-style: solid;
-                border-width: 1px 1px 0 0;
+                border-width: $border-xs $border-xs 0 0;
                 border-color: $black-60;
-                transform:rotate(45deg)
+                transform: rotate(45deg)
             }
+
             &:last-child a:last-child {
                 pointer-events: none;
             }
+
             &:last-child,
             &:hover {
                 a {
-                    color: $grey-text;
+                    color: $black-100;
                 }
             }
         }

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+import { createPortal } from 'react-dom'
+
+import { BreadcrumbItem, BreadcrumbItemModel } from './breadcrumb-item'
+import styles from './Breadcrumb.module.scss'
+
+interface BreadcrumbProps {
+    items: Array<BreadcrumbItemModel>
+}
+
+const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
+    const portalRootEl: HTMLElement|null = document.getElementById('page-subheader-portal-el')
+
+    if (!portalRootEl) {
+        return <></>
+    }
+
+    return createPortal((
+        <div className={styles['breadcrumb-wrap']}>
+            <nav className={styles.breadcrumb}>
+                <ol>
+                    {props.items.map((item, index) =>
+                        <BreadcrumbItem
+                            index={index + 1}
+                            item={item}
+                            key={index}
+                        />
+                    )}
+                </ol>
+            </nav>
+        </div>
+    ), portalRootEl)
+}
+
+export default Breadcrumb

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -0,0 +1,21 @@
+import { Link } from '@reach/router'
+import { FC } from 'react'
+
+import { BreadcrumbItemModel } from './breadcrumb-item.model'
+
+interface BreadcrumbItemProps {
+    index: number
+    item: BreadcrumbItemModel
+}
+
+const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => {
+    return (
+        <li key={props.index}>
+            <Link to={props.item.url}>
+                {props.item.name}
+            </Link>
+        </li>
+    )
+}
+
+export default BreadcrumbItem

src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbItemModel {
+    name: string
+    url: string
+}

src-ts/lib/breadcrumb/breadcrumb-item/index.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumb-item.model'
+export { default as BreadcrumbItem } from './BreadcrumbItem'

src-ts/lib/breadcrumb/index.ts

@@ -0,0 +1 @@
+export { default as Breadcrumb } from './Breadcrumb'