@navinc/base-react-components
Version:
Nav's Pattern Library
43 lines • 1.69 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
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 `
position: relative;
padding: 0 1em;
margin: 0 0 16px 16px;
`;
const StyledBlockQuote = styled_components_1.default.blockquote `
&& p {
padding-bottom: 0;
color: ${({ theme }) => theme.neutral500};
font-style: italic;
font-size: 14px;
}
& ::before {
content: '';
height: 100%;
position: absolute;
left: 0;
width: 4px;
border: solid ${({ color, theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navBlue; }} 2px;
background: ${({ color, theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navBlue; }};
border-radius: 2px;
}
margin: 0 20px;
`;
const BlockQuote = ({ children, color }) => {
return ((0, jsx_runtime_1.jsx)(StyledFigure, { children: (0, jsx_runtime_1.jsx)(StyledBlockQuote, Object.assign({ color: color }, { children: children }), void 0) }, void 0));
};
BlockQuote.propTypes = {
/** It changes the color of the line to the left of the quote, must be defined in the theme (ex: navBlue) */
color: prop_types_1.default.string,
/** The actual quote */
children: prop_types_1.default.string,
};
exports.default = BlockQuote;
//# sourceMappingURL=block-quote.js.map