#97 - Adds observer to add breadcrumbs + CSS styling adjustments

UXPin · Aug 3, 2020 · 320d91f · 320d91f
1 parent ae708fe
commit 320d91f
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 28 deletions.
diff --git a/src/components/topBar/top-bar.jsx b/src/components/topBar/top-bar.jsx
@@ -6,19 +6,24 @@ import { StyledTopBar, StyledBrand } from './top-bar.styles';
 import Logo from '../logo/logo';
 import Social from '../social/social';
 
-const TopBar = ({ scroll }) => (
+const TopBar = ({ scroll, breadcrumbs }) => (
   <StyledTopBar scroll={scroll} id="top-bar">
     <StyledBrand scroll={scroll}>
       <Logo tab={1} />
-      <figcaption>
-        <Link
-          to="/"
-          tabIndex={1}
-          title="UXPin - The Design Systems Platform"
-        >
-          The Design Systems Platform
-        </Link>
-      </figcaption>
+      { breadcrumbs
+        ? (<figcaption className="d-block">{breadcrumbs}</figcaption>)
+        : (
+          <figcaption>
+            <Link
+              to="/"
+              tabIndex={1}
+              title="UXPin - The Design Systems Platform"
+            >
+              The Design Systems Platform
+            </Link>
+          </figcaption>
+        )}
+
     </StyledBrand>
     <Social
       networks={['twitter', 'facebook', 'linkedin']}
@@ -30,10 +35,12 @@ const TopBar = ({ scroll }) => (
 
 TopBar.propTypes = {
   scroll: PropTypes.bool,
+  breadcrumbs: PropTypes.string,
 };
 
 TopBar.defaultProps = {
   scroll: false,
+  breadcrumbs: '',
 };
 
 export { TopBar as default };
diff --git a/src/components/topBar/top-bar.styles.jsx b/src/components/topBar/top-bar.styles.jsx
@@ -74,6 +74,14 @@ const StyledBrand = styled.figure`
         border-bottom: 1px solid ${brand.typography.colorRegular};
       }
     }
+
+    &.d-block {
+      opacity: 1;
+      text-transform: capitalize;
+      color: #000;
+      font-size: 16px;
+      line-height: 2em;
+    }
   }
 `;
 

diff --git a/src/containers/detailsPage/data-row.jsx b/src/containers/detailsPage/data-row.jsx
@@ -56,6 +56,7 @@ export function DataRow({ row }) {
   return (
     <tr>
       <td>{label}</td>
+      <td className="no-border" />
       <td>{value}</td>
     </tr>
   );

diff --git a/src/containers/detailsPage/details-page.jsx b/src/containers/detailsPage/details-page.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
 
 import SectionHeader from '../../components/sectionHeader/section-header';
@@ -59,29 +59,57 @@ const DATA_TABLE = [
 export default function DetailsPage() {
   const { id } = useParams();
   const data = getRow(id);
+  const [isBreadcrumbsVisible, triggerBreadcrumbs] = useState(0);
 
   if (!data) {
     return (
       <Redirect to="/" />
     );
   }
 
-  const header = `what does ${data.company.data}'s design system include?`;
+  useEffect(() => {
+    const sections = document.querySelectorAll('#header');
+    const config = {
+      rootMargin: '-80px 0px 0px',
+    };
+
+    const observer = new IntersectionObserver(((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          triggerBreadcrumbs(false);
+        } else {
+          triggerBreadcrumbs(true);
+        }
+      });
+    }), config);
 
+    sections.forEach((section) => {
+      observer.observe(section);
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+
+  const header = `what does ${data.company.data}'s design system include?`;
+  const breadcrumbs = `/ ${data.company.data}'s ${data.system.data}`;
   return (
     <Container>
       <StyledHeaderContainer id="header">
-        <TopBar />
+        <TopBar scroll breadcrumbs={isBreadcrumbsVisible ? breadcrumbs : ''} />
       </StyledHeaderContainer>
       <div className="container">
-        <p className="h3 mv-0">The</p>
-        <h1 className="h1">{data.company.data}</h1>
-        <p className="h3 mt-2 mb-0">design system is called</p>
-        <h2 className="h1 mb-2">{data.system.data}</h2>
-        <ul className="list-unstyled mt-2">
+        <section id="header">
+          <p className="h3 mv-0">The</p>
+          <h1 className="h1">{data.company.data}</h1>
+          <p className="h3 mt-1 mb-0">design system is called</p>
+          <h2 className="h1 mb-2">{data.system.data}</h2>
+        </section>
+        <ul className="list-unstyled">
           {data.websiteDocumentation.url
             ? (
-              <li className="mb-1">
+              <li className="lh-2">
                 website
                 {' '}
                 <a href={data.websiteDocumentation.url} target="_blank" rel="noopener noreferrer">
@@ -92,7 +120,7 @@ export default function DetailsPage() {
             : ''}
           {data.repository.url
             ? (
-              <li>
+              <li className="lh-2">
                 repository
                 {' '}
                 <a href={data.repository.url} target="_blank" rel="noopener noreferrer">

diff --git a/src/containers/detailsPage/section-data.jsx b/src/containers/detailsPage/section-data.jsx
@@ -11,6 +11,11 @@ export function SectionData({
         {title}
       </strong>
       <table className="properties-table">
+        <colgroup>
+          <col width="40%" />
+          <col width="50px" />
+          <col />
+        </colgroup>
         <tbody>
           {children}
         </tbody>

diff --git a/src/containers/detailsPage/styled-container.jsx b/src/containers/detailsPage/styled-container.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { heading } from '../../style_tokens/tokens';
+import background from '../../assets/background.png';
 
 export function Container({ children }) {
   return (
@@ -26,14 +27,20 @@ const StyledContainer = styled.div`
     justify-content: center;
     margin: 0 auto;
     width: 72%;
-    background-repeat: no-repeat;
+    background: url(${background});
+    background-repeat: space;
     background-position: center 80px;
+    color: #323335;
 
     font-family: ${heading.fontFamily};
     text-align: left;
 
-    margin: 150px auto 90px auto;
+    margin: 150px auto 56px auto;
 
+    .h1, .h2 {
+      text-transform: capitalize;
+      color: #000;
+    }
     .h1 {
       position: relative;
       margin: 0;
@@ -43,6 +50,7 @@ const StyledContainer = styled.div`
       letter-spacing: -13px;
       margin-inline-start: -7px;
       text-shadow: ${heading.shadow};
+      word-break: break-word;
     }
     .h2 {
       font-size: 42px;
@@ -84,10 +92,14 @@ const StyledContainer = styled.div`
     .pl-1 {
       padding-left: 0.5rem;
     }
+    .lh-2 {
+      line-height: 2rem;
+    }
 
     .list-unstyled {
       list-style: none;
       padding: 0;
+      margin: 0;
     }
 
     .text-center {
@@ -103,25 +115,28 @@ const StyledContainer = styled.div`
       grid-template-columns: 325px 1fr;
       column-gap: 2rem;
       width: 100%;
+      margin-bottom: 80px;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
 
       .h2 {
         width: 325px;
         display: inline-block;
+        color: #323335
       }
       &-table {
         width: 100%;
-        color: #323335;
-        border-spacing: 3rem;
-        margin: -3rem 0;
         font-weight: 300;
 
         td {
           border-bottom: 1px solid #ededed;
-          padding: 0.5rem 0;
+          padding: 0.75rem 0;
           text-transform: capitalize;
 
-          &:first-child {
-            width: 40%;
+          &.no-border {
+            border-color: transparent;
           }
         }
       }