Merge pull request #74 from dod-ccpo/ui/lists-tables

Styles for block lists and tables

scss/atat.scss

@@ -7,8 +7,9 @@
 @import 'elements/typography';
 @import 'elements/inputs';
 @import 'elements/buttons';
-@import 'elements/tables';
 @import 'elements/panels';
+@import 'elements/block_lists';
+@import 'elements/tables';
 
 @import 'components/site_action';
 @import 'components/empty_state';

scss/elements/_block_lists.scss

@@ -0,0 +1,51 @@
+@mixin block-list {
+  @include panel-margin;
+
+  > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin block-list-header {
+  @include panel-base;
+  @include panel-theme-default;
+  padding: $gap * 2;
+}
+
+@mixin block-list__title {
+  @include h4;
+  margin: 0;
+}
+
+@mixin block-list-item {
+  @include panel-base;
+  margin: 0;
+  padding: $gap * 2;
+  border-top: 0;
+  border-bottom: 1px dashed $color-gray-light;
+
+  @at-root li#{&} {
+    &:last-child {
+      border-bottom-style: solid;
+    }
+  }
+}
+
+
+.block-list {
+  @include block-list;
+}
+
+.block-list__header {
+  @include block-list-header;
+}
+
+.block-list__title {
+  @include block-list__title;
+}
+
+.block-list__item {
+  @include block-list-item;
+}

scss/elements/_panels.scss

@@ -9,6 +9,8 @@
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
+  border-left: 0;
+  border-right: 0;
 }
 
 @mixin panel-theme-default {
@@ -17,6 +19,9 @@
 }
 
 @mixin panel-margin {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
   margin-bottom: $site-margins-mobile * 2;
 
   @include media($medium-screen) {
@@ -29,9 +34,14 @@
   @include panel-theme-default;
   @include panel-margin;
 
-  &__content {
+  .panel__content {
-    padding-left: $gap*4;
+    margin: ($gap * 2) 0;
-    padding-right: $gap*4;
+    padding: 0 ($gap * 2);
+
+    @include media($medium-screen) {
+      margin: ($gap * 4) 0;
+      padding: 0 ($gap * 4);
+    }
   }
 }
 

scss/elements/_tables.scss

@@ -3,3 +3,41 @@
  * @see https://designsystem.digital.gov/components/tables/
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
  */
+
+table {
+  @include panel-margin;
+  min-width: 100%;
+
+  tr {
+    th,
+    td {
+      white-space: nowrap;
+    }
+
+    th {
+      @include block-list-header;
+    }
+
+    td {
+      @include block-list-item;
+    }
+
+    &:last-child {
+      td {
+        border-bottom-style: solid;
+      }
+    }
+
+    .table-cell--align-right {
+      text-align: right;
+    }
+
+    .table-cell--shrink {
+      width: 1%;
+    }
+
+    .table-cell--expand {
+      width: 100%;
+    }
+  }
+}

templates/styleguide.html.to

@@ -33,16 +33,6 @@
 <div class='col col--grow'>
   <div class='panel'>
     <div class='panel__content'>
-
-      <div class="panel__heading">
-        <h1>Panel Heading H1</h1>
-        <h2>Panel Heading H2</h2>
-        <h3>Panel Heading H3</h3>
-        <h4>Panel Heading H4</h4>
-        <h5>Panel Heading H5</h5>
-        <h6>Panel Heading H6</h6>
-      </div>
-
       <em>This is a panel content</em>
       <h1>Heading H1</h1>
       <h2>Heading H2</h2>
@@ -80,5 +70,52 @@
   <div class='panel'>
     Another panel without padding
   </div>
+
+  <section class='block-list'>
+    <header class='block-list__header'>
+      <h3 class='block-list__title'>A Block List</h3>
+    </header>
+    <ul>
+      <li class='block-list__item'>Block List Item</li>
+      <li class='block-list__item'>Block List Item</li>
+      <li class='block-list__item'>Block List Item</li>
+      <li class='block-list__item'>Block List Item</li>
+      <li class='block-list__item'>Block List Item</li>
+    </ul>
+  </section>
+
+  <table class='col--grow'>
+    <thead>
+      <tr>
+        <th class='table-cell--expand'>Expanded Column</th>
+        <th>Normal Column</th>
+        <th class='table-cell--align-right'>Right Aligned</th>
+        <th class='table-cell--shrink'>Shrunk</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td class='table-cell--expand'>Table Cell</td>
+        <td>Table Cell</td>
+        <td class='table-cell--align-right'>1,234.56</td>
+        <td class='table-cell--shrink'>Table Cell</td>
+      </tr>
+
+      <tr>
+        <td class='table-cell--expand'>Table Cell</td>
+        <td>Table Cell</td>
+        <td class='table-cell--align-right'>1,231,253.43</td>
+        <td class='table-cell--shrink'>Table Cell</td>
+      </tr>
+
+      <tr>
+        <td class='table-cell--expand'>Table Cell</td>
+        <td>Table Cell</td>
+        <td class='table-cell--align-right'>564.54</td>
+        <td class='table-cell--shrink'>Table Cell</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 {% end %}