@navinc/base-react-components/src/seeds-of-financing.js

Nav's Pattern Library

import React from 'react'
import CDNIllustration from './cdn-illustration'
import Copy from './copy'
import Icon from './icon.js'
import StandardCard from './standard-card.js'
import styled from 'styled-components'

const ProgressBarContainer = styled.div`
  align-items: center;
  display: flex;

  ${Copy} {
    margin-left: 16px;
  }
`

const ProgressBarBackground = styled.div`
  background-color: ${({ theme }) => theme.neutral200};
  border-radius: 6px;
  height: 10px;
  width: 152px;
`

const Progress = styled.div`
  background-color: ${({ theme }) => theme.neutral400};
  border-radius: inherit;
  height: 100%;
  width: ${({ percentComplete }) => `${percentComplete}%`};
`

const ProgressBar = ({ maxSteps, stepsComplete }) => {
  const hasReachedMaxSteps = maxSteps === stepsComplete
  const percentComplete = (stepsComplete / maxSteps) * 100

  return (
    <ProgressBarContainer>
      <ProgressBarBackground>
        <Progress percentComplete={percentComplete} />
      </ProgressBarBackground>
      <Copy light size="xs">
        {`${stepsComplete}/${maxSteps} complete${hasReachedMaxSteps ? '!' : ''}`}
      </Copy>
    </ProgressBarContainer>
  )
}

const StyledSection = styled.div`
  align-items: center;
  border: solid 1px ${({ theme }) => theme.border};
  border-radius: 4px;
  display: flex;
  padding: 8px;
  justify-content: space-between;
  cursor: pointer;

  ${Copy} {
    flex: 1;
  }
`

const leftIconSize = '54px'

const LeftIconContainer = styled.div`
  align-items: center;
  color: ${({ theme }) => theme.neutral400};
  display: flex;
  justify-content: center;
  height: ${leftIconSize};
  width: ${leftIconSize};
  margin-right: 8px;
  background-color: ${({ theme }) => theme.greenSheen200};
  border-radius: 50%;
`

const Section = ({ onClick, copy, iconName }) => (
  <StyledSection onClick={onClick}>
    <LeftIconContainer>
      <Icon name={iconName} />
    </LeftIconContainer>
    <Copy bold>{copy}</Copy>
    <Icon name="actions/carrot-right" />
  </StyledSection>
)

const Plant = styled(CDNIllustration)`
  height: 90px;
  min-width: 90px;
  width: 90px;
`

const SectionsContainer = styled.div`
  margin-top: 32px;
  display: grid;
  grid-gap: 8px;
`

const TextContainer = styled.div`
  display: flex;

  ${Plant} {
    margin-right: 8px;
  }

  margin-bottom: 16px;
`

export const SeedsOfFinancing = ({
  actionText,
  copy,
  imageFileName,
  maxSteps,
  onAction,
  stepsComplete,
  sections = [],
  title,
}) => {
  return (
    <StandardCard>
      <TextContainer>
        <Plant filename={imageFileName} />
        <div>
          <StandardCard.Header title={title} />
          <Copy light>{copy}</Copy>
        </div>
      </TextContainer>
      <ProgressBar maxSteps={maxSteps} stepsComplete={stepsComplete} />
      {!!sections.length && <SectionsContainer>{sections}</SectionsContainer>}
      <StandardCard.Footer actionText={actionText} onAction={onAction} />
    </StandardCard>
  )
}

SeedsOfFinancing.Section = Section

export default SeedsOfFinancing