@simplybusiness/theme-simplybusiness 2.13.4 → 2.13.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @simplybusiness/theme-simplybusiness
 
+## 2.13.6
+
+### Patch Changes
+
+- Updated dependencies [1799d6c]
+  - @simplybusiness/mobius-journey@11.34.1
+
+## 2.13.5
+
+### Patch Changes
+
+- 4e49c3e: Transition created for use by Showcase and Recommendation pages
+- Updated dependencies [2dc7a77]
+- Updated dependencies [58a910a]
+- Updated dependencies [f0072cc]
+- Updated dependencies [4e49c3e]
+- Updated dependencies [f9c5b86]
+- Updated dependencies [c83707a]
+  - @simplybusiness/mobius-journey@11.34.0
+  - @simplybusiness/mobius@6.10.0
+  - @simplybusiness/theme-core@7.14.15
+  - @simplybusiness/mobius-datepicker@7.3.12
+  - @simplybusiness/mobius-chatbot@2.2.12
+  - @simplybusiness/mobius-interventions@3.8.2
+
 ## 2.13.4
 
 ### Patch Changes

package/dist/index.css

@@ -70,6 +70,34 @@ h6.mobius-accordion__link-text,
 .mobius-accordion__link-icon.--is-open{
     transform:rotateZ(-180deg);
   }
