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

Author: Celeste Glavin

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 |

docs/html/card/card--link.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.

docs/html/card/card.html

@@ -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;

packages/core/src/components/card/_card.scss

@@ -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>
   ));