Add hoverable effect to shared styles

src/components/SharedStyles.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { pageMargins, hoverEffect } from './shared/styles';
+
+export default {
+  title: 'Design System/SharedStyles',
+};
+
+const BlockWithMargin = styled.div`
+  ${pageMargins};
+  height: 300px;
+  background-color: #333;
+`;
+
+export const PageMargins = () => (
+  <div>
+    <p>
+      The box below has <code>pageMargins</code> styles applied to it which controls the horizontal
+      padding and margin
+    </p>
+    <BlockWithMargin />
+  </div>
+);
+
+const BlockWithHoverEffect = styled.div`
+  ${hoverEffect};
+  display: block;
+  height: 300px;
+`;
+
+export const HoverEffectRest = () => <BlockWithHoverEffect />;
+
+export const HoverEffectHover = () => <BlockWithHoverEffect className="__hover" />;
+
+export const HoverEffectActive = () => <BlockWithHoverEffect className="__active" />;

src/components/shared/styles.ts

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { rgba } from 'polished';
 
 // Global style variables
 export const background = {
@@ -96,3 +97,23 @@ export const pageMargins = css`
     margin: 0 ${pageMargin * 4}%;
   }
 `;
+
+export const hoverEffect = css`
+  border: 1px solid ${color.border};
+  border-radius: ${spacing.borderRadius.small}px;
+  transition: background 150ms ease-out, border 150ms ease-out,
+    transform 150ms ease-out;
+
+  &:hover,
+  &.__hover {
+    border-color: ${rgba(color.secondary, 0.5)};
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  &:active,
+  &.__active {
+    border-color: ${rgba(color.secondary, 1)};
+    transform: translate3d(0, 0, 0);
+  }
+`;