@lote-design-system/marketing-blocks/module/components/marketing/footers/Footer4.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: "Footer4__Footer",
  componentId: "kaur78-0"
})(["background-color:#fff;padding:64px 0;", "{text-align:center;}"], ({
  theme
}) => theme.mediaQueries.sm);
const ContainerModify = styled(Container).withConfig({
  displayName: "Footer4__ContainerModify",
  componentId: "kaur78-1"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const ListInline = styled.ul.withConfig({
  displayName: "Footer4__ListInline",
  componentId: "kaur78-2"
})(["margin-top:0;margin-bottom:16px;padding-left:0;list-style:none;> li{> a{font-size:14px;font-weight:500;display:block;padding:8px 12px;color:", ";transition:color 0.3s linear;&:hover{color:", ";}}}> li:not(:last-child){margin-right:8px;}", "{> li{display:inline-block;}}"], ({
  theme: {
    colors
  }
}) => colors.text.secondary, ({
  theme: {
    colors
  }
}) => colors.primary, ({
  theme
}) => theme.mediaQueries.sm);
const ListInline2 = styled.ul.withConfig({
  displayName: "Footer4__ListInline2",
  componentId: "kaur78-3"
})(["margin-top:0;margin-bottom:26px;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: "Footer4__CopyrightText",
  componentId: "kaur78-4"
})(["color:", ";font-size:14px;font-weight:500;margin-bottom:0;"], ({
  theme: {
    colors
  }
}) => colors.text.secondary); // <= End Dependent styled-components

const linkSchema = [{
  id: 1,
  href: '/about',
  text: 'About'
}, {
  id: 2,
  href: '/blog',
  text: 'Blog'
}, {
  id: 3,
  href: '/jobs',
  text: 'Jobs'
}, {
  id: 4,
  href: '/press',
  text: 'Press'
}, {
  id: 5,
  href: '/accessibility',
  text: 'Accessibility'
}, {
  id: 6,
  href: '/partners',
  text: 'Partners'
}];
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 linkShape = {
  id: PropTypes.number.isRequired,
  href: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired
};
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 links */
  links: PropTypes.arrayOf(PropTypes.shape(linkShape)).isRequired,

  /** Array of social links */
  socialLinks: PropTypes.arrayOf(PropTypes.shape(socialLinkShape)).isRequired
};
const defaultProps = {
  copyrightText: '© 2020 UI-Kit, Inc. All rights reserved.',
  links: linkSchema,
  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 Footer4 = props => {
  const {
    copyrightText,
    links,
    socialLinks
  } = props,
        attributes = _objectWithoutProperties(props, ["copyrightText", "links", "socialLinks"]);

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