Merge pull request #669 from Varand-ticketmaster/DSCO-5817

DSCO-5817: Add 'custom' variant to Banner
ticketmaster · Jun 23, 2020 · ca50b00 · ca50b00
2 parents 573611e + 9ec79da
commit ca50b00
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 32 deletions.
diff --git a/catalog/pages/banner/index.md b/catalog/pages/banner/index.md
@@ -131,6 +131,23 @@ rows:
     }}
   />
   <Spacing bottom={{small: "moderate"}}/>
+  <Banner
+    heading="This is your primary message text."
+    content="This is the content section"
+    linkText="Link"
+    href="https://www.ticketmaster.com/"
+    linkProps={{ target: '_blank' }}
+    isOpen
+    variant="custom"
+    expandedText="expandedText"
+    collapsedText="collapsedText"
+    isExpanded
+    customColors={{
+      primaryColor: "#c56fff",
+      backgroundColor: "rgba(240, 218, 255, 0.4)",
+      textColor: "#262626"
+    }}
+  />
   <FunctionalBannerDemo />
 </div>
 ```
diff --git a/src/components/Banner/Banner.styles.js b/src/components/Banner/Banner.styles.js
@@ -50,18 +50,28 @@ export const Container = styled.div`
     background-color: ${getThemeValue("primary", "lightest")};
     border-color: ${getThemeValue("primary", "base")};
   }
+
+  &.banner-variant-custom {
+    background-color: ${props => props.customColors.backgroundColor};
+    border-color: ${props => props.customColors.primaryColor};
+  }
 `;
 
 export const ContentSection = styled.div`
   font-family: Averta, Courier, monospace;
   padding-right: ${spacing.comfy};
 `;
 
+export const HeaderText = styled(Text)`
+  color: ${props => props.customColors.textColor};
+`;
+
 export const Content = styled(Text)`
   padding-top: 12px;
   opacity: 1;
   transition: opacity 0.3s ${constants.easing.easeInOutQuad} 0.1s;
   line-height: 1.29;
