fix(pfInfoStatusCard): Tweak infoStatusCard as per UX guidance (#632)

Author: AllenBW

src/card/card.less

@@ -77,17 +77,25 @@
 
 .card-pf-info-status {
   display: flex;
-  .info-image-container {
+  margin: 0 10px;
+  .card-pf-info-image {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction:column;
-    margin-right: 10px;
+    margin-right: 15px;
     .info-icon {
       font-size: 50px;
     }
     .info-img {
       max-height: 50px;
     }
   }
+  .card-pf-info-content {
+    margin: 10px 0;
+    .card-pf-title{
+      margin-top: 10px;
+      margin-bottom: 15px;
+    }
+  }
 }

src/card/info-status/info-status-card.html

@@ -1,22 +1,22 @@
 <div class="card-pf card-pf-info-status"
      ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
-  <div class="info-image-container">
+  <div class="card-pf-info-image">
     <img ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt=""
          class="info-img"/>
     <span class="info-icon {{$ctrl.status.iconClass}}"></span>
   </div>
-  <div>
+  <div class="card-pf-info-content">
     <h2 class="card-pf-title" ng-if="$ctrl.status.title">
       <a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
         <span class="">{{$ctrl.status.title}}</span>
       </a>
       <span ng-if="!$ctrl.status.href">
-            <span class="">{{$ctrl.status.title}}</span>
-          </span>
+        <span class="">{{$ctrl.status.title}}</span>
+      </span>
     </h2>
-    <p ng-if="$ctrl.shouldShowHtmlContent" ng-bind-html="$ctrl.trustAsHtml(item)"
-       ng-repeat="item in $ctrl.status.info track by $index"></p>
-    <p ng-if="!$ctrl.shouldShowHtmlContent" ng-bind="item"
-       ng-repeat="item in $ctrl.status.info track by $index"></p>
+    <div ng-if="$ctrl.shouldShowHtmlContent" class="card-pf-info-item" ng-bind-html="$ctrl.trustAsHtml(item)"
+         ng-repeat="item in $ctrl.status.info track by $index"></div>
+    <div ng-if="!$ctrl.shouldShowHtmlContent" class="card-pf-info-item" ng-bind="item"
+         ng-repeat="item in $ctrl.status.info track by $index"></div>
   </div>
 </div>

test/card/info-status/info-status-card.component.spec.js

@@ -1,20 +1,20 @@
 describe('Component: pfInfoStatusCard', function () {
-  var $scope, $compile, element, cardClass
+  var $scope, $compile, element, cardClass;
 
-  beforeEach(module('patternfly.card', 'card/info-status/info-status-card.html'))
+  beforeEach(module('patternfly.card', 'card/info-status/info-status-card.html'));
 
   beforeEach(inject(function (_$compile_, _$rootScope_) {
-    $compile = _$compile_
-    $scope = _$rootScope_
-  }))
+    $compile = _$compile_;
+    $scope = _$rootScope_;
+  }));
 
   describe('Page with pf-info-status-card component', function () {
 
     var compileCard = function (markup, scope) {
-      var el = $compile(markup)(scope)
-      scope.$digest()
-      return el
-    }
+      var el = $compile(markup)(scope);
+      scope.$digest();
+      return el;
+    };
 
     it('should set the title link, and icons class', function () {
 
@@ -25,20 +25,20 @@ describe('Component: pfInfoStatusCard', function () {
         'info': [
           'VM Name: aapdemo002'
         ]
-      }
+      };
 
-      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
+      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope);
 
       //Make sure a link renders in the title
-      expect(angular.element(element).find('.card-pf-title').find('a').length).toBe(1)
+      expect(angular.element(element).find('.card-pf-title').find('a').length).toBe(1);
 
       //Make sure the class is getting set for the title icon
-      expect(angular.element(element).find('.fa').hasClass('fa-shield')).toBeTruthy()
+      expect(angular.element(element).find('.fa').hasClass('fa-shield')).toBeTruthy();
 
       // By default, showTopBorder if not defined, should be false, resulting in hiding the top
       // border, ie. having a .card-pf class
-      cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented')
-      expect(cardClass).toBeFalsy()
+      cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
+      expect(cardClass).toBeFalsy();
     })
 
     it('No link should be present in the title', function () {
@@ -49,13 +49,13 @@ describe('Component: pfInfoStatusCard', function () {
         'info': [
           'VM Name: aapdemo002'
         ]
-      }
+      };
 
-      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
+      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope);
 
       //Make sure a link renders in the title
-      expect(angular.element(element).find('.card-pf-title').find('a').length).toBe(0)
-    })
+      expect(angular.element(element).find('.card-pf-title').find('a').length).toBe(0);
+    });
 
     it('should set the info', function () {
 
@@ -69,32 +69,31 @@ describe('Component: pfInfoStatusCard', function () {
           'IP Address: 10.9.62.100',
           'Power status: on'
         ]
-      }
+      };
 
-      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
+      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope);
 
-      info = angular.element(element).find('p')
+      info = angular.element(element).find('.card-pf-info-item');
 
       //Make sure four info blocks render
-      expect(info.length).toBe(4)
-    })
+      expect(info.length).toBe(4);
+    });
 
     it('should show the top border', function () {
-      element = compileCard('<pf-info-status-card show-top-border="true"></pf-info-status-card>', $scope)
+      element = compileCard('<pf-info-status-card show-top-border="true"></pf-info-status-card>', $scope);
 
       // showTopBorder set to true, results in having the .card-pf-accented class
-      cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented')
-      expect(cardClass).toBeTruthy()
-
-    })
+      cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
+      expect(cardClass).toBeTruthy();
+    });
 
     it('should hide the top border', function () {
-      element = compileCard('<pf-info-status-card show-top-border="false"></pf-info-status-card>', $scope)
+      element = compileCard('<pf-info-status-card show-top-border="false"></pf-info-status-card>', $scope);
 
       // showTopBorder set to false, results in not having the .card-pf-accented class
-      cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented')
-      expect(cardClass).toBeFalsy()
-    })
+      cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
+      expect(cardClass).toBeFalsy();
+    });
 
     it('should set of the iconImage value', function () {
 
@@ -106,14 +105,14 @@ describe('Component: pfInfoStatusCard', function () {
           '12 Snapshots',
           'Drift History: 1'
         ]
-      }
+      };
 
-      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
+      element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope);
 
       // should have the images
-      imageElements = angular.element(element).find('.info-img')
-      expect(imageElements.length).toBe(1)
-      expect(angular.element(imageElements[0]).attr('src')).toBe('img/OpenShift-logo.svg')
-    })
-  })
-})
+      imageElements = angular.element(element).find('.info-img');
+      expect(imageElements.length).toBe(1);
+      expect(angular.element(imageElements[0]).attr('src')).toBe('img/OpenShift-logo.svg');
+    });
+  });
+});