@navinc/base-react-components
Version:
Nav's Pattern Library
41 lines • 1.54 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import PropTypes from 'prop-types';
const StyledFigure = styled.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 = 'navBlue', theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navBlue; }} 2px;
background: ${({ color = 'navBlue', theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navBlue; }};
border-radius: 2px;
}
`;
const StyledBlockQuote = styled.blockquote.withConfig({ displayName: "brc-sc-StyledBlockQuote", componentId: "brc-sc-w9sl5y" }) `
&& p {
padding-bottom: 0;
color: ${({ theme }) => theme.neutral500};
font-style: italic;
font-size: 14px;
}
margin: 0 20px;
display: flex;
flex-direction: column;
gap: 16px;
`;
const BlockQuote = ({ children, color }) => {
return (_jsx(StyledFigure, Object.assign({ color: color }, { children: _jsx(StyledBlockQuote, { children: children }) })));
};
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