@lote-design-system/marketing-blocks
Version:
191 lines (169 loc) • 7.38 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 { 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: "Banner3__BannerWrapper",
componentId: "o57zlb-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:0;right:0;left:0;"]);
} else if (fixed === 'bottom') {
return css(["right:0;bottom:0;left:0;"]);
} else {
return css([""]);
}
}, ({
timeout
}) => timeout / 1000);
const Banner = styled.div.withConfig({
displayName: "Banner3__Banner",
componentId: "o57zlb-1"
})(["background-color:", ";padding:8px 24px;"], ({
theme: {
colors
}
}) => colors.primary);
const BannerContent = styled.div.withConfig({
displayName: "Banner3__BannerContent",
componentId: "o57zlb-2"
})(["", "{display:flex;align-items:center;}"], ({
theme
}) => theme.mediaQueries.md);
const BannerText = styled.p.withConfig({
displayName: "Banner3__BannerText",
componentId: "o57zlb-3"
})(["color:#fff;font-size:16px;margin-bottom:8px;", "{margin-bottom:0;flex-grow:1;}", "{text-align:center;}"], ({
theme
}) => theme.mediaQueries.md, ({
theme
}) => theme.mediaQueries.lg); // Side 2
const BannerSide2 = styled.div.withConfig({
displayName: "Banner3__BannerSide2",
componentId: "o57zlb-4"
})(["", "{text-align:center;}", "{display:flex;align-items:center;}"], ({
theme
}) => theme.mediaQueries.md, ({
theme
}) => theme.mediaQueries.lg);
const BannerLearnLink = styled.a.withConfig({
displayName: "Banner3__BannerLearnLink",
componentId: "o57zlb-5"
})(["position:relative;margin-left:16px;color:#fff;span:first-child{margin-right:8px;}&:after{content:'';position:absolute;width:100%;bottom:-6px;left:0;height:1px;background-color:#fff;transition:width 0.4s linear;}&:hover{&:after{width:0;}}"]);
const BannerCloseButton = styled(Button).withConfig({
displayName: "Banner3__BannerCloseButton",
componentId: "o57zlb-6"
})(["width:46px;height:46px;padding:4px;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 link for the Banner appear on the right side. */
link: PropTypes.shape({
href: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
variation: PropTypes.string.isRequired,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).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,
link: {
href: '/',
text: 'Learn more',
variation: 'white',
icon: /*#__PURE__*/React.createElement(Icon, {
name: "arrow-right"
})
},
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 Banner3 = 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(Banner, null, /*#__PURE__*/React.createElement(BannerContent, null, /*#__PURE__*/React.createElement(BannerText, null, /*#__PURE__*/React.createElement("span", null, text), link && /*#__PURE__*/React.createElement(BannerLearnLink, {
href: link.href,
color: link.color,
variation: link.variation
}, /*#__PURE__*/React.createElement("span", null, link.text), /*#__PURE__*/React.createElement("span", null, renderIcon(link.icon)))), /*#__PURE__*/React.createElement(BannerSide2, null, /*#__PURE__*/React.createElement(BannerCloseButton, {
color: "primary",
variation: "fill",
type: "button",
onClick: closeBanner
}, /*#__PURE__*/React.createElement(Icon, {
name: "x"
}))))));
});
};
Banner3.propTypes = propTypes;
Banner3.defaultProps = defaultProps;