Merge branch 'dev' of github.com:topcoder-platform/platform-ui into TCA-1131_hm-preview

Author: vas3a

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -40,8 +40,8 @@
             padding: 0;
             @include ltesm {
                 flex: 0 1 auto;
-                &:first-child {
-                    flex: 1 0 auto;
+                &:first-child:not(:global(.elipsis)) {
+                    flex: 1 0 0;
                 }
             }
             a {

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

@@ -19,10 +19,11 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
     return (
         <li
             key={props.index}
-            onClick={() => onClick()}
+            onClick={onClick}
+            className={props.item.isElipsis ? 'elipsis' : ''}
         >
             <Link
-                className={props.item.isElipsis && styles.elipsis}
+                className={props.item.isElipsis ? styles.elipsis : ''}
                 to={props.item.url}
             >
                 {props.item.name}

src-ts/tools/learn/course-completed/tca-certification-view/TCACertificationView.tsx

@@ -1,9 +1,8 @@
 import { FC } from 'react'
 
-import { EnvironmentConfig } from '../../../../config'
 import { Button } from '../../../../lib'
 import { CourseTitle, LearnCourse, TCACertification } from '../../learn-lib'
-import { getCertificatePath, getTCACertificationPath, rootRoute } from '../../learn.routes'
+import { getTCACertificationPath } from '../../learn.routes'
 import { ReactComponent as StarsSvg } from '../stars.svg'
 import { TitleBadgeType } from '../../learn-lib/course-title/CourseTitle'
 import styles from '../CourseCompletedPage.module.scss'

src-ts/tools/learn/learn-lib/course-title/CourseTitle.module.scss

@@ -61,6 +61,8 @@
     @include ltemd {
         :global(.quote-small.xl) {
             margin-top: $space-sm;
+            display: flex;
+            justify-content: center;
         }
     }
 }

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss

@@ -302,4 +302,76 @@
     @include ltemd {
         display: none;
     }
+}
+
+.modalView {
+    .hero {
+        padding-top: $space-mx;
+        min-height: 380px;
+
+        @include ltesm {
+            max-height: none;
+        }
+
+
+        .heroInner {
+            margin-bottom: 0;
+            flex-direction: row;
+            padding-right: $space-lg;
+            padding-bottom: $space-mx;
+
+            @include ltesm {
+                flex-direction: column;
+                padding-right: 0;
+            }
+
+            .heroLeft {
+                .member {
+                    margin-bottom: $space-xxxxl;
+
+                    >svg,
+                    >img {
+                        max-width: 88px;
+                        max-height: 88px;
+                    }
+                }
+
+                .certTitle {
+                    font-size: 40px;
+                    line-height: 40px;
+                }
+            }
+        }
+    }
+
+    .wrap {
+        margin-bottom: 0;
+    }
+    
+    .contentOuter {
+        max-width: none;
+
+        >div {
+            max-width: none !important;
+        }
+
+    }
+
+    .courses {
+        margin-bottom: 0;
+    }
+
+    .colsWrap {
+        margin-top: 0;
+    }
+    
+    .colWrap {
+        &:last-child {
+            max-width: 25%;
+            padding-right: 0;
+            @include ltemd {
+                max-width: 100%;
+            }
+        }
+    }
 }

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx

@@ -5,6 +5,7 @@ import {
     ReactNode,
     SetStateAction,
     useCallback,
+    useLayoutEffect,
     useRef,
     useState,
 } from 'react'
@@ -34,7 +35,7 @@ import {
     useTCAShareCertificateModal,
 } from '..'
 import { getTCACertificationPath, getUserTCACertificateSsr } from '../../learn.routes'
-import { clearFCCCertificationTitle } from '../functions'
+import { clearFCCCertificationTitle, hideSiblings } from '../functions'
 import { EnvironmentConfig } from '../../../../config'
 
 import { CertificateModal } from './certificate-modal'
@@ -65,6 +66,7 @@ export interface HiringManagerViewProps {
 
 const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewProps) => {
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
+    const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
 
     const [certPreviewModalIsOpen, setCertPreviewModalIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -90,6 +92,8 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
     )
     const shareModal: TCAShareCertificateModalData = useTCAShareCertificateModal(ssrCertUrl)
 
+    const renderShareActions: boolean = props.isOwner && !props.isModalView
+
     const getCertificateCanvas: () => Promise<HTMLCanvasElement | void>
         = useCertificateCanvas(certificateElRef)
 
@@ -200,29 +204,31 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                             <div className={styles.heroCert}>
                                 {renderTCACertificatePreview(certificateElRef)}
 
-                                <div className={styles.certActionBtns}>
-                                    <ActionButton
-                                        icon={<IconOutline.ZoomInIcon />}
-                                        className={classNames(styles.certZoomBtn, styles.certActionBtn)}
-                                        onClick={handleShowCertPreviewModal}
-                                    />
-                                    {props.isOwner && (
-                                        <>
-                                            <ActionButton
-                                                className={classNames('desktop-hide', styles.certActionBtn)}
-                                                icon={<IconOutline.PrinterIcon />}
-                                                onClick={handlePrint}
-                                            />
-                                            <ActionButton
-                                                className={classNames('desktop-hide', styles.certActionBtn)}
-                                                icon={<IconOutline.DownloadIcon />}
-                                                onClick={handleDownload}
-                                            />
-                                        </>
-                                    )}
-                                </div>
+                                {!props.isModalView && (
+                                    <div className={styles.certActionBtns}>
+                                        <ActionButton
+                                            icon={<IconOutline.ZoomInIcon />}
+                                            className={classNames(styles.certZoomBtn, styles.certActionBtn)}
+                                            onClick={handleShowCertPreviewModal}
+                                        />
+                                        {renderShareActions && (
+                                            <>
+                                                <ActionButton
+                                                    className={classNames('desktop-hide', styles.certActionBtn)}
+                                                    icon={<IconOutline.PrinterIcon />}
+                                                    onClick={handlePrint}
+                                                />
+                                                <ActionButton
+                                                    className={classNames('desktop-hide', styles.certActionBtn)}
+                                                    icon={<IconOutline.DownloadIcon />}
+                                                    onClick={handleDownload}
+                                                />
+                                            </>
+                                        )}
+                                    </div>
+                                )}
                             </div>
-                            {props.isOwner && (
+                            {renderShareActions && (
                                 <div className={classNames('mobile-hide', styles.certActionBtns)}>
                                     <ActionButton
                                         className={styles.certActionBtn}
@@ -243,8 +249,19 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
         )
     }
 
+    useLayoutEffect(() => {
+        const el: HTMLElement = wrapElRef.current
+        if (!el || !props.isModalView) {
+            return
+        }
+
+        hideSiblings(el.parentElement as HTMLElement)
+        hideSiblings(el.parentElement?.parentElement as HTMLElement)
+
+    })
+
     return !!props.certification && !!props.userProfile ? (
-        <div>
+        <div className={props.isModalView ? styles.modalView : ''} ref={wrapElRef}>
             {renderHero()}
 
             <ContentLayout
@@ -253,7 +270,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                 innerClass={styles.innerContentWrap}
             >
                 <div className={styles.wrap}>
-                    {props.isOwner && (
+                    {renderShareActions && (
                         <Button
                             buttonStyle='primary'
                             icon={IconOutline.ShareIcon}
@@ -280,24 +297,28 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                                 expandCount={props.certification?.skills?.length ?? 0}
                             />
 
-                            <Button
-                                buttonStyle='secondary'
-                                label={props.isOwner ? 'View your Topcoder profile' : 'View full Topcoder profile'}
-                                url={myProfileLink}
-                                target='_blank'
-                                className={styles.shareBtn}
-                            />
+                            {!props.isModalView && (
+                                <Button
+                                    buttonStyle='secondary'
+                                    label={props.isOwner ? 'View your Topcoder profile' : 'View full Topcoder profile'}
+                                    url={myProfileLink}
+                                    target='_blank'
+                                    className={styles.shareBtn}
+                                />
+                            )}
                         </div>
                     </div>
 
                     {renderCoursesGridItems()}
 
-                    <Button
-                        className={styles.detailsBtn}
-                        buttonStyle='link'
-                        label='Certification details'
-                        route={certificationDetailsLink}
-                    />
+                    {!props.isModalView && (
+                        <Button
+                            className={styles.detailsBtn}
+                            buttonStyle='link'
+                            label='Certification details'
+                            route={certificationDetailsLink}
+                        />
+                    )}
                 </div>
             </ContentLayout>
             {shareModal.modal}

src-ts/tools/learn/learn-lib/hiring-manager-view/certificate-modal/CertificateModal.module.scss

@@ -1,5 +1,8 @@
 @import '../../../../../lib/styles/includes';
 
+.wrap {
+    position: relative;
+}
 
 .certificateModal {
     &:global(.react-responsive-modal-modal) {

src-ts/tools/learn/learn-lib/hiring-manager-view/certificate-modal/CertificateModal.tsx

@@ -14,7 +14,9 @@ const CertificateModal: FC<CertificateModalProps> = (props: CertificateModalProp
         classNames={{ modal: styles.certificateModal }}
         {...props}
     >
-        {props.children}
+        <div className={styles.wrap}>
+            {props.children}
+        </div>
     </BaseModal>
 )
 

src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx

@@ -7,6 +7,7 @@ import {
     useRef,
     useState,
 } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import {
     getVerificationStatusAsync,
@@ -23,7 +24,6 @@ import {
 import { getTCACertificationPath, getTCACertificationValidationUrl } from '../../learn.routes'
 import { CertificateNotFound } from '../certificate-not-found'
 
-
 interface UserCertificationViewBaseProps {
     certification?: TCACertification
     enrollment?: TCACertificationEnrollmentBase
@@ -33,12 +33,14 @@ interface UserCertificationViewBaseProps {
 }
 
 const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: UserCertificationViewBaseProps) => {
+    const [queryParams]: [URLSearchParams, any] = useSearchParams()
 
-    // const routeParams: Params<string> = useParams()
     const tcaCertificationPath: string = getTCACertificationPath(`${props.certification?.dashedName}`)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
     const isOwnProfile: boolean = !!props.profile?.email
 
+    const isModalView: boolean = queryParams.get('view-style') === 'modal'
+
     const [isMemberVerified, setIsMemberVerified]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
@@ -84,6 +86,7 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
                         isOwner={isOwnProfile}
                         validationUrl={validationUrl}
                         isPreview={props.isPreview}
+                        isModalView={isModalView}
                     />
                 </div>
             )}