Merge branch 'PROD-1529_page-footer' into PROD-1573_work-details-solutions

Author: brooketopcoder

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

@@ -15,18 +15,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/tools/index.ts

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

src-ts/tools/work/index.ts

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

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;
+}

src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx

@@ -0,0 +1,55 @@
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { OrderContractModal, PrivacyPolicyModal, TermsModal } from '../../../../lib'
+
+import styles from './WorkDetailDetailsSidebar.module.scss'
+
+interface WorkDetailDetailsSidebarProps {
+}
+
+const WorkDetailDetailsSidebar: FC<WorkDetailDetailsSidebarProps> = (props: WorkDetailDetailsSidebarProps) => {
+    const [isOrderContractModalOpen, setIsOrderContractModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [isPrivacyPolicyModalOpen, setIsPrivacyPolicyModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [isTermsModalOpne, setIsTermsModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+
+    return (
+        <>
+            <OrderContractModal isOpen={isOrderContractModalOpen} onClose={() => setIsOrderContractModalOpen(false)} />
+            <PrivacyPolicyModal isOpen={isPrivacyPolicyModalOpen} onClose={() => setIsPrivacyPolicyModalOpen(false)} />
+            <TermsModal isOpen={isTermsModalOpne} onClose={() => setIsTermsModalOpen(false)} />
+
+            <div className={styles['wrap']}>
+                <h4>supporting information</h4>
+                <a
+                    className={styles['link']}
+                    role='button'
+                    tabIndex={0}
+                    onClick={() => setIsOrderContractModalOpen(true)}
+                    rel='noopener noreferrer'
+                >
+                    ORDER CONTRACT
+                </a>
+                <a
+                    className={styles['link']}
+                    role='button'
+                    tabIndex={0}
+                    onClick={() => setIsPrivacyPolicyModalOpen(true)}
+                    rel='noopener noreferrer'
+                >
+                    PRIVACY POLICY
+                </a>
+                <a
+                    className={styles['link']}
+                    role='button'
+                    tabIndex={0}
+                    onClick={() => setIsTermsModalOpen(true)}
+                    rel='noopener noreferrer'
+                >
+                    TERMS
+                </a>
+            </div>
+        </>
+    )
+}
+
+export default WorkDetailDetailsSidebar

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

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