@lote-design-system/marketing-blocks
Version:
220 lines (186 loc) • 8.35 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Hero4 = 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 = _interopRequireWildcard(require("styled-components"));
var _polished = require("polished");
var _core = require("@lote-design-system/core");
// => Dependent styled-components
// Our main component depends upon the following styled-components
var VideoContainer = _styledComponents["default"].div.withConfig({
displayName: "Hero4__VideoContainer",
componentId: "sc-1u61a83-0"
})(["position:relative;", ";"], function (_ref) {
var overlay = _ref.overlay;
if (overlay && overlay.show) {
return (0, _styledComponents.css)(["&:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:", ";}"], overlay.backgroundColor);
}
});
var Video = _styledComponents["default"].video.withConfig({
displayName: "Hero4__Video",
componentId: "sc-1u61a83-1"
})(["position:absolute;object-fit:cover;top:0;left:0;width:100%;height:100%;"]);
var HeroBody = _styledComponents["default"].div.withConfig({
displayName: "Hero4__HeroBody",
componentId: "sc-1u61a83-2"
})(["z-index:2;position:relative;padding:", " 0;flex-grow:1;flex-shrink:0;align-items:center;display:flex;"], (0, _polished.rem)(192));
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
displayName: "Hero4__ContainerModify",
componentId: "sc-1u61a83-3"
})(["max-width:", ";text-align:center;flex-grow:1;flex-shrink:1;margin:0 auto;position:relative;width:auto;"], function (_ref2) {
var theme = _ref2.theme;
return theme.maxContainerWidth;
});
/**
* A function that returns the inverted color for the text
* @param mode {boolean} - Associated mode
* @return {string[]} - Returns the inverted styles
*/
var invertedTextStyles = function invertedTextStyles(mode) {
if (mode) {
return (0, _styledComponents.css)(["color:#fff;"]);
} else {
return (0, _styledComponents.css)(["color:rgba(0,0,0,0.85);"]);
}
};
var Titles = _styledComponents["default"].div.withConfig({
displayName: "Hero4__Titles",
componentId: "sc-1u61a83-4"
})(["", ";"], function (_ref3) {
var inverted = _ref3.inverted;
return invertedTextStyles(inverted);
});
var HeroTitle = (0, _styledComponents["default"])(_core.Text).withConfig({
displayName: "Hero4__HeroTitle",
componentId: "sc-1u61a83-5"
})(["max-width:992px;margin:0 auto ", ";font-weight:700;line-height:1.2;span{display:block;&:last-child{color:", ";}}"], (0, _polished.rem)(16), function (_ref4) {
var colors = _ref4.theme.colors;
return colors.primary;
});
var HeroDescription = _styledComponents["default"].p.withConfig({
displayName: "Hero4__HeroDescription",
componentId: "sc-1u61a83-6"
})(["", ";max-width:660px;margin:0 auto ", ";font-size:20px;"], function (_ref5) {
var inverted = _ref5.inverted;
return invertedTextStyles(inverted);
}, (0, _polished.rem)(16));
var HeroLinkWrapper = _styledComponents["default"].div.withConfig({
displayName: "Hero4__HeroLinkWrapper",
componentId: "sc-1u61a83-7"
})(["display:flex;align-items:center;justify-content:center;flex-wrap:wrap;"]);
var HeroLink = (0, _styledComponents["default"])(_core.Button).withConfig({
displayName: "Hero4__HeroLink",
componentId: "sc-1u61a83-8"
})(["&{padding:", " ", ";font-weight:500;display:block;width:100%;margin:8px;}", "{width:auto;display:inline-block;}"], (0, _polished.rem)(16), (0, _polished.rem)(48), function (_ref6) {
var theme = _ref6.theme;
return theme.mediaQueries.sm;
}); // <= End Dependent styled-components
var linkSchema = [{
id: 1,
href: '/signin',
text: 'Signup',
variation: 'whiteSecondary'
}, {
id: 2,
href: '/signup',
text: 'Signin',
variation: 'fill'
}];
var videoSchema = {
src: 'https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4',
muted: true,
// fixes autoplay in chrome
autoPlay: true,
loop: true,
// not working https://github.com/facebook/react/issues/10389
playsInline: true // fixes autoplay in webkit (ie. mobile safari)
};
var videoShape = _propTypes["default"].shape({
src: _propTypes["default"].string.isRequired,
muted: _propTypes["default"].bool,
autoPlay: _propTypes["default"].bool,
loop: _propTypes["default"].bool,
playsInline: _propTypes["default"].bool
});
var overlayShape = {
show: _propTypes["default"].bool.isRequired,
backgroundColor: _propTypes["default"].string
};
var linkShape = {
id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
href: _propTypes["default"].string.isRequired,
text: _propTypes["default"].string.isRequired,
variation: _propTypes["default"].string.isRequired,
color: _propTypes["default"].string
};
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"].string.isRequired,
/** The link below the description. */
links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired,
/** It will render the the video element on the hero. */
video: videoShape,
/** This will darken or lighten your major text. */
invertedText: _propTypes["default"].bool,
/** Add overlay on the top of the video. */
overlay: _propTypes["default"].shape(overlayShape)
};
var 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,
video: videoSchema,
invertedText: true,
overlay: {
show: false,
backgroundColor: 'rgba(0, 0, 0, .85)'
}
};
var Hero4 = function Hero4(props) {
var majorWords = props.majorWords,
minorWords = props.minorWords,
description = props.description,
links = props.links,
video = props.video,
invertedText = props.invertedText,
overlay = props.overlay,
attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "description", "links", "video", "invertedText", "overlay"]); // Video properties from the video object
var src = video.src,
videoAttr = (0, _objectWithoutProperties2["default"])(video, ["src"]);
return /*#__PURE__*/_react["default"].createElement(VideoContainer, (0, _extends2["default"])({
overlay: overlay
}, attributes), /*#__PURE__*/_react["default"].createElement(Video, videoAttr, /*#__PURE__*/_react["default"].createElement("source", {
src: src,
type: "video/mp4"
})), /*#__PURE__*/_react["default"].createElement(HeroBody, null, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/_react["default"].createElement(HeroTitle, {
fSize: 64
}, /*#__PURE__*/_react["default"].createElement(Titles, {
inverted: invertedText
}, /*#__PURE__*/_react["default"].createElement("span", null, majorWords), /*#__PURE__*/_react["default"].createElement("span", null, minorWords))), /*#__PURE__*/_react["default"].createElement(HeroDescription, {
inverted: invertedText
}, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/_react["default"].createElement(HeroLinkWrapper, null, links.map(function (link) {
return /*#__PURE__*/_react["default"].createElement(HeroLink, {
key: link.id,
href: link.href,
color: link.color,
variation: link.variation
}, link.text);
})) : null)));
};
exports.Hero4 = Hero4;
Hero4.propTypes = propTypes;
Hero4.defaultProps = defaultProps;