@simplybusiness/theme-simplybusiness 2.13.8 → 2.13.10

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @simplybusiness/theme-simplybusiness
 
+## 2.13.10
+
+### Patch Changes
+
+- Updated dependencies [c92c93d]
+- Updated dependencies [3b8542c]
+  - @simplybusiness/mobius-journey@11.38.0
+
+## 2.13.9
+
+### Patch Changes
+
+- 686c654: Showcase CSS and Copy updates
+- 9ebf995: Correct pricing reference mark copy on showcase
+- Updated dependencies [686c654]
+- Updated dependencies [2ff07e6]
+- Updated dependencies [9ebf995]
+- Updated dependencies [3ac3cf9]
+- Updated dependencies [639af1c]
+- Updated dependencies [735c1d4]
+- Updated dependencies [aac88f5]
+  - @simplybusiness/mobius-journey@11.37.0
+  - @simplybusiness/mobius@6.10.3
+  - @simplybusiness/mobius-chatbot@2.2.15
+  - @simplybusiness/mobius-datepicker@7.3.15
+  - @simplybusiness/mobius-interventions@3.8.5
+  - @simplybusiness/theme-core@7.14.18
+
 ## 2.13.8
 
 ### Patch Changes

package/dist/index.css

@@ -3911,7 +3911,6 @@ svg:not(:host).svg-inline--mobius-icon{
     line-height:var(--line-height-normal);
   }
 .mobius-collapsible__details{
-  view-transition-name:details-content;
   border:1px solid var(--color-border-medium);
   border-radius:var(--radius-2);
   padding:var(--size-sm);
@@ -5668,97 +5667,146 @@ 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);
+.mobius-recommendation-card__wrapper{
   position:relative;
 }
