Merge branch 'PROD-1573_work-details-solutions' into PROD-1943_css-refactor

Author: brooketopcoder

src-ts/lib/tabs-navbar/TabsNavbar.module.scss

@@ -17,18 +17,27 @@
     gap: 4px;
 
     padding: $pad-md $pad-lg calc($pad-md - 2px);
+    color: $black-80;
     cursor: pointer;
-
+    
     &:global(.active) {
+        color: $black-100;
         .tab-label {
-            color: $black-100;
+            @include font-weight-bold;
+        }
+    }
+
+    &:hover {
+        color: $black-100;
+        background-color: $blue-25;
+        &:global(.active) ~ .active-icon > svg path:last-child {
+            fill: $blue-25;
         }
     }
 }
 
 .tab-label {
     @extend .medium-tab;
-    color: $black-80;
 }
 
 .tab-badge {

src-ts/lib/work-provider/work-functions/index.ts

@@ -2,6 +2,7 @@ export {
     type Work,
     type WorkProgress,
     type WorkProgressStep,
+    type WorkSolution,
     WorkStatus,
     WorkType,
     workFactoryCreate,

src-ts/lib/work-provider/work-functions/work-factory/index.ts

@@ -1,6 +1,7 @@
 export * from './work-progress.model'
 export * from './work-progress-step.model'
 export * from './work-status.enum'
+export * from './work-solution.model'
 export * from './work-type.enum'
 export {
     create as workFactoryCreate,

src-ts/lib/work-provider/work-functions/work-factory/work-solution.model.ts

@@ -0,0 +1,20 @@
+
+export interface WorkSolution {
+    challengeId: number
+    created: Date
+    createdBy: string
+    fileType: string
+    id: string
+    isFileSubmission: boolean
+    legacyChallengeId: number
+    legacySubmissionId: number
+    memberId: number
+    placement: string
+    submissionPhaseId: string
+    submittedDate: Date
+    type: string
+    updated: Date
+    updatedBy: string
+    url: string
+    v5ChallengeId: string
+}

src-ts/tools/index.ts

@@ -1,2 +1,2 @@
 export { default as ToolsRoutes } from './tools.routes'
-export { WorkFeedback, WorkDetailHeader, WorkDetailSummary } from './work'
+export { WorkFeedback, WorkDetailDetails, WorkDetailHeader, WorkDetailSummary, WorkDetailSolutions } from './work'

src-ts/tools/work/index.ts

@@ -1,3 +1,5 @@
+export * from './work-detail-details'
 export * from './work-detail-header'
+export * from './work-detail-solutions'
 export * from './work-detail-summary'
 export * from './work.routes'

src-ts/tools/work/work-detail-details/WorkDetailDetails.module.scss

@@ -0,0 +1,10 @@
+@import "../../../lib/styles";
+
+.wrap {
+  display: flex;
+  padding-bottom: 32px;
+}
+
+.details-content {
+  flex-grow: 2;
+}

src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import { WorkDetailDetailsSidebar } from './work-detail-details-sidebar'
+import styles from './WorkDetailDetails.module.scss'
+
+interface WorkDetailDetailsProps {
+    children: JSX.Element
+}
+
+const WorkDetailDetails: FC<WorkDetailDetailsProps> = (props: WorkDetailDetailsProps) => {
+
+    return (
+        <div className={styles['wrap']}>
+            <div className={styles['details-content']}>
+                {props.children}
+            </div>
+            <WorkDetailDetailsSidebar />
+        </div>
+    )
+}
+
+export default WorkDetailDetails

src-ts/tools/work/work-detail-details/index.ts

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

src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.module.scss

@@ -0,0 +1,22 @@
+@import '../../../../lib/styles';
+
+.wrap {
+    min-width: 323px;
+    padding-left: $pad-xxxxl;
+  
+    border-left: $border-xs solid $black-10;
+    margin-left: $pad-xxxxl;
+    color: $black-100;
+}
+
+.link {
+    display: block;
+    @include font-roboto;
+    @include font-weight-bold;
+    font-size: 14px;
+    line-height: 14px;
+    color: $turq-160;
+    margin-top: $pad-lg;
+    cursor: pointer;
+    text-transform: uppercase;
+}