Merge branch 'dev' of github.com:topcoder-platform/platform-ui into TCA-1179_work-on-linting-issues

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

@@ -21,6 +21,7 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
         <li
             key={props.index}
             onClick={onClick}
+            className={props.item.isElipsis ? 'elipsis' : ''}
         >
             <Link
                 className={classNames(props.item.isElipsis && styles.elipsis)}

src-ts/tools/dev-center/dev-center-lib/functions/copy-to-clipboard.ts renamed to src-ts/lib/functions/copy-text-to-clipboard.ts

@@ -1,4 +1,4 @@
-export default async function copy(text: string): Promise<void> {
+export async function copyTextToClipboard(text: string): Promise<void> {
     try {
         return await navigator.clipboard.writeText(text)
     } catch (error) {}
@@ -23,4 +23,6 @@ export default async function copy(text: string): Promise<void> {
     }
 
     document.body.removeChild(textArea)
+
+    return undefined
 }

src-ts/lib/functions/index.ts

@@ -13,3 +13,4 @@ export * from './text-format-functions'
 export * from './survey-functions'
 export * from './user-functions'
 export * from './xhr-functions'
+export * from './copy-text-to-clipboard'

src-ts/lib/index.ts

@@ -11,6 +11,7 @@ export {
     authUrlLogin,
     authUrlLogout,
     authUrlSignup,
+    copyTextToClipboard,
     errorHandle,
     fileCreateFromCanvas,
     fileDownloadBlob,

src-ts/tools/dev-center/dev-center-lib/CopyButton/CopyButton.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 
-import { Button, IconOutline } from '../../../../lib'
-import copy from '../functions/copy-to-clipboard'
+import { Button, copyTextToClipboard, IconOutline } from '../../../../lib'
 
 import styles from './CopyButton.module.scss'
 
@@ -19,7 +18,7 @@ export const CopyButton: React.FC<CopyButtonProps> = props => {
             buttonStyle='icon'
             className={`${styles['copy-btn']} ${className}`}
             icon={IconOutline.DocumentDuplicateIcon}
-            onClick={() => copy(text)}
+            onClick={() => copyTextToClipboard(text)}
         />
     )
 }

src-ts/tools/learn/certification-details/CertificationDetailsPage.module.scss

@@ -21,3 +21,16 @@
         margin-top: 0;
     }
 }
+
+.certifCompleted {
+    display: flex;
+    align-items: center;
+    margin-bottom: $space-mx;
+    gap: $space-lg;
+    
+    @include ltemd {
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: $space-xxxxl;
+    }
+}

src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx

@@ -17,6 +17,7 @@ import {
     profileContext,
     ProfileContextData,
 } from '../../../lib'
+import { getTCAUserCertificationUrl } from '../learn.routes'
 
 import { CertificationDetailsSidebar } from './certification-details-sidebar'
 import { CertificationCurriculum } from './certification-curriculum'
@@ -62,13 +63,27 @@ const CertificationDetailsPage: FC<{}> = () => {
     const isNotEnrolledView: boolean = !progressReady || !progress
     const isCompleted: boolean = progress?.status === TCACertificationProgressStatus.completed
 
+    function renderCertificationCompleted(): ReactNode {
+        return (
+            <div className={styles.certifCompleted}>
+                <div className='body-large-bold'>
+                    Congratulations! You earned the certification.
+                </div>
+                <Button
+                    buttonStyle='primary'
+                    label='View & share your certification'
+                    route={getTCAUserCertificationUrl(certification?.dashedName ?? '', progress?.userHandle ?? '')}
+                />
+            </div>
+        )
+    }
+
     function renderCertificationCurriculum(): ReactNode {
         return (
             <div className={classNames(styles['text-section'], isEnrolled && styles['no-top'])}>
                 <CertificationCurriculum
                     certification={certification}
                     isEnrolled={isEnrolled}
-                    isCompleted={isCompleted}
                     certsProgress={certsProgress}
                 />
             </div>
@@ -87,11 +102,12 @@ const CertificationDetailsPage: FC<{}> = () => {
                 </CertifDetailsContent>
             ) : (
                 <>
+                    {isCompleted && renderCertificationCompleted()}
                     {renderCertificationCurriculum()}
                     <div className={styles['text-section']}>
                         <Button
                             buttonStyle='link'
-                            label='Certification Details'
+                            label='Certification Description'
                             onClick={toggleCertifDetailsModal}
                         />
                     </div>

src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.tsx

@@ -18,7 +18,6 @@ interface CertificationCurriculumProps {
     certification?: TCACertification
     certsProgress?: ReadonlyArray<LearnUserCertificationProgress>
     isEnrolled: boolean
-    isCompleted: boolean
 }
 
 interface ProgressByIdCollection {
@@ -94,7 +93,6 @@ const CertificationCurriculum: FC<CertificationCurriculumProps> = (props: Certif
                 </div>
                 <CertificationSummary
                     certification={props.certification}
-                    isCompleted={props.isCompleted}
                 />
             </div>
         </div>

src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react'
 
-import { IconSolid } from '../../../../../lib'
 import { CertificateBadgeIcon, TCACertification } from '../../../learn-lib'
 
 import styles from './CertificationSummary.module.scss'
 
 interface CertificationSummaryProps {
     certification: TCACertification
-    isCompleted?: boolean
 }
 
 const CertificationSummary: FC<CertificationSummaryProps> = (props: CertificationSummaryProps) => (
@@ -22,11 +20,6 @@ const CertificationSummary: FC<CertificationSummaryProps> = (props: Certificatio
                 {props.certification.title}
             </span>
         </div>
-        {props.isCompleted && (
-            <div className={styles.completedIcon}>
-                <IconSolid.CheckCircleIcon />
-            </div>
-        )}
     </div>
 )