+  color: ${props => props.customColors.textColor};
 
   .collapsed & {
     transition: opacity 0.3s ${constants.easing.easeInOutQuad};

diff --git a/src/components/Banner/__tests__/__snapshots__/index.spec.js.snap b/src/components/Banner/__tests__/__snapshots__/index.spec.js.snap
@@ -102,7 +102,7 @@ exports[`<Banner /> renders correctly when open 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -248,7 +248,7 @@ exports[`<Banner /> renders correctly when variant is set 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -344,7 +344,7 @@ exports[`<Banner /> renders correctly with close button 1`] = `
   opacity: 0;
 }
 
-.sc-fzqBZW.c6 {
+.sc-fzqNJr.c6 {
   background-color: transparent;
   border: none;
   padding: 0;
@@ -368,8 +368,8 @@ exports[`<Banner /> renders correctly with close button 1`] = `
   justify-content: center;
 }
 
-.sc-fzqBZW.c6:active,
-.sc-fzqBZW.c6:hover {
+.sc-fzqNJr.c6:active,
+.sc-fzqNJr.c6:hover {
   background-color: transparent;
 }
 
@@ -429,7 +429,7 @@ exports[`<Banner /> renders correctly with close button 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -606,7 +606,7 @@ exports[`<Banner /> renders correctly with close button hidden 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -724,7 +724,7 @@ exports[`<Banner /> renders correctly with content 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -864,7 +864,7 @@ exports[`<Banner /> renders correctly with custom icon 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -964,7 +964,7 @@ exports[`<Banner /> renders correctly with custom title for the close button 1`]
   opacity: 0;
 }
 
-.sc-fzoyAV.c7 {
+.sc-fzoLag.c7 {
   background-color: transparent;
   border: none;
   padding: 0;
@@ -988,8 +988,8 @@ exports[`<Banner /> renders correctly with custom title for the close button 1`]
   justify-content: center;
 }
 
-.sc-fzoyAV.c7:active,
-.sc-fzoyAV.c7:hover {
+.sc-fzoLag.c7:active,
+.sc-fzoLag.c7:hover {
   background-color: transparent;
 }
 
@@ -1049,7 +1049,7 @@ exports[`<Banner /> renders correctly with custom title for the close button 1`]
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -1183,7 +1183,7 @@ exports[`<Banner /> renders correctly with expand/collapse button 1`] = `
   opacity: 0;
 }
 
-.sc-fzoLag.c7 {
+.sc-fzoXzr.c7 {
   background-color: transparent;
   border: none;
   padding: 0;
@@ -1207,8 +1207,8 @@ exports[`<Banner /> renders correctly with expand/collapse button 1`] = `
   justify-content: center;
 }
 
-.sc-fzoLag.c7:active,
-.sc-fzoLag.c7:hover {
+.sc-fzoXzr.c7:active,
+.sc-fzoXzr.c7:hover {
   background-color: transparent;
 }
 
@@ -1268,7 +1268,7 @@ exports[`<Banner /> renders correctly with expand/collapse button 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>
@@ -1403,7 +1403,7 @@ exports[`<Banner /> renders correctly with link 1`] = `
   opacity: 0;
 }
 
-.sc-fzqNJr.c7 {
+.sc-fzoyAV.c7 {
   background-color: transparent;
   border: none;
   padding: 0;
@@ -1427,8 +1427,8 @@ exports[`<Banner /> renders correctly with link 1`] = `
   justify-content: center;
 }
 
-.sc-fzqNJr.c7:active,
-.sc-fzqNJr.c7:hover {
+.sc-fzoyAV.c7:active,
+.sc-fzoyAV.c7:hover {
   background-color: transparent;
 }
 
@@ -1488,7 +1488,7 @@ exports[`<Banner /> renders correctly with link 1`] = `
       class="c2"
     >
       <span
-        class="c3 text text--dark text--primary"
+        class="c3 text text--dark text--primary "
       >
         This is your primary message text.
       </span>

diff --git a/src/components/Banner/constants.js b/src/components/Banner/constants.js
@@ -1,9 +1,10 @@
 import { ErrorIcon, SuccessIcon, AlertIcon, InfoIcon } from "../Icons";
 
-export const variants = ["error", "success", "alert", "info"];
+export const variants = ["error", "success", "alert", "info", "custom"];
 export const variantsIcons = {
   [variants[0]]: ErrorIcon,
   [variants[1]]: SuccessIcon,
   [variants[2]]: AlertIcon,
-  [variants[3]]: InfoIcon
+  [variants[3]]: InfoIcon,
+  [variants[4]]: InfoIcon
 };
diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { Transition } from "react-transition-group";
-import { Text } from "../Text";
 import { variants, variantsIcons } from "./constants";
 import { constants } from "../../theme";
 import {
@@ -13,6 +12,7 @@ import {
   ContentSection,
   CloseIcon,
   Link,
+  HeaderText,
   BASE_BANNER_HEIGHT,
   MAX_BANNER_HEIGHT
 } from "./Banner.styles";
@@ -35,7 +35,12 @@ class Banner extends Component {
     variant: PropTypes.oneOf(variants),
     icon: PropTypes.node,
     closeButtonTitleText: PropTypes.string,
-    closeButtonHidden: PropTypes.bool
+    closeButtonHidden: PropTypes.bool,
+    customColors: PropTypes.shape({
+      primaryColor: PropTypes.string,
+      backgroundColor: PropTypes.string,
+      textColor: PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -55,7 +60,8 @@ class Banner extends Component {
     variant: null,
     icon: null,
     closeButtonTitleText: "Close banner",
-    closeButtonHidden: false
+    closeButtonHidden: false,
+    customColors: {}
   };
 
   // Container max height should be handled programmatically as content height is unknown
@@ -78,6 +84,8 @@ class Banner extends Component {
 
   content = React.createRef();
 
+  isCustomVariant = () => this.props.variant === variants[4];
+
   toggleContent = () => {
     const { onButtonClick } = this.props;
     const collapsedMaxHeight = `${BASE_BANNER_HEIGHT}px`;
@@ -142,17 +150,31 @@ class Banner extends Component {
   };
 
   renderIcon = () => {
-    const { variant, icon } = this.props;
+    const {
+      variant,
+      icon,
+      customColors: { primaryColor: color }
+    } = this.props;
     if (!variant && !icon) {
       return null;
     }
     const Icon = variantsIcons[variant];
 
-    return icon || <Icon type="filled" size="regular" />;
+    let customColor = null;
+    if (this.isCustomVariant()) customColor = { color };
+
+    return icon || <Icon type="filled" size="regular" {...customColor} />;
   };
 
   render() {
-    const { isOpen, heading, content, variant, style } = this.props;
+    const {
+      isOpen,
+      heading,
+      content,
+      variant,
+      style,
+      customColors
+    } = this.props;
     const { isExpanded, maxHeight } = this.state;
 
     return (
@@ -169,15 +191,22 @@ class Banner extends Component {
               [`banner-variant-${variant}`]: variant,
               "visible-banner": state === "entered"
             })}
+            customColors={this.isCustomVariant() && customColors}
           >
             <IconSection>{this.renderIcon()}</IconSection>
             <ContentSection>
-              <Text tag="span" weight="semiBold">
+              <HeaderText
+                tag="span"
+                weight="semiBold"
+                customColors={this.isCustomVariant() && customColors}
+              >
                 {heading}
-              </Text>
+              </HeaderText>
               {this.renderControl()}
               <div ref={this.content} style={{ ...style, maxHeight }}>
-                <Content>{content}</Content>
+                <Content customColors={this.isCustomVariant() && customColors}>
+                  {content}
+                </Content>
               </div>
             </ContentSection>
             {this.renderCloseButton()}