[WV-326] fixes according to comments

ivanko22 · Apr 14, 2024 · 0724cfc · 0724cfc
1 parent bb4d2f0
commit 0724cfc
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 68 deletions.
diff --git a/src/js/common/components/Politician/PoliticianLinks.jsx b/src/js/common/components/Politician/PoliticianLinks.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Colors from '../Style/Colors';
+
+import OpenExternalWebSite from '../Widgets/OpenExternalWebSite';
+
+const PoliticianLinks = ({ links }) => (
+  <PolitianLinksContainer>
+    {links.map((link) => {
+      const key = Object.keys(link)[0];
+      const value = link[key];
+
+      if (!value) return null;
+
+      return (
+        <OpenExternalWebSite
+          key={key}
+          url={value}
+          target="_blank"
+          className="u-gray-mid"
+          rel="noopener noreferrer"
+          title={key}
+          body={(
+            <LinkConatiner style={{ paddingRight: '12px', paddingBottom: '4px', display: 'flex' }}>
+              {key}
+
+              <IconLink width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 6H6C5.46957 6 4.96086 6.21071 4.58579 6.58579C4.21071 6.96086 4 7.46957 4 8V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H16C16.5304 20 17.0391 19.7893 17.4142 19.4142C17.7893 19.0391 18 18.5304 18 18V12M11 13L20 4M20 4H15M20 4V9" stroke="#9D9D9D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              </IconLink>
+
+            </LinkConatiner>
+          )}
+        />
+      );
+    })}
+  </PolitianLinksContainer>
+);
+
+PoliticianLinks.propTypes = {
+  links: PropTypes.array,
+};
+
+const PolitianLinksContainer = styled.div`
+    display: flex;
+    margin-top: 2px;
+    margin-bottom: 12px;
+`;
+
+const IconLink = styled.svg`
+  margin-left: 4px;
+`;
+
+const LinkConatiner = styled.div`
+  &:hover ${IconLink} path { 
+    stroke: ${Colors.primary}; 
+  }
+`;
+
+export default PoliticianLinks;
diff --git a/src/js/common/components/Style/Colors.js b/src/js/common/components/Style/Colors.js
@@ -10,6 +10,7 @@ const colors = {
   lightGrey: '#E5E6EA',
   ultraLightGrey: '#FAFAFA',
   white: '#ffffff',
+  green: '#007800',
 };
 
 export default colors;
diff --git a/src/js/common/pages/Politician/PoliticianDetailsPage.jsx b/src/js/common/pages/Politician/PoliticianDetailsPage.jsx
@@ -46,7 +46,8 @@ const CampaignNewsItemList = React.lazy(() => import(/* webpackChunkName: 'Campa
 const CampaignShareChunk = React.lazy(() => import(/* webpackChunkName: 'CampaignShareChunk' */ '../../components/Campaign/CampaignShareChunk'));
 const CampaignSupportThermometer = React.lazy(() => import(/* webpackChunkName: 'CampaignSupportThermometer' */ '../../components/CampaignSupport/CampaignSupportThermometer'));
 const OfficeNameText = React.lazy(() => import(/* webpackChunkName: 'OfficeNameText' */ '../../components/Widgets/OfficeNameText'));
-const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../components/Widgets/OpenExternalWebSite'));
+// const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../components/Widgets/OpenExternalWebSite'));
+const PoliticianLinks = React.lazy(() => import(/* webpackChunkName: 'PolitianLinks' */ '../../components/Politician/PoliticianLinks'));
 const PoliticianEndorsementsList = React.lazy(() => import(/* webpackChunkName: 'PoliticianEndorsementsList' */ '../../components/Politician/PoliticianEndorsementsList'));
 const PoliticianRetrieveController = React.lazy(() => import(/* webpackChunkName: 'PoliticianRetrieveController' */ '../../components/Politician/PoliticianRetrieveController'));
 const PoliticianPositionRetrieveController = React.lazy(() => import(/* webpackChunkName: 'PoliticianPositionRetrieveController' */ '../../components/Position/PoliticianPositionRetrieveController'));
