[CHEC-1932] Add new borders, background, and shadow props

src/components/ChecCard.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="card" :class="classObject">
-    <div class="card__inner-wrapper" :class="[tailwindClasses, innerClass]">
+    <div
+      class="card__inner-wrapper"
+      :class="[tailwindClasses, innerClassBackground, innerClass]"
+    >
       <!--
         @slot Card content
       -->
@@ -14,23 +17,57 @@ import TailwindClasses from '../mixins/TailwindClasses';
 
 export default {
   name: 'ChecCard',
-  mixins: [TailwindClasses('p-8 bg-white')],
+  mixins: [TailwindClasses('p-8')],
   props: {
     /**
      * Class to pass to inner container
      */
     innerClass: {
-      type: String,
+      type: [String, Array],
       default: '',
     },
     /**
      * The style of the borders on the card. One of "full", "none", "vertical", "horizontal".
      */
     borders: {
       type: String,
-      default: 'full',
+      default: 'none',
+      validator(value) {
+        return [
+          'none',
+          'full',
+          'vertical',
+          'horizontal',
+        ].includes(value);
+      },
+    },
+    /**
+     * The color of the borders on the card. One of "holo", "dark", "light".
+     */
+    borderStyle: {
+      type: String,
+      default: 'holo',
+      validator(value) {
+        return [
+          'holo',
+          'light',
+          'dark',
+        ].includes(value);
+      },
+    },
+    /**
+     * The background color of the card. One of "white", "dark", "gray", "transparent".
+     */
+    background: {
+      type: String,
+      default: 'white',
       validator(value) {
-        return ['full', 'none', 'vertical', 'horizontal'].includes(value);
+        return [
+          'white',
+          'transparent',
+          'dark',
+          'gray',
+        ].includes(value);
       },
     },
     /**
@@ -41,6 +78,10 @@ export default {
      * allows card to apply the css class '.card--active' on pointer hovers
      */
     hoverable: Boolean,
+    /**
+     * Allows card to have shadow
+     */
+    shadow: Boolean,
     /**
      * sets card to active, applying the css class '.card--active' by default
      */
@@ -54,21 +95,27 @@ export default {
      */
     classObject() {
       return [
+        `card--background-${this.background}`,
         `card--border-${this.borders}`,
+        `card--border-style-${this.borderStyle}`,
         {
           'card--compact': this.compact,
           'card--hoverable': this.hoverable,
+          'card--shadow': this.shadow,
           'card--active': this.active,
         },
       ];
     },
+    innerClassBackground() {
+      return [`card__inner-wrapper--background-${this.background}`];
+    },
   },
 };
 </script>
 
 <style lang="scss">
 .card {
-  @apply relative shadow-sm rounded-lg p-1 bg-hologram;
+  @apply relative rounded-md border-4 p-1;
 
   &--hoverable {
     @apply transition duration-200 ease-in-out;
@@ -80,10 +127,26 @@ export default {
 
   &__inner-wrapper {
     @apply rounded-md h-full;
+
+    &--background-white {
+      @apply bg-white;
+    }
+
+    &--background-gray {
+      @apply bg-gray-300;
+    }
+
+    &--background-dark {
+      @apply bg-gray-600;
+    }
+
+    &--background-transparent {
+      @apply bg-transparent;
+    }
   }
 
   &--compact {
-    @apply rounded;
+    @apply rounded border-2;
 
     padding: 2px;
 
@@ -92,20 +155,52 @@ export default {
     }
   }
 
+  &--shadow {
+    @apply shadow-sm;
+  }
+
+  &--background-white {
+    @apply bg-white;
+  }
+
+  &--background-dark {
+    @apply bg-gray-600;
+  }
+
+  &--background-gray {
+    @apply bg-gray-300;
+  }
+
+  &--background-transparent {
+    @apply bg-transparent;
+  }
+
   &--border-none {
-    @apply p-0 rounded-md;
+    @apply border-0 p-0;
+  }
+
+  &--border-style-holo {
+    @apply bg-hologram border-0;
+  }
+
+  &--border-style-dark {
+    @apply border-gray-500 p-0;
+  }
+
+  &--border-style-light {
+    @apply border-gray-300 p-0;
   }
 
   &--border-vertical {
-    @apply px-0 overflow-hidden;
+    @apply py-0 border-b-0 border-t-0 overflow-hidden;
 
     .card__inner-wrapper {
       @apply rounded-none;
     }
   }
 
   &--border-horizontal {
-    @apply py-0 overflow-hidden;
+    @apply px-0 border-r-0 border-l-0 overflow-hidden;
 
     .card__inner-wrapper {
       @apply rounded-none;

src/stories/components/ChecCard.stories.mdx

@@ -19,11 +19,20 @@ import TextField from '../../components/TextField.vue';
       },
       props: {
         borders: {
-          default: select('Borders', ['full', 'none', 'vertical', 'horizontal']),
+          default: select('Borders', ['none', 'full', 'vertical', 'horizontal'], 'none'),
+        },
+        borderStyle: {
+          default: select('Border style', ['dark', 'light', 'holo'], 'holo'),
+        },
+        background: {
+          default: select('Background', ['white', 'dark', 'transparent', 'gray'], 'white'),
         },
         compact: {
           default: boolean('Compact')
         },
+        shadow: {
+          default: boolean('Shadow', true)
+        },
         active: {
           default: boolean('Active', false)
         },
@@ -33,7 +42,16 @@ import TextField from '../../components/TextField.vue';
       },
       template: `
         <div class="p-16 flex justify-center w-full bg-gray-100">
-          <ChecCard :borders="borders" :compact="compact" :active="active" :hoverable="hoverable" class="w-40 h-40">
+          <ChecCard
+            :borders="borders"
+            :compact="compact"
+            :background="background"
+            :border-style="borderStyle"
+            :shadow="shadow"
+            :active="active"
+            :hoverable="hoverable"
+            class="w-40 h-40"
+          >
             <p class="self-center mx-auto">Nothing here</p>
           </ChecCard>
         </div>`
@@ -50,21 +68,40 @@ import TextField from '../../components/TextField.vue';
         ChecCard
       },
       props: {
+        borderStyle: {
+          default: select('Border style', ['dark', 'light', 'holo'], 'holo'),
+        },
         active: {
           default: boolean('Active', false)
         },
         hoverable: {
           default: boolean('Hoverable', true)
         },
+        background: {
+          default: select('Background', ['white', 'dark', 'gray', 'transparent'], 'white'),
+        },
+        shadow: {
+          default: boolean('Shadow', true),
+        },
       },
       data() {
         return {
-          borders: ['full', 'none', 'vertical', 'horizontal'],
+          borders: ['none', 'full', 'vertical', 'horizontal'],
         };
       },
       template: `
         <div class="p-16 flex flex-col justify-between items-center w-full bg-gray-100 space-y-4">
-          <ChecCard v-for="border in borders" :borders="border" :active="active" :hoverable="hoverable" class="w-1/2 h-40 text-center">
+          <ChecCard
+            v-for="border in borders"
+            :borders="border"
+            :border-style="borderStyle"
+            :background="background"
+            :shadow="shadow"
+            :active="active"
+            :hoverable="hoverable"
+            class="w-1/2 h-40
+            text-center"
+          >
             <code class="text-center">borders="{{ border }}"</code>
           </ChecCard>
         </div>`
@@ -84,13 +121,16 @@ import TextField from '../../components/TextField.vue';
         hoverable: {
           default: boolean('Hoverable', true)
         },
+        shadow: {
+          default: boolean('Shadow')
+        },
       },
       components: {
         ChecCard
       },
       template: `
         <div class="p-16 flex justify-center w-full bg-gray-100">
-          <ChecCard borders="full" compact :active="active" :hoverable="hoverable" class="w-40 h-40">
+          <ChecCard borders="full" border-style="holo" :shadow="shadow" background="white" compact :active="active" :hoverable="hoverable" class="w-40 h-40">
             <p class="self-center mx-auto">Nothing here</p>
           </ChecCard>
         </div>`
@@ -109,21 +149,28 @@ import TextField from '../../components/TextField.vue';
       },
       props: {
         borders: {
-          default: select('Borders', ['full', 'none', 'vertical', 'horizontal']),
+          default: select('Borders', ['full', 'none', 'dark', 'light'], 'full'),
+        },
+        background: {
+          default: select('Background', ['white', 'dark', 'gray', 'transparent'], 'white'),
         },
         active: {
           default: boolean('Active', false)
         },
         hoverable: {
           default: boolean('Hoverable', true)
         },
+        shadow: {
+          default: boolean('Shadow')
+        },
       },
       template: `
         <div class="p-16 flex justify-center w-full font-lato">
           <ChecCard
             :borders="borders"
+            :background="background"
+            :shadow="shadow"
             class="w-full max-w-lg"
-            tailwind="bg-gray-100"
             :active="active"
             :hoverable="hoverable"
           >

src/stories/components/ChecCard/InnerBlock.stories.mdx

@@ -75,7 +75,7 @@ import ChecHeader from '../../../components/ChecHeader.vue';
       },
       template: `
         <div class="mt-8 flex justify-around max-w-md mx-auto">
-          <ChecCard tailwind="p-4" class="w-full">
+          <ChecCard tailwind="p-4" class="w-full" shadow background="full">
             <ChecHeader variant="card" title="Demo card" />
             <p class="py-4">Some misc card content</p>
             <InnerBlock :title="title" :titleTag="titleTag" :actionText="actionText" :actionColor="actionColor">