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

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SeedsOfFinancing = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const cdn_illustration_1 = __importDefault(require("./cdn-illustration"));
const copy_1 = __importDefault(require("./copy"));
const icon_js_1 = __importDefault(require("./icon.js"));
const standard_card_js_1 = __importDefault(require("./standard-card.js"));
const styled_components_1 = __importDefault(require("styled-components"));
const ProgressBarContainer = styled_components_1.default.div `
  align-items: center;
  display: flex;

  ${copy_1.default} {
    margin-left: 16px;
  }
`;
const ProgressBarBackground = styled_components_1.default.div `
  background-color: ${({ theme }) => theme.neutral200};
  border-radius: 6px;
  height: 10px;
  width: 152px;
`;
const Progress = styled_components_1.default.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 ((0, jsx_runtime_1.jsxs)(ProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(ProgressBarBackground, { children: (0, jsx_runtime_1.jsx)(Progress, { percentComplete: percentComplete }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ light: true, size: "xs" }, { children: `${stepsComplete}/${maxSteps} complete${hasReachedMaxSteps ? '!' : ''}` }), void 0)] }, void 0));
};
const StyledSection = styled_components_1.default.div `
  align-items: center;
  border: solid 1px ${({ theme }) => theme.border};
  border-radius: 4px;
  display: flex;
  padding: 8px;
  justify-content: space-between;
  cursor: pointer;

  ${copy_1.default} {
    flex: 1;
  }
`;
const leftIconSize = '54px';
const LeftIconContainer = styled_components_1.default.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 }) => ((0, jsx_runtime_1.jsxs)(StyledSection, Object.assign({ onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(LeftIconContainer, { children: (0, jsx_runtime_1.jsx)(icon_js_1.default, { name: iconName }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ bold: true }, { children: copy }), void 0), (0, jsx_runtime_1.jsx)(icon_js_1.default, { name: "actions/carrot-right" }, void 0)] }), void 0));
const Plant = (0, styled_components_1.default)(cdn_illustration_1.default) `
  height: 90px;
  min-width: 90px;
  width: 90px;
`;
const SectionsContainer = styled_components_1.default.div `
  margin-top: 32px;
  display: grid;
  grid-gap: 8px;
`;
const TextContainer = styled_components_1.default.div `
  display: flex;

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

  margin-bottom: 16px;
`;
const SeedsOfFinancing = ({ actionText, copy, imageFileName, maxSteps, onAction, stepsComplete, sections = [], title, }) => {
    return ((0, jsx_runtime_1.jsxs)(standard_card_js_1.default, { children: [(0, jsx_runtime_1.jsxs)(TextContainer, { children: [(0, jsx_runtime_1.jsx)(Plant, { filename: imageFileName }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(standard_card_js_1.default.Header, { title: title }, void 0), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ light: true }, { children: copy }), void 0)] }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(ProgressBar, { maxSteps: maxSteps, stepsComplete: stepsComplete }, void 0), !!sections.length && (0, jsx_runtime_1.jsx)(SectionsContainer, { children: sections }, void 0), (0, jsx_runtime_1.jsx)(standard_card_js_1.default.Footer, { actionText: actionText, onAction: onAction }, void 0)] }, void 0));
};
exports.SeedsOfFinancing = SeedsOfFinancing;
exports.SeedsOfFinancing.Section = Section;
exports.default = exports.SeedsOfFinancing;
//# sourceMappingURL=seeds-of-financing.js.map