@navinc/base-react-components/cjs/standard-card.js

Nav's Pattern Library

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = exports.CardFooter = exports.CardHeader = exports.StyledBackButton = exports.Svg = exports.StyledCDNIllustration = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const prop_types_1 = __importDefault(require("prop-types"));
const button_1 = __importDefault(require("./button"));
const icon_js_1 = __importDefault(require("./icon.js"));
const banner_js_1 = __importDefault(require("./banner.js"));
const copy_1 = __importDefault(require("./copy"));
const loading_dots_js_1 = __importDefault(require("./loading-dots.js"));
const header_js_1 = require("./header.js");
const cdn_illustration_js_1 = __importDefault(require("./cdn-illustration.js"));
exports.StyledCDNIllustration = (0, styled_components_1.default)(cdn_illustration_js_1.default) `
  margin-top: 16px;
  height: 180px;
  width: 180px;
`;
const Content = styled_components_1.default.div `
  align-items: center;
  display: flex;
  flex-direction: column;
  ${({ hasImage }) => !hasImage &&
    `
    height: 400px;
    justify-content: center;
  `}

  & > ${loading_dots_js_1.default} {
    color: ${({ theme }) => theme.azure};
  }
`;
const LoadingContent = (_a) => {
    var { imageFilename, title } = _a, props = __rest(_a, ["imageFilename", "title"]);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!title && (0, jsx_runtime_1.jsx)(header_js_1.Header, { children: title }, void 0), (0, jsx_runtime_1.jsxs)(Content, Object.assign({ hasImage: !!imageFilename }, props, { children: [(0, jsx_runtime_1.jsx)(loading_dots_js_1.default, {}, void 0), imageFilename && (0, jsx_runtime_1.jsx)(exports.StyledCDNIllustration, { filename: imageFilename, "data-testid": "card:loading-image" }, void 0)] }), void 0)] }, void 0));
};
LoadingContent.propTypes = {
    className: prop_types_1.default.string,
    imageFilename: prop_types_1.default.string,
    title: prop_types_1.default.string,
};
LoadingContent.displayName = 'LoadingContent';
const BackButton = (0, styled_components_1.default)((_a) => {
    var { onClick, href } = _a, props = __rest(_a, ["onClick", "href"]);
    return !(onClick || href) ? null : ((0, jsx_runtime_1.jsx)(exports.StyledBackButton, Object.assign({ onClick: onClick, href: href }, props, { children: (0, jsx_runtime_1.jsx)(icon_js_1.default, { name: "actions/arrow-back" }, void 0) }), void 0));
}) ``;
BackButton.displayName = 'BackButton';
BackButton.propTypes = {
    onClick: prop_types_1.default.func,
    href: prop_types_1.default.string,
};
const StyledHeader = styled_components_1.default.div `
  position: relative;
  padding-bottom: 16px;
  & > *:not(:first-child) {
    margin-top: 4px;
  }
`;
const Label = (0, styled_components_1.default)(copy_1.default).attrs(() => ({ size: 'sm' })) `
  color: ${({ theme }) => theme.neutral400};
`;
const Title = (0, styled_components_1.default)(header_js_1.Header).attrs(() => ({ size: 'md' })) ``;
const StyledFooter = styled_components_1.default.div `
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  background: ${({ theme }) => theme.white};

  &::before {
    content: '';
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    background: ${({ theme }) => theme.neutral200};
    border-radius: 14px;
  }

  /* For button spacing when there are multiple buttons */
  & > *:not(${BackButton}) {
    margin: 0 8px;
  }
  & > *:first-child:not(${BackButton}) {
    margin-left: 0;
  }
  & > *:last-child:not(${BackButton}) {
    margin-right: 0;
  }
`;
exports.Svg = styled_components_1.default.svg `
  display: block;
`;
exports.StyledBackButton = (0, styled_components_1.default)(button_1.default).attrs(() => ({
    variation: 'noOutline',
})) `
  margin-right: auto;
  padding: 8px;
  color: ${({ theme }) => theme.neutral400};
`;
exports.CardHeader = (0, styled_components_1.default)((_a) => {
    var { children, label, title } = _a, remainingProps = __rest(_a, ["children", "label", "title"]);
    return ((0, jsx_runtime_1.jsxs)(StyledHeader, Object.assign({}, remainingProps, { children: [label && (0, jsx_runtime_1.jsx)(Label, { children: label }, void 0), title && (0, jsx_runtime_1.jsx)(Title, { children: title }, void 0), children] }), void 0));
}) ``;
exports.CardHeader.propTypes = {
    label: prop_types_1.default.string,
    title: prop_types_1.default.string,
};
exports.CardHeader.displayName = 'Header';
exports.CardFooter = (0, styled_components_1.default)((_a) => {
    var { actionText = 'Next', actionForm, actionButtonType, actionDataTestId, onAction, actionHref, isActionDisabled, isLoading, onBack, backHref, actionTrackingContext, actionTarget, children } = _a, remainingProps = __rest(_a, ["actionText", "actionForm", "actionButtonType", "actionDataTestId", "onAction", "actionHref", "isActionDisabled", "isLoading", "onBack", "backHref", "actionTrackingContext", "actionTarget", "children"]);
    return ((0, jsx_runtime_1.jsxs)(StyledFooter, Object.assign({}, remainingProps, { children: [(!!onBack || !!backHref) && ((0, jsx_runtime_1.jsx)(BackButton, { "data-testid": "card:back", type: "button", onClick: onBack, href: backHref }, void 0)), children, (!!onAction || !!actionHref || !!actionForm) && ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ "data-testid": actionDataTestId || 'card:next', onClick: onAction, form: actionForm, href: actionHref, isLoading: isLoading, disabled: isLoading || isActionDisabled, size: "cardButton", variation: "noOutline", trackingContext: actionTrackingContext, target: actionTarget }, (actionButtonType && { type: actionButtonType }), { children: actionText }), void 0))] }), void 0));
}) ``;
exports.CardFooter.displayName = 'Footer';
exports.CardFooter.propTypes = {
    actionText: prop_types_1.default.node,
    actionForm: prop_types_1.default.string,
    actionDataTestId: prop_types_1.default.string,
    actionHref: prop_types_1.default.string,
    actionButtonType: prop_types_1.default.string,
    onAction: prop_types_1.default.func,
    isActionDisabled: prop_types_1.default.bool,
    isLoading: prop_types_1.default.bool,
    onBack: prop_types_1.default.func,
    backHref: prop_types_1.default.string,
    actionTrackingContext: prop_types_1.default.shape({
        type: prop_types_1.default.string,
        context: prop_types_1.default.string,
        category: prop_types_1.default.string,
        payload: prop_types_1.default.shape({
            category: prop_types_1.default.string,
            label: prop_types_1.default.string,
            name: prop_types_1.default.string,
        }),
        options: prop_types_1.default.shape({
            integrations: prop_types_1.default.shape({
                Salesforce: prop_types_1.default.bool,
            }),
        }),
    }),
    actionTarget: prop_types_1.default.string,
};
const CARD_PADDING = 24;
const focusedCSS = `
  text-align: center;
  width: 100%;

  & ${exports.CardHeader} {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
  text-align: center;
}

  & ${Title} {
  max-width: 400px;
}
`;
exports.Card = styled_components_1.default.div `
  position: relative;
  padding: ${CARD_PADDING}px;
  border-radius: 20px;
  background-color: ${({ theme }) => theme.white};
  box-shadow: 0 24px 16px -16px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  & ${banner_js_1.default} {
    margin: -${CARD_PADDING}px -${CARD_PADDING}px 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  ${({ isFocused }) => isFocused && focusedCSS}
`;
exports.Card.displayName = 'StandardCard';
const FocusedContent = styled_components_1.default.div `
  align-items: center;
  display: flex;
  flex-direction: column;

  & > * {
    max-width: 400px;
  }
`;
const TermsFooter = styled_components_1.default.section `
  padding: 16px 32px;
  margin: 24px -24px -24px -24px;
  background-color: ${({ theme }) => theme.neutral100};
`;
exports.Card.Header = exports.CardHeader;
exports.Card.Footer = exports.CardFooter;
exports.Card.BackButton = BackButton;
exports.Card.FocusedContent = FocusedContent;
exports.Card.LoadingContent = LoadingContent;
exports.Card.TermsFooter = TermsFooter;
exports.default = exports.Card;
//# sourceMappingURL=standard-card.js.map