feat(popover): add the posibility to move the arrow

tillersystems · Aug 10, 2018 · 9be5db4 · 9be5db4
1 parent d13f616
commit 9be5db4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/src/Popover/__stories__/Popover.stories.js b/src/Popover/__stories__/Popover.stories.js
@@ -24,14 +24,30 @@ storiesOf('Popover', module)
       'Dimensions',
     );
 
+    const arrowPositionXValue = number(
+      'arrowPositionX',
+      50,
+      {
+        range: true,
+        min: 5,
+        max: 90,
+        step: 1,
+      },
+      'Dimensions',
+    );
+
     return (
       <div style={{ position: 'relative' }}>
         <Button primary onClick={() => store.set({ active: !store.get('active') })}>
           Show Popover
         </Button>
         <div style={{ position: 'absolute', top: '100%', left: '-78px' }}>
           <State store={store}>
-            <Popover width={`${widthValue}rem`} active={store.get('active')}>
+            <Popover
+              width={`${widthValue}rem`}
+              arrowPositionX={`${(widthValue * arrowPositionXValue) / 100}rem`}
+              active={store.get('active')}
+            >
               Ventes nettes (ventes brutes moins les réductions et les annulations) plus les taxes
               sur la période séléctionnée.
             </Popover>

diff --git a/src/Popover/__tests__/__snapshots__/Popover.test.js.snap b/src/Popover/__tests__/__snapshots__/Popover.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<Popover /> should render open popover withouth a problem 1`] = `
 .c0 {
   position: relative;
-  width: 100rem;
+  width: auto;
   padding: 1.8rem;
   border-radius: 0.4rem;
   box-shadow: 0 0.2rem 1.6rem 0 hsla(0,0%,0%,0.1),0 0.2rem 1.6rem 0 hsla(206,23%,69%,0.1), 0 0 0 0.1rem hsl(207,22%,90%);
@@ -145,7 +145,8 @@ exports[`<Popover /> should render open popover withouth a problem 1`] = `
 >
   <Popover
     active={true}
-    width="100rem"
+    arrowPositionX="50%"
+    width="auto"
   >
     <PoseGroup
       animateOnMount={true}
@@ -156,12 +157,14 @@ exports[`<Popover /> should render open popover withouth a problem 1`] = `
       singleChildOnly={false}
     >
       <Component
+        arrowPositionX="50%"
         initialPose="exit"
         key="ContainerAnimation"
         pose="enter"
-        width="100rem"
+        width="auto"
       >
         <PoseElement
+          arrowPositionX="50%"
           elementType={[Function]}
           initialPose="exit"
           pose="enter"
@@ -177,16 +180,17 @@ exports[`<Popover /> should render open popover withouth a problem 1`] = `
               },
             }
           }
-          width="100rem"
+          width="auto"
         >
           <styled.div
+            arrowPositionX="50%"
             hostRef={[Function]}
             innerRef={[Function]}
-            width="100rem"
+            width="auto"
           >
             <div
               className="c0"
-              width="100rem"
+              width="auto"
             >
               Children
             </div>
@@ -201,6 +205,7 @@ exports[`<Popover /> should render open popover withouth a problem 1`] = `
 exports[`<Popover /> should render with a different width 1`] = `
 <Popover
   active={false}
+  arrowPositionX="50%"
   theme={
     Object {
       "breakpoints": Object {
@@ -332,6 +337,7 @@ exports[`<Popover /> should render with a different width 1`] = `
 exports[`<Popover /> should render withouth a problem 1`] = `
 <Popover
   active={false}
+  arrowPositionX="50%"
   theme={
     Object {
       "breakpoints": Object {
@@ -447,7 +453,7 @@ exports[`<Popover /> should render withouth a problem 1`] = `
       },
     }
   }
-  width="100rem"
+  width="auto"
 >
   <PoseGroup
     animateOnMount={true}

diff --git a/src/Popover/elements.js b/src/Popover/elements.js
@@ -21,7 +21,7 @@ background: ${({ theme: { palette } }) => palette.white};
 
   position:absolute;
   top: -0.7rem;
-  left: 50%;
+  left: ${({ arrowPositionX }) => arrowPositionX};
   z-index:-1;
 
   height:14.14px;

diff --git a/src/Popover/index.js b/src/Popover/index.js
@@ -17,10 +17,15 @@ import { PopOver } from './elements';
  * @return {jsx}
  */
 
-const Popover = ({ active, children, width }) => (
+const Popover = ({ active, arrowPositionX, children, width }) => (
   <PoseGroup animateOnMount>
     {active && (
-      <PopOverAnimation width={width} pose={active ? 'enter' : 'exit'} key="ContainerAnimation">
+      <PopOverAnimation
+        width={width}
+        pose={active ? 'enter' : 'exit'}
+        arrowPositionX={arrowPositionX}
+        key="ContainerAnimation"
+      >
         {children}
       </PopOverAnimation>
     )}
@@ -33,6 +38,7 @@ const Popover = ({ active, children, width }) => (
 const { bool, node, string } = PropTypes;
 Popover.propTypes = {
   active: bool,
+  arrowPositionX: string,
   children: node,
   width: string,
 };
@@ -42,8 +48,9 @@ Popover.propTypes = {
  */
 Popover.defaultProps = {
   active: false,
+  arrowPositionX: '50%',
   children: null,
-  width: '100rem',
+  width: 'auto',
 };
 
 /**