Refactor/banner cards (#38)

* fix: banner card styles

* chore: replace css variables

* chore: add story controls to banner cards

* chore: add story controls for general cards

* fix: story control for default option and border css

* chore: remove base colors and replace with another color token for now

* chore: change modifier to variant in story

* chore: add all icons to stories and add margin bottom utility class

packages/vanilla/src/components/card/bannerCard.stories.js

@@ -0,0 +1,56 @@
+export default {
+  title: 'Patterns/Card',
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: 'Set the title in the banner area of the card',
+      control: 'text'
+    },
+    variant: {
+      name: 'Variant',
+      description: 'Set the variant class of the card',
+      control: 'select',
+      options: [
+        'default',
+        'info',  
+        'success', 
+        'danger'
+      ]
+    },
+    showIcon: {
+      name: 'Show Icon',
+      description: 'Show an icon in the title',
+      control: 'boolean'
+    },
+  }
+};
+
+const icons = {
+  default: '<i class="fas fa-info"></i>',
+  info: '<i class="fas fa-info-circle"></i>',  
+  success: '<i class="fas fa-check"></i>',
+  danger: '<i class="fas fa-exclamation-triangle"></i>'
+}
+
+const BannerCardTemplate = ({ title, variant, showIcon }) => {
+  return `
+    <div class="cbp-card__banner ${variant != 'default' ? `cbp-card__banner--${variant}` : ''}">
+      <h4 class="cbp-card__banner-title">${showIcon ? icons[variant] : ''}${title}</h4>
+      <div class="cbp-card__banner-content">
+        <p class="cbp-text-body cbp-margin-bottom-0">
+          Here is an example of some supplementary text for this purely informational card
+        </p>
+      </div>
+    </div>
+  `;
+};
+
+export const BannerCard = BannerCardTemplate.bind({});
+BannerCard.args = {
+  title: 'Banner Card',
+  variant: 'default'
+};
+

packages/vanilla/src/components/card/generalCard.stories.js

@@ -8,21 +8,23 @@ export default {
   },
   argTypes: {
     title: {
-      name: 'Card Title',
+      name: 'Title',
+      description: 'Set the title of the card',
       control: 'text'
     },
     modifier: {
-      name: 'Card Modifier',
+      name: 'Modifier',
+      description: 'Set the modifier class of the card',
       control: 'select',
-      options: ['', 'cbp-card--info', 'cbp-card--success', 'cbp-card--danger']
+      options: ['default', 'info', 'success', 'danger']
     }
   }
 };
 
 const DefaultGeneralCardTemplate = ({ title, modifier }) => {
   return `
     <div class="wrapper" style="display: grid; grid-template-columns: 432px">
-      <div class="cbp-card ${modifier}">
+      <div class="cbp-card ${modifier != 'default' ? `cbp-card--${modifier}` : ''}">
         <div class="cbp-card__content">
           <div class="cbp-card__header">
             <h4 class="cbp-card__title"><i class="fas fa-info-circle cbp-margin-right-2x"></i>${title}</h4>
@@ -68,20 +70,20 @@ const SmallGeneralCardTemplate = ({ title, modifier }) => {
 export const DefaultGeneralCard = DefaultGeneralCardTemplate.bind({});
 DefaultGeneralCard.args = {
   title: 'General Card',
-  modifier: ''
+  modifier: 'default'
 };
 DefaultGeneralCard.storyName = 'Default';
 
 export const GeneralCardMedia = GeneralCardMediaTemplate.bind({});
 GeneralCardMedia.args = {
   title: 'General Card',
-  modifier: ''
+  modifier: 'default'
 };
 GeneralCardMedia.storyName = 'With Media';
 
 export const SmallGeneralCard = SmallGeneralCardTemplate.bind({});
 SmallGeneralCard.args = {
   title: 'General Card',
-  modifier: ''
+  modifier: 'default'
 };
 SmallGeneralCard.storyName = 'Small Size';

packages/vanilla/src/sass/components/card/_banner.scss

@@ -0,0 +1,54 @@
+@mixin card-banner-modifier($title-background-color, $body-background-color, $body-border-color) {
+  & .cbp-card__banner-title {
+    background-color: $title-background-color;
+  }
+
+  & .cbp-card__banner-content {
+    background-color: $body-background-color;
+    border-color: $body-border-color;
+  }
+}
+
+.cbp-card__banner {
+  border: 0;
+}
+
+.cbp-card__banner-title {
+  align-items: center;
+  background-color: var(--cbp-color-gray-cool-60);
+  border-top-left-radius: var(--cbp-border-radius-softest);
+  border-top-right-radius: var(--cbp-border-radius-softest);;
+  color: var(--cbp-color-text-lightest);
+  display: flex;
+  font-size: var(--cbp-font-size-heading-xl);
+  font-weight: var(--cbp-font-weight-regular);
+  line-height: var(--cbp-line-height-md);
+  padding: var(--cbp-space-4x);
+
+  & > i {
+    margin-right: var(--cbp-space-2x);
+  }
+}
+
+.cbp-card__banner-content {
+  background-color: var(--cbp-color-gray-cool-10);
+  border-color: var(--cbp-color-gray-cool-30);
+  border-style: solid;
+  border-width: var(--cbp-border-size-md);
+  border-top: 0;
+  border-bottom-left-radius: var(--cbp-border-radius-softest);
+  border-bottom-right-radius: var(--cbp-border-radius-softest);
+  padding: var(--cbp-space-4x) var(--cbp-space-4x) var(--cbp-space-5x) var(--cbp-space-4x);
+}
+
+.cbp-card__banner--info {
+  @include card-banner-modifier(var(--cbp-color-info-dark), var(--cbp-color-info-lighter), var(--cbp-color-info-light));
+}
+
+.cbp-card__banner--success {
+  @include card-banner-modifier(var(--cbp-color-success-base), var(--cbp-color-success-lighter), var(--cbp-color-success-light));
+}
+
+.cbp-card__banner--danger {
+  @include card-banner-modifier(var(--cbp-color-danger-base), var(--cbp-color-danger-lighter), var(--cbp-color-danger-light));
+}

packages/vanilla/src/sass/components/card/_index.scss

@@ -1,2 +1,3 @@
 @forward 'base';
-@forward 'decision';
+@forward 'decision';
+@forward 'banner';