feat(PopOver): add variant option to PopOver component

ticketmaster · Feb 5, 2021 · 0a97971 · 0a97971
1 parent 6942f8e
commit 0a97971
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 8 deletions.
diff --git a/catalog/pages/popover/PopOverDemo.js b/catalog/pages/popover/PopOverDemo.js
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import PopOver from "../../../src/components/PopOver";
+import { VARIANTS, LIGHT } from "../../../src/components/constants";
 
 const Container = styled.div`
   width: 95%;
@@ -47,7 +48,7 @@ class PopOverDemo extends React.Component {
 
   render() {
     const { showPopOver, ...position } = this.state;
-    const { inlineWithTarget, noBorders } = this.props;
+    const { inlineWithTarget, noBorders, variant } = this.props;
 
     return (
       <Container ref={this.containerRef}>
@@ -80,6 +81,7 @@ class PopOverDemo extends React.Component {
           reduceTop={76}
           inlineWithTarget={inlineWithTarget}
           noBorders={noBorders}
+          variant={variant}
         >
           Some text to be rendered in the pop over component. Some text to be
           rendered in the pop over component.
@@ -92,13 +94,15 @@ class PopOverDemo extends React.Component {
 PopOverDemo.propTypes = {
   withinContainer: PropTypes.bool,
   inlineWithTarget: PropTypes.bool,
-  noBorders: PropTypes.bool
+  noBorders: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS)
 };
 
 PopOverDemo.defaultProps = {
   withinContainer: false,
   inlineWithTarget: false,
-  noBorders: false
+  noBorders: false,
+  variant: LIGHT
 };
 
 export default PopOverDemo;
diff --git a/catalog/pages/popover/index.md b/catalog/pages/popover/index.md
@@ -15,6 +15,10 @@ rows:
     Type: boolean
     Default: false
     Notes: Show/hide popover
+  - Prop: variant
+    Type: one of 'dark', 'light'
+    Default: 'light'
+    Notes: Changes PopOver's color scheme
   - Prop: inlineWithTarget
     Type: boolean
     Default: false
@@ -50,5 +54,5 @@ rows:
 
 ```react
 ---
-<PopOverDemo withinContainer inlineWithTarget noBorders/>
+<PopOverDemo withinContainer inlineWithTarget noBorders variant="dark" />
 ```
diff --git a/src/components/PopOver/__tests__/__snapshots__/index.spec.js.snap b/src/components/PopOver/__tests__/__snapshots__/index.spec.js.snap
@@ -1,9 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`PopOver dark should match snapshot 1`] = `
+.c0 {
+  background-color: #1f262d;
+  border: 1px solid #1f262d;
+  color: rgba(255,255,255,1);
+  border-radius: 4px;
+  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.12);
+  position: absolute;
+  max-width: 300px;
+  padding: 16px;
+  z-index: 9;
+  display: block;
+  -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53), -webkit-transform 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
+  -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53), transform 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
+  transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53), transform 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
+}
+
+.c0.open-enter,
+.c0.open-appear {
+  -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  display: block;
+  opacity: 0;
+  -webkit-transform: scale(0.7);
+  -ms-transform: scale(0.7);
+  transform: scale(0.7);
+}
+
+.c0.open-enter-active,
+.c0.open-appear-active {
+  -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), -webkit-transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  display: block;
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c0.open-enter-done {
+  -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), -webkit-transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955), transform 0.3s cubic-bezier(0.455,0.03,0.515,0.955);
+  display: block;
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c0.open-exit {
+  display: block;
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c0.open-exit-active {
+  display: block;
+  opacity: 0;
+  -webkit-transform: scale(0.7);
+  -ms-transform: scale(0.7);
+  transform: scale(0.7);
+}
+
+<div
+  className="c0"
+/>
+`;
+
 exports[`PopOver should match snapshot 1`] = `
 .c0 {
   background-color: rgba(255,255,255,1);
   border: 1px solid #999999;
+  color: #262626;
   border-radius: 4px;
   box-shadow: 0 4px 4px 0 rgba(0,0,0,0.12);
   position: absolute;
@@ -75,6 +148,7 @@ exports[`PopOver should match snapshot when visible 1`] = `
 .c0 {
   background-color: rgba(255,255,255,1);
   border: 1px solid #999999;
+  color: #262626;
   border-radius: 4px;
   box-shadow: 0 4px 4px 0 rgba(0,0,0,0.12);
   position: absolute;
@@ -145,6 +219,7 @@ exports[`PopOver should match snapshot when visible 1`] = `
 exports[`PopOver should match snapshot when visible and without borders 1`] = `
 .c0 {
   background-color: rgba(255,255,255,1);
+  color: #262626;
   border-radius: 4px;
   box-shadow: 0 2px 8px 0 rgba(159,159,159,0.5);
   position: absolute;

diff --git a/src/components/PopOver/__tests__/index.spec.js b/src/components/PopOver/__tests__/index.spec.js
@@ -22,6 +22,12 @@ describe("PopOver", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("dark should match snapshot", () => {
+    const tree = renderer.create(<PopOver isVisible variant="dark" />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it("should match snapshot when visible and without borders", () => {
     const tree = renderer.create(<PopOver isVisible noBorders />).toJSON();
 

diff --git a/src/components/PopOver/index.js b/src/components/PopOver/index.js
@@ -8,11 +8,21 @@ import {
   popContainersSharpBoxShadow
 } from "../../theme/constants";
 import PopOverPortal from "./PopOverPortal";
+import { VARIANTS, LIGHT, DARK } from "../constants";
 
 const StyledPopOver = styled.div`
-  background-color: ${themes.global.white.base};
-  ${({ noBorders }) =>
-    !noBorders && `border: 1px solid ${themes.global.gray02}`};
+  background-color: ${({ variant }) =>
+    variant === DARK ? themes.global.darkFill : themes.global.white.base};
+  ${({ noBorders, variant }) =>
+    !noBorders &&
+    `
+    border: ${
+      variant === DARK
+        ? `1px solid ${themes.global.darkFill}`
+        : `1px solid ${themes.global.gray02}`
+    };`};
+  color: ${({ variant }) =>
+    variant === DARK ? themes.global.white.base : themes.global.gray01};
   border-radius: ${constants.borderRadius.large};
   box-shadow: ${({ noBorders }) =>
     noBorders ? popContainersSharpBoxShadow : popContainersBoxShadow};
@@ -334,7 +344,7 @@ class PopOver extends Component {
   };
 
   render() {
-    const { children, isVisible, noBorders, zInd } = this.props;
+    const { children, isVisible, variant, noBorders, zInd } = this.props;
 
     return (
       <PopOverPortal>
@@ -344,13 +354,15 @@ class PopOver extends Component {
           timeout={300}
           classNames="open"
           appear={isVisible}
+          variant={variant}
           onEnter={this.popoverEnter}
         >
           <StyledPopOver
             ref={this.myRef}
             isVisible={isVisible}
             noBorders={noBorders}
             zInd={zInd}
+            variant={variant}
           >
             {children}
           </StyledPopOver>
@@ -364,6 +376,7 @@ PopOver.propTypes = {
   children: PropTypes.node.isRequired,
   isVisible: PropTypes.bool,
   inlineWithTarget: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS),
   noBorders: PropTypes.bool,
   reduceTop: PropTypes.number,
   reduceBottom: PropTypes.number,
@@ -383,6 +396,7 @@ PopOver.propTypes = {
 PopOver.defaultProps = {
   isVisible: false,
   inlineWithTarget: false,
+  variant: LIGHT,
   noBorders: false,
   reduceTop: 0,
   reduceBottom: 0,