Separate EsCard

- EsCard (vertical, icon or full sized image)
- EsLinkCard (linked, icon, horizontal)

Re #276

Author: Florian Pichler

addon/components/es-card-content.js

@@ -0,0 +1,5 @@
+import Component from 'sparkles-component';
+
+export default class EsCardContent extends Component {
+
+}

addon/components/es-link-card.js

@@ -0,0 +1,4 @@
+import EsCard from './es-card';
+
+export default class EsLinkCard extends EsCard {
+}

addon/styles/addon.css

@@ -6,13 +6,13 @@
 @import 'typography.css';
 
 /* Modules */
-@import 'colors.css';
+@import 'backgrounds.css';
+@import 'background-shapes.css';
 @import 'container.css';
 @import 'layout.css';
 @import 'grid.css';
 @import 'icon.css';
 @import 'well.css';
-@import 'background-shapes.css';
 
 /* Helpers */
 @import 'helpers/index.css';

addon/styles/colors.css renamed to addon/styles/backgrounds.css

@@ -32,6 +32,14 @@
   --color-link: var(--color-brand);
   --color-link-hover: var(--color-brand-hc-light);
 
+  --color-card-bg: var(--color-gray-900);
+  --color-card-border: var(--color-gray-700);
+  --color-card-bg-hover: var(--color-gray-800);
+  --color-card-icon: var(--color-gray-400);
+  --color-card-icon-hover: var(--color-white);
+  --color-card-text: var(--color-gray-400);
+  --color-card-text-hover: var(---color-white);
+
   & h1,
   & h2,
   & h3,

addon/styles/components/es-card.css

@@ -1,61 +1,67 @@
 .card {
-  border: 2px solid var(--color-gray-300);
+  align-items: flex-start;
+  border: 2px solid var(--color-card-border);
   border-radius: var(--radius-lg);
   height: 100%;
   overflow: hidden;
   position: relative;
+  background: var(--color-card-bg);
+  color: var(--color-card-text);
 }
 
-.bg-dark .card {
-  border-color: var(--color-gray-600);
+.card__image {
+  display: block;
+  max-width: 100%;
+  max-height: auto;
+  border-bottom: 2px solid var(--color-card-border);
 }
 
-.card[card-link] h1 > a::after,
-.card[card-link] h2 > a::after,
-.card[card-link] h3 > a::after,
-.card[card-link] h4 > a::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  content: '';
+.card__icon {
+  display: block;
+  margin: var(--spacing-3) auto 0;
+  width: 64px;
+  height: auto;
+  flex: 0 0 auto;
+  color: var(--color-card-icon);
 }
 
-.card[card-link] a {
-  color: inherit;
+.card__content {
+  flex: 1 1 100%;
+  padding: var(--spacing-3);
 }
 
-.card[card-link]:focus-within,
-.card[card-link]:hover {
-  background-color: var(--color-gray-200);
+.card[full-image] .card__image {
+  max-width: 100%;
+  max-height: inherit;
+  margin: 0;
 }
 
-.bg-dark .card[card-link]:focus-within,
-.bg-dark .card[card-link]:hover {
-  background-color: var(--color-gray-800);
+.card--link {
+  display: flex;
+  flex-flow: row nowrap;
 }
 
-.card__image {
-  display: block;
-  max-width: 64px;
-  max-height: 64px;
-
-  margin: var(--spacing-2);
-  float: left;
+.card--link:focus-within,
+.card--link:hover {
+  background-color: var(--color-card-bg-hover);
+  border-color: var(--color-card-bg-hover);
+  color: var(--color-card-text-hover);
 }
 
-.card[vertical] .card__image {
-  margin: var(--spacing-2) auto;
-  float: none;
+.card--link a::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: '';
 }
 
-.card[full-image] .card__image {
-  max-width: 100%;
-  max-height: inherit;
-  margin: 0;
+.card--link .card__icon {
+  margin: var(--spacing-3) 0 var(--spacing-3) var(--spacing-3);
 }
 
-.card-content {
-  margin: var(--spacing-2);
+.card--link:focus-within .card__icon,
+.card--link:hover .card__icon {
+  color: var(--color-card-icon-hover);
 }

addon/styles/global.css

@@ -68,15 +68,20 @@
   --radius: 0.3125rem;
   --radius-lg: 0.625rem;
 
-
   --color-button-text: var(--color-white);
   --color-button-bg: var(--color-brand);
   --color-button-bg-hover: var(--color-brand-hc-dark);
-  --color-button-secondary-text: var(--color-brand);
+  --color-button-secondary-text: var(--color-brand-hc-dark);
   --color-button-secondary-bg: var(--color-white);
   --color-button-secondary-bg-hover: var(--color-brand);
   --color-button-secondary-text-hover: var(--color-white);
 
+  --color-card-bg: var(--color-gray-100);
+  --color-card-border: var(--color-gray-300);
+  --color-card-bg-hover: var(--color-gray-200);
+  --color-card-text: var(--color-gray-700);
+  --color-card-text-hover: var(---color-gray-900);
+
   --color-link: var(--color-brand-hc-dark);
   --color-link-hover: var(--color-brand);
 

addon/templates/components/es-card-content.hbs

@@ -0,0 +1,18 @@
+{{#if @icon}}
+  {{svg-jar @icon class="card__icon" width="60px"}}
+{{/if}}
+
+{{#if @image}}
+  <img
+    class="card__image"
+    src={{@image.src}}
+    alt={{if @image.alt @image.alt ""}}
+    role={{unless @image.alt "presentation"}}
+    width={{@image.width}}
+    height={{@image.width}}
+  >
+{{/if}}
+
+<div class="card__content">
+  {{yield}}
+</div>

addon/templates/components/es-card.hbs

@@ -1,8 +1,5 @@
-<li class="card" ...attributes>
-  {{#if @image}}
-    <img class="card__image" src={{@image}} alt={{if @alt @alt ""}} role={{unless @alt "presentation"}}>
-  {{/if}}
-  <div class="card-content">
+<li class="card {{if @image "card--image"}}" ...attributes>
+  <EsCardContent @icon={{@icon}} @image={{@image}}>
     {{yield}}
-  </div>
+  </EsCardContent>
 </li>

addon/templates/components/es-link-card.hbs

@@ -0,0 +1,7 @@
+<li class="card card--link" ...attributes>
+  <EsCardContent @icon={{@icon}}>
+    <h3><a href={{@href}}>{{@title}}</a></h3>
+
+    {{yield}}
+  </EsCardContent>
+</li>

app/components/es-card-content.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-card-content';

app/components/es-link-card.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-link-card';

app/templates/components/es-card-content.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-card-content';

app/templates/components/es-link-card.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-link-card';