@simplybusiness/theme-simplybusiness 1.20.4 → 1.21.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @simplybusiness/theme-simplybusiness
 
+## 1.21.1
+
+### Patch Changes
+
+- Updated dependencies [30251a9]
+- Updated dependencies [db0dc74]
+  - @simplybusiness/mobius-interventions@1.59.0
+
+## 1.21.0
+
+### Minor Changes
+
+- 7f89535: Create new interventions component for QCP
+- fba968e: Add styling support for ProgressSteps
+
+### Patch Changes
+
+- Updated dependencies [7f89535]
+- Updated dependencies [d0e80c8]
+- Updated dependencies [b2aeffa]
+- Updated dependencies [fba968e]
+  - @simplybusiness/mobius-interventions@1.58.0
+  - @simplybusiness/mobius-journey@8.31.0
+
 ## 1.20.4
 
 ### Patch Changes

package/dist/index.css

@@ -3620,14 +3620,6 @@ svg:not(:host).svg-inline--mobius-icon{
   color:var(--color-text-inverted);
   margin:0 0 0 auto;
 }
-:root,
-:host{
-  --progress-steps-shape-size:44px;
-  --progress-steps-primary-color:var(--color-primary-hover);
-  --progress-steps-secondary-color:var(--color-background-light);
-  --progress-steps-tertiary-color:var(--color-primary-hover);
-  --progress-steps-incomplete-number-text-color:var(--color-text-medium);
-}
 .mobius-progress-steps{
   width:100%;
   display:grid;
@@ -3648,21 +3640,28 @@ svg:not(:host).svg-inline--mobius-icon{
       background-color:var(--progress-steps-primary-color);
     }
 .mobius-progress-steps__item.--is-active .mobius-progress-steps__item-name.mobius-text{
-      color:var(--progress-steps-tertiary-color);
+      color:var(--progress-steps-active-label-color);
+      text-decoration:var(--progress-steps-active-label-text-decoration, none);
     }
 .mobius-progress-steps__item.--is-active .mobius-progress-steps__item-shape{
-      background-color:var(--progress-steps-tertiary-color);
+      background-color:var(--progress-steps-active-background-color);
       border-color:var(--progress-steps-tertiary-color);
+      background-image:var(--progress-steps-active-icon, none);
     }
 :is(.mobius-progress-steps__item.--is-active .mobius-progress-steps__item-shape)::after{
-        background-color:var(--progress-steps-secondary-color);
+        background-color:var(--progress-steps-active-line-color);
       }
 .mobius-progress-steps__item.--is-active .mobius-progress-steps__item-number{
-      color:var(--color-text-inverted);
+      color:var(--progress-steps-active-text-color);
+      visibility:var(--progress-steps-active-number-visibility, visible);
     }
 .mobius-progress-steps__item.--is-complete::after{
       background-color:var(--progress-steps-primary-color);
     }
+.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link{
+      color:var(--progress-steps-complete-label-color);
+      text-decoration:var(--progress-steps-complete-label-text-decoration, underline);
+    }
 :is(:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):hover,:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):focus-visible) .mobius-progress-steps__item-shape{
           background-color:var(--progress-steps-primary-color);
         }
@@ -3671,32 +3670,44 @@ svg:not(:host).svg-inline--mobius-icon{
         }
 .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-shape{
       border-color:var(--progress-steps-primary-color);
-      background-color:var(--color-background);
+      background-color:var(--progress-steps-complete-step-background-color);
+      background-image:var(--progress-steps-complete-icon, none);
     }
 :is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-shape)::after{
-        background-color:var(--progress-steps-primary-color);
+        background-color:var(--progress-steps-complete-line-color);
       }
 .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-number{
-      color:var(--color-primary);
+      color:var(--progress-steps-complete-step-text-color);
+      visibility:var(--progress-steps-complete-number-visibility, visible);
     }
 .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-icon{
-      color:var(--progress-steps-primary-color);
+      color:var(--progress-steps-complete-step-text-color);
+      visibility:var(--progress-steps-complete-number-visibility, visible);
     }
 .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-name.mobius-text{
-      color:var(--color-text);
+      color:var(--progress-steps-incomplete-label-color);
+      text-decoration:var(--progress-steps-complete-label-text-decoration, none);
     }
 .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-shape{
       border-color:var(--progress-steps-secondary-color);
+      background-color:var(--progress-steps-incomplete-background-color);
     }
 :is(.mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-shape)::after{
-        background-color:var(--progress-steps-secondary-color);
+        background-color:var(--progress-steps-incomplete-line-color);
       }
 .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-number{
-      color:var(--progress-steps-incomplete-number-text-color);
+      color:var(--progress-steps-incomplete-text-color);
+      visibility:var(--progress-steps-incomplete-number-visibility, visible);
     }
 .mobius-progress-steps__item-link{
   display:block;
+  -webkit-text-decoration:none;
+  text-decoration:none;
 }
