@simplybusiness/theme-simplybusiness 2.10.10 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @simplybusiness/theme-simplybusiness
 
+## 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
+
+- Updated dependencies [f530f7c]
+  - @simplybusiness/mobius-interventions@3.3.6
+  - @simplybusiness/mobius-journey@11.20.6
+
 ## 2.10.10
 
 ### 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;
     }
@@ -4207,7 +4207,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 +5618,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);
@@ -6330,22 +6448,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 +6473,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 +6529,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 +6561,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 +6894,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 +7139,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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "2.10.10",
+  "version": "2.11.0",
   "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.5",
-    "@simplybusiness/mobius-journey": "^11.20.5",
-    "@simplybusiness/theme-core": "^7.14.6"
+    "@simplybusiness/mobius": "^6.9.5",
+    "@simplybusiness/mobius-chatbot": "^2.2.5",
+    "@simplybusiness/mobius-datepicker": "^7.3.6",
+    "@simplybusiness/mobius-interventions": "^3.3.7",
+    "@simplybusiness/mobius-journey": "^11.21.0",
+    "@simplybusiness/theme-core": "^7.14.7"
   },
   "devDependencies": {
-    "build-scripts": "^1.0.2",
+    "build-scripts": "^1.0.3",
     "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";