@simplybusiness/theme-simplybusiness 2.10.11 → 2.11.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @simplybusiness/theme-simplybusiness
 
+## 2.11.1
+
+### Patch Changes
+
+- Updated dependencies [e160de4]
+- Updated dependencies [754a161]
+- Updated dependencies [fa3183a]
+- Updated dependencies [d0940fa]
+- Updated dependencies [bf809eb]
+  - @simplybusiness/theme-core@7.14.8
+  - @simplybusiness/mobius-journey@11.22.0
+  - @simplybusiness/mobius-interventions@3.4.0
+  - @simplybusiness/mobius@6.9.5
+  - @simplybusiness/mobius-chatbot@2.2.6
+  - @simplybusiness/mobius-datepicker@7.3.6
+
+## 2.11.0
+
+### Minor Changes
+
+- a295210: Coverage recommendations skeleton
+
+### Patch Changes
+
+- 8d1278f: Implement back button in Showcase and implement more styling
+- 56c673f: Migrate CSS from SASS-style nesting to native CSS nesting syntax
+  - Update 62 CSS source files to use native CSS nesting with `&` prefix
+  - Switch PostCSS plugin from `postcss-nested` to `postcss-nesting`
+  - No functional changes to compiled CSS output (still Safari 14 compatible)
+
+- Updated dependencies [a295210]
+- Updated dependencies [8d1278f]
+- Updated dependencies [a934bca]
+- Updated dependencies [56c673f]
+- Updated dependencies [c54e331]
+- Updated dependencies [7cf76f2]
+  - @simplybusiness/mobius-journey@11.21.0
+  - @simplybusiness/mobius@6.9.5
+  - @simplybusiness/mobius-interventions@3.3.7
+  - @simplybusiness/mobius-datepicker@7.3.6
+  - @simplybusiness/theme-core@7.14.7
+  - @simplybusiness/mobius-chatbot@2.2.5
+
 ## 2.10.11
 
 ### Patch Changes

package/dist/index.css

@@ -268,7 +268,7 @@ h6.mobius-accordion__link-text,
     border-color:var(--color-valid);
     color:transparent;
   }
