@lote-design-system/marketing-blocks
Version:
253 lines (212 loc) • 10.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Hero2 = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _core = require("@lote-design-system/core");
// => Dependent styled-components
// Our main component depends upon the following styled-components
// This container is very important component for the Nav aligning
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
displayName: "Hero2__ContainerModify",
componentId: "sc-1uplca8-0"
})(["max-width:", ";"], function (_ref) {
var theme = _ref.theme;
return theme.maxContainerWidth;
}); // Hero
var SectionHero = _styledComponents["default"].div.withConfig({
displayName: "Hero2__SectionHero",
componentId: "sc-1uplca8-1"
})(["position:relative;padding:96px 0;background-color:", ";"], function (_ref2) {
var theme = _ref2.theme;
return theme.colors.white;
});
var ColumnLeft = (0, _styledComponents["default"])(_core.Column).withConfig({
displayName: "Hero2__ColumnLeft",
componentId: "sc-1uplca8-2"
})(["text-align:center;margin-bottom:32px;", "{text-align:left;}"], function (_ref3) {
var theme = _ref3.theme;
return theme.mediaQueries.lg;
});
var ColumnRight = (0, _styledComponents["default"])(_core.Column).withConfig({
displayName: "Hero2__ColumnRight",
componentId: "sc-1uplca8-3"
})(["display:none;", "{display:flex;}"], function (_ref4) {
var theme = _ref4.theme;
return theme.mediaQueries.lg;
});
var JumboTron = _styledComponents["default"].div.withConfig({
displayName: "Hero2__JumboTron",
componentId: "sc-1uplca8-4"
})(["position:relative;"]); // Heading
var JumboTronH1 = _styledComponents["default"].h1.withConfig({
displayName: "Hero2__JumboTronH1",
componentId: "sc-1uplca8-5"
})(["font-size:32px;font-weight:700;line-height:1.2;color:", ";margin-bottom:12px;span{color:", ";}"], function (_ref5) {
var theme = _ref5.theme;
return theme.colors.text.title;
}, function (_ref6) {
var theme = _ref6.theme;
return theme.colors.primary;
});
var JumboTronP = _styledComponents["default"].p.withConfig({
displayName: "Hero2__JumboTronP",
componentId: "sc-1uplca8-6"
})(["font-size:16px;color:", ";margin-bottom:18px;"], function (_ref7) {
var theme = _ref7.theme;
return theme.colors.text.title;
});
var JumboTronH5 = _styledComponents["default"].h5.withConfig({
displayName: "Hero2__JumboTronH5",
componentId: "sc-1uplca8-7"
})(["font-size:18px;font-weight:500;color:", ";margin-bottom:12px;"], function (_ref8) {
var theme = _ref8.theme;
return theme.colors.text.title;
});
var JumboTronForm = _styledComponents["default"].form.withConfig({
displayName: "Hero2__JumboTronForm",
componentId: "sc-1uplca8-8"
})(["margin-top:16px;"]); // NewsletterGroup
var NewsletterGroup = _styledComponents["default"].div.withConfig({
displayName: "Hero2__NewsletterGroup",
componentId: "sc-1uplca8-9"
})(["> input{margin-bottom:12px;}", "{display:flex;flex-wrap:wrap;align-items:stretch;> input{flex:1 1 auto;width:1%;margin-bottom:0;}}"], function (_ref9) {
var theme = _ref9.theme;
return theme.mediaQueries.sm;
});
var GroupAppend = _styledComponents["default"].div.withConfig({
displayName: "Hero2__GroupAppend",
componentId: "sc-1uplca8-10"
})(["> button{width:100%;}", "{display:flex;margin-left:16px;}"], function (_ref10) {
var theme = _ref10.theme;
return theme.mediaQueries.sm;
});
var NewsletterButton = (0, _styledComponents["default"])(_core.Button).withConfig({
displayName: "Hero2__NewsletterButton",
componentId: "sc-1uplca8-11"
})(["font-weight:700;"]); // -- End --
var JumboTronTextEnd = _styledComponents["default"].span.withConfig({
displayName: "Hero2__JumboTronTextEnd",
componentId: "sc-1uplca8-12"
})(["display:block;font-size:16px;color:", ";margin-top:12px;a{color:", ";text-decoration:underline;transition:color 0.4s linear;&:hover{color:", ";}}"], function (_ref11) {
var theme = _ref11.theme;
return theme.colors.text.primary;
}, function (_ref12) {
var theme = _ref12.theme;
return theme.colors.primary;
}, function (_ref13) {
var theme = _ref13.theme;
return theme.palettes.primary[6];
});
var Illustration = _styledComponents["default"].div.withConfig({
displayName: "Hero2__Illustration",
componentId: "sc-1uplca8-13"
})(["> svg,> img{display:block;max-width:100%;height:auto;}"]); // <= End Dependent styled-components
var propTypes = {
/** The Major words for the hero section. */
majorWords: _propTypes["default"].string.isRequired,
/** The Minor words for the hero section. */
minorWords: _propTypes["default"].string.isRequired,
/** The description for the hero section. */
description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
/** The newsletter text for the form. */
newsletterText: _propTypes["default"].string.isRequired,
/** The input properties for the Newsletter. */
input: _propTypes["default"].shape({
placeholder: _propTypes["default"].string.isRequired
}).isRequired,
/** The button properties for the Newsletter. */
button: _propTypes["default"].shape({
text: _propTypes["default"].string.isRequired,
variation: _propTypes["default"].string.isRequired,
color: _propTypes["default"].string
}).isRequired,
/** The policy text for the Newsletter. */
policyText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
/** The illustration for the hero. */
illustration: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
/** The columns will move from left to right. */
shift: _propTypes["default"].bool
};
var description = /*#__PURE__*/_react["default"].createElement("span", null, "Website building is chaotic. Across ", /*#__PURE__*/_react["default"].createElement("strong", null, "teams"), ", there are design", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, "apps"), ", coding editors, prototyping tools, tickets, style guides. When you design with our tool, every stroke gets code generated ready to go live. ", /*#__PURE__*/_react["default"].createElement("strong", null, "CMS"), ", ", /*#__PURE__*/_react["default"].createElement("strong", null, "IDE"), " and", /*#__PURE__*/_react["default"].createElement("strong", null, " Analytics"), " are integrated for seamless customizations. Cross-team collaboration is built along every step. Go from all-over-the-place handoffs, to building cozily hands-on.");
var defaultProps = {
majorWords: 'Turn ideas to live web',
minorWords: 'experiences',
description: description,
input: {
placeholder: 'Enter your email'
},
button: {
text: 'Notify me',
variation: 'fill'
},
newsletterText: "Sign up to get notification when it's ready.",
policyText: /*#__PURE__*/_react["default"].createElement("span", null, "We care about the protection of your data. Read", ' ', /*#__PURE__*/_react["default"].createElement("a", {
href: "/"
}, "Privacy Policy"), "."),
illustration: 'https://i.imgur.com/v4uQCOe.png',
shift: false
};
/**
* Returns the JSX or null for the illustration.
* @param illustration {*} - The illustration will React.element or a path
* @return {null|*} - Returns the JSX or null
*/
var renderIllustration = function renderIllustration(illustration) {
if (_react["default"].isValidElement(illustration)) {
return illustration;
} else if (typeof illustration === 'string' && illustration.length > 0) {
return /*#__PURE__*/_react["default"].createElement("img", {
src: illustration,
alt: "Hero illustration"
});
} else {
return null;
}
};
var Hero2 = function Hero2(props) {
var majorWords = props.majorWords,
minorWords = props.minorWords,
description = props.description,
input = props.input,
button = props.button,
newsletterText = props.newsletterText,
policyText = props.policyText,
illustration = props.illustration,
shift = props.shift,
attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "description", "input", "button", "newsletterText", "policyText", "illustration", "shift"]);
var placeholder = input.placeholder,
inputMore = (0, _objectWithoutProperties2["default"])(input, ["placeholder"]);
var variation = button.variation,
text = button.text,
color = button.color,
buttonMore = (0, _objectWithoutProperties2["default"])(button, ["variation", "text", "color"]);
var Column1 = /*#__PURE__*/_react["default"].createElement(ColumnLeft, {
lg: 6
}, /*#__PURE__*/_react["default"].createElement(JumboTron, null, /*#__PURE__*/_react["default"].createElement(JumboTronH1, null, majorWords, " ", /*#__PURE__*/_react["default"].createElement("span", null, minorWords)), /*#__PURE__*/_react["default"].createElement(JumboTronP, null, description), /*#__PURE__*/_react["default"].createElement(JumboTronH5, null, newsletterText), /*#__PURE__*/_react["default"].createElement(JumboTronForm, {
method: "post"
}, /*#__PURE__*/_react["default"].createElement(NewsletterGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Input, (0, _extends2["default"])({
type: "text",
placeholder: placeholder,
autoComplete: "off"
}, inputMore)), /*#__PURE__*/_react["default"].createElement(GroupAppend, null, /*#__PURE__*/_react["default"].createElement(NewsletterButton, (0, _extends2["default"])({
type: "button",
color: color,
variation: variation
}, buttonMore), text)))), /*#__PURE__*/_react["default"].createElement(JumboTronTextEnd, null, policyText)));
var Column2 = /*#__PURE__*/_react["default"].createElement(ColumnRight, {
lg: 6
}, /*#__PURE__*/_react["default"].createElement(Illustration, null, renderIllustration(illustration)));
return /*#__PURE__*/_react["default"].createElement(SectionHero, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/_react["default"].createElement(_core.Row, null, shift ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Column2, Column1) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Column1, Column2))));
};
exports.Hero2 = Hero2;
Hero2.propTypes = propTypes;
Hero2.defaultProps = defaultProps;