feat: add display status size

ICIJ · Nov 4, 2024 · e594af6 · e594af6
1 parent 942884b
commit e594af6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/components/BatchSearch/BatchSearchCardDetails.vue b/src/components/BatchSearch/BatchSearchCardDetails.vue
@@ -155,7 +155,7 @@ const projectsItem = computed(() => {
     <ul class="batch-search-card-details__list list-unstyled">
       <li>
         <batch-search-card-details-entry :label="statusItem.label">
-          <display-status class="display-status-sm" :value="status" /> {{ statusItem.value }}
+          <display-status class="display-status" size="sm" :value="status" /> {{ statusItem.value }}
         </batch-search-card-details-entry>
       </li>
       <li>

diff --git a/src/components/Display/DisplayStatus.vue b/src/components/Display/DisplayStatus.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { PhosphorIcon } from '@icij/murmur-next'
 import { useI18n } from 'vue-i18n'
 
+import { SIZE, buttonSizeValidator } from '@/enums/sizes'
 import { toVariant, toVariantPhosphorIcon } from '@/utils/utils'
 
 const { t } = useI18n()
@@ -21,12 +22,14 @@ const props = defineProps({
     type: String
   },
   size: {
-    type: String
+    type: String,
+    default: SIZE.MD,
+    validator: buttonSizeValidator
   }
 })
 
 const classList = computed(() => {
-  return [`display-status--${props.variant ?? valueVariant.value}`]
+  return [`display-status--${props.variant ?? valueVariant.value}`, `display-status--${props.size}`]
 })
 
 const valueVariant = computed(() => {
@@ -54,11 +57,6 @@ const valueTitle = computed(() => {
   --display-status-bg: var(--bs-body-bg);
   --display-status-color: var(--bs-secondary-text-emphasis);
 
-  &-sm {
-    width: calc(#{$btn-line-height * $btn-font-size-sm} + #{$btn-padding-y-sm * 2} + #{$btn-border-width} * 2);
-    height: calc(#{$btn-line-height * $btn-font-size-sm} + #{$btn-padding-y-sm * 2} + #{$btn-border-width} * 2);
-  }
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -67,6 +65,16 @@ const valueTitle = computed(() => {
   background: var(--display-status-bg);
   color: var(--display-status-color);
 
+  &--sm {
+    width: calc(#{$btn-line-height * $btn-font-size-sm} + #{$btn-padding-y-sm * 2} + #{$btn-border-width} * 2);
+    height: calc(#{$btn-line-height * $btn-font-size-sm} + #{$btn-padding-y-sm * 2} + #{$btn-border-width} * 2);
+  }
+
+  &--lg {
+    width: calc(#{$btn-line-height * $btn-font-size-lg} + #{$btn-padding-y-lg * 2} + #{$btn-border-width} * 2);
+    height: calc(#{$btn-line-height * $btn-font-size-lg} + #{$btn-padding-y-lg * 2} + #{$btn-border-width} * 2);
+  }
+
   @each $state in map-keys($theme-colors) {
     &.display-status--#{$state} {
       --display-status-bg: var(--bs-#{$state}-bg-subtle);

diff --git a/src/enums/sizes.js b/src/enums/sizes.js
@@ -4,7 +4,10 @@ const MD = 'md'
 const LG = 'lg'
 const XL = 'xl'
 const XXL = 'xxl'
+
 export const SIZE = Object.freeze({ XS, SM, MD, LG, XL, XXL })
+export const sizeValidator = (v) => BUTTON_SIZES.includes(v)
+
 export const BUTTON_SIZES = [SM, MD, LG]
 export const buttonSizeValidator = (v) => BUTTON_SIZES.includes(v)