Brand cards (#176)

* adding new toolbox cards patterns * addingbasic brand cards * working on brand cards * adding brand card interaction * adding new cards styles * making changes based on PR comments * updating style for brancd * removing example of brand cards and moving it to style guide * moved flag icon to optional dependencies * removing unneeded JS
US-CBP · Oct 31, 2017 · afd42e1 · afd42e1
1 parent 26d9ceb
commit afd42e1
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12,735 deletions.
diff --git a/app/kitchensink/images/toolbox_icon.svg b/app/kitchensink/images/toolbox_icon.svg
diff --git a/app/kitchensink/index.html b/app/kitchensink/index.html
@@ -977,81 +977,7 @@ <h2 class="mdl-card__title-text"><i class="fa fa-newspaper-o fa-fw " aria-hidden
                     </div>
                   </div>
                 </div>
-                <div class="brand-card-container">              
-                    <div class="mdl-card mdl-card-border" tabindex="0">
-                      <div class="image-container"><img src="images/toolbox_icon.svg"></div>
-
-                      <div class="mdl-card__title">
-                        <h3 class="mdl-card__title-text text-center">Card with svg image</h3>
-                      </div>
-                      <div class="mdl-card__supporting-text">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-                        <ul class="list-inline text-italic">
-                          <li>Sample</li>
-                          <li>Sample</li>
-                          <li>Sample</li>
-                          <li>Sample</li>
-                        </ul>
-                        <p><a href="#">Watch Tool Tour Video</a></p>
-                        <p><a href="#">Access info</a> | <i class="fa fa-warning text-warning"></i> <span class="text-warning">Sample warning text</span></p>
-                      </div>
-                      <div class="mdl-card__actions mdl-card--border">
-                         <button class="btn btn-circle">
-                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i> 
-                        </button>
-
-                        <button class="btn btn-default pull-right">
-                       <i class="fa fa-share-square-o"></i> Launch Tool
-                        </button>
-                      </div>
-                    </div>
-                    <div class="mdl-card mdl-card-border" tabindex="0">
-                      <div class="image-container bg-primary">
-                        <span class="icon-span"> <i class="fa fa-star fa-5x fa-inverse"></i>
-                      </span>
-                      </div>
-
-                      <div class="mdl-card__title">
-                        <h3 class="mdl-card__title-text text-center">Heading text</h3>
-                      </div>
-                      <div class="mdl-card__supporting-text">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-                      </div>
-                      <div class="mdl-card__actions mdl-card--border">
-                         <button class="btn btn-circle">
-                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i> 
-                        </button>
-
-                        <button class="btn btn-default pull-right">
-                       <i class="fa fa-share-square-o"></i> Launch Tool
-                        </button>
-                      </div>
-                    </div>
-                    <div class="mdl-card mdl-card-border" tabindex="0">
-                      <div class="image-container bg-warning">
-                         <span class="icon-span"> <i class="fa fa-cog fa-5x fa-inverse"></i>
-                      </span>
-                      </div>
-
-                      <div class="mdl-card__title">
-                        <h3 class="mdl-card__title-text text-center">Very very long heading text</h3>
-                      </div>
-                      <div class="mdl-card__supporting-text">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-                      </div>
-                      <div class="mdl-card__actions mdl-card--border">
-                         <button class="btn btn-circle">
-                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i> 
-                        </button>
-
-                        <button class="btn btn-default pull-right">
-                       <i class="fa fa-share-square-o"></i> Launch Tool
-                        </button>
-                      </div>
-                    </div>
-
-                </div>
-                <a href="https://us-cbp.github.io/cbp-style-guide/docs/components/cards.html" target="_blank"><span class="sr-only">Link opens in new window</span>See CBP style guide for more cards examples</a>
+              <a href="https://us-cbp.github.io/cbp-style-guide/docs/components/cards.html" target="_blank"><span class="sr-only">Link opens in new window</span>See CBP style guide for more cards examples</a>
               </div>              
             </div>  
             <!-- Dialogs -->

diff --git a/app/kitchensink/kitchensink.js b/app/kitchensink/kitchensink.js
@@ -123,17 +123,5 @@ $(document).ready(function () {
   })
   $('#topSecret').on('click', function () {
     hulkIt('top-secret')
-  })
-
-  //brand card interaction
-  $('.btn-circle').on('click', function(){
-
-    if ($(this).parents('.mdl-card').hasClass('brand-card-expand')) {
-      $(this).parents('.mdl-card').removeClass('brand-card-expand');
-    } else {
-      $('.mdl-card').removeClass('brand-card-expand');
-      $(this).parents('.mdl-card').addClass('brand-card-expand');
-    }
-
-  })
+  })  
 })
diff --git a/app/styles/custom/_colors.scss b/app/styles/custom/_colors.scss
@@ -7,9 +7,9 @@
   background-color: $color !important;
   color: #fff !important;
 
-  &:hover, &:focus {
+  /* &:hover, &:focus {
     background-color: darken($color, 10%) !important;
-  }
+  } */
 }
 
 .bg-primary { @include bg-color-variant($brand-primary); }

diff --git a/app/styles/vendor/_material_cards.scss b/app/styles/vendor/_material_cards.scss
@@ -197,8 +197,8 @@ $card-actions-font-size: ceil(($font-size-base * 1.04)); // ~15px
       margin-left: auto;
       margin-right: auto;
       margin-top: -16px;
-      height: 120px;
-      width: 120px;
+      height: 125px;
+      width: 125px;
       border-radius: 7px;
       vertical-align: middle;
       text-align: center;
@@ -210,7 +210,10 @@ $card-actions-font-size: ceil(($font-size-base * 1.04)); // ~15px
         white-space: nowrap;
         align-items: center;
         justify-content: center;
-      }      
+      }  
+      img{
+        border-radius: 7px;
+      }    
     }
     .mdl-card__title {
       padding: 16px 25px;
@@ -275,8 +278,7 @@ $card-actions-font-size: ceil(($font-size-base * 1.04)); // ~15px
       }
     }
     &.brand-card-expand {
-      //flex-grow: 2;
-      width: 400px;
+      width: 432px;
       height: auto;
 
       .image-container {

diff --git a/package.json b/package.json
@@ -45,7 +45,6 @@
     "expose-loader": "0.7.1",
     "extract-text-webpack-plugin": "0.9.1",
     "file-loader": "0.8.5",
-    "flag-icon-css": "2.8.0",
     "html-loader": "0.4.3",
     "html-webpack-plugin": "2.22.0",
     "immutable": "3.8.1",
@@ -69,6 +68,7 @@
     "webpack-dev-server": "1.16.1"
   },
   "optionalDependencies": {
+    "flag-icon-css": "2.8.0",       
     "jquery.inputmask": "3.3.3"
   },
   "scripts": {