+.mobius-accordion-list{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+.mobius-accordion-list .mobius-accordion__link{
+    justify-content:space-between;
+    -webkit-text-decoration:none;
+    -webkit-text-decoration:none;
+    text-decoration:none;
+    --accordion-icon-margin:0;
+  }
+:is(.mobius-accordion-list .mobius-accordion__link):hover,:is(.mobius-accordion-list .mobius-accordion__link):active{
+      -webkit-text-decoration:none;
+      -webkit-text-decoration:none;
+      text-decoration:none;
+    }
+.mobius-accordion-list .mobius-accordion__link-text{
+    color:var(--color-text-medium);
+    font-size:var(--font-size-regular);
+    font-weight:var(--font-weight-semibold);
+  }
+.mobius-accordion-list .mobius-accordion__content{
+    color:var(--color-text-medium);
+    font-size:var(--font-size-regular);
+    font-weight:var(--font-weight-light);
+    line-height:var(--line-height-normal);
+  }
 .mobius-alert__icon{
   margin-right:var(--size-sm);
 }
@@ -2528,7 +2556,9 @@ svg:not(:host).svg-inline--mobius-icon{
   --font-size-4:20px;
   --font-size-5:24px;
   --font-size-6:32px;
+  --font-weight-light:400;
   --font-weight-normal:500;
+  --font-weight-semibold:600;
   --font-weight-bold:700;
   --line-height-normal:1.5;
   --line-height-tight:1.333;
@@ -6547,17 +6577,15 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-showcase-explore__subtitle{
   margin:0;
-  font-weight:600;
-  text-transform:uppercase;
-  color:var(--color-text-light);
+  color:var(--color-text-medium);
 }
 .mobius-showcase-explore__list{
   margin:0;
   padding-left:var(--size-lg);
-  color:var(--color-text);
+  color:var(--color-text-medium);
 }
 .mobius-showcase-explore__list-item{
-  color:var(--color-text);
+  color:var(--color-text-medium);
 }
 .mobius-showcase-explore__form{
   margin-top:auto;
@@ -6638,6 +6666,253 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-showcase__pricing .mobius-price-block__value{
   line-height:normal;
 }
+.mobius-tailoring-coverage-transition__modal{
+  background-color:transparent;
+}
+.mobius-tailoring-coverage-transition__modal::backdrop{
+    display:none;
+  }
+.mobius-tailoring-coverage-transition__fallback{
+  position:relative;
+  width:100%;
+  height:100%;
+  background-color:var(--color-azure-500);
+  animation-duration:300ms, 0s;
+  animation-timing-function:ease-in-out, ease-in-out;
+  animation-delay:1000ms, 1250ms;
+  animation-fill-mode:forwards, forwards;
+  animation-name:fadeOut, hideOverlay;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__fallback{
+    background-color:var(--color-azure-200);
+}
+  }
+.mobius-tailoring-coverage-transition__fallback .mobius-tailoring-coverage-transition__loader{
+    position:absolute;
+    width:20px;
+    height:20px;
+    top:50%;
+    left:50%;
+    transform:translate(-50%, -50%);
+  }
+:is(.mobius-tailoring-coverage-transition__fallback .mobius-tailoring-coverage-transition__loader)::before{
+      border:4px solid var(--color-bubblegum-500);
+      animation:1000ms infinite linear rotate;
+      clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+      content:"";
+      position:absolute;
+      box-sizing:border-box;
+      top:0;
+      right:0;
+      bottom:0;
+      left:0;
+      border-radius:50%;
+    }
+.mobius-tailoring-coverage-transition__transition-icon{
+  display:block;
+  height:110px;
+  margin:0 auto;
+  width:110px;
+  animation-duration:3s;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+  animation-name:fadeIn;
+  rotate:-45deg;
+}
+.mobius-tailoring-coverage-transition__overlay{
+  position:relative;
+  width:100%;
+  height:100%;
+  animation-duration:500ms, 0s;
+  animation-delay:3300ms, 3800ms;
+  animation-timing-function:ease-in-out, ease-in-out;
+  animation-fill-mode:forwards, forwards;
+  animation-name:fadeOut, hideOverlay;
+}
+.mobius-tailoring-coverage-transition__overlay .mobius-tailoring-coverage-transition__loader{
+    width:110px;
+    height:110px;
+    rotate:45deg;
+  }
+:is(.mobius-tailoring-coverage-transition__overlay .mobius-tailoring-coverage-transition__loader)::before{
+      border:10px solid var(--color-bubblegum-500);
+      animation-duration:2s;
+      animation-timing-function:linear;
+      animation-fill-mode:forwards;
+      animation-name:prixClipFix;
+      clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+      content:"";
+      position:absolute;
+      box-sizing:border-box;
+      top:0;
+      right:0;
+      bottom:0;
+      left:0;
+      border-radius:50%;
+    }
+.mobius-tailoring-coverage-transition__transition{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background-color:var(--color-azure-500);
+  animation-duration:800ms;
+  animation-delay:2800ms;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+  animation-name:fadeInPinkMobile;
+  height:100%;
+  box-sizing:border-box;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__transition{
+    background-color:var(--color-azure-200);
+    animation-name:fadeInPinkDesktop;
+}
+  }
+.mobius-tailoring-coverage-transition__content{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  gap:20px;
+  animation-duration:650ms;
+  animation-delay:2800ms;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+  animation-name:moveUp;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__content{
+    gap:30px;
+}
+  }
+.mobius-tailoring-coverage-transition__art--mobile{
+  display:block;
+}
+.mobius-tailoring-coverage-transition__art--desktop{
+  display:none;
+}
+@media screen and (min-width: 671px){
+  .mobius-tailoring-coverage-transition__art--mobile{
+    display:none;
+  }
+  .mobius-tailoring-coverage-transition__art--desktop{
+    display:block;
+  }
+}
+.mobius-tailoring-coverage-transition__trade-image{
+  max-width:220px;
+  width:70vw;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__trade-image{
+    max-width:260px;
+    width:30vw;
+}
+  }
+@media (max-height: 600px){
+.mobius-tailoring-coverage-transition__trade-image{
+    display:none;
+}
+  }
+@media screen and (prefers-reduced-motion: reduce){
+  .mobius-tailoring-coverage-transition__fallback .mobius-tailoring-coverage-transition__loader::before{
+    animation:none;
+  }
+
+  .mobius-tailoring-coverage-transition__transition-icon{
+    animation:none;
+  }
+
+  .mobius-tailoring-coverage-transition__overlay .mobius-tailoring-coverage-transition__loader::before{
+    animation:none;
+  }
+
+  .mobius-tailoring-coverage-transition__content{
+    animation-name:none;
+  }
+}
+@keyframes fadeInPinkDesktop{
+  0%{
+    background-color:var(--color-azure-200);
+  }
+
+  100%{
+    background-color:var(--color-bubblegum-500);
+  }
+}
+@keyframes fadeInPinkMobile{
+  0%{
+    background-color:var(--color-azure-500);
+  }
+
+  100%{
+    background-color:var(--color-bubblegum-500);
+  }
+}
+@keyframes rotate{
+  100%{
+    transform:rotate(360deg);
+  }
+}
+@keyframes fadeIn{
+  0%{
+    opacity:0;
+  }
+
+  66%{
+    opacity:0;
+  }
+
+  100%{
+    opacity:1;
+  }
+}
+@keyframes moveUp{
+  0%{
+    transform:translateY(0);
+  }
+
+  100%{
+    transform:translateY(-100%);
+  }
+}
+@keyframes fadeOut{
+  0%{
+    opacity:1;
+  }
+
+  100%{
+    opacity:0;
+  }
+}
+@keyframes hideOverlay{
+  0%{
+    left:0;
+  }
+
+  100%{
+    left:-100%;
+  }
+}
+@keyframes prixClipFix{
+  0%{
+    clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
 .mobius-showcase__layout{
   flex-direction:column;
   width:100%;
@@ -7138,6 +7413,66 @@ svg:not(:host).svg-inline--mobius-icon{
     padding:var(--size-xs);
     margin-top:var(--size-sm);
 }
+.mobius-payment-terms-checklist__label{
+  display:flex;
+  align-items:flex-start;
+  cursor:pointer;
+}
+.mobius-payment-terms-checklist__label.--is-disabled{
+    cursor:not-allowed;
+    color:var(--checkbox-label-color-disabled);
+  }
+.mobius-payment-terms-checklist__input{
+  appearance:none;
+  flex-shrink:0;
+  width:var(--size-lg);
+  height:var(--size-lg);
+  margin:0;
+  border:var(--size-border-width) solid var(--color-secondary);
+  border-radius:var(--radius-1);
+  background:transparent no-repeat center;
+  cursor:pointer;
+}
+.mobius-payment-terms-checklist__input:focus-visible{
+    box-shadow:var(--box-shadow-default);
+  }
+.mobius-payment-terms-checklist__input:hover:not(.--is-disabled):not(.--is-invalid){
+    border-color:var(--color-secondary-hover);
+  }
+.mobius-payment-terms-checklist__input.--is-selected{
+    background-color:var(--color-secondary);
+    background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27/%3E%3C/svg%3E");
+    background-size:20px;
+  }
+.mobius-payment-terms-checklist__input.--is-invalid:not(.--is-disabled){
+    border-color:var(--color-error);
+  }
+.mobius-payment-terms-checklist__input.--is-disabled{
+    border-color:var(--checkbox-border-color-disabled);
+    background-color:var(--checkbox-background-color-disabled);
+    cursor:not-allowed;
+  }
+.mobius-payment-terms-checklist__input.--is-disabled.--is-selected{
+      background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23d1d1d2%27%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27/%3E%3C/svg%3E");
+    }
+.mobius-payment-terms-checklist__text{
+  padding-top:var(--size-xxs);
+  margin-left:var(--size-sm);
+}
+.mobius-payment-terms-checklist__link{
+  color:var(--color-link);
+}
+.mobius-payment-terms-checklist__link:hover{
+    color:var(--color-link-hover);
+  }
+.mobius-payment-terms-checklist__link:focus-visible{
+    outline:var(--size-focus-ring) solid var(--color-focus);
+    outline-offset:var(--size-focus-ring);
+    border-radius:var(--size-focus-ring);
+  }
+.mobius-payment-terms-checklist .mobius-error-message{
+  margin-top:var(--size-md);
+}
 .mobius-dialogue-modal__description{
     margin:7px;
     text-align:left;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "2.13.4",
+  "version": "2.13.6",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -28,12 +28,12 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.9.10",
-    "@simplybusiness/mobius-chatbot": "^2.2.11",
-    "@simplybusiness/mobius-datepicker": "^7.3.11",
-    "@simplybusiness/mobius-interventions": "^3.8.1",
-    "@simplybusiness/mobius-journey": "^11.33.0",
-    "@simplybusiness/theme-core": "^7.14.14"
+    "@simplybusiness/mobius": "^6.10.0",
+    "@simplybusiness/mobius-chatbot": "^2.2.12",
+    "@simplybusiness/mobius-datepicker": "^7.3.12",
+    "@simplybusiness/mobius-interventions": "^3.8.2",
+    "@simplybusiness/mobius-journey": "^11.34.1",
+    "@simplybusiness/theme-core": "^7.14.15"
   },
   "devDependencies": {
     "build-scripts": "^1.1.0",

package/src/index.css

@@ -98,6 +98,7 @@
 @import "@simplybusiness/mobius-journey/src/components/SmsButton/SmsButton.css";
 /* Journey Components (payment summary, etc.) */
 @import "@simplybusiness/mobius-journey/src/components/shared/PersistentSummary/styles.css";
+@import "@simplybusiness/mobius-journey/src/components/shared/PersistentSummary/PaymentTermsChecklist/PaymentTermsChecklist.css";
 @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";