feat(panels): update panels documentation to use list-cards

docs(panels): add examples of card types and behavior to panels BREAKING CHANGE: panel-card - has been removed. Behavior is now available using list-cards containing panels. [#81218882] Signed-off-by: Nicole Sullivan <nsullivan@pivotal.io> Signed-off-by: Geoff Pleiss <gpleiss@pivotal.io>
pivotal-cf · Oct 27, 2014 · 5cac9e6 · 5cac9e6
1 parent 7a70500
commit 5cac9e6
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 43 deletions.
diff --git a/src/pivotal-ui/components/lists.scss b/src/pivotal-ui/components/lists.scss
@@ -729,7 +729,7 @@ This is an example of a card list with the `list-cards-xs` stack point applied:
 </ul>
 
 ```
-Note: If you would like custom card dimensions, in your sass include the makeCard mixin, like so: `@include makeCard(height, width, name);`
+If you would like custom card dimensions, in your sass include the makeCard mixin, like so: `@include makeCard(height, width, name);`
 
 You can then access the class via `.list-card-#{name}`
 */
@@ -762,10 +762,13 @@ You can then access the class via `.list-card-#{name}`
   .list-card-#{$name} {
     @include setCardWidthResponsive($width);
     > li {
-      height: $height;
+      min-height: $height;
+      a.list-cards-link {
+        min-height: $height;
+      }
     }
   }
 }
 
 @include makeCard(116px, 435px, 1);
-@include makeCard(192px, 284px, 2);
+@include makeCard(196px, 284px, 2);
diff --git a/src/pivotal-ui/components/panels.scss b/src/pivotal-ui/components/panels.scss
@@ -72,15 +72,37 @@ Flex panels let us put a footer at the bottom of a fixed-height panel. Any panel
 support flexbox, the footer will appear where it would naturally, likely right below the panel-body content
 
 ```haml_example
-.panel.panel-flex.bg-neutral-11{style: 'height: 200px'}
-  .panel-body
-    Body Content
-  .panel-footer
-    Footer Content
+%ul.list-cards.list-card-2.list-cards-sm
+  %li.panel.panel-flex.bg-neutral-11
+    .panel-body
+      Body Content
+    .panel-footer
+      Footer Content
+  %li.panel.panel-flex.bg-neutral-11
+    .panel-body
+      Body Content
+    .panel-footer
+      Footer Content
+  %li.panel.panel-flex.bg-neutral-11
+    .panel-body
+      Body Content
+    .panel-footer
+      Footer Content
+  %li.panel.panel-flex.bg-neutral-11
+    .panel-body
+      Body Content
+    .panel-footer
+      Footer Content
+  %li.panel.panel-flex.bg-neutral-11
+    .panel-body
+      Body Content
+    .panel-footer
+      Footer Content
 ```
 */
 
 .panel-flex {
+  display: block;
   display: flex;
   flex-direction: column;
 
@@ -94,8 +116,6 @@ support flexbox, the footer will appear where it would naturally, likely right b
     align-self: auto;
   }
 
-
-
 }
 
 /*doc
@@ -105,25 +125,27 @@ name: panel_tile
 parent: panel
 ---
 
-```haml_example
-%a.panel.panel-tile.bg-neutral-11{href: 'http://google.com'}
-  .panel-body
-    Hover to see secondary state.
-  .panel-footer
-    This is the footer
+Tile panels extend the behavior of flex panels. They provide an animated footer on hover, at the bottom of a fixed-height panel.
+
+```html_example
+<ul class="list-cards list-card-1 list-cards-lg">
+  <li>
+    <a class="list-cards-link panel panel-flex panel-tile bg-neutral-11" href="http://www.google.com/">
+      <div class="panel-body">
+        Hover to see secondary state.
+      </div>
+      <div class="panel-footer">
+        This is the footer
+      </div>
+    </a>
+  </li>
+</ul>
 ```
+
 */
 
 .panel-tile {
-  width: 435px;
   border-bottom: 4px solid $shadow-3;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 120px;
   overflow: hidden;
   color: $text-color;
   -webkit-transition: border 300ms ease-out;
@@ -133,8 +155,6 @@ parent: panel
 
   .panel-body {
     -ms-flex: 1 0 auto;
-    flex: 1;
-    -webkit-flex: 1;
     padding: 25px 20px 0 20px;
     -webkit-transition: padding-top 300ms ease-out;
     -moz-transition: padding-top 300ms ease-out;
@@ -148,16 +168,19 @@ parent: panel
     text-align: center;
     font-size: $panel-tile-font-size;
     border-top: none; // bootstrap override
-    padding: 4px 15px; 
+    padding: 4px 15px;
     background: transparent;
     @include transition-pui();
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     @include transition-pui();
     border-width: 1px;
     background-color: $panel-tile-hover-bg-color;
     color: $text-color;
+    cursor: pointer;
+    outline: none;
 
     .panel-body {
       padding-top: 15px;
@@ -171,12 +194,6 @@ parent: panel
   }
 }
 
-@media all and (max-width: $screen-lg) {
-  .panel-tile {
-    width: 100%;
-  }
-}
-
 
 /*doc
 ---
@@ -234,7 +251,7 @@ name: panel_alt
 parent: panel
 ---
 
-Alternate panels can be in a default, off, or danger state. Add the class `.panel-card` to give the panel a minimum height.
+Alternate panels can be in a default, off, or danger state.
 
 ```haml_example_table
 .panel.panel-alt
@@ -260,7 +277,6 @@ Alternate panels can be in a default, off, or danger state. Add the class `.pane
 */
 
 .panel-alt {
-  width: 284px;
 
   // while creating a new space (form inside)
   &.panel-editing {
@@ -381,18 +397,22 @@ name: panel_card
 parent: panel
 ---
 
-The `.panel-card` makes any `.panel-body` have a minimum "card" height when applied to the `.panel`.
+Using panels with [card lists](/elements.html#list_cards) makes any `.panel-body` have a minimum "card" height.
 
 ```haml_example
-.panel.panel-card.bg-neutral-11
-  .panel-body
-    Card Panel
+%ul.list-cards.list-cards-sm.list-card-2
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
 ```
 
 */
-.panel-card {
-  min-height: 196px;
-}
 
 /*doc
 ---