@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
203 lines (183 loc) • 8.45 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var Box = require('../Box/Box.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
const HERO_CONSTANTS = {
mobileHeight: 220,
desktopMinHeight: 460,
logoMaxWidth: 500,
};
const HeroContainer = styledComponents.styled.div `
position: relative;
margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
@media (min-width: ${theme.default.breakpoints.md}px) {
min-height: calc(
${HERO_CONSTANTS.desktopMinHeight}px + ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
);
display: flex;
justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
}
`;
const HeroImage = styledComponents.styled.div `
position: relative;
height: ${HERO_CONSTANTS.mobileHeight}px;
background-color: ${({ $backgroundColor }) => $backgroundColor || 'transparent'};
${({ $hasGradient }) => $hasGradient &&
`
linear-gradient(180deg, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0} 0%, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T30} 100%);
background-size: 100% 33.33%;
background-repeat: no-repeat;
background-position: bottom;
`}
@media (min-width: ${theme.default.breakpoints.md}px) {
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
`;
const LogoImageWrap = styledComponents.styled.div `
position: relative;
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
`;
const LogoImageContainer = styledComponents.styled.div `
position: absolute;
top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
display: flex;
align-items: center;
justify-content: center;
max-width: ${HERO_CONSTANTS.logoMaxWidth}px;
margin: 0 auto;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
@media (min-width: ${theme.default.breakpoints.md}px) {
top: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
left: 50%;
}
@media (min-width: ${theme.default.breakpoints.lg}px) {
left: calc(min(64%, 750px));
}
`;
const ContentWrap = styledComponents.styled.div `
width: 100%;
padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
margin: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)} auto 0;
z-index: 1;
@media (min-width: ${theme.default.breakpoints.md}px) {
display: flex;
align-items: flex-end;
padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0;
margin: 0 auto;
justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
}
`;
const Content = styledComponents.styled(Box.default).attrs({
elevation: 'extraHigh',
padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2),
}) `
position: relative;
text-align: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'left')};
@media (min-width: ${theme.default.breakpoints.md}px) {
padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
width: 50%;
max-width: 650px;
}
@media (min-width: ${theme.default.breakpoints.lg}px) {
padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
width: 60%;
margin-left: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left'
? '0'
: `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)}`};
}
`;
const LabelContainer = styledComponents.styled.div `
margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
`;
const TextContent = styledComponents.styled.div `
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
color: ${theme.default.color.text.black};
font-family: ${theme.default.fontFamily.default};
}
p {
margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
color: ${theme.default.color.text.black};
font-family: ${theme.default.fontFamily.default};
line-height: ${theme.default.lineHeight.default};
&:last-child {
margin-bottom: 0;
}
}
`;
const CtaArea = styledComponents.styled.div `
margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)} 0 0;
display: flex;
flex-direction: column;
gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
justify-content: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'flex-start')};
@media (min-width: ${theme.default.breakpoints.md}px) {
flex-direction: row;
margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0 0;
}
`;
const renderImage = (ImageComponent, imageProps) => {
if (!imageProps)
return null;
if (typeof ImageComponent === 'string') {
// eslint-disable-next-line jsx-a11y/alt-text, react/jsx-props-no-spreading
return React__default.default.createElement("img", Object.assign({}, imageProps));
}
// eslint-disable-next-line react/jsx-props-no-spreading
return React__default.default.createElement(ImageComponent, Object.assign({}, imageProps));
};
const Hero = (_a) => {
var { variant = 'default', headingLevel = 'h1', Image = 'img', LogoImage = 'img', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
const HeadingTag = headingLevel;
return (React__default.default.createElement(HeroContainer, { "$variant": variant, className: props.className, "data-testid": dataTestId },
React__default.default.createElement(HeroImage, { "$hasGradient": props.hasGradient, "$backgroundColor": props.backgroundColor },
props.logoImageProps && (React__default.default.createElement(LogoImageWrap, null,
React__default.default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))),
!props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)),
React__default.default.createElement(ContentWrap, { "$variant": variant },
React__default.default.createElement(Content, { "$variant": variant },
props.label && React__default.default.createElement(LabelContainer, null, props.label),
React__default.default.createElement(TextContent, null,
props.heading && React__default.default.createElement(HeadingTag, null, props.heading),
props.description),
(props.primaryCta || props.secondaryCta) && (React__default.default.createElement(CtaArea, { "$variant": variant },
props.primaryCta,
props.secondaryCta))))));
};
exports.default = Hero;