Merge pull request #252 from CivicDataLab/251-add-policies-in-about-page

add Policies component and integrate into About page

Author: sanjaypinna

src/components/Policies.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from 'styled-components';
+import TeamHomePageStyle from '../styles/TeamHomePage';
+import MainContainer from '../styles/MainContainer';
+import HeroText from '../styles/HeroText';
+import StandardGrid from '../styles/StandardGrid';
+import { MiniTeam } from '../components/MiniTeamSection';
+
+const PoliciesStyle = styled(MiniTeam)`
+  a {
+    display: block;
+    font-weight: 500;
+    color: #0da3b7;
+    text-decoration: none;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #0da3b7;
+    margin: 20px 0;
+
+    &:hover {
+      color: #1dcccc;
+    }
+  }
+
+  .upper-content-section {
+    max-width: 100%;
+  }
+
+  h1 {
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
+
+  @media (min-width: 1280px) {
+    width: 80%;
+  }
+`;
+
+const PoliciesStyleAbout = styled(TeamHomePageStyle)`
+  a {
+    display: block;
+    font-weight: 500;
+    color: #0da3b7;
+    text-decoration: none;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #0da3b7;
+    margin: 20px 0;
+
+    &:hover {
+      color: #1dcccc;
+    }
+  }
+
+  .upper-content-section {
+    max-width: 100%;
+  }
+
+  h1 {
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
+`;
+
+const Policies = ({ policies }) => {
+  return (
+    <>
+      <PoliciesStyle>
+        <h3>Policies</h3>
+        <div>
+          {policies?.map((resource) => (
+            <a key={resource?.link} href={resource?.link} target="_blank" rel="noopener noreferrer">
+              {resource?.title}
+            </a>
+          ))}
+        </div>
+      </PoliciesStyle>
+    </>
+  );
+};
+
+export const PoliciesAbout = ({ policies }) => {
+  return (
+    <MainContainer>
+      <PoliciesStyleAbout>
+        <StandardGrid>
+          <div className={'content upper-content-section'}>
+            <HeroText className={'section-heading'}>policies</HeroText>
+          </div>
+          <div className={'content lower-content-section'}>
+            <hr />
+            {policies?.map((resource) => (
+              <a key={resource?.link} href={resource?.link} target="_blank" rel="noopener noreferrer">
+                {resource?.title}
+              </a>
+            ))}
+          </div>
+        </StandardGrid>
+      </PoliciesStyleAbout>
+    </MainContainer>
+  );
+};
+
+export default Policies;

src/pages/about.js

@@ -16,6 +16,7 @@ import Seo from '../components/Seo/Seo';
 import StandardGrid from '../styles/StandardGrid';
 import { PillarImages } from '../components/OurPillars';
 import { ResourcesAbout } from '../components/Resources';
+import { PoliciesAbout } from '../components/Policies';
 import AboutBackground from '../components/AboutBackground';
 
 const HeroSection = styled(Section)`
@@ -160,6 +161,29 @@ const resources = [
   }
 ];
 
+const policies = [
+  {
+    link: 'https://drive.google.com/file/d/1i3zj9-pCJ-oOVp4g83RTExqKzHkEp6Wq/view?usp=drive_link',
+    title: 'Health & Safety'
+  },
+  {
+    link: 'https://drive.google.com/file/d/1fDQ-X4PV_GQXYb4jELf3S5uRZOC_QeiH/view?usp=drive_link',
+    title: 'Environment & Sustainability'
+  },
+  {
+    link: 'https://drive.google.com/file/d/1p1TGkLeZlPgstbByFNB-Ksk62EnIWHRW/view?usp=drive_link',
+    title: 'Safeguarding'
+  },
+  {
+    link: 'https://drive.google.com/file/d/16xsSLdgk76Y7-1Dd9AaS-Z2lRXY22lEq/view?usp=drive_link',
+    title: 'Whistleblowing'
+  },
+  {
+    link: 'https://drive.google.com/file/d/1I0rebTUbmhrVtli_hNwLOgRL6vN912kR/view?usp=drive_link',
+    title: 'Modern Slavery'
+  }
+];
+
 const About = ({ data }) => {
   const values = data.allMarkdownRemark.edges;
 
@@ -214,6 +238,8 @@ const About = ({ data }) => {
           </ValuesSection>
         </MainContainer>
         <ResourcesAbout resources={resources} />
+        <PoliciesAbout policies={policies} />
+
         <TeamHomePage />
         <WorkHomePage />
         <CivicDays />