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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 (_jsxs(ProgressBarContainer, { children: [_jsx(ProgressBarBackground, { children: _jsx(Progress, { percentComplete: percentComplete }, void 0) }, void 0), _jsx(Copy, Object.assign({ light: true, size: "xs" }, { children: `${stepsComplete}/${maxSteps} complete${hasReachedMaxSteps ? '!' : ''}` }), void 0)] }, void 0));
};
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 }) => (_jsxs(StyledSection, Object.assign({ onClick: onClick }, { children: [_jsx(LeftIconContainer, { children: _jsx(Icon, { name: iconName }, void 0) }, void 0), _jsx(Copy, Object.assign({ bold: true }, { children: copy }), void 0), _jsx(Icon, { name: "actions/carrot-right" }, void 0)] }), void 0));
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 (_jsxs(StandardCard, { children: [_jsxs(TextContainer, { children: [_jsx(Plant, { filename: imageFileName }, void 0), _jsxs("div", { children: [_jsx(StandardCard.Header, { title: title }, void 0), _jsx(Copy, Object.assign({ light: true }, { children: copy }), void 0)] }, void 0)] }, void 0), _jsx(ProgressBar, { maxSteps: maxSteps, stepsComplete: stepsComplete }, void 0), !!sections.length && _jsx(SectionsContainer, { children: sections }, void 0), _jsx(StandardCard.Footer, { actionText: actionText, onAction: onAction }, void 0)] }, void 0));
};
SeedsOfFinancing.Section = Section;
export default SeedsOfFinancing;
//# sourceMappingURL=seeds-of-financing.js.map