@simplybusiness/theme-simplybusiness 1.9.16 → 1.9.18

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @simplybusiness/theme-simplybusiness
 
+## 1.9.18
+
+### Patch Changes
+
+- d8f280f: Export journey-component atoms
+- Updated dependencies [d8f280f]
+  - @simplybusiness/mobius-journey@6.53.1
+
+## 1.9.17
+
+### Patch Changes
+
+- Updated dependencies [2392c6b]
+- Updated dependencies [86d7cfa]
+- Updated dependencies [80e40ef]
+- Updated dependencies [d64d502]
+- Updated dependencies [691d321]
+- Updated dependencies [b640c01]
+- Updated dependencies [455315b]
+- Updated dependencies [3820074]
+- Updated dependencies [d9efcc9]
+  - @simplybusiness/mobius-journey@6.53.0
+  - @simplybusiness/mobius@5.19.0
+  - @simplybusiness/mobius-datepicker@6.4.1
+  - @simplybusiness/theme-core@7.3.2
+
 ## 1.9.16
 
 ### Patch Changes

package/dist/index.css

@@ -455,7 +455,9 @@ a.mobius-button:focus-visible,
   --combobox-group-color:var(--color-text);
   --combobox-group-background-color:#dad6f7;
   --combobox-selected-background-color:var(--color-primary);
-  --listbox-height:350px;
+  --listbox-height:min-content;
+  --listbox-max-height:350px;
+  --listbox-max-height-mobile:240px;
   --listbox-gap:4px;
   --option-padding:var(--size-xs) var(--size-lg);
 }
