@simplybusiness/theme-simplybusiness 1.20.2 → 1.20.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @simplybusiness/theme-simplybusiness
 
+## 1.20.4
+
+### Patch Changes
+
+- 474cd7f: Grid view follow up changes
+- Updated dependencies [44a8f67]
+- Updated dependencies [63d36fa]
+- Updated dependencies [07f6222]
+- Updated dependencies [80bf5a9]
+- Updated dependencies [474cd7f]
+  - @simplybusiness/mobius-journey@8.30.1
+  - @simplybusiness/mobius-interventions@1.57.0
+  - @simplybusiness/mobius@5.28.2
+  - @simplybusiness/mobius-chatbot@1.4.6
+  - @simplybusiness/mobius-datepicker@6.5.23
+  - @simplybusiness/theme-core@7.7.2
+
+## 1.20.3
+
+### Patch Changes
+
+- Updated dependencies [3830fd7]
+- Updated dependencies [6f83ab6]
+  - @simplybusiness/mobius-interventions@1.56.1
+
 ## 1.20.2
 
 ### Patch Changes

package/dist/index.css

@@ -2778,16 +2778,26 @@ svg:not(:host).svg-inline--mobius-icon{
     display:none;
     width:100%;
 }
-@media (min-width: 1024px){
-.mobius-layout-toggle{
+.mobius-cover-toggles-container__extra-toggles{
+    box-sizing:border-box;
+    display:grid;
+    grid-template-columns:1fr;
+    align-items:center;
+}
+@media (min-width: 850px){
+    .mobius-layout-toggle{
         display:grid;
         width:unset;
         grid-template-columns:repeat(3, min-content);
         height:100%;
         align-items:center;
         gap:var(--size-sm);
-}
     }
+
+    .mobius-cover-toggles-container__extra-toggles{
+        grid-template-columns:repeat(2, 1fr);
+    }
+}
 .mobius-layout-toggle__divider{
     height:var(--size-lg);
     width:1px;
@@ -3403,7 +3413,8 @@ svg:not(:host).svg-inline--mobius-icon{
   color:var(--color-primary);
 }
 .mobius-quote-headline__highlight{
-  color:var(--color-primary);
+  color:var(--color-text-lead, var(--color-primary));
+  font-family:var(--font-family-heading);
 }
 .mobius-quote-headline__link{
   display:flex;
@@ -4124,6 +4135,94 @@ svg:not(:host).svg-inline--mobius-icon{
     width:100%;
     height:auto;
   }
+@media(min-width: 850px){
+  .mobius-quote-cards__grid.--is-grid .mobius-quote-card{
+    grid-template-areas:"header" "pricing" "actions" "coverage";
+    grid-template-columns:1fr;
+    grid-auto-rows:auto;
+    grid-template-rows:subgrid;
+    grid-row:span 4;
+    padding:16px 16px 32px;
+    gap:unset;
+  }
+}
+@media(min-width: 850px){
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__coverage{
+        border-top:none;
+        padding-top:0;
+        margin-bottom:0;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__coverage .mobius-accordion__link{
+        align-self:center;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__coverage .mobius-quote-card__coverage-items{
+        display:grid;
+        grid-template-columns:auto 1fr auto;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__coverage .mobius-quote-card__coverage-item{
+        display:grid;
+        grid-template-columns:subgrid;
+        grid-column:1 / -1;
+        align-items:center;
+        gap:var(--size-sm);
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__coverage .mobius-quote-card__coverage-item-excess-link{
+        font-size:var(--font-size-small-print);
+        text-wrap:nowrap;
+    }
+}
+@media(min-width: 850px){
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__header{
+        border-bottom:1px solid var(--color-border-light);
+        border-right:none;
+        margin-bottom:0;
+        padding-bottom:16px;
+        padding-right:0;
+        align-items:center;
+        gap:var(--size-xs);
+    }
+
+    .mobius-quote-cards__grid.--is-grid .header__underwriter-text{
+        margin-top:0;
+        margin-bottom:0;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__header-logo{
+        object-position:center;
+        max-height:var(--size-xxl);
+    }
+}
+@media(min-width: 850px){
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__pricing-flex{
+        flex-direction:column;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__pricing-primary-amount{
+        font-weight:var(--font-weight-normal);
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__badges.--is-uk.--is-desktop{
+        display:none;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-card__badges.--is-mobile{
+        display:flex;
+        margin-bottom:0;
+    }
+}
+@media(min-width: 850px){
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-actions{
+        gap:var(--size-xs) !important;
+    }
+
+    .mobius-quote-cards__grid.--is-grid .mobius-quote-actions .mobius-quote-actions__button{
+        margin-top:0;
+    }
+}
 .mobius-no-quotes-card{
   margin:0;
   border:1px solid var(--color-border);
@@ -4281,7 +4380,7 @@ svg:not(:host).svg-inline--mobius-icon{
 @media (min-width: 850px){
 .--is-horizontal .mobius-quote-card__coverage{
       border-right:1px solid var(--color-border-light);
-      margin-right:var(--size-sm);		
+      margin-right:var(--size-sm);
       padding-right:var(--size-sm);
   }
     }
@@ -4305,7 +4404,7 @@ svg:not(:host).svg-inline--mobius-icon{
   font-size:var(--font-size-small-print);
   font-weight:var(--font-weight-normal);
   line-height:1.2;
-  color:var(--color-text);
+  color:var(--coverage-title-color, var(--color-text));
 }
 .mobius-quote-card__extra-coverage-item strong{
     text-align:right;
@@ -4388,6 +4487,7 @@ svg:not(:host).svg-inline--mobius-icon{
       margin-bottom:0;
     }
 .mobius-quote-card__coverage-item-excess-link{
+  color:var(--coverage-link-color, var(--color-primary));
   -webkit-text-decoration:underline;
   text-decoration:underline;
   text-underline-offset:5px;
@@ -4423,7 +4523,9 @@ svg:not(:host).svg-inline--mobius-icon{
   display:grid;
   grid-gap:var(--size-sm);
 }
-.mobius-quote-card__coverage .mobius-quote-card__coverage-accordion .mobius-accordion__link{
+.mobius-quote-card__coverage
+  .mobius-quote-card__coverage-accordion
+  .mobius-accordion__link{
   justify-content:left;
 }
 .mobius-quote-card__deductibles-title.--is-p{
@@ -4455,62 +4557,6 @@ svg:not(:host).svg-inline--mobius-icon{
   color:var(--color-text);
   margin-left:auto;
 }
-.mobius-quote-card__coverage.--is-grid{
-  border-top:0;
-  padding-top:0;
-  margin-bottom:0;
-}
-.mobius-quote-card.--is-grid .mobius-accordion__link{
-  align-self:center;
-  margin-bottom:var(--size-sm);
-}
-.mobius-quote-card__coverage.--is-grid .mobius-quote-card__coverage-items{
-  display:grid;
-  grid-template-columns:auto 1fr auto;
-}
-.mobius-quote-card__coverage.--is-grid .mobius-quote-card__coverage-item{
-  display:grid;
-  grid-template-columns:subgrid;
-  grid-column:1 / -1;
-  align-items:center;
-  gap:var(--size-sm);
-}
-.mobius-quote-card__coverage.--is-grid .mobius-quote-card__coverage-item-excess-link{
-  font-size:var(--font-size-small-print);
-  text-wrap:nowrap;
-}
-@media (min-width: 850px){
-  .mobius-quote-card__header.--is-grid{
-    align-items:center;
-    gap:var(--size-xs);
-    padding-bottom:var(--size-sm);
-    margin-bottom:0;
-  }
-
-    .mobius-quote-card__header.--is-grid .header__underwriter-text{
-      margin-top:0;
-      margin-bottom:0;
-    }
-
-    .mobius-quote-card__header.--is-grid .mobius-quote-card__header-logo{
-      object-position:center;
-      max-height:var(--size-xxl);
-    }
-}
-@media (min-width: 850px){
-    .mobius-quote-card.--is-grid .mobius-quote-card__pricing-primary-amount{
-      font-weight:var(--font-weight-normal);
-    }
-  }
-@media (min-width: 850px){
-  .mobius-quote-card.--is-grid{
-    padding:var(--size-sm) var(--size-sm) 0 var(--size-sm);
-    grid-template-areas:"header" "pricing" "actions" "coverage";
-  }
-}
-.mobius-quote-card__badges.--is-grid{
-    padding-top:var(--size-md);
-  }
 .mobius-quote-card__file-circle-plus{
   font-size:var(--font-size-small-print);
   padding-top:var(--size-sm);
@@ -4529,6 +4575,7 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-quote-card__header{
   grid-area:header;
   display:flex;
+  align-items:center;
   border-bottom:1px solid var(--color-border-light);
   margin-bottom:var(--size-sm);
 }
@@ -4551,7 +4598,7 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 @media (min-width: 850px){
 .header__underwriter-text{
-    font-size:var(--font-size-1);
+    font-size:var(--underwriter-text-size, var(--font-size-1));
 }
   }
 @media (min-width: 850px){
@@ -4577,7 +4624,7 @@ svg:not(:host).svg-inline--mobius-icon{
   flex:1 1 0;
   max-height:var(--size-xl);
   object-fit:contain;
-  object-position:left;
+  object-position:var(--quote-card-logo-position, left);
 }
 .mobius-quote-card__header-logo.--is-uk{
     width:100%;
@@ -4586,7 +4633,7 @@ svg:not(:host).svg-inline--mobius-icon{
   }
 @media (min-width: 850px){
 .mobius-quote-card__header-logo.--is-uk{
-      object-position:left;
+      object-position:var(--quote-card-logo-position, left);
       max-height:var(--size-xl);
       margin-bottom:0;
   }
@@ -4753,6 +4800,8 @@ svg:not(:host).svg-inline--mobius-icon{
   }
 .mobius-quote-actions-form{
   display:flex;
+  justify-content:flex-end;
+  gap:var(--size-sm);
   align-items:flex-end;
 }
 :where([data-variant="without-qdp-drawer"]) .mobius-quote-actions__button{
@@ -4768,8 +4817,16 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-quote-actions{
   width:100%;
+  display:flex;
+  justify-content:space-between;
+  gap:var(--size-sm);
   align-items:flex-end;
 }
+@media (min-width: 850px){
+.mobius-quote-actions{
+    width:var(--quote-actions-width, 100%);
+}
+  }
 @supports (-webkit-touch-callout: none) and (not (translate: none)){
     .mobius-quote-actions :not(:last-child){
       margin-right:var(--size-sm);
@@ -4782,6 +4839,11 @@ svg:not(:host).svg-inline--mobius-icon{
   font-size:var(--font-size-regular);
   font-weight:var(--font-weight-bold);
 }
+@media (min-width: 850px){
+.mobius-quote-actions__button{
+    min-width:var(--quote-actions-button-width, 0);
+}
+  }
 .mobius-quote-details__drawer.mobius-drawer{
   height:100%;
   height:100dvh;
@@ -5127,8 +5189,9 @@ svg:not(:host).svg-inline--mobius-icon{
   }
 .mobius-quote-card__badge{
   padding:var(--size-xs);
+  color:var(--badge-color, var(--color-text));
   background-color:var(--color-background-highlight);
-  border-radius:var(--radius-1);
+  border-radius:var(--badge-radius, var(--radius-1));
   font-size:var(--font-size-small-paragraph);
   line-height:var(--line-height-tight);
 }
@@ -5244,6 +5307,14 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-quote-cards__grid.--is-horizontal{
     --column-count:1;
   }
+.mobius-quote-cards__grid.--is-grid{
+    --column-count:3;
+  }
+@media (min-width: 850px) and (max-width: 1023px){
+.mobius-quote-cards__grid.--is-grid{
+      --column-count:2;
+  }
+    }
 .mobius-quote-card__section{
   position:relative;
   font-size:var(--font-size-regular);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "1.20.2",
+  "version": "1.20.4",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,12 +26,12 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.28.1",
-    "@simplybusiness/mobius-chatbot": "^1.4.5",
-    "@simplybusiness/mobius-datepicker": "^6.5.22",
-    "@simplybusiness/mobius-interventions": "^1.56.0",
-    "@simplybusiness/mobius-journey": "^8.30.0",
-    "@simplybusiness/theme-core": "^7.7.1"
+    "@simplybusiness/mobius": "^5.28.2",
+    "@simplybusiness/mobius-chatbot": "^1.4.6",
+    "@simplybusiness/mobius-datepicker": "^6.5.23",
+    "@simplybusiness/mobius-interventions": "^1.57.0",
+    "@simplybusiness/mobius-journey": "^8.30.1",
+    "@simplybusiness/theme-core": "^7.7.2"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/index.css

@@ -37,6 +37,11 @@
 @import "@simplybusiness/mobius-journey/src/components/Questionnaire/Section/Section.css";
 @import "@simplybusiness/mobius-journey/src/components/Questionnaire/Section/Submission.css";
 @import "@simplybusiness/mobius-journey/src/components/Questionnaire/SecurityLocks/SecurityLocks.css";
+@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/QuoteCard.css";
+@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/Coverage/Coverage.css";
+@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/Header/Header.css";
+@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/PricingUK/Pricing.css";
+@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/QuoteActions/QuoteActions.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/NoQuotesCard/NoQuotesCard.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/NoQuotesReferral/NoQuotesReferral.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/PartialQuotesReferral/PartialQuotesReferral.css";
@@ -44,15 +49,6 @@
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/Coverage/Deductibles/Deductibles.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/Coverage/ExtraCoverage/ExtraCoverage.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/CoverLimit/CoverLimit.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/Coverage/Coverage.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/Coverage/Coverage.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/Header/Header.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/Header/Header.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/PricingUK/Pricing.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/QuoteCard.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/QuoteCard.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/QuoteCardBadges/QuoteCardBadges.css";
-@import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/ExperimentGridView/QuoteCardBadges/QuoteCardBadges.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/FileCirclePlus/FileCirclePlus.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/Header/Header.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/InfoModal/CardModal.css";