+.mobius-progress-steps__item-link:hover{
+    -webkit-text-decoration:none;
+    text-decoration:none;
+  }
 .mobius-progress-steps__item-link:focus-visible{
     padding:0;
   }
@@ -3708,9 +3719,11 @@ svg:not(:host).svg-inline--mobius-icon{
   margin:0 auto;
   border-radius:50%;
   border:var(--size-border-width) solid currentColor;
-  font-size:var(--font-size-small-title);
+  font-size:var(--progress-steps-shape-font-size);
   font-weight:var(--font-weight-bold);
   background-color:var(--progress-steps-secondary-color);
+  background-repeat:no-repeat;
+  background-position:center;
 }
 .mobius-progress-steps__item-shape::after{
     content:"";
@@ -3731,7 +3744,8 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 @media (min-width: 960px){
   .mobius-progress-steps__item-shape{
-    --progress-steps-shape-size:64px;
+    --progress-steps-shape-size:var(--progress-steps-shape-size-lg);
+    --progress-steps-shape-font-size:var(--progress-steps-shape-font-size-lg);
   }
 
   .mobius-progress-steps__item-name.mobius-text{
@@ -6657,6 +6671,117 @@ svg:not(:host).svg-inline--mobius-icon{
   margin-bottom:0px;
   font-size:10px;
 }
+.qcp-inactivity-intervention__qcp-intervention-modal{
+  display:grid;
+  grid-template-columns:auto auto;
+  width:fit-content;
+  background-color:var(--color-neutral-100);
+  border-radius:var(--size-xs);
+  overflow:visible;
+  grid-template-areas:"text image";
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__qcp-intervention-modal{
+    grid-template-columns:1fr;
+    width:328px;
+    grid-template-areas:"image" "text";
+}
+  }
+.qcp-inactivity-intervention__qcp-content-container{
+  border-radius:var(--size-xs) 0 0 var(--size-xs);
+  display:grid;
+  margin:0;
+  align-items:flex-start;
+  width:392px;
+  grid-area:text;
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__qcp-content-container{
+    width:100%;
+    height:auto;
+}
+  }
+.qcp-inactivity-intervention__qcp-text-container{
+  margin:var(--size-md) var(--size-lg) 0 var(--size-lg);
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__qcp-text-container{
+    margin:var(--size-sm);
+}
+  }
+.qcp-inactivity-intervention__qcp-subtext{
+  margin:0;
+  color:var(--color-text-medium);
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__qcp-subtext{
+    margin-bottom:var(--size-lg);
+}
+  }
+.qcp-inactivity-intervention__qcp-image{
+  background-image:url(c862b1604d0ceb19b9e8.webp);
+  background-position:center;
+  background-repeat:no-repeat;
+  background-size:cover;
+  border-radius:var(--size-xs) 0 0 var(--size-xs);
+  overflow:hidden;
+  width:240px;
+  height:312px;
+  grid-area:image;
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__qcp-image{
+    background-image:url(5cbbdbab4722e58e208f.webp);
+    width:100%;
+    height:148px;
+}
+  }
+.qcp-inactivity-intervention__qcp-phone-number{
+  display:grid;
+  grid-template-columns:auto 1fr;
+  margin:var(--size-lg) 0 var(--size-sm) 0;
+}
+.qcp-inactivity-intervention__qcp-phone-number-text{
+  margin:0 0 0 var(--size-xxs);
+}
+.qcp-inactivity-intervention__button{
+  margin:var(--size-sm) 0;
+  width:156px;
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__button{
+    margin:var(--size-sm) 0 0 0;
+    width:100%;
+}
+  }
+.qcp-inactivity-intervention__agent-chat-button{
+  margin:var(--size-lg) 0 0 0;
+  width:100%;
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__agent-chat-button{
+    margin:0;
+}
+  }
+.qcp-inactivity-intervention__full-width-button{
+  width:100%;
+}
+.qcp-inactivity-intervention__bottom-button{
+  margin-bottom:var(--size-sm);
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__desktop-only{
+    display:none;
+}
+  }
+.qcp-inactivity-intervention__mobile-only{
+  display:none;
+}
+@media (max-width: 640px){
+.qcp-inactivity-intervention__mobile-only{
+    display:block;
+}
+  }
 .star-rating__footer{
   box-sizing:border-box;
   position:fixed;
@@ -7360,10 +7485,31 @@ svg:not(:host).svg-inline--mobius-icon{
   --header-phone-icon-color:var(--color-secondary);
   --header-powered-by-icon-color:var(--color-text-medium);
   --progress-steps-shape-size:44px;
+  --progress-steps-shape-size-lg:64px;
+
+  --progress-steps-shape-font-size:24px;
+  --progress-steps-shape-font-size-lg:var(--progress-steps-shape-font-size);
+
   --progress-steps-primary-color:var(--color-primary-hover);
   --progress-steps-secondary-color:var(--color-background-light);
   --progress-steps-tertiary-color:var(--color-primary-hover);
   --progress-steps-incomplete-number-text-color:var(--color-text-medium);
+
+  --progress-steps-complete-step-background-color:var(--color-background);
+  --progress-steps-complete-step-text-color:var(--progress-steps-primary-color);
+  --progress-steps-complete-label-color:var(--color-secondary);
+  --progress-steps-complete-line-color:var(--progress-steps-primary-color);
+  --progress-steps-complete-label-text-decoration:underline;
+
+  --progress-steps-incomplete-background-color:var(--color-background-light);
+  --progress-steps-incomplete-text-color:var(--color-text-medium);
+  --progress-steps-incomplete-label-color:var(--color-text);
+  --progress-steps-incomplete-line-color:var(--progress-steps-secondary-color);
+
+  --progress-steps-active-background-color:var(--progress-steps-primary-color);
+  --progress-steps-active-text-color:var(--color-text-inverted);
+  --progress-steps-active-label-color:var(--color-text);
+  --progress-steps-active-line-color:var(--progress-steps-secondary-color);
   --section-max-width:552px;
   --questionnaire-list-icon:url("data:image/svg+xml,%3Csvg    xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22    width%3D%22448%22 height%3D%22512%22 viewbox%3D%220 0 24 24%22%3E  %3Cpath d%3D%22M448 130L431 147 177.5 399.2l-16.9 16.9-16.9-16.9L17 273.1 0 256.2l33.9-34 17 16.9L160.6 348.3 397.1 112.9l17-16.9L448 130z%22 fill%3D%22%23e943c9%22 %2F%3E%3C%2Fsvg%3E");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "1.20.4",
+  "version": "1.21.1",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -29,8 +29,8 @@
     "@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/mobius-interventions": "^1.59.0",
+    "@simplybusiness/mobius-journey": "^8.31.0",
     "@simplybusiness/theme-core": "^7.7.2"
   },
   "devDependencies": {

package/src/variables.css

@@ -14,11 +14,32 @@
 
   /* Progress Steps */
   --progress-steps-shape-size: 44px;
+  --progress-steps-shape-size-lg: 64px;
+
+  --progress-steps-shape-font-size: 24px;
+  --progress-steps-shape-font-size-lg: var(--progress-steps-shape-font-size);
+
   --progress-steps-primary-color: var(--color-primary-hover);
   --progress-steps-secondary-color: var(--color-background-light);
   --progress-steps-tertiary-color: var(--color-primary-hover);
   --progress-steps-incomplete-number-text-color: var(--color-text-medium);
 
+  --progress-steps-complete-step-background-color: var(--color-background);
+  --progress-steps-complete-step-text-color: var(--progress-steps-primary-color);
+  --progress-steps-complete-label-color: var(--color-secondary);
+  --progress-steps-complete-line-color: var(--progress-steps-primary-color);
+  --progress-steps-complete-label-text-decoration: underline;
+
+  --progress-steps-incomplete-background-color: var(--color-background-light);
+  --progress-steps-incomplete-text-color: var(--color-text-medium);
+  --progress-steps-incomplete-label-color: var(--color-text);
+  --progress-steps-incomplete-line-color: var(--progress-steps-secondary-color);
+
+  --progress-steps-active-background-color: var(--progress-steps-primary-color);
+  --progress-steps-active-text-color: var(--color-text-inverted);
+  --progress-steps-active-label-color: var(--color-text);
+  --progress-steps-active-line-color: var(--progress-steps-secondary-color);
+
   /* Section */
   --section-max-width: 552px;
   --questionnaire-list-icon: url("./images/tick.svg");