GC-1634/design-updates (#422)

lob · Nov 6, 2023 · 34e092f · 34e092f
1 parent d7895ab
commit 34e092f
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## v2.0.0-beta.56
+
+Some style updates for `Modal` and `Badge`:
+- Modal: allow removing the section separators/dividers
+- Modal: allow a subheading
+- Badge: create a new variant for a new gradient
+
 ## v2.0.0-beta.55
 
 Adds the external link icon

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.55",
+  "version": "2.0.0-beta.56",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

diff --git a/src/components/Badge/Badge.stories.js b/src/components/Badge/Badge.stories.js
@@ -23,7 +23,7 @@ export default {
       }
     },
     variant: {
-      options: ['default', 'secondary', 'info', 'success', 'warning', 'error', 'gradient'],
+      options: ['default', 'secondary', 'info', 'success', 'warning', 'error', 'gradient-primary', 'gradient-secondary'],
       control: {
         type: 'select'
       }

diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
@@ -9,7 +9,8 @@
                { 'bg-green-50 text-green-700': success },
                { 'bg-orange-50 text-orange-600': warning },
                { 'bg-red-50 text-red-600': error },
-               { 'bg-gradient-114 from-[#1876db] to-[#5748ff] !text-white': gradient }
+               { 'bg-gradient-114 from-[#1876db] to-[#5748ff] !text-white': gradientPrimary },
+               { 'bg-gradient-114 from-[#9F94FF] to-[#FA6A8C] !text-white': gradientSecondary }
       ]"
     >
       <slot />
@@ -24,9 +25,8 @@ export default {
     variant: {
       type: String,
       default: 'default',
-      validator: function (value) {
-        return ['default', 'secondary', 'info', 'success', 'warning', 'error', 'gradient'].includes(value);
-      }
+      validator: (value) =>
+        ['default', 'secondary', 'info', 'success', 'warning', 'error', 'gradient-primary', 'gradient-secondary'].includes(value)
     },
     size: {
       type: String,
@@ -55,8 +55,11 @@ export default {
     error () {
       return this.variant === 'error';
     },
-    gradient () {
-      return this.variant === 'gradient';
+    gradientPrimary () {
+      return this.variant === 'gradient-primary';
+    },
+    gradientSecondary () {
+      return this.variant === 'gradient-secondary';
     },
     small () {
       return this.size === 'small';

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -2,7 +2,7 @@
   <transition name="fade">
     <div
       v-show="visible"
-      :class="['fixed inset-0 flex items-center justify-center bg-black bg-opacity-60 z-30']"
+      class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-60 z-30"
       :aria-hidden="!visible"
       @mousedown="closeModal"
       @keydown.esc="closeModal"
@@ -14,26 +14,32 @@
         aria-describedby="modalDescription"
         :style="{'width': width}"
         :class="[
-          'relative bg-white flex flex-col overflow-y-auto shadow rounded-lg max-h-5/6', noPadding ? 'p-0' : 'p-5'
+          'relative bg-white flex flex-col overflow-y-auto shadow rounded-lg max-h-5/6', paddingClass
         ]"
         @mousedown.stop
       >
         <header
           v-if="header"
           id="header"
-          class="pageheading border-b border-gray-100 pb-4"
+          :class="['pb-4', {'border-b border-gray-100': !noSectionDividers}]"
         >
-          {{ header }}
+          <h1 class="pageheading">{{ header }}</h1>
+          <h2
+            v-if="subheader"
+            class="text-default"
+          >
+            {{ subheader }}
+          </h2>
         </header>
         <section
           id="modalDescription"
-          :class="[noPadding ? 'py-0' : 'py-5']"
+          :class="paddingClass"
         >
           <slot />
         </section>
         <footer
           v-if="hasFooter"
-          class="flex border-t border-gray-100 flex-col pt-4"
+          :class="['flex flex-col pt-4', {'border-t border-gray-100': !noSectionDividers}]"
         >
           <slot name="footer" />
         </footer>
@@ -69,19 +75,30 @@ export default {
       type: String,
       default: null
     },
+    subheader: {
+      type: String,
+      default: null
+    },
     closeButtonAriaLabel: {
       type: String,
       required: true
     },
     noPadding: {
       type: Boolean,
       default: false
+    },
+    noSectionDividers: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['close'],
   computed: {
     hasFooter () {
       return Boolean(this.$slots.footer);
+    },
+    paddingClass () {
+      return this.noPadding ? 'p-0' : 'p-7';
     }
   },
   methods: {