-.mobius-recommendations__card--selected{
-  border:2px solid #2a1e81;
+.mobius-recommendation-card__input{
+  position:absolute;
+  width:1px;
+  height:1px;
+  margin:-1px;
+  padding:0;
+  overflow:hidden;
+  clip-path:inset(50%);
+  border:0;
+}
+.mobius-recommendation-card{
+  display:flex;
+  flex-direction:column;
+  gap:var(--size-sm);
+  padding:var(--size-md) var(--size-sm);
   border-radius:var(--radius-2);
+  background:var(--color-background);
+  box-shadow:inset 0 0 0 var(--size-border-width) var(--color-primary-lighter), var(--shadow-card, 0 12px 24px 0 rgba(0, 0, 0, 0.16));
+  cursor:pointer;
+  transition:box-shadow 140ms ease;
+}
+.mobius-recommendation-card:hover{
+    box-shadow:inset 0 0 0 var(--size-border-width) var(--color-primary), var(--shadow-card, 0 12px 24px 0 rgba(0, 0, 0, 0.16));
+  }
+.mobius-recommendation-card.--is-selected{
+    box-shadow:inset 0 0 0 var(--size-border-width) var(--color-primary-darker), var(--shadow-card, 0 12px 24px 0 rgba(0, 0, 0, 0.16));
+  }
+.mobius-recommendation-card.--is-unavailable{
+    position:relative;
+    cursor:default;
+    pointer-events:none;
+  }
+.mobius-recommendation-card__input:focus-visible + .mobius-recommendation-card{
+  outline:var(--size-border-width) solid var(--color-focus);
+  outline-offset:var(--size-xxs);
 }
-.mobius-recommendations__card:focus-visible{
-  outline:2px solid var(--color-focus);
-  outline-offset:4px;
+.mobius-recommendation-card__badge{
+  display:flex;
+  align-items:center;
+  gap:var(--size-xs);
+  margin:calc(var(--size-md) * -1) calc(var(--size-sm) * -1) var(--size-xs);
+  padding:var(--size-sm) var(--size-md);
+  border:var(--size-border-width) solid var(--color-primary-lighter);
+  border-bottom:none;
+  border-radius:var(--radius-2) var(--radius-2) 0 0;
+  background:var(--color-primary-darker);
+  color:var(--color-text-inverted);
+  font-size:var(--font-size-2);
+  line-height:var(--line-height-tight);
+  transition:border-color 140ms ease;
 }
-.mobius-recommendations__card-content{
+.mobius-recommendation-card:hover .mobius-recommendation-card__badge{
+    border-color:var(--color-primary);
+  }
+.mobius-recommendation-card.--is-selected .mobius-recommendation-card__badge{
+    border-color:var(--color-primary-darker);
+  }
+.mobius-recommendation-card__content{
   display:flex;
   flex-direction:column;
   gap:var(--size-md);
 }
-.mobius-recommendations__card-header{
+.mobius-recommendation-card__header{
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
-  gap:16px;
+  gap:var(--size-sm);
 }
-.mobius-recommendations__badge{
+.mobius-recommendation-card__heading{
+  margin:0;
+  font-size:var(--font-size-4);
+  line-height:var(--line-height-tight);
+}
+.mobius-recommendation-card__description{
   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;
+  flex-direction:column;
+  gap:var(--size-xs);
 }
-.mobius-recommendations__badge-icon{
-  color:currentColor;
+.mobius-recommendation-card__limits{
+  display:inline-flex;
+  flex-wrap:wrap;
+  gap:0 0.25em;
 }
-.mobius-recommendations__badge-label{
-  line-height:1.2;
+.mobius-recommendation-card__cta{
+  align-self:flex-start;
+  margin-top:auto;
+  padding:var(--size-xs) var(--size-sm);
+  border-radius:20px;
+  font-size:var(--font-size-2);
+  font-weight:var(--font-weight-bold);
 }
-.mobius-recommendations__checkbox{
-  min-width:24px;
-  min-height:24px;
-  border-radius:var(--radius-1);
-  border:2px solid var(--color-border);
+.mobius-recommendation-card__checkbox{
+  min-width:calc(var(--size-md) + var(--size-border-width) * 2);
+  aspect-ratio:1;
   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);
+  border:var(--size-border-width) solid var(--color-border);
+  border-radius:var(--radius-1);
+  background:var(--color-background);
   color:transparent;
+  transition:140ms ease;
+  transition-property:border-color, background-color, color;
 }
-.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{
+.mobius-recommendation-card__checkbox.--is-selected{
+    border-color:var(--color-primary-hover);
+    background:var(--color-primary-hover);
+    color:var(--color-text-inverted);
+  }
+.mobius-recommendation-card__checkbox-icon{
   width:10px;
   height:6px;
-  border-left:2px solid currentColor;
-  border-bottom:2px solid currentColor;
-  transform:rotate(-45deg);
+  border-left:var(--size-border-width) solid currentColor;
+  border-bottom:var(--size-border-width) solid currentColor;
+  transform:rotate(-45deg) translate(1px, -1px);
 }
-.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-recommendation-card__overlay{
+  position:absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  z-index:2;
+  display:grid;
+  place-items:center;
+  border-radius:inherit;
+  background:rgba(255, 255, 255, 0.75);
 }
-.mobius-recommendations__cta{
-  border-radius:20px;
-  font-weight:var(--font-weight-bold);
+.mobius-recommendation-card__overlay-message{
+  max-width:288px;
+  margin-left:var(--size-sm);
+  margin-right:var(--size-sm);
+  padding:var(--size-md);
+  border-radius:var(--radius-2);
+  background:var(--color-azure-700);
+  color:var(--color-neutral-100);
   font-size:var(--font-size-2);
-  padding:8px 12px;
+  line-height:var(--line-height-normal);
 }
 .mobius-recommendations{
   display:flex;
@@ -6496,7 +6544,7 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-page__main{
   flex:1;
-  padding-top:0;
+  padding-top:var(--size-lg);
   padding-bottom:calc(var(--size-lg) + var(--size-xxl));
   padding-left:var(--size-sm);
   padding-right:var(--size-sm);
@@ -6564,10 +6612,12 @@ svg:not(:host).svg-inline--mobius-icon{
       width:100%;
     }
   }
-.mobius-showcase__card.mobius-showcase-explore{
+.mobius-showcase-explore{
+  display:flex;
   flex:1;
   flex-direction:column;
   gap:var(--size-md);
+  border-radius:var(--radius-2);
   padding:var(--size-lg) var(--size-md);
   background-color:var(--color-azure-200);
 }
@@ -6580,11 +6630,12 @@ svg:not(:host).svg-inline--mobius-icon{
   color:var(--color-text-medium);
 }
 .mobius-showcase-explore__list{
-  margin:0;
+  margin:var(--size-xs) 0 0;
   padding-left:var(--size-lg);
   color:var(--color-text-medium);
 }
 .mobius-showcase-explore__list-item{
+  margin:var(--size-xs) 0 0;
   color:var(--color-text-medium);
 }
 .mobius-showcase-explore__form{
@@ -6593,15 +6644,19 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-showcase-explore__cta{
   width:100%;
 }
-.showcase-products-list__item:not(:last-child){
+.mobius-showcase-product-list__item:not(:last-child){
   margin-bottom:var(--size-sm);
 }
-.showcase-products-list__item__title{
+.mobius-title__header.mobius-product-list__item-title{
   font-size:var(--font-size-lead);
 }
-.showcase-product-drawer__trigger{
+.mobius-title__description.mobius-product-list__coverage-limit{
+  font-size:var(--font-size-small-paragraph);
+}
+.mobius-product-list__drawer-trigger{
  width:fit-content;
  border-radius:var(--size-lg);
+ font-size:var(--font-size-small-paragraph);
 }
 .mobius-showcase-form{
   width:100%;
@@ -6616,12 +6671,7 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-showcase-form__back{
   display:flex;
-  justify-content:center;
-}
-@media screen and (min-width: 641px){
-  .mobius-showcase-form__back{
-    justify-content:flex-start;
-  }
+  justify-content:flex-start;
 }
 .mobius-showcase-form__back .mobius-button{
   font-size:var(--font-size-regular);
@@ -6641,21 +6691,21 @@ svg:not(:host).svg-inline--mobius-icon{
   margin:var(--size-md) 0;
 }
 .mobius-showcase__individual-prices{
-  display:flex;
-  flex-direction:column;
-  gap:var(--size-xs);
+  display:grid;
+  padding-top:var(--size-xs);
 }
-@media screen and (min-width: 641px){
+@media screen and (min-width: 640px){
   .mobius-showcase__individual-prices{
     padding-left:var(--size-sm);
+    padding-top:0;
     border-left:1px solid var(--color-neutral-300);
   }
 }
 .mobius-showcase__price{
   margin:0;
   color:var(--color-text-medium);
-  font-size:var(--font-size-2);
-  line-height:1.333;
+  font-size:var(--font-size-small-print);
+  line-height:var(--line-height-tight);
 }
 .mobius-showcase__price sup{
   margin-left:2px;
@@ -6914,15 +6964,22 @@ svg:not(:host).svg-inline--mobius-icon{
   }
 }
 .mobius-showcase__layout{
-  flex-direction:column;
+  flex-direction:row;
+  flex-wrap:wrap;
+  align-items:stretch;
   width:100%;
 }
-@media screen and (min-width: 641px){
-  .mobius-showcase__layout{
-    align-items:stretch;
-    flex-direction:row;
+.mobius-showcase-explore{
+  flex:1 0 320px;
+}
+@media screen and (min-width: 776px){
+  .mobius-showcase-explore{
+    flex-grow:0;
   }
 }
+.mobius-showcase-heading{
+  margin-top:0;
+}
 .mobius-showcase__image-wrapper{
   position:relative;
   overflow:hidden;
@@ -6930,7 +6987,7 @@ svg:not(:host).svg-inline--mobius-icon{
   width:100%;
   border-radius:var(--radius-2) var(--radius-2) 80px 80px;
 }
-@media screen and (min-width: 641px){
+@media screen and (min-width: 640px){
   .mobius-showcase__image-wrapper{
     border-radius:160px var(--radius-2) var(--radius-2) 160px;
     order:2;
@@ -6956,7 +7013,7 @@ svg:not(:host).svg-inline--mobius-icon{
   justify-content:space-between;
   gap:var(--size-lg);
   margin:var(--size-lg) 0;
-  flex:2.5;
+  flex:1 0 400px;
   min-width:0;
   border-radius:var(--radius-2);
   box-shadow:0px 12px 24px 0px #00000029;
@@ -6965,7 +7022,7 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-showcase__title{
   margin-top:0;
 }
-@media screen and (min-width: 641px){
+@media screen and (min-width: 640px){
   .mobius-showcase__card{
     flex-direction:row;
     margin:0;
@@ -6975,7 +7032,7 @@ svg:not(:host).svg-inline--mobius-icon{
   order:1;
   padding:var(--size-md);
 }
-@media screen and (min-width: 641px){
+@media screen and (min-width: 640px){
   .mobius-showcase__content{
     order:unset;
     padding:var(--size-lg) 0 var(--size-lg) var(--size-md);
@@ -6983,19 +7040,18 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-showcase__heading{
   display:block;
-  margin-top:0;
+  font-size:var(--font-size-small-print);
+  letter-spacing:1.5px;
+  color:var(--color-text-medium);
   margin-bottom:var(--size-xs);
-  color:var(--color-text);
-  font-weight:600;
-  text-transform:uppercase;
+  margin-top:0;
 }
+.mobius-showcase__coverage,
 .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;
+  font-size:var(--font-size-regular);
+  line-height:var(--line-height-normal);
+  margin-bottom:0;
 }
 .mobius-sms-button__sms-message{
   display:flex;
@@ -7621,8 +7677,14 @@ svg:not(:host).svg-inline--mobius-icon{
     padding:10px 18px;
 }
 .mobius-price-block{
+  flex-direction:column;
   position:relative;
-  padding:0 var(--size-sm);
+  padding:0 0 0 var(--size-sm);
+}
+@media (min-width: 640px){
+  .mobius-price-block{
+    flex-direction:row;
+  }
 }
 .mobius-price-block::before{
   content:"";
@@ -7635,12 +7697,18 @@ svg:not(:host).svg-inline--mobius-icon{
   box-shadow:inset 4px 0 #ff6bd6;
 }
 .mobius-price-block__price{
+  width:100%;
   display:flex;
   flex-direction:column;
   justify-content:space-between;
   align-items:baseline;
   gap:6px;
 }
+@media screen and (min-width: 640px){
+  .mobius-price-block__price{
+    width:50%;
+  }
+}
 .mobius-price-block__prefix,
 .mobius-price-block__suffix{
   font-size:var(--font-size-2);
@@ -7652,6 +7720,9 @@ svg:not(:host).svg-inline--mobius-icon{
   font-size:var(--font-size-6);
   font-weight:600;
   color:var(--color-text);
+  display:flex;
+  flex-wrap:wrap;
+  align-items:baseline;
 }
 .mobius-date-picker__container{
   position:relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "2.13.8",
+  "version": "2.13.10",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -28,15 +28,15 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.10.2",
-    "@simplybusiness/mobius-chatbot": "^2.2.14",
-    "@simplybusiness/mobius-datepicker": "^7.3.14",
-    "@simplybusiness/mobius-interventions": "^3.8.4",
-    "@simplybusiness/mobius-journey": "^11.36.0",
-    "@simplybusiness/theme-core": "^7.14.17"
+    "@simplybusiness/mobius": "^6.10.3",
+    "@simplybusiness/mobius-chatbot": "^2.2.15",
+    "@simplybusiness/mobius-datepicker": "^7.3.15",
+    "@simplybusiness/mobius-interventions": "^3.8.5",
+    "@simplybusiness/mobius-journey": "^11.38.0",
+    "@simplybusiness/theme-core": "^7.14.18"
   },
   "devDependencies": {
-    "build-scripts": "^1.1.2",
+    "build-scripts": "^1.1.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1"
   }