@lote-design-system/marketing-blocks
Version:
146 lines (135 loc) • 6.03 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { rem } from 'polished';
import { Container, Button, Text } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components
/**
* Returns the bgAttachment value
* @param attachment {boolean} - The attachment parameter
* @return {string} - Returns the value
*/
const getAttachmentVal = attachment => attachment ? 'fixed' : 'scroll';
const BackgroundImage = styled.div.withConfig({
displayName: "Hero3__BackgroundImage",
componentId: "i4fgdu-0"
})(["", ";"], ({
bgImage,
bgAttachment,
invert
}) => {
// Default `inverted` is undefined, so dark layer will render
if (invert) {
return css(["background-image:linear-gradient( 180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100% ),linear-gradient( to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100% ),url(", ");background-position:center center;background-repeat:no-repeat;background-attachment:", ";background-color:#f8f8f8;background-size:cover;"], bgImage, getAttachmentVal(bgAttachment));
} else {
return css(["position:relative;background:url(", ") no-repeat center center ", " #f8f8f8;background-size:cover;&:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.55);}"], bgImage, getAttachmentVal(bgAttachment));
}
});
const HeroBody = styled.div.withConfig({
displayName: "Hero3__HeroBody",
componentId: "i4fgdu-1"
})(["padding:", " 0;flex-grow:1;flex-shrink:0;align-items:center;display:flex;"], rem(192));
const ContainerModify = styled(Container).withConfig({
displayName: "Hero3__ContainerModify",
componentId: "i4fgdu-2"
})(["max-width:", ";text-align:center;flex-grow:1;flex-shrink:1;margin:0 auto;position:relative;width:auto;"], ({
theme
}) => theme.maxContainerWidth);
const HeroTitle = styled(Text).withConfig({
displayName: "Hero3__HeroTitle",
componentId: "i4fgdu-3"
})(["max-width:992px;margin:0 auto ", ";font-weight:700;line-height:1.2;color:#fff;span{display:block;&:last-child{color:", ";}}"], rem(16), ({
theme: {
colors
}
}) => colors.primary);
const HeroDescription = styled.p.withConfig({
displayName: "Hero3__HeroDescription",
componentId: "i4fgdu-4"
})(["color:#fff;max-width:660px;margin:0 auto ", ";font-size:20px;"], rem(16));
const HeroLinkWrapper = styled.div.withConfig({
displayName: "Hero3__HeroLinkWrapper",
componentId: "i4fgdu-5"
})(["display:flex;align-items:center;justify-content:center;flex-wrap:wrap;"]);
const HeroLink = styled(Button).withConfig({
displayName: "Hero3__HeroLink",
componentId: "i4fgdu-6"
})(["&{padding:", " ", ";font-weight:500;display:block;width:100%;margin:8px;}", "{width:auto;display:inline-block;}"], rem(16), rem(48), ({
theme
}) => theme.mediaQueries.sm); // <= End Dependent styled-components
const linkSchema = [{
id: 1,
href: '/signin',
text: 'Signup',
variation: 'whiteSecondary'
}, {
id: 2,
href: '/signup',
text: 'Signin',
variation: 'fill'
}];
const linkShape = {
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
href: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
variation: PropTypes.string.isRequired,
color: PropTypes.string
};
const propTypes = {
/** The Major words for the hero section. */
majorWords: PropTypes.string.isRequired,
/** The Minor words for the hero section. */
minorWords: PropTypes.string.isRequired,
/** The description for the hero section. */
description: PropTypes.string.isRequired,
/** The link below the description. */
links: PropTypes.arrayOf(PropTypes.shape(linkShape)).isRequired,
/** It src for the background-image. */
backgroundImageSource: PropTypes.string.isRequired,
/** The background-attachment sets whether a background image scrolls with the
rest of the page, or is fixed.*/
backgroundImageAttachment: PropTypes.bool,
/** Add layers will make your background image darker or whiter. */
inverted: PropTypes.bool
};
const defaultProps = {
majorWords: 'Web Design Platform',
minorWords: 'for All Creatives',
description: 'When you design with us, every stroke gets code generated ready to go live. CMS, IDE and Analytics are integrated for seamless customizations. Cross-team collaboration is built along every step.',
links: linkSchema,
backgroundImageSource: 'https://images.unsplash.com/photo-1433838552652-f9a46b332c40',
backgroundImageAttachment: true,
inverted: true
};
export const Hero3 = props => {
const {
majorWords,
minorWords,
description,
links,
backgroundImageSource,
backgroundImageAttachment,
inverted
} = props,
attributes = _objectWithoutProperties(props, ["majorWords", "minorWords", "description", "links", "backgroundImageSource", "backgroundImageAttachment", "inverted"]);
return /*#__PURE__*/React.createElement(BackgroundImage, _extends({
bgImage: backgroundImageSource,
bgAttachment: backgroundImageAttachment,
invert: inverted
}, attributes), /*#__PURE__*/React.createElement(HeroBody, null, /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(HeroTitle, {
fSize: 64
}, /*#__PURE__*/React.createElement("span", null, majorWords), /*#__PURE__*/React.createElement("span", null, minorWords)), /*#__PURE__*/React.createElement(HeroDescription, null, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/React.createElement(HeroLinkWrapper, null, links.map(link => {
return /*#__PURE__*/React.createElement(HeroLink, {
key: link.id,
href: link.href,
color: link.color,
variation: link.variation
}, link.text);
})) : null)));
};
Hero3.propTypes = propTypes;
Hero3.defaultProps = defaultProps;