making updates to card component and adding css for accent and checkbox

source/_data/data.json

@@ -11,6 +11,9 @@
   "tagClass" : "tag-default",
   "dropdownText" : "Dropdown",
   "dropdownAriaLabelledby": "Dropdown",
+  "cardTitleSize": "h4",
+  "cardTitle": "Title",
+  "cardContents": "Lorem ipsum dolor sit amet <a href> More Information</a>.",
   "dropdownList": ["Action", "Another action", "Something else here"],
   "breadcrumbList": ["Back to Top Level", "Second Level", "Third Level"],
   "img": {

source/_patterns/components/03-cards/00-card.hbs

@@ -1,40 +1,51 @@
 
-<div class="card {{#if textcenter}}text-xs-center{{/if}} {{#if multiselect}}card-pf-view-multi-select{{/if}}">
+<div class="card {{#if textCenter}}text-xs-center{{/if}} {{#if cardAccent}}pf-card--accented{{/if}} {{#if multiselect}}pf-card--multiselect{{/if}}">
 {{#if cardHeader}}
-  <div class="card-header">
+  <div class="card-header {{#if multiselect}}pf-card--multiselect__header{{/if}}">
+    {{#if multiselect}}
+      <div class="pf-card__checkbox">
+        <input type="checkbox">
+      </div>
+    {{/if}}
     {{#if cardKebab}}
       {{> basics-dropdown isKebab=true pullright=true }}
     {{/if}}
-    <{{cardTitleSize}} class="card-title">{{cardTitle}}</{{cardTitleSize}}>
+    {{#if cardHeaderDropdown}}
+      {{> basics-dropdown dropdownText="Dropdown" pullright=true }}
+    {{/if}}
+    <{{cardTitleSize}} class="card-title">{{{cardTitle}}}</{{cardTitleSize}}>
   </div>
   <div class="card-block">
 {{else}}
-  <div class="card-block">
+  <div class="card-block {{#if multiselect}}pf-card--multiselect__block{{/if}}">
     {{#if multiselect}}
-      <div class="card-pf-view-checkbox">
+      <div class="pf-card__checkbox">
         <input type="checkbox">
       </div>
     {{/if}}
     {{#if cardTitleIconLarge}}
-      <div class="pf-card__top-element">
         {{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--lg" }}
-      </div>
     {{/if}}
     {{#if cardTitleIconMedium}}
-      <div class="pf-card__top-element">
         {{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--md" }}
-      </div>
     {{/if}}
     {{#if cardKebab}}
       {{> basics-dropdown isKebab=true pullright=true }}
     {{/if}}
-    <{{cardTitleSize}} class="card-title">{{cardTitle}}</{{cardTitleSize}}>
+    <{{cardTitleSize}} class="card-title">{{{cardTitle}}}</{{cardTitleSize}}>
 {{/if}}
+{{#if @partial-block}}
+  {{> @partial-block}}
+{{else}}
     <p class="card-text">{{{cardContents}}}</p>
+{{/if}}
   </div>
 {{#if cardFooter}}
   <div class="card-footer text-muted">
-    {{cardFooterContents}}
+    {{#if cardFooterDropdown}}
+      {{> basics-dropdown dropdownText="Dropdown" pullright=true }}
+    {{/if}}
+    {{{cardFooterContents}}}
   </div>
 {{/if}}
 </div>

source/_patterns/components/03-cards/00-card.md

@@ -4,3 +4,11 @@ title: Card
 ## Overview
 
 This is a Bootstrap component, [see complete documentation here](http://v4-alpha.getbootstrap.com/components/card/)
+
+## Usage
+
+| Class | Usage |
+| -- | -- |
+| `.pf-card--accented` **Applied to:** `.card` |  **Outcome:** Displays a top border with an accent color  **Required:** No  |
+| `.pf-card--multiselect` **Applied to:** `.card` |  **Outcome:** Alters the card layout to accommodate a checkbox  **Required:** If displaying a checkbox in the card  |
+| `.pf-card__checkbox` **Applied to:** parent `div` of `<input type="checkbox">` |  **Outcome:** Alters the card layout to accommodate a checkbox  **Required:** No **Remarks:** Include class mentioned in previous row  |

source/_patterns/components/03-cards/01-card-accent.hbs

@@ -0,0 +1 @@
+  {{> components-card cardTitleSize="h3" cardTitle="Card with Accent" cardContents="This card has an accent" cardAccent=true  }}

source/_patterns/components/03-cards/01-card-footer-dropdown.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card Footer with Dropdown" cardContents="This card has a Footer and a dropdown menu in the footer." cardFooter=true cardFooterContents="Card Footer" cardFooterDropdown=true }}

source/_patterns/components/03-cards/01-card-footer.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card with Footer" cardContents="This card has a Footer." textCenter=true cardFooter=true cardFooterContents="Card Footer"}}

source/_patterns/components/03-cards/01-card-header-dropdown.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card Header with Dropdown" cardContents="This card has a header and a dropdown menu in the header." cardHeader=true cardHeaderDropdown=true }}

source/_patterns/components/03-cards/01-card-header-kebab.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card Header with Kebab " cardContents="This card has a header and a kebab." textCenter=true cardHeader=true cardKebab=true }}

source/_patterns/components/03-cards/01-card-header.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card with Header" cardContents="This card has a header." textCenter=true cardHeader=true }}

source/_patterns/components/03-cards/01-card-icon-large.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h2" cardTitle="Card with Large Icon" cardContents="This card has a large title and a large icon, with centered text." textCenter=true cardTitleIconLarge=true }}

source/_patterns/components/03-cards/01-card-icon-medium.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h3" cardTitle="Card with Medium Icon" cardContents="This card has a medium size title and medium icon, with centered text" textCenter=true cardTitleIconMedium=true }}

source/_patterns/components/03-cards/01-card-kebab.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h3" cardTitle="Card with Kebab" cardContents="This card has a kebab" cardKebab=true }}

source/_patterns/components/03-cards/01-card-multiselect-header.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitle="Card with Checkbox and Header" cardContents="When cards when headers are enabled for multiselection, the checkbox displays in the header." multiselect=true cardHeader=true}}

source/_patterns/components/03-cards/01-card-multiselect.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h3" cardTitle="Card with Checkbox" cardContents="This card has a checkbox, for cases when a card view supports multiselection" multiselect=true }}

source/scss/_pf-basic-icons.scss

@@ -247,10 +247,5 @@
     font-size: $font-size-relative-lg;
     line-height: 1;
     padding: 0 0 $pf-spacer-xxxs;
-    &:active,
-    &:focus,
-    &:hover {
-      color: $color-pf-blue-500;
-    }
   }
 }

source/scss/_pf-component-card.scss

@@ -24,3 +24,29 @@
     border-top-color: $pf-card-border-color
   }
 }
+.pf-card--accented {
+  border-top: 2px solid $color-pf-blue-300;
+}
+.pf-card--multiselect__block,
+.pf-card--multiselect__header {
+  padding-left: $pf-spacer-xxl;
+  padding-right: $pf-spacer-xxl;
+}
+.pf-card__checkbox {
+  position: absolute;
+  top: $pf-spacer-xxxs;
+  left: $pf-spacer-xxs;
+  input[type=checkbox] {
+    //visibility: hidden; is not keyboard accessible and should be replaced with something that keeps the checkbox "visible" in the dom but not rendered on the screen
+    // using z-index to push the checkbox behind the card until it has keyboard focus, or the user hovers over the card
+    z-index:-1;
+    position: relative;
+    width: $pf-spacer-xxxl;
+    height: $pf-spacer-xxxl;
+    .pf-card--multiselect:hover &,
+    &:focus,
+    &:checked {
+      z-index:auto;
+    }
+  }
+}