diff --git a/src/js/common/components/Politician/PoliticianLinks.jsx b/src/js/common/components/Politician/PoliticianLinks.jsx new file mode 100644 index 000000000..701ecaa7d --- /dev/null +++ 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 }) => ( + + {links.map((link) => { + const key = Object.keys(link)[0]; + const value = link[key]; + + if (!value) return null; + + return ( + + {key} + + + + + + + )} + /> + ); + })} + +); + +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 index a7d097546..8a8816151 100644 --- 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 index 1c754ae53..8658f3d61 100644 --- 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 {

More Candidate Information

- - {politicianLinksList.map((link) => { - const key = Object.keys(link)[0]; - const value = link[key]; - - if (!value) return null; - - return ( - - {key} - - - )} - /> - ); - })} - - + ); @@ -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/src/js/common/stories/HowItWorksWizzard.stories.js b/src/js/common/stories/HowItWorksWizard.stories.js similarity index 84% rename from src/js/common/stories/HowItWorksWizzard.stories.js rename to src/js/common/stories/HowItWorksWizard.stories.js index c087b98dd..37c586780 100644 --- a/src/js/common/stories/HowItWorksWizzard.stories.js +++ b/src/js/common/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 = () => ( diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx b/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx index e2082c83d..4cf6249e0 100644 --- 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 index 9f266abf1..dc383de6c 100644 --- 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 ( - - ( + + -

{label}

- - ); -}; - + /> +

{label}

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