Merge pull request #809 from Safelite/feature/richardson/SSR-1442

service package updates

src/layouts/service-packages/service-package-question/service-package-question.vue

@@ -50,7 +50,7 @@ export default {
     data() {
         return {
             servicePackageRadio,
-            selectedPackageName: packageNames.TIER_ONE
+            selectedPackageName: ''
         };
     },
     computed: {
@@ -64,10 +64,6 @@ export default {
         servicePackageAnswers() {
             if (!this.cmsWidgetName) return [];
             const cmsAnswersContent = [];
-            cmsAnswersContent.push({
-                Name: 'TierOne',
-                cmsWidgetName: 'EconomyServicePackage'
-            });
             if (this.shouldDisplayTierTwoPackage) {
                 cmsAnswersContent.push({
                     Name: 'TierTwo',
@@ -78,6 +74,10 @@ export default {
                 Name: 'TierThree',
                 cmsWidgetName: 'PremiumServicePackage'
             });
+            cmsAnswersContent.push({
+                Name: 'TierOne',
+                cmsWidgetName: 'EconomyServicePackage'
+            });
             // if cms content has not yet loaded, skip
             if (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
                 || this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') {

src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue

@@ -7,17 +7,20 @@
             :class="[buttonLabelSubCopy ? 'has-subheader' : '']"
             for="testradio">
             <div class="package-specs">
-                <p class="m-0">
-                    <span v-html="buttonLabel"></span>
-                    <span
-                        class="pricing-info"
-                        v-html="buttonAuxiliaryCopy"></span>
-                </p>
-                <p
-                   v-if="buttonLabelSubCopy"
-                   class="sub-label m-0"
-                   v-html="buttonLabelSubCopy"></p>
                 <div>
+                    <p class="m-0">
+                        <span v-html="buttonLabel"></span>
+                        <span
+                            class="pricing-info"
+                            v-html="buttonAuxiliaryCopy"></span>
+                    </p>
+                    <p
+                        v-if="buttonLabelSubCopy"
+                        class="sub-label m-0"
+                        v-html="buttonLabelSubCopy">
+                    </p>
+                </div>
+                <div class="hide-when-closed">
                     <ul>
                         <li
                             v-for="listItem in arrayOfListItemsFromBodyText"
@@ -139,9 +142,13 @@ export default {
                     border-radius: 0.5rem;
                     overflow: hidden;
                     min-height: 60px;
+                    max-height: 100px;
+                    @include media-breakpoint-up(md) {
+                        max-height: 500px;
+                    }
 
                     &.has-subheader {
-                        min-height: 80px;
+                        min-height: 86px;
                     }
 
                     &:before {
@@ -222,19 +229,21 @@ export default {
 
             .package-footer {
                 color: $red;
-                font-weight: $font-weight-bold;
-                margin-top: 0.5rem;
+                font-weight: $font-weight-bold; // 600 in fmg
+                margin-top: 0.5rem; // not in fmg
             }
 
             .package-specs {
                 display: flex;
                 flex-direction: column;
                 width: 100%;
-                max-height: 1000px;
-                transition: all 0.5s ease;
-
+                max-height: 0;
+                transition: all 1s ease;
+                @include media-breakpoint-up(md) {
+                    max-height: 500px;
+                }
                 p {
-                    font-weight: 500;
+                    font-weight: $font-weight-bold; // 600 in fmg
                     display: flex;
                     justify-content: space-between;
 
@@ -253,16 +262,16 @@ export default {
                 }
 
                 ul {
-                    margin: 1rem 0 0 -.6rem;
+                    margin: 1rem 0 0 -.6rem; // .9375rem in fmg
                     padding: 0;
 
                     li {
                         margin-bottom: 0.5rem;
                         font-size: 0.875rem;
-                        line-height: 1.714;
+                        line-height: 1.5rem;
 
                         a {
-                            line-height: 1.714;
+                            line-height: 1.5rem;
                             padding: 0;
                         }
                     }
@@ -278,6 +287,14 @@ export default {
                         opacity: 0;
                     }
                 }
+
+                .hide-when-closed {
+                    display: none;
+                    @include media-breakpoint-up(md) {
+                        display: flex;
+                        flex-direction: column;
+                    }
+                }
             }
         }
     }

src/styles/common-error-styles.scss

@@ -136,6 +136,19 @@ html {
         }
     }
 
+    //Quote page radio button group
+    .package-main {
+        .package-wrapper {
+            .has-error {
+                input[type="radio"] {
+                    +.package-label {
+                        border: 1px solid $red;
+                    }
+                }
+            }
+        }
+    }
+
     //Restore to default style if alert box is present
     .alertError {
         .has-error {