@lote-design-system/marketing-blocks
Version:
247 lines (234 loc) • 6.95 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { rem } from 'polished';
import { Container, Row, Column } from '@lote-design-system/core';
import { LogoDefault } from '../svg'; // => Dependent styled-components
// Our main component depends upon the following styled-components
const ContainerModify = styled(Container).withConfig({
displayName: "Footer3__ContainerModify",
componentId: "sc-19m139x-0"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const ColumnModify = styled(Column).withConfig({
displayName: "Footer3__ColumnModify",
componentId: "sc-19m139x-1"
})(["margin-bottom:30px;"]);
const FooterContent = styled.footer.withConfig({
displayName: "Footer3__FooterContent",
componentId: "sc-19m139x-2"
})(["background-color:", ";padding:96px 0;"], ({
theme
}) => theme.colors.primary);
const FooterBrand = styled.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;}"], rem(4));
const FooterText = styled.p.withConfig({
displayName: "Footer3__FooterText",
componentId: "sc-19m139x-4"
})(["color:#fff;font-size:14px;"]);
const FooterHeading = styled.h5.withConfig({
displayName: "Footer3__FooterHeading",
componentId: "sc-19m139x-5"
})(["margin:8px 0;color:#fff;font-size:20px;font-weight:700;"]);
const FooterList = styled.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:", ";}}}"], ({
theme
}) => theme.colors.secondary); // <= End Dependent styled-components
const colCopyrightSchema = {
logo: /*#__PURE__*/React.createElement(LogoDefault, {
fill: "#fff",
circleFill: "#3a3838"
}),
text: '© 2020 UI-Kit, Inc. All rights reserved'
};
const 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'
}]
}];
const colCopyrightShape = {
/** The logo appear on the footer on the Copyright column, default it will be ui-kit logo. */
logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
/** The copyright text. */
text: PropTypes.string.isRequired
};
const colShape = {
/** The main title which represents the category of different links. */
title: PropTypes.string.isRequired,
/** Array of links */
links: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
href: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
})).isRequired
};
const 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.shape({
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number
}).isRequired,
/** Copyright column. */
colCopyright: PropTypes.shape(colCopyrightShape).isRequired,
/** Define your columns schema based on the 12 column structure. */
cols: PropTypes.arrayOf(PropTypes.shape(colShape)).isRequired
};
const 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
*/
const renderLogo = logo => {
if (React.isValidElement(logo)) {
return logo;
} else if (typeof logo === 'string' && logo.length > 0) {
return /*#__PURE__*/React.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
*/
const modifiedCopyright = ({
logo,
text
}) => {
if (typeof logo === 'string' && !logo.length > 0) {
return {
logo: /*#__PURE__*/React.createElement(LogoDefault, {
fill: "#fff",
circleFill: "#3a3838"
}),
text
};
} else {
return {
logo,
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
*/
const renderBody = (colApi, {
logo,
text
}, cols) => {
return /*#__PURE__*/React.createElement(Row, null, Array.isArray(cols) && cols.length > 0 && cols.map(({
title,
links
}) => {
return /*#__PURE__*/React.createElement(ColumnModify, _extends({}, colApi, {
key: title
}), /*#__PURE__*/React.createElement(FooterHeading, null, title), /*#__PURE__*/React.createElement(FooterList, null, links.map(({
id,
href,
text
}) => {
return /*#__PURE__*/React.createElement("li", {
key: id
}, /*#__PURE__*/React.createElement("a", {
href: href
}, text));
})));
}), /*#__PURE__*/React.createElement(ColumnModify, colApi, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FooterBrand, {
href: "/"
}, renderLogo(logo))), /*#__PURE__*/React.createElement(FooterText, null, text)));
};
export const Footer3 = props => {
const {
backgroundColor,
colApi,
colCopyright,
cols
} = props,
attributes = _objectWithoutProperties(props, ["backgroundColor", "colApi", "colCopyright", "cols"]);
const copyRight = modifiedCopyright(colCopyright);
return /*#__PURE__*/React.createElement(FooterContent, _extends({
bgColor: backgroundColor
}, attributes), /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, renderBody(colApi, copyRight, cols)));
};
Footer3.propTypes = propTypes;
Footer3.defaultProps = defaultProps;