@lote-design-system/marketing-blocks/module/components/marketing/footers/Footer5.js

marketing blocks

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Icon from '@lote-design-system/icons';
import { Container } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const Footer = styled.footer.withConfig({
  displayName: "Footer5__Footer",
  componentId: "sc-1jeuxqx-0"
})(["background-color:#fff;padding:64px 0;"]);
const ContainerModify = styled(Container).withConfig({
  displayName: "Footer5__ContainerModify",
  componentId: "sc-1jeuxqx-1"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const FooterContent = styled.div.withConfig({
  displayName: "Footer5__FooterContent",
  componentId: "sc-1jeuxqx-2"
})(["", "{text-align:center;}", "{display:flex;align-items:center;justify-content:space-between;}"], ({
  theme
}) => theme.mediaQueries.sm, ({
  theme
}) => theme.mediaQueries.md);
const ListInline = styled.ul.withConfig({
  displayName: "Footer5__ListInline",
  componentId: "sc-1jeuxqx-3"
})(["margin:0;padding-left:0;list-style:none;> li{display:inline-block;> a{display:inline-block;padding:8px 12px;color:", ";transition:color 0.3s linear;&:hover{color:", ";}> svg{width:18px;height:18px;}}}> li:not(:last-child){margin-right:8px;}"], ({
  theme: {
    colors
  }
}) => colors.text.secondary, ({
  theme: {
    colors
  }
}) => colors.primary);
const CopyrightText = styled.p.withConfig({
  displayName: "Footer5__CopyrightText",
  componentId: "sc-1jeuxqx-4"
})(["color:", ";font-size:14px;font-weight:500;margin-bottom:8px;", "{margin-bottom:0;}"], ({
  theme: {
    colors
  }
}) => colors.text.secondary, ({
  theme
}) => theme.mediaQueries.md); // <= End Dependent styled-components

const socialLinkSchema = [{
  id: 1,
  href: '/',
  icon: /*#__PURE__*/React.createElement(Icon, {
    name: "facebook"
  })
}, {
  id: 2,
  href: '/',
  icon: /*#__PURE__*/React.createElement(Icon, {
    name: "instagram"
  })
}, {
  id: 3,
  href: '/',
  icon: /*#__PURE__*/React.createElement(Icon, {
    name: "twitter"
  })
}, {
  id: 4,
  href: '/',
  icon: /*#__PURE__*/React.createElement(Icon, {
    name: "github"
  })
}, {
  id: 5,
  href: '/',
  icon: /*#__PURE__*/React.createElement(Icon, {
    name: "linkedin"
  })
}];
const socialLinkShape = {
  id: PropTypes.number.isRequired,
  href: PropTypes.string.isRequired,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
};
const propTypes = {
  /** Copyright text. */
  copyrightText: PropTypes.string.isRequired,

  /** Array of social links */
  socialLinks: PropTypes.arrayOf(PropTypes.shape(socialLinkShape)).isRequired
};
const defaultProps = {
  copyrightText: '© 2020 UI-Kit, Inc. All rights reserved.',
  socialLinks: socialLinkSchema
};
/**
 * Returns the JSX or null for the icon.
 * @param icon {*} - The icon will React.element or a string
 * @return {null|*} - Returns the JSX or null
 */

const renderIcon = icon => {
  if (React.isValidElement(icon)) {
    return icon;
  } else if (typeof icon === 'string' && icon.length > 0) {
    return /*#__PURE__*/React.createElement(Icon, {
      name: icon
    });
  } else {
    return null;
  }
};

export const Footer5 = props => {
  const {
    copyrightText,
    socialLinks
  } = props,
        attributes = _objectWithoutProperties(props, ["copyrightText", "socialLinks"]);

  return /*#__PURE__*/React.createElement(Footer, attributes, /*#__PURE__*/React.createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(CopyrightText, null, copyrightText), Array.isArray(socialLinks) && socialLinks.length > 0 && /*#__PURE__*/React.createElement(ListInline, null, socialLinks.map(({
    id,
    href,
    icon
  }) => {
    return /*#__PURE__*/React.createElement("li", {
      key: id
    }, /*#__PURE__*/React.createElement("a", {
      href: href
    }, renderIcon(icon)));
  })))));
};
Footer5.propTypes = propTypes;
Footer5.defaultProps = defaultProps;