-.mobius-button:where(.--is-success)  > :not(.mobius-button__icon-wrapper){
+.mobius-button:where(.--is-success) > :not(.mobius-button__icon-wrapper){
       opacity:0;
       visibility:hidden;
     }
@@ -294,7 +294,7 @@ h6.mobius-accordion__link-text,
 .mobius-button:where(.--is-loading){
     color:transparent;
   }
-.mobius-button:where(.--is-loading)  > :not(.mobius-button__icon-wrapper){
+.mobius-button:where(.--is-loading) > :not(.mobius-button__icon-wrapper){
       opacity:0;
       visibility:hidden;
     }
@@ -606,7 +606,7 @@ h6.mobius-accordion__link-text,
     opacity:0;
     transition:opacity var(--drawer-transition-duration) ease-in-out;
   }
-.mobius-drawer  + .backdrop{
+.mobius-drawer + .backdrop{
     position:fixed;
     top:0;
     right:0;
@@ -615,7 +615,7 @@ h6.mobius-accordion__link-text,
     background-color:var(--backdrop-color);
     opacity:0.3;
   }
-:is(.mobius-drawer + .backdrop)  + ._dialog_overlay{
+:is(.mobius-drawer + .backdrop) + ._dialog_overlay{
       position:fixed;
       top:0;
       right:0;
@@ -996,7 +996,7 @@ h6.mobius-accordion__link-text,
     opacity:0;
     transition:opacity var(--modal-transition-duration) ease-in-out;
   }
-.mobius-modal  + .backdrop{
+.mobius-modal + .backdrop{
     position:fixed;
     top:0;
     right:0;
@@ -1005,7 +1005,7 @@ h6.mobius-accordion__link-text,
     background-color:var(--backdrop-color);
     opacity:0.3;
   }
-:is(.mobius-modal + .backdrop)  + ._dialog_overlay{
+:is(.mobius-modal + .backdrop) + ._dialog_overlay{
       position:fixed;
       top:0;
       right:0;
@@ -1530,7 +1530,7 @@ h6.mobius-accordion__link-text,
   box-sizing:border-box;
   width:100%;
 }
-.mobius-select__outer  > :where(.mobius-label.--is-optional)::after{
+.mobius-select__outer > :where(.mobius-label.--is-optional)::after{
     content:" (optional)";
   }
 .mobius-select__wrapper{
@@ -1734,7 +1734,7 @@ h6.mobius-accordion__link-text,
     width:0;
     height:0;
   }
-:is(.mobius-switch input):focus-visible  + .mobius-switch__slider{
+:is(.mobius-switch input):focus-visible + .mobius-switch__slider{
         box-shadow:var(--box-shadow-default);
       }
 .mobius-switch__slider{
@@ -1978,7 +1978,7 @@ h6.mobius-accordion__link-text,
     border-top-right-radius:0;
     border-bottom-right-radius:0;
   }
-.mobius-text-field__prefix-outside.mobius-button  + .mobius-text-field__input-wrapper{
+.mobius-text-field__prefix-outside.mobius-button + .mobius-text-field__input-wrapper{
       border-top-left-radius:0;
       border-bottom-left-radius:0;
     }
@@ -2170,6 +2170,7 @@ svg:not(:host).svg-inline--mobius-icon{
   position:absolute;
   right:0;
   top:0;
+  transform-origin:center center;
 }
 .mobius-icon-layers-counter,
 .mobius-icon-layers-text{
@@ -2185,9 +2186,6 @@ svg:not(:host).svg-inline--mobius-icon{
   vertical-align:-0.125em;
   width:1em;
 }
-.mobius-icon-layers svg.svg-inline--mobius-icon{
-  transform-origin:center center;
-}
 .mobius-icon-layers-text{
   left:50%;
   top:50%;
@@ -2445,16 +2443,16 @@ svg:not(:host).svg-inline--mobius-icon{
   fill:var(--mobius-icon-secondary-color, currentColor);
   opacity:var(--mobius-icon-secondary-opacity, 0.4);
 }
+.svg-inline--mobius-icon mask .mobius-icon-primary,
+.svg-inline--mobius-icon mask .mobius-icon-secondary{
+  fill:black;
+}
 .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary{
   opacity:var(--mobius-icon-secondary-opacity, 0.4);
 }
 .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary{
   opacity:var(--mobius-icon-primary-opacity, 1);
 }
-.svg-inline--mobius-icon mask .mobius-icon-primary,
-.svg-inline--mobius-icon mask .mobius-icon-secondary{
-  fill:black;
-}
 .fad.mobius-icon-inverse,
 .mobius-icon-duotone.mobius-icon-inverse{
   color:var(--mobius-icon-inverse, #fff);
@@ -4207,7 +4205,7 @@ svg:not(:host).svg-inline--mobius-icon{
 
 }
 .mobius-question__chatbox p{
-    margin:0
+    margin:0;
   }
 .mobius-question__chatbox .mobius-question__chatbox-link-container{
     gap:var(--size-xs);
@@ -5618,6 +5616,124 @@ svg:not(:host).svg-inline--mobius-icon{
       --column-count:2;
   }
     }
+.mobius-recommendations__card{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  padding:24px 16px;
+  border:2px solid #e2dbfb;
+  border-width:2px;
+  background-color:#ffffff;
+  transition:border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
+  overflow:hidden;
+  box-shadow:0px 12px 24px 0px rgba(0, 0, 0, 0.1607843137);
+  position:relative;
+}
+.mobius-recommendations__card--selected{
+  border:2px solid #2a1e81;
+  border-radius:var(--radius-2);
+}
+.mobius-recommendations__card:focus-visible{
+  outline:2px solid var(--color-focus);
+  outline-offset:4px;
+}
+.mobius-recommendations__card-content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--size-md);
+}
+.mobius-recommendations__card-header{
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  gap:16px;
+}
+.mobius-recommendations__badge{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  margin:-30px -24px 8px;
+  padding:14px 24px;
+  background:rgb(42, 30, 129);
+  color:var(--color-text-inverted);
+  font-size:14px;
+  border-radius:22px 22px 0 0;
+}
+.mobius-recommendations__badge-icon{
+  color:currentColor;
+}
+.mobius-recommendations__badge-label{
+  line-height:1.2;
+}
+.mobius-recommendations__checkbox{
+  min-width:24px;
+  min-height:24px;
+  border-radius:var(--radius-1);
+  border:2px solid var(--color-border);
+  display:grid;
+  place-items:center;
+  background-color:var(--color-background);
+  transition:border-color var(--transition-standard), background-color var(--transition-standard), color var(--transition-standard);
+  color:transparent;
+}
+.mobius-recommendations__checkbox--selected{
+  border-color:var(--color-primary-hover);
+  background-color:var(--color-primary-hover);
+  color:var(--color-text-inverted);
+}
+.mobius-recommendations__checkbox-icon{
+  width:10px;
+  height:6px;
+  border-left:2px solid currentColor;
+  border-bottom:2px solid currentColor;
+  transform:rotate(-45deg);
+}
+.mobius-recommendations__heading{
+  margin:0;
+  font-size:20px;
+  line-height:1.2;
+  color:#111118;
+}
+.mobius-recommendations__description{
+  display:flex;
+  flex-direction:column;
+  gap:var(--size-xs);
+}
+.mobius-recommendations__footer{
+  margin-top:auto;
+}
+.mobius-recommendations__cta{
+  border-radius:20px;
+  font-weight:var(--font-weight-bold);
+  font-size:var(--font-size-2);
+  padding:8px 12px;
+}
+.mobius-recommendations{
+  display:flex;
+  flex-direction:column;
+  gap:var(--size-xl);
+  padding-top:var(--size-xl);
+  padding-bottom:var(--size-xl);
+}
+.mobius-recommendations__intro{
+  max-width:720px;
+}
+@media (min-width: 1024px){
+  .mobius-recommendations__intro{
+    flex-direction:row;
+    justify-content:space-between;
+    align-items:flex-start;
+    max-width:none;
+  }
+}
+.mobius-recommendations__title{
+  margin:0;
+}
+.mobius-recommendations__grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
+  gap:var(--size-lg);
+}
 .mobius-quote-card__section{
   position:relative;
   font-size:var(--font-size-regular);
@@ -5898,6 +6014,24 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-coverage-summary{
   grid-area:1 / 2;
 }
+.mobius-underwriter-legal-agreements__sms-button{
+  display:flex;
+  justify-content:center;
+  margin:0 auto;
+  margin-bottom:var(--size-md);
+}
+.mobius-underwriter-legal-agreements__sms-message{
+  display:flex;
+  justify-content:center;
+  flex-direction:row;
+  padding:var(--size-md);
+  margin:var(--size-md) 0;
+  font-size:var(--font-size-regular);
+  background-color:var(--color-valid-background);
+}
+.mobius-underwriter-legal-agreements__sms-message.--is-invalid{
+    background-color:var(--color-error-background);
+  }
 .mobius-checkout-buttons{
   margin-top:var(--size-md);
   display:flex;
@@ -5940,7 +6074,7 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-underwriter-legal-agreements__agreement-content .signature{
   width:200px;
   height:auto;
-  font-size:20px;
+  font-size:var(--font-size-regular);
 }
 .mobius-underwriter-legal-agreements__bullet-list{
   margin:0;
@@ -6330,22 +6464,12 @@ svg:not(:host).svg-inline--mobius-icon{
       width:100%;
     }
   }
-.mobius-showcase-explore{
+.mobius-showcase__card.mobius-showcase-explore{
   flex:1;
-  min-width:0;
-  background-color:var(--color-background);
-  border:1px solid var(--color-border);
-  border-radius:var(--radius-2);
-  box-shadow:0px 12px 24px 0px #00000012;
-  padding:var(--size-lg);
-  display:flex;
   flex-direction:column;
   gap:var(--size-md);
-}
-@media screen and (min-width: 641px){
-  .mobius-showcase-explore{
-    padding:var(--size-xl);
-  }
+  padding:var(--size-lg) var(--size-md);
+  background-color:var(--color-azure-200);
 }
 .mobius-showcase-explore__title{
   margin:0;
@@ -6365,13 +6489,49 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-showcase-explore__list-item{
   color:var(--color-text);
 }
-.mobius-showcase-explore__cta{
+.mobius-showcase-explore__form{
   margin-top:auto;
-  align-self:flex-start;
+}
+.mobius-showcase-explore__cta{
+  width:100%;
+}
+.showcase-products-list__item:not(:last-child){
+  margin-bottom:var(--size-sm);
 }
 .showcase-products-list__item__title{
   font-size:var(--font-size-lead);
 }
+.showcase-product-drawer__trigger{
+ width:fit-content;
+ border-radius:var(--size-lg);
+}
+.mobius-showcase-form{
+  width:100%;
+}
+.mobius-showcase-form .mobius-button{
+  display:flex;
+  align-items:center;
+  gap:var(--size-xs);
+  width:100%;
+  justify-content:center;
+  font-size:var(--font-size-lead);
+}
+.mobius-showcase-form__back{
+  display:flex;
+  justify-content:center;
+}
+@media screen and (min-width: 641px){
+  .mobius-showcase-form__back{
+    justify-content:flex-start;
+  }
+}
+.mobius-showcase-form__back .mobius-button{
+  font-size:var(--font-size-regular);
+  padding:var(--size-sm) var(--size-lg);
+}
+.mobius-showcase-form__accept-showcase-cta{
+  width:fit-content;
+}
 .mobius-disclaimers{
   margin:var(--size-lg) 0;
   padding:0 var(--size-sm);
@@ -6385,24 +6545,20 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 @media screen and (min-width: 641px){
   .mobius-showcase__layout{
-    align-items:flex-start;
+    align-items:stretch;
     flex-direction:row;
   }
 }
-.mobius-showcase{
-  flex:2.5;
-  min-width:0;
-}
 .mobius-showcase__image-wrapper{
   position:relative;
   overflow:hidden;
   aspect-ratio:100 / 45;
   width:100%;
-  border-radius:8px 8px 80px 80px;
+  border-radius:var(--radius-2) var(--radius-2) 80px 80px;
 }
 @media screen and (min-width: 641px){
   .mobius-showcase__image-wrapper{
-    border-radius:160px 8px 8px 160px;
+    border-radius:160px var(--radius-2) var(--radius-2) 160px;
     order:2;
     flex-basis:240px;
     flex-shrink:0;
@@ -6421,48 +6577,51 @@ svg:not(:host).svg-inline--mobius-icon{
   object-fit:cover;
 }
 .mobius-showcase__card{
-  border-radius:var(--radius-2);
-  box-shadow:0px 12px 24px 0px #00000029;
-  display:flex;
-  flex-direction:column;
-  overflow:hidden;
-}
-@media screen and (min-width: 641px){
-  .mobius-showcase__card{
-    flex-direction:row;
-  }
-}
-.mobius-showcase__group{
   display:flex;
   flex-direction:column;
   gap:var(--size-lg);
   margin:var(--size-lg) 0;
+  flex:2.5;
+  min-width:0;
+  border-radius:var(--radius-2);
+  box-shadow:0px 12px 24px 0px #00000029;
+  overflow:hidden;
+}
+.mobius-showcase__title{
+  margin-top:0;
 }
 @media screen and (min-width: 641px){
-  .mobius-showcase__group{
+  .mobius-showcase__card{
     flex-direction:row;
     margin:0;
   }
 }
 .mobius-showcase__content{
   order:1;
-  padding:var(--size-lg);
+  padding:var(--size-md);
 }
 @media screen and (min-width: 641px){
   .mobius-showcase__content{
     order:unset;
-    padding:32px 16px;
-    padding-left:calc(var(--size-sm) + var(--title-decorator-width));
+    padding:var(--size-lg) var(--size-md);
   }
 }
 .mobius-showcase__heading{
   display:block;
+  margin-top:0;
   margin-bottom:var(--size-xs);
-  margin-top:var(--size-md);
   color:var(--color-text);
   font-weight:600;
   text-transform:uppercase;
 }
+.mobius-showcase__audience{
+  margin-bottom:0;
+}
+.mobius-showcase__coverage, .mobius-showcase__audience{
+  color:var(--color-text-medium);
+  font-size:var(--font-size-3);
+  line-height:1.5;
+}
 .mobius-payment-summary__styled-div{
     display:grid;
     row-gap:var(--size-sm);
@@ -6751,7 +6910,7 @@ svg:not(:host).svg-inline--mobius-icon{
         width:100%;
 }
     }
-.mobius-payment-summary__persistent-product-summary-div  > div{
+.mobius-payment-summary__persistent-product-summary-div > div{
         margin-bottom:20px;
         background-color:var(--color-background);
     }
@@ -6996,6 +7155,36 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-quote-details-form__buy_button{
     padding:10px 18px;
 }
+.mobius-price-block{
+  position:relative;
+  padding-left:16px;
+}
+.mobius-price-block::before{
+  content:"";
+  position:absolute;
+  left:0;
+  top:0;
+  bottom:0;
+  width:4px;
+  border-radius:999px;
+  box-shadow:inset 4px 0 #ff6bd6;
+}
+.mobius-price-block__price{
+  display:flex;
+  align-items:baseline;
+  gap:6px;
+}
+.mobius-price-block__prefix,
+.mobius-price-block__suffix{
+  font-size:14px;
+  color:#6b6b70;
+}
+.mobius-price-block__value{
+  margin:0;
+  font-size:34px;
+  font-weight:600;
+  color:#111118;
+}
 .mobius-date-picker__container{
   position:relative;
 }
@@ -7628,37 +7817,6 @@ input[type="date"]::-webkit-datetime-edit-year-field{
     display:block;
 }
   }
-.voucher-intervention{
-  display:grid;
-  grid-template:"icon . close" auto "text text text" auto "button button button" auto / auto 1fr auto;
-  gap:var(--size-xs);
-  align-items:start;
-  width:100%;
-}
-.voucher-intervention__icon{
-  grid-area:icon;
-  color:var(--color-accent);
-  margin-top:var(--size-xs);
-}
-.voucher-intervention__button{
-  grid-area:button;
-}
-@media (min-width: 768px){
-  .voucher-intervention{
-    grid-template:"icon text button close" auto / auto 1fr auto auto;
-    align-items:center;
-    gap:var(--size-sm);
-  }
-
-  .voucher-intervention__icon{
-    align-self:center;
-    margin-top:0;
-  }
-
-  .voucher-intervention__button{
-    min-width:238px;
-  }
-}
 .live-chat__text{
   display:grid;
   grid-template-columns:auto 1fr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "2.10.11",
+  "version": "2.11.1",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,15 +26,15 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.9.4",
-    "@simplybusiness/mobius-chatbot": "^2.2.4",
-    "@simplybusiness/mobius-datepicker": "^7.3.5",
-    "@simplybusiness/mobius-interventions": "^3.3.6",
-    "@simplybusiness/mobius-journey": "^11.20.6",
-    "@simplybusiness/theme-core": "^7.14.6"
+    "@simplybusiness/mobius": "^6.9.5",
+    "@simplybusiness/mobius-chatbot": "^2.2.6",
+    "@simplybusiness/mobius-datepicker": "^7.3.6",
+    "@simplybusiness/mobius-interventions": "^3.4.0",
+    "@simplybusiness/mobius-journey": "^11.22.0",
+    "@simplybusiness/theme-core": "^7.14.8"
   },
   "devDependencies": {
-    "build-scripts": "^1.0.2",
+    "build-scripts": "^1.1.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1"
   }

package/src/index.css

@@ -75,6 +75,7 @@
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/Upsells/Upsells.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCard/Ratings/Ratings.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/QuoteCards.css";
+@import "@simplybusiness/mobius-journey/src/components/Recommendations/Recommendations.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/Section/Section.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteCards/Unquotable/Unquotable.css";
 @import "@simplybusiness/mobius-journey/src/components/QuoteHelp/QuoteHelp.css";
@@ -97,6 +98,7 @@
 @import "@simplybusiness/mobius-journey/src/components/shared/DialogueModal/DialogueModal.css";
 @import "@simplybusiness/mobius-journey/src/components/shared/TransferConsentPageUK/styles.css";
 @import "@simplybusiness/mobius-journey/src/components/shared/QuoteDetailsForm/styles.css";
+@import "@simplybusiness/mobius-journey/src/components/shared/PriceBlock/PriceBlock.css";
 
 /* @simplybusiness/mobius-datepicker */
 @import "@simplybusiness/mobius-datepicker/src/components/DatePicker/DatePicker.css";