Add variants to Map Markers

components/Map/Markers/Marker.css

@@ -1,7 +1,5 @@
 .root {
   width: 15rem;
-  background-color: var(--color-white);
-  color: var(--color-greyDarker);
   border: none;
   padding: 0;
   border-radius: 4px;
@@ -18,7 +16,6 @@
   height: 0;
   position: absolute;
   z-index: var(--z-tooltip);
-  border-color: var(--color-white);
   border-left-color: transparent;
   border-right-color: transparent;
   border-bottom-color: transparent;
@@ -31,4 +28,22 @@
   max-height: 350px;
   overflow-y: auto;
   overflow-x: hidden;
+}
+
+.root.light {
+  background-color: var(--color-white);
+  color: var(--color-greyDarker);
+}
+
+.root.light:before{
+  border-top-color: var(--color-white);
+}
+
+.root.dark {
+  background-color: var(--color-greyDarkest);
+  color: var(--color-white);
+}
+
+.root.dark:before {
+  border-top-color: var(--color-greyDarkest);
 }

components/Map/Markers/Marker.js

@@ -3,8 +3,8 @@ import cx from 'classnames';
 
 import css from './Marker.css';
 
-const Marker = ({ className, scrollClassName, children }) => (
-  <div className={ cx(css.root, className) }>
+const Marker = ({ className, scrollClassName, children, variant }) => (
+  <div className={ cx(css.root, css[variant], className) }>
     <div className={ cx(css.scrollContainer, scrollClassName) }>
       { children }
     </div>
@@ -15,6 +15,11 @@ Marker.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
   scrollClassName: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'dark']),
+};
+
+Marker.defaultProps = {
+  variant: 'light',
 };
 
 export default Marker;

components/Map/Markers/Marker.story.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+import Marker from './Marker';
+import m from '../../../globals/modifiers.css';
+
+storiesOf('Map Marker', module)
+  .add('Default (Light)', () => (
+    <Marker className={ m.paSmI }>
+      In association football, marking is an organized defensive strategy which aims to prevent a
+      member of the opposing team (usually a striker) from taking control of the ball.
+    </Marker>
+  ))
+  .add('Dark', () => (
+    <Marker variant="dark" className={ m.paSmI }>
+      The terror it inspired... you have no idea, you’re too young. Just picture coming home and
+      finding the Dark Mark hovering over your house, and knowing what you’re about to find
+      inside... Everyone’s worst fear... the very worst.
+    </Marker>
+  ));