Merge pull request #1074 from Safelite/feature/humphries/INSR-7752.1

INSR-8434: Fix defects seen on contact-details

src/digital-components/dropdown-question/dropdown-question.vue

@@ -156,8 +156,8 @@ export default {
         &:disabled,
         &.disabled {
             background-color: $gray-100;
-            color: $gray-500;
-            filter: grayscale(100%);
+            background-image: url(~@/assets/img/icons/select-disabled.png);
+            cursor: not-allowed;
         }
     }
     &.dropdown-compact {

src/digital-components/textbox-question/textbox-question.vue

@@ -402,6 +402,7 @@ input::-webkit-date-and-time-value {
         &:disabled,
         &.disabled {
             background-color: $gray-100;
+            cursor: not-allowed;
         }
     }
     p {

src/layouts/contact-details/contact-details.vue

@@ -59,7 +59,7 @@
                         inputId="state"
                         class="form-group"
                         :cmsWidgetName="widget.stateQuestion"
-                        :options="states"
+                        :options="getStates"
                         isDisabled />
                     <textboxQuestion
                         ref="zipCodeQuestion"
@@ -218,7 +218,14 @@ export default {
         },
         vehicleProtectedQuestionAnswers() {
             return this.getCmsContent(this.widget.vehicleProtectedQuestion, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS) || [];
-        }
+        },
+        getStates() {
+            return Object.keys(states).reduce((acc, key) => {
+                // eslint-disable-next-line no-param-reassign
+                acc[key] = states[key].toUpperCase();
+                return acc;
+            }, {});
+        },
     },
     watch: {
         isSameAsPolicyAddress(newValue) {

src/ux-components/alert/alert.vue

@@ -7,7 +7,12 @@
             alertClass,
             cssClassNameForCmsWidget,
         ]">
-        <div class="alert-header">
+        <div
+            class="alert-header"
+            :class="{
+                'collapsible-header': isCollapsible
+            }"
+            @click="toggleCollapse">
             <div class="alert-icon-container">
                 <svg
                     class="alert-icon"
@@ -35,8 +40,7 @@
                 <button
                     v-if="isCollapsible"
                     class="btn-collapse"
-                    type="button"
-                    @click="toggleCollapse">
+                    type="button">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="15"
@@ -73,7 +77,8 @@
         <div
             v-show="alertCopy"
             :id="collapseId"
-            class="alert-body show">
+            class="alert-body collapse"
+            :class="{ 'show': !startCollapsed }">
             <template
                 v-for="paragraph in splitAlertCopyForParagraphTag"
                 :key="paragraph">
@@ -208,7 +213,7 @@ export default {
     mounted() {
         this.ensureAlertIsInViewPort();
         if (this.isCollapsible) {
-            this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId), { toggle: this.startCollapsed });
+            this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId), { toggle: false });
         }
     },
     methods: {
@@ -236,6 +241,9 @@ export default {
             );
         },
         toggleCollapse() {
+            if (!this.isCollapsible) {
+                return;
+            }
             this.collapsed = !this.collapsed;
             if (this.collapsed) {
                 this.collapseElement.hide();
@@ -268,6 +276,9 @@ export default {
         padding: .75rem 1rem .75rem 1rem;
         font-weight: 600;
         color: $black;
+        &.collapsible-header {
+            cursor: pointer;
+        }
     }
     .alert-icon-container {
         display: flex;