From 91666a3b2b9fc93acdee8d43796dfc334a3e5120 Mon Sep 17 00:00:00 2001
From: Celeste Glavin <celeste.glavin@wework.com>
Date: Wed, 27 Mar 2019 17:22:11 -0400
Subject: [PATCH] fix: update hover/active states for card border and title
 (#86)

* fix: add active color to cards and title

* chore: update stories

* fix: update colors to match spec

* docs: update link to not actually go anywhere

* docs: add note about new title class

* Update docs/html/card/card--link.html

Co-Authored-By: cmugla <celeste.glavin@wework.com>

* fix(card): update card styles, removes card--link

* Update card.html

* fix: update card spacing
---
 docs/components/card.md                      | 21 +-----
 docs/html/card/card--link.html               | 22 ------
 docs/html/card/card.html                     |  7 +-
 packages/core/src/components/card/_card.scss | 32 ---------
 packages/core/stories/card.stories.js        | 74 ++++++++------------
 5 files changed, 39 insertions(+), 117 deletions(-)
 delete mode 100644 docs/html/card/card--link.html

diff --git a/docs/components/card.md b/docs/components/card.md
index 787aadf0..c11556d1 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -3,26 +3,11 @@ label: Component
 title: Card
 ---
 
-<page-intro>Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.</page-intro>
+<page-intro>Cards are a unit of content, they typically have an image, a heading, and a small amount of copy.</page-intro>
 
-<component 
+<component
     name="Card"
     component="card"
-    variation="card" 
+    variation="card"
     >
 </component>
-
-<component 
-    name="Card as a link"
-    component="card"
-    variation="card--link" 
-    >
-</component>
-
-## Modifiers
-
-Use these modifiers with `.ray-card` class.
-
-| Selector          | Description                                 |
-| ----------------- | ------------------------------------------- |
-| `.ray-card--link` | Selector for applying link and hover styles |
diff --git a/docs/html/card/card--link.html b/docs/html/card/card--link.html
deleted file mode 100644
index 04d28969..00000000
--- a/docs/html/card/card--link.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<a
-  href="https://wework.com"
-  target="_blank"
-  rel="noopener noreferrer"
-  class="ray-card ray-card--link"
-  style="max-width: 400px;"
->
-  <div class="ray-card__image ray-image ray-image--16by9">
-    <img
-      src="https://source.unsplash.com/random/800x450?minimalist"
-      alt="card graphic"
-    />
-  </div>
-
-  <div class="ray-card__content">
-    <h4 class="ray-text--h4">Nicolas Boer 399</h4>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
-      minima itaque sint! Doloremque odio quia saepe.
-    </div>
-  </div>
-</a>
diff --git a/docs/html/card/card.html b/docs/html/card/card.html
index 73c7d424..f2b9adab 100644
--- a/docs/html/card/card.html
+++ b/docs/html/card/card.html
@@ -7,7 +7,12 @@
   </div>
 
   <div class="ray-card__content">
-    <h4 class="ray-text--h4">Nicolas Boer 399</h4>
+    <p class="ray-text--body-large">
+      <a aria-label="go to Better Together page" href="javascript:;"
+        >Better Together</a
+      >
+    </p>
+
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
       minima itaque sint! Doloremque odio quia saepe.
diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss
index 41c0fd7a..4558d1c1 100644
--- a/packages/core/src/components/card/_card.scss
+++ b/packages/core/src/components/card/_card.scss
@@ -13,38 +13,6 @@
     flex-direction: column;
     position: relative;
 
-    &--link {
-      cursor: pointer;
-      color: $ray-color-text-dark;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-
-      &:focus {
-        box-shadow: $ray-box-shadow-focus-state;
-      }
-
-      &:hover {
-        &::after {
-          border-color: $ray-color-blue-50;
-        }
-      }
-
-      &::after {
-        content: '';
-        border: 1px solid transparent;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: $ray-border-radius;
-        pointer-events: none;
-      }
-    }
-
     &__content {
       flex-grow: 1;
       padding: $card-padding;
diff --git a/packages/core/stories/card.stories.js b/packages/core/stories/card.stories.js
index 81ffc7f2..b768b08e 100644
--- a/packages/core/stories/card.stories.js
+++ b/packages/core/stories/card.stories.js
@@ -3,13 +3,11 @@ import { storiesOf } from '@storybook/react';
 
 import getPlaceholderURL from './util/placeholder';
 
+/* eslint-disable no-script-url */
 storiesOf('Card', module)
-  .add('card, link, image on top', () => (
-    <a
-      href="https://wework.com"
-      target="_blank"
-      rel="noopener noreferrer"
-      className="ray-card ray-card--link"
+  .add('card, with image on top', () => (
+    <div
+      className="ray-card"
       style={{
         maxWidth: '480px'
       }}
@@ -19,26 +17,29 @@ storiesOf('Card', module)
       </div>
 
       <div className="ray-card__content">
-        <h4 className="ray-text--h4">Nicolas Boer 399</h4>
+        <div className="ray-text--body-large">
+          <a href="javascript:;">Better Together</a>
+        </div>
+
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
           atque minima itaque sint! Doloremque odio quia saepe.
         </p>
       </div>
-    </a>
+    </div>
   ))
-  .add('card, link, image on bottom', () => (
-    <a
-      href="https://wework.com"
-      target="_blank"
-      rel="noopener noreferrer"
-      className="ray-card ray-card--link"
+  .add('card, with image on bottom', () => (
+    <div
+      className="ray-card"
       style={{
         maxWidth: '480px'
       }}
     >
       <div className="ray-card__content">
-        <h4 className="ray-text--h4">Nicolas Boer 399</h4>
+        <div className="ray-text--body-large">
+          <a href="javascript:;">Better Together</a>
+        </div>
+
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
           atque minima itaque sint! Doloremque odio quia saepe.
@@ -48,10 +49,10 @@ storiesOf('Card', module)
       <div className="ray-card__image ray-image ray-image--16by9">
         <img src={getPlaceholderURL('800x450')} />
       </div>
-    </a>
+    </div>
   ))
-  .add('card, link, no image', () => (
-    <a
+  .add('card, no image', () => (
+    <div
       href="https://wework.com"
       target="_blank"
       rel="noopener noreferrer"
@@ -61,13 +62,16 @@ storiesOf('Card', module)
       }}
     >
       <div className="ray-card__content">
-        <h4 className="ray-text--h4">Nicolas Boer 399</h4>
+        <div className="ray-text--body-large">
+          <a href="javascript:;">Better Together</a>
+        </div>
+
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
           atque minima itaque sint! Doloremque odio quia saepe.
         </p>
       </div>
-    </a>
+    </div>
   ))
   .add('card, image on top, with buttons', () => (
     <div
@@ -81,39 +85,21 @@ storiesOf('Card', module)
       </div>
 
       <div className="ray-card__content">
-        <h4 className="ray-text--h4">Nicolas Boer 399</h4>
-        <p>
+        <div className="ray-text--body-large">
+          <a href="javascript:;">Better Together</a>
+        </div>
+
+        <p className="ray-text--body">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
           atque minima itaque sint! Doloremque odio quia saepe.
         </p>
+
         <button className="ray-button ray-button--primary ray-button--compact">
           Sign Up Now
         </button>
-        <button className="ray-button ray-button--secondary ray-button--compact">
-          Learn More
-        </button>
         <button className="ray-button ray-button--tertiary ray-button--compact">
           Share
         </button>
       </div>
     </div>
-  ))
-  .add('card, tertiary button', () => (
-    <div
-      className="ray-card"
-      style={{
-        maxWidth: '480px'
-      }}
-    >
-      <div className="ray-card__content">
-        <h4 className="ray-text--h4">Nicolas Boer 399</h4>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
-          atque minima itaque sint! Doloremque odio quia saepe.
-        </p>
-        <button className="ray-button ray-button--tertiary ray-button--pull-left ray-button--compact">
-          Share
-        </button>
-      </div>
-    </div>
   ));