@@ -544,38 +545,9 @@ class PoliticianDetailsPage extends Component {
       <PoliticianLinksWrapper>
         <p>More Candidate Information</p>
 
-        <Politicianlinks>
-          {politicianLinksList.map((link) => {
-            const key = Object.keys(link)[0];
-            const value = link[key];
-
-            if (!value) return null;
-
-            return (
-              <OpenExternalWebSite
-                url={value}
-                target="_blank"
-                className="u-gray-mid"
-                rel="noopener noreferrer"
-                title={key}
-                body={(
-                  <div style={{ paddingRight: '12px', paddingBottom: '4px' }}>
-                    {key}
-                    <Launch
-                      style={{
-                        height: 14,
-                        marginLeft: 2,
-                        marginTop: '-3px',
-                        width: 14,
-                      }}
-                    />
-                  </div>
-                )}
-              />
-            );
-          })}
-        </Politicianlinks>
-
+        <PoliticianLinks
+          links={politicianLinksList}
+        />
       </PoliticianLinksWrapper>
     );
 
@@ -1150,27 +1122,17 @@ const PoliticalPartyDiv = styled('div')`
 `;
 
 const PoliticianLinksWrapper = styled('div')`
-  align-items: flex-start;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  flex-direction: column;
 
     p{
       font-size: 18px;
       font-weight: 600;
-      text-align: center;
+      text-align: left;
       padding-top: 18px;
       margin: 0;
     }
   }
 `;
 
-const Politicianlinks = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 2px;
-  margin-bottom: 12px;
-  width: 100%;
-`;
-
 export default withStyles(styles)(PoliticianDetailsPage);
diff --git a/...mmon/stories/HowItWorksWizzard.stories.js → ...ommon/stories/HowItWorksWizard.stories.js b/...mmon/stories/HowItWorksWizzard.stories.js → ...ommon/stories/HowItWorksWizard.stories.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import HowItWorks from '../../components/CompleteYourProfile/CompleteYourProfile2024';
 
 export default {
-  title: 'Design System/Wizzard',
+  title: 'Design System/Wizard',
   component: HowItWorks,
   parameters: {
     layout: 'centered',
@@ -17,7 +17,7 @@ const Container = styled.div`
   height: 100vh;
 `;
 
-export const HowItWorksWizzard = () => (
+export const HowItWorksWizard = () => (
   <Container>
     <HowItWorks />
   </Container>

diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx b/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx
@@ -365,7 +365,7 @@ const HowItWorksContainer = styled('div')`
   justifyContent: 'center';
   alignItems: 'center';
   border-radius: 10px;
-  border: 1px solid #B0B0B0;
+  border: 1px solid ${Colors.grey};
   background: ${Colors.primary50};
   margin-bottom: 22px;
   overflow: hidden;
@@ -379,7 +379,7 @@ const HowItWorksHeader = styled('div')`
   justify-content: space-between;
 
   p {
-    color: ${Colors.white};
+    color: Colors.white;
     font-size: 15px;
     font-style: normal;
     font-weight: 500;

diff --git a/src/js/components/CompleteYourProfile/Step.jsx b/src/js/components/CompleteYourProfile/Step.jsx
@@ -4,20 +4,15 @@ import styled from 'styled-components';
 import Colors from '../../common/components/Style/Colors';
 import StepIcon from './StepIcon';
 
-const Step = ({ onClick, step, label, completed, width }) => {
-  console.log('Step', step);
-
-  return (
-    <HowItWorksStep completed={completed} onClick={onClick} width={width}>
-      <StepIcon
+const Step = ({ onClick, step, label, completed, width }) => (
+  <HowItWorksStep completed={completed} onClick={onClick} width={width}>
+    <StepIcon
        number={step}
        completed={completed}
-      />
-      <p>{label}</p>
-    </HowItWorksStep>
-  );
-};
-
+    />
+    <p>{label}</p>
+  </HowItWorksStep>
+);
 
 Step.propTypes = {
   onClick: PropTypes.func.isRequired,
@@ -32,21 +27,19 @@ const HowItWorksStep = styled.div`
   display: flex;
   width: 33.33%;
   flex-direction: column;
-  align-items: center;
-  // width: ${({ width }) => width};
-  padding: 0 12px;
+  align-items: center;  padding: 0 12px;
   padding-top: 18px;
   cursor: pointer;
-  border-right: 0.5px solid #B0B0B0;
-  border-left: 0.5px solid #B0B0B0;
+  border-right: 0.5px solid ${Colors.grey};
+  border-left: 0.5px solid ${Colors.grey};
 
   &:hover {
-    background-color: #EEEEEE;
+    background-color: ${Colors.ultraLightGrey};
   }
 
   ${({ completed }) => `
   p {
-    color: ${completed ? '#007800' : Colors.primary2024};
+    color: ${completed ? Colors.green : Colors.primary2024};
     text-align: center;
     font-size: 16px;
     font-weight: 400;