@lote-design-system/marketing-blocks
Version:
269 lines (239 loc) • 8.37 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Footer3 = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _polished = require("polished");
var _core = require("@lote-design-system/core");
var _svg = require("../svg");
// => Dependent styled-components
// Our main component depends upon the following styled-components
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
displayName: "Footer3__ContainerModify",
componentId: "sc-19m139x-0"
})(["max-width:", ";"], function (_ref) {
var theme = _ref.theme;
return theme.maxContainerWidth;
});
var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
displayName: "Footer3__ColumnModify",
componentId: "sc-19m139x-1"
})(["margin-bottom:30px;"]);
var FooterContent = _styledComponents["default"].footer.withConfig({
displayName: "Footer3__FooterContent",
componentId: "sc-19m139x-2"
})(["background-color:", ";padding:96px 0;"], function (_ref2) {
var theme = _ref2.theme;
return theme.colors.primary;
});
var FooterBrand = _styledComponents["default"].a.withConfig({
displayName: "Footer3__FooterBrand",
componentId: "sc-19m139x-3"
})(["display:inline-flex;align-items:center;padding:", " 0;white-space:nowrap;> svg,> img{width:56px;height:56px;}"], (0, _polished.rem)(4));
var FooterText = _styledComponents["default"].p.withConfig({
displayName: "Footer3__FooterText",
componentId: "sc-19m139x-4"
})(["color:#fff;font-size:14px;"]);
var FooterHeading = _styledComponents["default"].h5.withConfig({
displayName: "Footer3__FooterHeading",
componentId: "sc-19m139x-5"
})(["margin:8px 0;color:#fff;font-size:20px;font-weight:700;"]);
var FooterList = _styledComponents["default"].ul.withConfig({
displayName: "Footer3__FooterList",
componentId: "sc-19m139x-6"
})(["margin:0;padding:0;li{list-style:none;a{display:inline-block;padding:8px 0;color:#fff;font-size:14px;transition:color 0.4s ease;&:hover{color:", ";}}}"], function (_ref3) {
var theme = _ref3.theme;
return theme.colors.secondary;
}); // <= End Dependent styled-components
var colCopyrightSchema = {
logo: /*#__PURE__*/_react["default"].createElement(_svg.LogoDefault, {
fill: "#fff",
circleFill: "#3a3838"
}),
text: '© 2020 UI-Kit, Inc. All rights reserved'
};
var colSchema = [{
title: 'Company',
links: [{
id: 1,
href: '/about',
text: 'About'
}, {
id: 2,
href: '/blog',
text: 'Blog'
}, {
id: 3,
href: '/jobs',
text: 'Jobs'
}, {
id: 4,
href: '/press',
text: 'Press'
}]
}, {
title: 'Support',
links: [{
id: 1,
href: '/pricing',
text: 'Pricing'
}, {
id: 2,
href: '/documentation',
text: 'Documentation'
}, {
id: 3,
href: '/guides',
text: 'Guides'
}, {
id: 4,
href: '/api-status',
text: 'API Status'
}]
}, {
title: 'Legal',
links: [{
id: 1,
href: '/claim',
text: 'Claim'
}, {
id: 2,
href: '/privacy',
text: 'Privacy'
}, {
id: 3,
href: '/terms',
text: 'Terms'
}]
}];
var colCopyrightShape = {
/** The logo appear on the footer on the Copyright column, default it will be ui-kit logo. */
logo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
/** The copyright text. */
text: _propTypes["default"].string.isRequired
};
var colShape = {
/** The main title which represents the category of different links. */
title: _propTypes["default"].string.isRequired,
/** Array of links */
links: _propTypes["default"].arrayOf(_propTypes["default"].shape({
id: _propTypes["default"].number.isRequired,
href: _propTypes["default"].string.isRequired,
text: _propTypes["default"].string.isRequired
})).isRequired
};
var propTypes = {
/* The default footer will have a 12 column structure. Please provide the responsive breakpoint for a
column and that breakpoint will be automatically registered for each column. */
colApi: _propTypes["default"].shape({
sm: _propTypes["default"].number,
md: _propTypes["default"].number,
lg: _propTypes["default"].number,
xl: _propTypes["default"].number
}).isRequired,
/** Copyright column. */
colCopyright: _propTypes["default"].shape(colCopyrightShape).isRequired,
/** Define your columns schema based on the 12 column structure. */
cols: _propTypes["default"].arrayOf(_propTypes["default"].shape(colShape)).isRequired
};
var defaultProps = {
colApi: {
lg: 3,
md: 4,
sm: 4
},
colCopyright: colCopyrightSchema,
cols: colSchema
};
/**
* Returns the JSX or null for the logo.
* @param logo {*} - The logo will React.element or a path
* @return {null|*} - Returns the JSX or null
*/
var renderLogo = function renderLogo(logo) {
if (_react["default"].isValidElement(logo)) {
return logo;
} else if (typeof logo === 'string' && logo.length > 0) {
return /*#__PURE__*/_react["default"].createElement("img", {
src: logo,
alt: "Brand Logo"
});
} else {
return null;
}
};
/**
* Modified Copyright and return a new object.
* @param logo {*} - A brand logo
* @param text {string} - A copyright text for the footer
* @return {{logo: *, text: {string}}} - Returns the object
*/
var modifiedCopyright = function modifiedCopyright(_ref4) {
var logo = _ref4.logo,
text = _ref4.text;
if (typeof logo === 'string' && !logo.length > 0) {
return {
logo: /*#__PURE__*/_react["default"].createElement(_svg.LogoDefault, {
fill: "#fff",
circleFill: "#3a3838"
}),
text: text
};
} else {
return {
logo: logo,
text: text
};
}
};
/**
* Render schema for the Footer.
* @param colApi {object} - The breakpoint API for the column
* @param copyright {object} - Data for the copyright column
* @param cols {Array} - Data for the footer columns
* @return {*} - Returns the JSX for the footer
*/
var renderBody = function renderBody(colApi, _ref5, cols) {
var logo = _ref5.logo,
text = _ref5.text;
return /*#__PURE__*/_react["default"].createElement(_core.Row, null, Array.isArray(cols) && cols.length > 0 && cols.map(function (_ref6) {
var title = _ref6.title,
links = _ref6.links;
return /*#__PURE__*/_react["default"].createElement(ColumnModify, (0, _extends2["default"])({}, colApi, {
key: title
}), /*#__PURE__*/_react["default"].createElement(FooterHeading, null, title), /*#__PURE__*/_react["default"].createElement(FooterList, null, links.map(function (_ref7) {
var id = _ref7.id,
href = _ref7.href,
text = _ref7.text;
return /*#__PURE__*/_react["default"].createElement("li", {
key: id
}, /*#__PURE__*/_react["default"].createElement("a", {
href: href
}, text));
})));
}), /*#__PURE__*/_react["default"].createElement(ColumnModify, colApi, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FooterBrand, {
href: "/"
}, renderLogo(logo))), /*#__PURE__*/_react["default"].createElement(FooterText, null, text)));
};
var Footer3 = function Footer3(props) {
var backgroundColor = props.backgroundColor,
colApi = props.colApi,
colCopyright = props.colCopyright,
cols = props.cols,
attributes = (0, _objectWithoutProperties2["default"])(props, ["backgroundColor", "colApi", "colCopyright", "cols"]);
var copyRight = modifiedCopyright(colCopyright);
return /*#__PURE__*/_react["default"].createElement(FooterContent, (0, _extends2["default"])({
bgColor: backgroundColor
}, attributes), /*#__PURE__*/_react["default"].createElement(ContainerModify, {
fluid: true
}, renderBody(colApi, copyRight, cols)));
};
exports.Footer3 = Footer3;
Footer3.propTypes = propTypes;
Footer3.defaultProps = defaultProps;