@@ -486,6 +488,10 @@ a.mobius-button:focus-visible,
 .mobius-combobox--is-expanded .mobius-combobox__list{
     opacity:1;
     height:var(--listbox-height);
+    max-height:var(--listbox-max-height);
+  }
+.mobius-combobox--is-expanded.mobius-combobox--is-mobile .mobius-combobox__list{
+    max-height:var(--listbox-max-height-mobile);
   }
 .mobius-combobox__option{
   padding:var(--option-padding);
@@ -1217,30 +1223,34 @@ a.mobius-button:focus-visible,
     flex-direction:column;
   }
 .mobius-radio__input{
+  position:relative;
   align-self:center;
-  appearance:none;
   margin:0 calc(var(--size-xs) + 2px) 0 0;
-  padding:3px;
-  outline:2px solid var(--color-primary-light);
+  padding:var(--size-xs);
+  border:2px solid var(--color-primary-light);
   border-radius:50%;
+  -webkit-appearance:none;
+  appearance:none;
   background-color:transparent;
 }
 .mobius-radio__input:focus-visible{
     outline-offset:0;
   }
 .mobius-radio__input::after{
+    position:absolute;
     content:"";
     display:block;
     width:10px;
     height:10px;
     border-radius:50%;
-    background-color:transparent;
+    top:3px;
+    left:3px;
   }
 .mobius-radio__input:checked::after{
     background-color:var(--color-primary);
   }
 .mobius-radio__input:disabled{
-    outline-color:var(--color-border-medium);
+    border-color:var(--color-border-medium);
   }
 .mobius-radio__input:disabled:checked::after{
       background-color:var(--color-background-light);
@@ -1280,7 +1290,7 @@ a.mobius-button:focus-visible,
     border-color:var(--color-primary-light);
   }
 .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input{
-      outline-color:var(--color-primary-light);
+      border-color:var(--color-primary-light);
     }
 :is(.mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input):checked::after{
         background-color:var(--color-primary-light);
@@ -1290,7 +1300,7 @@ a.mobius-button:focus-visible,
     background-color:var(--color-background-input-active);
   }
 .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input{
-      outline-color:var(--color-primary);
+      border-color:var(--color-primary);
     }
 :is(.mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input):checked::after{
         background-color:var(--color-primary);
@@ -1303,7 +1313,7 @@ a.mobius-button:focus-visible,
       background-color:var(--color-background-input-active);
     }
 .mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input{
-        outline-color:var(--color-primary);
+        border-color:var(--color-primary);
       }
 :is(.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input):checked::after{
           background-color:var(--color-primary);
@@ -1320,7 +1330,7 @@ a.mobius-button:focus-visible,
       background-color:var(--color-error-background);
     }
 :is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input{
-      outline-color:var(--color-error);
+      border-color:var(--color-error);
     }
 :is(:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input):checked::after{
         background-color:var(--color-error);
@@ -5187,6 +5197,171 @@ svg:not(:host).svg-inline--mobius-icon{
   padding-right:var(--size-sm);
   transition:height 1s;
 }
+.mobius-payment_summary__styled-div{
+    display:grid;
+    row-gap:var(--size-sm);
+    margin-top:var(--size-sm);
+}
+.mobius-payment_summary__styled-div .incomplete-quote-actions{
+        padding:14px;
+    }
+@media (max-width: 640px){
+.mobius-payment_summary__styled-div .incomplete-quote-actions{
+            padding:16px;
+    }
+        }
+.mobius-payment_summary__button-div{
+    display:flex;
+    justify-content:space-around;
+    margin-top:25px;
+    margin-bottom:0;
+    gap:var(--size-sm);
+}
+.mobius-payment_summary__big-button-span{
+    font-weight:700;
+    margin-left:10px;
+    margin-right:10px;
+}
+.mobius-payment_summary__styled-divider{
+    height:var(--size-sm) !important;
+}
+.mobius-payment_summary__styled-flex{
+    width:100%;
+    flex-direction:row;
+    justify-content:space-between;
+}
+.mobius-payment_summary__styled-flex .today-payment,.mobius-payment_summary__styled-flex .total-payment{
+        font-weight:bold;
+    }
+.mobius-payment_summary__styled-wrapper{
+    width:100%;
+    flex-direction:column;
+}
+.mobius-payment_summary__styled-wrapper.combined-styles .mobius-text.--is-small{
+            line-height:18px;
+            color:var(--color-text);
+        }
+.mobius-payment_summary__styled-wrapper.combined-styles .today-payment,.mobius-payment_summary__styled-wrapper.combined-styles .total-payment{
+            font-weight:normal;
+        }
+.mobius-payment_summary__styled-wrapper.combined-styles .monthly-payment{
+            margin-top:var(--size-xs);
+        }
+.mobius-payment_summary__styled-wrapper.combined-styles .mobius-divider{
+            height:var(--size-sm);
+        }
+.mobius-payment_summary__styled-wrapper.combined-styles .mobius-divider__inner{
+            background-color:var(--color-border-medium);
+        }
+.mobius-payment_summary__summary-fragment-wrapper .arrow{
+        display:inline-block;
+        width:9px;
+        height:9px;
+        border-top:1px solid var(--color-primary);
+        border-right:1px solid var(--color-primary);
+        margin-right:8px;
+        transform-origin:center;
+        margin-bottom:3px;
+    }
+.mobius-payment_summary__summary-fragment-wrapper .arrow-top{
+        transform:rotate(-45deg);
+    }
+.mobius-payment_summary__summary-fragment-wrapper .arrow-bottom{
+        transform:rotate(135deg);
+    }
+.mobius-payment_summary__summary-fragment-wrapper .additional_covers{
+        border-top:1px solid #cccccc;
+        padding-top:16px;
+    }
+.mobius-payment_summary__summary-fragment-wrapper .additional_covers ~ .additional_covers{
+        border:none;
+        padding-top:0px;
+    }
+.mobius-payment_summary__summary-fragment-wrapper .align-right{
+        text-align:right;
+    }
+.mobius-payment_summary__summary-fragment-wrapper.combined-styles .mobius-divider__inner{
+            background-color:var(--color-border-medium);
+        }
+.mobius-payment_summary__section-header-text{
+    margin-top:0;
+    margin-bottom:16px;
+    font-size:16px;
+    font-weight:bold;
+}
+.mobius-payment_summary__styled-grid{
+    display:grid;
+    grid-template-columns:65% 35%;
+    width:100%;
+}
+.mobius-payment_summary__price-summary-group{
+    padding:13px;
+    box-sizing:border-box;
+}
+.mobius-payment_summary__border-bottom{
+    border-bottom:1px solid #ccc;
+}
+.mobius-payment_summary__form-actions-box{
+    grid-area:form-actions;
+}
+.mobius-payment_summary__payment-summary-box{
+    grid-area:payment-summary;
+}
+.mobius-payment_summary__product-payment-options{
+    grid-area:mobius-payment_summary__product-payment-options;
+    display:flex;
+    flex-direction:column;
+    border-radius:8px;
+}
+.mobius-payment_summary__product-payment-options .mobius-segment-group{
+        margin-bottom:0;
+    }
+.mobius-payment_summary__product-payment-options .mobius-segment-group + .mobius-segment-group{
+        margin-top:32px;
+    }
+.mobius-payment_summary__product-payment-options .non-purchasable-product{
+        border:3px solid var(--color-primary);
+    }
+.mobius-payment_summary__product-payment-options .exclude-for-purchase{
+        opacity:0.5;
+        cursor:not-allowed;
+    }
+.mobius-payment_summary__product-payment-options .non-eligible-item{
+        flex-flow:wrap;
+    }
+.mobius-payment_summary__product-payment-options.combined-styles .mobius-segment-group:not(.non-purchasable-product){
+            border:1px solid var(--color-border-medium);
+        }
+.mobius-payment_summary__outer-grid{
+    display:grid;
+    gap:var(--font-size-6);
+    grid-template-columns:2fr 1fr;
+    grid-template-areas:"mobius-payment_summary__product-payment-options payment-summary" "continuation-notice payment-summary" "form-actions payment-summary";
+}
+.mobius-payment_summary__outer-grid.combined-payment-page{
+    gap:var(--font-size-3);
+    grid-template-columns:1fr;
+    grid-template-areas:"mobius-payment_summary__product-payment-options" "continuation-notice" "payment-summary" "form-actions";
+}
+@media (max-width: 640px){
+    .mobius-payment_summary__outer-grid{
+        grid-template-columns:1fr;
+        grid-template-areas:"mobius-payment_summary__product-payment-options" "continuation-notice" "payment-summary" "form-actions";
+    }
+}
+.mobius-payment_summary__outer-grid.show-payment-summary-only{
+    grid-template-columns:1fr;
+    grid-template-areas:"payment-summary";
+}
+.mobius-payment_summary__styled-image{
+    margin-bottom:12px;
+    max-height:45px;
+    max-width:100%;
+}
+.mobius-payment_summary__persistent-price-summary{
+    background-color:white;
+    width:fit-content;
+}
 :root,
 :host{
   --date-picker-day-size:38px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "1.9.16",
+  "version": "1.9.18",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,10 +26,10 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.18.0",
-    "@simplybusiness/mobius-datepicker": "^6.4.0",
-    "@simplybusiness/mobius-journey": "^6.52.0",
-    "@simplybusiness/theme-core": "^7.3.1"
+    "@simplybusiness/mobius": "^5.19.0",
+    "@simplybusiness/mobius-datepicker": "^6.4.1",
+    "@simplybusiness/mobius-journey": "^6.53.1",
+    "@simplybusiness/theme-core": "^7.3.2"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/index.css

@@ -70,6 +70,9 @@
 @import "@simplybusiness/mobius-journey/src/pages/AgentReferralPage/AgentReferralContainer.css";
 @import "@simplybusiness/mobius-journey/src/pages/Main.css";
 
+/* Journey Components (payment summary, etc.) */
+@import "@simplybusiness/mobius-journey/src/components/shared/PersistentSummary/styles.css";
+
 /* @simplybusiness/mobius-datepicker */
 @import "@simplybusiness/mobius-datepicker/src/components/DatePicker/DatePicker.css";