initial draft of a kebab pattern and a card pattern

patternfly · Nov 7, 2016 · 90fb640 · 90fb640
1 parent 87ae6d8
commit 90fb640
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 4 deletions.
diff --git a/source/_patterns/basics/dropdowns/00-dropdown.hbs b/source/_patterns/basics/dropdowns/00-dropdown.hbs
@@ -1,8 +1,12 @@
-<div class="dropdown {{ dropdownState }}" aria-labelledby="{{ dropdownAriaLabelledby }}">
-  <button type="button" class="btn {{ btnClass }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    {{ dropdownText }}
+<div class="dropdown {{ dropdownState }} {{#if isKebab}}pf-dropdown__kebab{{/if}} {{#if pullright}}pull-right{{/if}}" aria-labelledby="{{ dropdownAriaLabelledby }}">
+  <button type="button" class="btn {{#if isKebab}}btn-link{{else}}{{ btnClass }}{{/if}}  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    {{#if isKebab}}
+      <span class="fa fa-ellipsis-v"></span>
+    {{else}}
+      {{ dropdownText }}
+    {{/if}}
   </button>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu {{#if pullright}}dropdown-menu-right{{/if}}">
     {{#each dropdownList}}
       <a class="dropdown-item" href="#">{{this}}</a>
     {{/each}}

diff --git a/source/_patterns/basics/dropdowns/02-dropdown-styles.hbs b/source/_patterns/basics/dropdowns/02-dropdown-styles.hbs
@@ -1,6 +1,8 @@
+{{> basics-dropdown dropdownText= "On Right" btnClass="btn-primary" pullright=true }}
 {{> basics-dropdown dropdownText= "Primary" btnClass="btn-primary" }}
 {{> basics-dropdown dropdownText= "Secondary" btnClass="btn-secondary" }}
 {{> basics-dropdown dropdownText= "Success" btnClass="btn-success" }}
 {{> basics-dropdown dropdownText= "Info" btnClass="btn-info" }}
 {{> basics-dropdown dropdownText= "Warning" btnClass="btn-warning" }}
 {{> basics-dropdown dropdownText= "Danger" btnClass="btn-danger" }}
+{{> basics-dropdown isKebab= true }}
diff --git a/source/_patterns/basics/dropdowns/03-dropdown-kebab.hbs b/source/_patterns/basics/dropdowns/03-dropdown-kebab.hbs
@@ -0,0 +1,3 @@
+{{> basics-dropdown isKebab= true }}
+{{> basics-dropdown isKebab= true dropdownState="open" }}
+<div>Paragraph included to get <br />past this dropdown menu<br /><br /></div>
diff --git a/source/_patterns/basics/dropdowns/03-dropdown-kebab.md b/source/_patterns/basics/dropdowns/03-dropdown-kebab.md
diff --git a/source/_patterns/components/03-cards/00-card-footer.hbs b/source/_patterns/components/03-cards/00-card-footer.hbs
@@ -0,0 +1,14 @@
+{{#if isCardFooter}}
+{{else}}
+<div class="card ">
+  <div class="card-block">
+    <p class="card-text">Lorem ipsum dolor sit amet <a href> More Information</a>.</p>
+{{/if}}
+  </div>
+{{#if cardFooter}}
+  <div class="card-footer text-muted">
+    {{cardFooterContents}}
+  </div>
+{{/if}}
+
+</div>
diff --git a/source/_patterns/components/03-cards/00-card-footer.md b/source/_patterns/components/03-cards/00-card-footer.md
diff --git a/source/_patterns/components/03-cards/00-card-heading.hbs b/source/_patterns/components/03-cards/00-card-heading.hbs
@@ -0,0 +1,38 @@
+
+<div class="card {{#if textcenter}}text-xs-center{{/if}} {{#if multiselect}}card-pf-view-multi-select{{/if}}">
+{{#if cardHeader}}
+  <div class="card-header">
+    {{#if cardKebab}}
+      {{> basics-dropdown isKebab=true pullright=true dropdownState="open" }}
+    {{/if}}
+    <{{cardTitleSize}} class="card-title">{{cardTitle}}</{{cardTitleSize}}>
+  </div>
+  <div class="card-block">
+{{else}}
+  <div class="card-block">
+    {{#if multiselect}}
+      <div class="card-pf-view-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}}>
+{{/if}}
+{{#if isCardHeader}}
+{{else}}
+    <p class="card-text">Lorem ipsum dolor sit amet <a href> More Information</a>.</p>
+  </div>
+</div>
+{{/if}}
diff --git a/source/_patterns/components/03-cards/00-card-heading.md b/source/_patterns/components/03-cards/00-card-heading.md
diff --git a/source/_patterns/components/03-cards/00-card.hbs b/source/_patterns/components/03-cards/00-card.hbs
@@ -0,0 +1,40 @@
+
+<div class="card {{#if textcenter}}text-xs-center{{/if}} {{#if multiselect}}card-pf-view-multi-select{{/if}}">
+{{#if cardHeader}}
+  <div class="card-header">
+    {{#if cardKebab}}
+      {{> basics-dropdown isKebab=true pullright=true }}
+    {{/if}}
+    <{{cardTitleSize}} class="card-title">{{cardTitle}}</{{cardTitleSize}}>
+  </div>
+  <div class="card-block">
+{{else}}
+  <div class="card-block">
+    {{#if multiselect}}
+      <div class="card-pf-view-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}}>
+{{/if}}
+    <p class="card-text">{{{cardContents}}}</p>
+  </div>
+{{#if cardFooter}}
+  <div class="card-footer text-muted">
+    {{cardFooterContents}}
+  </div>
+{{/if}}
+</div>
diff --git a/source/_patterns/components/03-cards/00-card.md b/source/_patterns/components/03-cards/00-card.md
@@ -0,0 +1,6 @@
+---
+title: Card
+---
+## Overview
+
+This is a Bootstrap component, [see complete documentation here](http://v4-alpha.getbootstrap.com/components/card/)
diff --git a/source/_patterns/components/03-cards/01-card-sizes.hbs b/source/_patterns/components/03-cards/01-card-sizes.hbs
@@ -0,0 +1,81 @@
+<p class="figure-caption"><strong>Columns</strong> This example is using bootstrap wrapper .card-columns</p>
+<div class="card-columns">
+  {{> components-card cardTitleSize="h2" cardTitle="First card" cardContents="<strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires" textcenter=true cardTitleIconLarge=true }}
+  {{> components-card cardTitleSize="h2" cardTitle="Second card" cardContents="<strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires" textcenter=true cardTitleIconLarge=true }}
+  {{> components-card cardTitleSize="h2" cardTitle="Third card" cardContents="<strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires" textcenter=true cardTitleIconLarge=true }}
+  {{> components-card cardTitleSize="h2" cardTitle="Fourth card" cardContents="<strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires" textcenter=true cardTitleIconLarge=true }}
+  {{> components-card cardTitleSize="h2" cardTitle="Fifth card" cardContents="<strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires" textcenter=true cardTitleIconLarge=true }}
+  {{> components-card cardTitleSize="h2" cardTitle="Sixth card" cardContents="<strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires" textcenter=true cardTitleIconLarge=true }}
+</div>
+
+<p class="mt-pf-xxxl figure-caption"><strong>Groups</strong> This example is using bootstrap wrapper .card-group</p>
+<div class="card-group">
+  {{> components-card cardTitleSize="h3" cardTitle="Title" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." multiselect=true }}
+  {{> components-card cardTitleSize="h3" cardTitle="Second card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." multiselect=true }}
+  {{> components-card cardTitleSize="h3" cardTitle="Third card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." multiselect=true }}
+  {{> components-card cardTitleSize="h3" cardTitle="Fourth card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." multiselect=true }}
+</div>
+<div class="card-group">
+  {{> components-card cardTitleSize="h3" cardTitle="Fifth card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." multiselect=true }}
+  {{> components-card cardTitleSize="h3" cardTitle="Sixth card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." multiselect=true }}
+</div>
+
+<p class="mt-pf-xxxl figure-caption"><strong>Deck</strong> This example is using bootstraps wrapper .card-deck</p>
+<p class="figure-caption">These cards also include the text-xs-center class.</p>
+
+<div class="card-deck">
+  {{> components-card cardTitleSize="h3" cardTitle="Title" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardKebab=true }}
+  {{> components-card cardTitleSize="h3" cardTitle="Second card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardKebab=true  }}
+  {{> components-card cardTitleSize="h3" cardTitle="Third card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardKebab=true  }}
+  {{> components-card cardTitleSize="h3" cardTitle="Fourth card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardKebab=true  }}
+</div>
+<div class="card-deck">
+  {{> components-card cardTitleSize="h3" cardTitle="Fifth card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardKebab=true  }}
+  {{> components-card cardTitleSize="h3" cardTitle="Sixth card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardKebab=true  }}
+</div>
+
+<p class="mt-pf-xxxl figure-caption"><strong>Grid</strong> This example is using our current application of .col-sm-4 etc... classes per card. </p>
+<p class="figure-caption">These cards also include the text-xs-center class.</p>
+<div class="row">
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card cardTitleSize="h4" cardTitle="First Card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardTitleIconMedium=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card cardTitleSize="h4" cardTitle="Second Card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardTitleIconMedium=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card cardTitleSize="h4" cardTitle="Third Card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardTitleIconMedium=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card cardTitleSize="h4" cardTitle="Fourth Card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardTitleIconMedium=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card cardTitleSize="h4" cardTitle="Fifth Card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardFooter=true cardFooterContents="Card Footer" }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card cardTitleSize="h4" cardTitle="Sixth Card" cardContents="Lorem ipsum dolor sit amet <a href> More Information</a>." textcenter=true cardHeader=true cardHeaderContents="Card Header" }}
+  </div>
+</div>
+
+<p class="mt-pf-xxxl figure-caption"><strong>Grid</strong> This example is using our current application of .col-sm-4 etc... classes per card. </p>
+<p class="figure-caption">These cards also include the text-xs-center class.</p>
+<div class="row">
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card-heading cardTitleSize="h4" cardTitle="First Card" textcenter=true cardTitleIconLarge=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card-heading cardTitleSize="h4" cardTitle="Second Card" textcenter=true cardTitleIconMedium=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card-heading cardTitleSize="h4" cardTitle="Third Card" textcenter=true isCardHeader=true }}<p class="card-text"><strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires</p></div></div>
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card-heading cardTitleSize="h4" cardTitle="Fourth Card" textcenter=true cardHeader=true cardKebab=true }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card-heading cardTitleSize="h4" cardTitle="Fifth Card" textcenter=true cardKebab=true isCardHeader=true }}<p class="card-text"><strong>Created On</strong> 2015-03-01 02:00 AM<br />Never Expires</p>{{> components-card-footer isCardFooter=true cardFooter=true cardFooterContents="Card footer." }}
+  </div>
+  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+    {{> components-card-heading cardTitleSize="h4" cardTitle="Sixth Card" textcenter=true multiselect=true }}
+  </div>
+</div>
diff --git a/source/_patterns/components/03-cards/01-card-sizes.md b/source/_patterns/components/03-cards/01-card-sizes.md
@@ -0,0 +1,6 @@
+---
+title: Card
+---
+## Overview
+
+This is a Bootstrap component, [see complete documentation here](http://v4-alpha.getbootstrap.com/components/card/)
diff --git a/source/scss/_pf-basic-dropdowns.scss b/source/scss/_pf-basic-dropdowns.scss
@@ -0,0 +1,21 @@
+//
+// Dropdowns
+// --------------------------------------------------
+
+// Kebab dropdown
+.pf-dropdown__kebab {
+  .dropdown-toggle::after {
+    display: none;
+  }
+  .btn-link {
+    color: $color-pf-black-900;
+    font-size: $font-size-relative-lg;
+    line-height: 1;
+    padding: 0 0 $pf-spacer-xxxs;
+    &:active,
+    &:focus,
+    &:hover {
+      color: $color-pf-blue-500;
+    }
+  }
+}
diff --git a/source/scss/_pf-basic-icons.scss b/source/scss/_pf-basic-icons.scss
@@ -237,3 +237,20 @@
   border: 2px solid $color-pf-blue-300;
   border-radius: 50%;
 }
+// Kebab dropdown
+.pf-dropdown__kebab {
+  .dropdown-toggle::after {
+    display: none;
+  }
+  .btn-link {
+    color: $color-pf-black-900;
+    font-size: $font-size-relative-lg;
+    line-height: 1;
+    padding: 0 0 $pf-spacer-xxxs;
+    &:active,
+    &:focus,
+    &:hover {
+      color: $color-pf-blue-500;
+    }
+  }
+}