@lote-design-system/marketing-blocks
Version:
215 lines (192 loc) • 8.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Transition } from 'react-transition-group';
import { Icon } from '@lote-design-system/icons';
import { Container, Button } from '@lote-design-system/core';
import { omit, pick } from 'lodash'; // => Dependent styled-components
// Our main component depends upon the following styled-components
const BannerWrapper = styled.div.withConfig({
displayName: "Banner1__BannerWrapper",
componentId: "sc-1gymv0m-0"
})(["", " ", ";position:fixed;z-index:1030;opacity:0;transition:opacity ", "s linear;"], ({
status
}) => {
if (status === 'entered') {
return css(["&{opacity:1;}"]);
} else if (status === 'exited') {
return css(["&{display:none;}"]);
}
}, ({
fixed
}) => {
if (fixed === 'top') {
return css(["position:fixed;top:24px;right:0;left:0;"]);
} else if (fixed === 'bottom') {
return css(["right:0;bottom:24px;left:0;"]);
} else {
return css([""]);
}
}, ({
timeout
}) => timeout / 1000);
const ContainerModify = styled(Container).withConfig({
displayName: "Banner1__ContainerModify",
componentId: "sc-1gymv0m-1"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const Banner = styled.div.withConfig({
displayName: "Banner1__Banner",
componentId: "sc-1gymv0m-2"
})(["border-radius:4px;background-color:", ";padding:16px 24px;"], ({
theme: {
colors
}
}) => colors.primary);
const BannerContent = styled.div.withConfig({
displayName: "Banner1__BannerContent",
componentId: "sc-1gymv0m-3"
})(["", "{display:flex;align-items:center;justify-content:space-between;}"], ({
theme
}) => theme.mediaQueries.lg);
const BannerSide1 = styled.div.withConfig({
displayName: "Banner1__BannerSide1",
componentId: "sc-1gymv0m-4"
})(["display:flex;align-items:center;margin-bottom:16px;", "{justify-content:center;}", "{justify-content:flex-start;margin-bottom:0;}"], ({
theme
}) => theme.mediaQueries.md, ({
theme
}) => theme.mediaQueries.lg);
const BannerIconWrapper = styled.div.withConfig({
displayName: "Banner1__BannerIconWrapper",
componentId: "sc-1gymv0m-5"
})(["margin-right:16px;"]);
const BannerSvgWrapper = styled.div.withConfig({
displayName: "Banner1__BannerSvgWrapper",
componentId: "sc-1gymv0m-6"
})(["width:42px;height:42px;background-color:", ";color:#fff;border-radius:0.25rem;display:inline-flex;justify-content:center;align-items:center;> svg{width:24px;height:24px;}"], ({
theme
}) => theme.palettes.primary[6]);
const BannerText = styled.p.withConfig({
displayName: "Banner1__BannerText",
componentId: "sc-1gymv0m-7"
})(["font-size:16px;margin-bottom:0;color:#fff;"]); // Side 2
const BannerSide2 = styled.div.withConfig({
displayName: "Banner1__BannerSide2",
componentId: "sc-1gymv0m-8"
})(["", "{text-align:center;}", "{display:flex;align-items:center;}"], ({
theme
}) => theme.mediaQueries.md, ({
theme
}) => theme.mediaQueries.lg);
const BannerLearnLink = styled(Button).withConfig({
displayName: "Banner1__BannerLearnLink",
componentId: "sc-1gymv0m-9"
})(["font-weight:500;margin-right:16px;"]);
const BannerCloseButton = styled(Button).withConfig({
displayName: "Banner1__BannerCloseButton",
componentId: "sc-1gymv0m-10"
})(["width:46px;height:46px;padding:4px;border-radius:50%;font-size:18px;"]); // <= End Dependent styled-components
const TransitionPropTypeKeys = ['in', 'mountOnEnter', 'unmountOnExit', 'appear', 'enter', 'exit', 'timeout', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
const propTypes = {
/** If the banner is currently showing or not (default: true) */
in: PropTypes.bool.isRequired,
/** The icon will appear on the left side of the Banner. */
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** The link for the Banner. */
link: PropTypes.shape({
href: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
variation: PropTypes.string.isRequired,
color: PropTypes.string
}),
/** The text for the Banner. */
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
/** Position the banner at the top/bottom of the viewport. The Banner will use position: fixed,
meaning they’re pulled from the normal flow of the DOM. */
fixed: PropTypes.oneOf(['top', 'bottom'])
};
const defaultProps = _objectSpread(_objectSpread({}, Transition.defaultProps), {}, {
/* Transition on the first mount set appear to true. */
appear: true,
/* Enable enter transitions. */
enter: true,
/* Enable exit transitions. */
exit: true,
/** Controls if the banner is currently showing or not (default: true) */
in: true,
/* The duration of the transition, in milliseconds. */
timeout: 900,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "download"
}),
link: {
href: '/',
text: 'Learn more',
variation: 'white'
},
text: 'Big news! We’ re excited to announce a brand new product.',
fixed: 'bottom'
});
/**
* 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 Banner1 = props => {
const {
in: show,
icon,
link,
text,
fixed,
timeout
} = props,
attributes = _objectWithoutProperties(props, ["in", "icon", "link", "text", "fixed", "timeout"]);
const [fadeIn, setFadeIn] = useState(show);
const closeBanner = () => setFadeIn(false); // pick Transition props
const transitionProps = pick(attributes, TransitionPropTypeKeys); // Remove Transition props
const attr = omit(attributes, TransitionPropTypeKeys);
return /*#__PURE__*/React.createElement(Transition, _extends({}, transitionProps, {
in: fadeIn,
timeout: timeout
}), status => {
return /*#__PURE__*/React.createElement(BannerWrapper, _extends({
status: status,
fixed: fixed,
timeout: timeout
}, attr), /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(Banner, null, /*#__PURE__*/React.createElement(BannerContent, null, /*#__PURE__*/React.createElement(BannerSide1, null, icon && /*#__PURE__*/React.createElement(BannerIconWrapper, null, /*#__PURE__*/React.createElement(BannerSvgWrapper, null, renderIcon(icon))), /*#__PURE__*/React.createElement(BannerText, null, text)), /*#__PURE__*/React.createElement(BannerSide2, null, link && /*#__PURE__*/React.createElement(BannerLearnLink, {
href: link.href,
color: link.color,
variation: link.variation
}, link.text), /*#__PURE__*/React.createElement(BannerCloseButton, {
color: "primary",
variation: "fill",
type: "button",
onClick: closeBanner
}, /*#__PURE__*/React.createElement(Icon, {
name: "x"
})))))));
});
};
Banner1.propTypes = propTypes;
Banner1.defaultProps = defaultProps;