@navinc/base-react-components
Version:
Nav's Pattern Library
38 lines • 1.31 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import PropTypes from 'prop-types';
const StyledFigure = styled.figure `
position: relative;
padding: 0 1em;
margin: 0 0 16px 16px;
`;
const StyledBlockQuote = styled.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 (_jsx(StyledFigure, { children: _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: PropTypes.string,
/** The actual quote */
children: PropTypes.string,
};
export default BlockQuote;
//# sourceMappingURL=block-quote.js.map