@navinc/base-react-components/cjs/block-quote.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.BlockQuote = 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 StyledFigure = styled_components_1.default.figure.withConfig({ displayName: "brc-sc-StyledFigure", componentId: "brc-sc-rxgqiy" }) `
  position: relative;
  padding: 0 16px;
  margin: 0 0 16px 16px;

  ::before {
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    width: 4px;
    border: solid ${({ color = 'navPrimary', theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navPrimary; }} 2px;
    background: ${({ color = 'navPrimary', theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navPrimary; }};
    border-radius: 2px;
  }
`;
const StyledBlockQuote = styled_components_1.default.blockquote.withConfig({ displayName: "brc-sc-StyledBlockQuote", componentId: "brc-sc-w9sl5y" }) `
  && p {
    padding-bottom: 0;
    color: ${({ theme }) => theme.navNeutralDark};
    font-style: italic;
    font-size: 14px;
  }

  margin: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
`;
const BlockQuote = ({ children, color }) => {
    return ((0, jsx_runtime_1.jsx)(StyledFigure, { color: color, children: (0, jsx_runtime_1.jsx)(StyledBlockQuote, { children: children }) }));
};
exports.BlockQuote = BlockQuote;
exports.BlockQuote.propTypes = {
    /** It changes the color of the line to the left of the quote, must be defined in the theme (ex: navPrimary) */
    color: prop_types_1.default.string,
    /** The actual quote */
    children: prop_types_1.default.string,
};
//# sourceMappingURL=block-quote.js.map