Refactor Heading collapse property to be open/closed/none, to avoid h…

…aving separate 'collapsible' and 'collapsed' props.
dannon · Nov 9, 2023 · e4d27eb · e4d27eb
1 parent 4b7048f
commit e4d27eb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
@@ -2,28 +2,40 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
-const props = defineProps<{
-    h1?: boolean;
-    h2?: boolean;
-    h3?: boolean;
-    h4?: boolean;
-    h5?: boolean;
-    h6?: boolean;
-    bold?: boolean;
-    separator?: boolean;
-    inline?: boolean;
-    size?: "xl" | "lg" | "md" | "sm" | "text";
-    icon?: string | [string, string];
-    collapsible?: boolean;
-    collapsed?: boolean;
-}>();
+const props = withDefaults(
+    defineProps<{
+        h1?: boolean;
+        h2?: boolean;
+        h3?: boolean;
+        h4?: boolean;
+        h5?: boolean;
+        h6?: boolean;
+        bold?: boolean;
+        separator?: boolean;
+        inline?: boolean;
+        size?: "xl" | "lg" | "md" | "sm" | "text";
+        icon?: string | [string, string];
+        collapse?: "open" | "closed" | "none";
+    }>(),
+    {
+        collapse: "none",
+    }
+);
 
 defineEmits(["click"]);
 
 const sizeClass = computed(() => {
     return `h-${props.size ?? "lg"}`;
 });
 
+const collapsible = computed(() => {
+    return props.collapse !== "none";
+});
+
+const collapsed = computed(() => {
+    return props.collapse === "closed";
+});
+
 const element = computed(() => {
     for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
         if (props[key as keyof typeof props]) {
@@ -39,7 +51,7 @@ const element = computed(() => {
         <div class="stripe"></div>
         <component
             :is="element"
-            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.collapsible ? 'collapsible' : '']"
+            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '']"
             @click="$emit('click')">
             <slot />
             <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />

diff --git a/client/src/components/JobMetrics/AwsEstimate.vue b/client/src/components/JobMetrics/AwsEstimate.vue
@@ -56,7 +56,9 @@ const computedAwsEstimate = computed(() => {
 
 <template>
     <div v-if="computedAwsEstimate" id="aws-estimate" class="mt-4">
-        <Heading h2 size="md" separator collapsible :collapsed="toggled" @click="toggle()">AWS estimate</Heading>
+        <Heading h2 size="md" separator :collapse="toggled ? 'closed' : 'open'" @click="toggle()">
+            AWS estimate
+        </Heading>
 
         <template v-if="!toggled">
             <strong id="aws-cost">{{ computedAwsEstimate.price }} USD</strong>

diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
@@ -274,7 +274,7 @@ function getEnergyNeededText(energyNeededInKiloWattHours: number) {
 
 <template v-if="carbonEmissions && carbonEmissionsComparisons">
     <div class="mt-4">
-        <Heading h2 separator size="md" inline collapsible :collapsed="toggled" @click="toggle()">
+        <Heading h2 separator size="md" inline :collapse="toggled ? 'closed' : 'open'" @click="toggle()">
             Carbon Footprint
         </Heading>