@simplybusiness/theme-simplybusiness 1.28.7 → 1.29.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simplybusiness/theme-simplybusiness
 
+## 1.29.0
+
+### Minor Changes
+
+- 976fafc: Adds RewardBanner component
+
+### Patch Changes
+
+- Updated dependencies [ee4feb1]
+- Updated dependencies [976fafc]
+  - @simplybusiness/mobius-journey@8.74.0
+
 ## 1.28.7
 
 ### Patch Changes

package/dist/index.css

@@ -5398,6 +5398,66 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-trust-section__list .mobius-list__item-content{
   align-items:center;
 }
+.mobius-reward-banner{
+    color:white;
+    text-align:center;
+    font-size:var(--font-size-2);
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    flex-direction:row;
+    box-sizing:border-box;
+    min-height:var(--size-lg);
+    width:100%;
+    max-width:1004px;
+    margin:0 auto;
+    padding:10px var(--size-sm);
+}
+.mobius-reward-banner.--is-voucher{
+    background-color:var(--color-reward-banner-voucher-background);
+}
+.mobius-reward-banner.--is-raf{
+    background-color:var(--color-reward-banner-raf-background);
+}
+.mobius-reward-banner__body{
+    display:grid;
+    grid-template-rows:auto auto;
+}
+.mobius-reward-banner__body .mobius-text{
+    color:white;
+    margin:0;
+    display:block;
+}
+.mobius-reward-banner .mobius-link{
+    color:white;
+    -webkit-text-decoration:underline;
+    text-decoration:underline;
+}
+.mobius-reward-banner.--is-raf::before,
+.mobius-reward-banner.--is-raf::after{
+    height:30px;
+    width:38px;
+    background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C%21-- Generator%3A Adobe Illustrator 21.0.2%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0%29  --%3E%3Csvg version%3D%221.1%22 id%3D%22Calque_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 96 76%22 style%3D%22enable-background%3Anew 0 -1.5 96 76%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%23FDFFFF%3B%7D%09.st1%7Bfill%3A%23FFFFFF%3Bstroke%3A%23111118%3Bstroke-width%3A2%3Bstroke-linejoin%3Around%3B%7D%09.st2%7Bfill%3A%23111118%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M22.4%2C58.7L22.4%2C58.7c3.7%2C5%2C3.4%2C8.9-3.3%2C17.4c8.5-1.3%2C13.5-7.2%2C18-14.5l0%2C0c2.4%2C0.1%2C4.8%2C0%2C7.3-0.2%09%09c12.2-1.1%2C22.7-6.3%2C29.2-13.4c-3-1.8-6-4.3-8.1-7.8c3.9%2C1.7%2C8.9%2C1.7%2C12.7%2C1.2c1.2-2.4%2C2.1-5%2C2.4-7.6l15-8.5l-16.8-3.6l0%2C0%09%09C73.3%2C9.7%2C57.2%2C2%2C39.1%2C3.7C17.5%2C5.8%2C1.3%2C20.3%2C2.8%2C36.2C3.7%2C46.2%2C11.5%2C54.4%2C22.4%2C58.7z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M20.1%2C55.2L20.1%2C55.2c3.7%2C5%2C3.4%2C8.9-3.3%2C17.4c8.5-1.3%2C13.5-7.2%2C18-14.5l0%2C0c2.4%2C0.1%2C4.8%2C0%2C7.3-0.2%09%09c12.2-1.1%2C22.7-6.3%2C29.2-13.4c-3-1.8-6-4.3-8.1-7.8c3.9%2C1.7%2C8.9%2C1.7%2C12.7%2C1.2c1.2-2.4%2C2.1-5%2C2.4-7.6l15-8.5l-16.8-3.6l0%2C0%09%09C71%2C6.3%2C54.9-1.4%2C36.8%2C0.3C15.2%2C2.3-1%2C16.8%2C0.5%2C32.7C1.4%2C42.7%2C9.2%2C50.9%2C20.1%2C55.2z%22%2F%3E%09%09%3Cellipse transform%3D%22matrix%280.9956 -9.370386e-02 9.370386e-02 0.9956 -1.6922 6.2229%29%22 class%3D%22st2%22 cx%3D%2265.4%22 cy%3D%2221.1%22 rx%3D%222.1%22 ry%3D%224.1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    background-size:contain;
+    background-repeat:no-repeat;
+    background-position:left center;
+    content:"";
+}
+.mobius-reward-banner.--is-raf::before{
+    margin-right:100px;
+}
+.mobius-reward-banner.--is-raf::after{
+    margin-left:100px;
+}
+@media (max-width: 640px){
+    .mobius-reward-banner__body{
+        grid-row-gap:var(--size-sm);
+    }
+
+    .mobius-reward-banner::after, .mobius-reward-banner::before{
+        display:none;
+    }
+}
 .mobius-payment-toggle{
   position:relative;
   display:grid;
@@ -7214,6 +7274,8 @@ svg:not(:host).svg-inline--mobius-icon{
   --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");
   --radio-icon-color:var(--color-accent);
+  --color-reward-banner-voucher-background:#00ad93;
+  --color-reward-banner-raf-background:#00adcb;
 }
 html,
 body{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "1.28.7",
+  "version": "1.29.0",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -30,7 +30,7 @@
     "@simplybusiness/mobius-chatbot": "^1.5.0",
     "@simplybusiness/mobius-datepicker": "^6.7.16",
     "@simplybusiness/mobius-interventions": "^1.79.3",
-    "@simplybusiness/mobius-journey": "^8.73.0",
+    "@simplybusiness/mobius-journey": "^8.74.0",
     "@simplybusiness/theme-core": "^7.10.4"
   },
   "devDependencies": {

package/src/index.css

@@ -76,6 +76,7 @@
 @import "@simplybusiness/mobius-journey/src/components/QuoteHelp/QuoteHelp.css";
 @import "@simplybusiness/mobius-journey/src/components/Referral/Referral.css";
 @import "@simplybusiness/mobius-journey/src/components/Referral/TrustSection/TrustSection.css";
+@import "@simplybusiness/mobius-journey/src/components/RewardBanner/RewardBanner.css";
 @import "@simplybusiness/mobius-journey/src/components/shared/PaymentToggle/PaymentToggle.css";
 @import "@simplybusiness/mobius-journey/src/components/shared/PreQCP/styles.css";
 @import "@simplybusiness/mobius-journey/src/components/SkipToNextCoverage/SkipToNextCoverage.css";

package/src/variables.css

@@ -50,4 +50,8 @@
 
   /* Radio */
   --radio-icon-color: var(--color-accent);
+
+  /* Reward Banner */
+  --color-reward-banner-voucher-background: #00ad93;
+  --color-reward-banner-raf-background: #00adcb;
 }