@simplybusiness/theme-simplybusiness 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @simplybusiness/theme-simplybusiness
 
+## 0.9.0
+
+### Minor Changes
+
+- a8db7b6: Add `Question` component
+- f475900: Add `Actions` component used within the questionnaire journey
+- bb2e267: Add questionnaire `Section` component
+- e6e300d: Add `HelpLink` component
+
+### Patch Changes
+
+- Updated dependencies [2085451]
+- Updated dependencies [b4eec50]
+- Updated dependencies [a8db7b6]
+- Updated dependencies [f475900]
+- Updated dependencies [bb2e267]
+- Updated dependencies [e6e300d]
+- Updated dependencies [37bf8fa]
+- Updated dependencies [5c678f3]
+  - @simplybusiness/mobius@5.4.0
+  - @simplybusiness/mobius-journey@6.12.0
+  - @simplybusiness/mobius-datepicker@6.0.8
+  - @simplybusiness/theme-core@7.1.6
+
+## 0.8.1
+
+### Patch Changes
+
+- Updated dependencies [3fff50a]
+- Updated dependencies [f698b97]
+- Updated dependencies [1364d00]
+- Updated dependencies [aa5f60e]
+- Updated dependencies [91880ec]
+  - @simplybusiness/mobius-journey@6.11.0
+  - @simplybusiness/mobius@5.3.1
+  - @simplybusiness/mobius-datepicker@6.0.7
+  - @simplybusiness/theme-core@7.1.5
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.css

@@ -147,7 +147,10 @@ h6.mobius-accordion__link-text,
 :host{
   --button-variant-primary-font-variation-settings:normal;
   --button-variant-primary-color:var(--color-primary);
+  --button-variant-primary-content-color:var(--color-text-inverted);
   --button-variant-primary-hover-color:var(--color-primary-hover);
+  --button-variant-secondary-color:var(--color-secondary);
+  --button-variant-secondary-hover-color:var(--color-secondary-hover);
   --button-border-radius:var(--radius-1);
 }
 .mobius-button{
@@ -189,7 +192,7 @@ h6.mobius-accordion__link-text,
     padding:14px var(--size-md);
   }
 .mobius-button:where(.--variant-primary){
-    --button-content-color:var(--color-text-inverted);
+    --button-content-color:var(--button-variant-primary-content-color);
     background-color:var(--button-variant-primary-color);
     font-variation-settings:var(
       --button-variant-primary-font-variation-settings
@@ -207,14 +210,14 @@ h6.mobius-accordion__link-text,
       cursor:not-allowed;
     }
 .mobius-button:where(.--variant-secondary){
-    --button-content-color:var(--color-secondary);
+    --button-content-color:var(--button-variant-secondary-color);
     background-color:transparent;
-    border-color:var(--color-secondary);
+    border-color:var(--button-variant-secondary-color);
   }
 .mobius-button:where(.--variant-secondary):where(:active),.mobius-button:where(.--variant-secondary):where(:hover){
       --button-content-color:var(--color-text-inverted);
-      background-color:var(--color-secondary-hover);
-      border-color:var(--color-secondary-hover);
+      background-color:var(--button-variant-secondary-hover-color);
+      border-color:var(--button-variant-secondary-hover-color);
     }
 .mobius-button:where(.--variant-secondary):where(:focus-visible){
       box-shadow:var(--box-shadow-default);
@@ -2361,30 +2364,6 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius *,.mobius *::before,.mobius *::after{
     box-sizing:border-box;
   }
-.mobius-actions{
-  margin:40px 0 20px;
-}
-.mobius-actions__container{
-  flex-basis:100%;
-  padding:0 10px;
-}
-@media screen and (min-width: 960px){
-.mobius-actions__container{
-    padding:0;
-}
-  }
-.mobius-actions__back{
-  display:inline-flex;
-  gap:var(--size-xs);
-}
-.mobius-actions__next.--single-action{
-    width:100%;
-  }
-@media screen and (min-width: 641px){
-.mobius-actions__next.--single-action{
-      width:auto;
-  }
-    }
 .mobius-payment-confirmation__list{
   list-style:none;
   padding-left:0;
@@ -2419,40 +2398,6 @@ svg:not(:host).svg-inline--mobius-icon{
   font-weight:var(--font-weight-bold);
   height:40px;
 }
-:root,
-:host{
-  --chopin__help-trigger-size:1.7em;
-  --chopin__help-content-width:250px;
-  --chopin__help-content-margin:var(--size-lg);
-  --chopin__help_content-arrow-size:8px;
-  --chopin__help-content-padding:var(--size-sm);
-  --question-desktop-width:100%;
-}
-.mobius-question{
-  position:relative;
-  margin-top:var(--size-xs);
-  padding:var(--size-sm) var(--size-lg);
-  background-color:var(--color-background-light);
-}
-.mobius-question:hover{
-    background-color:var(--color-background-highlight);
-  }
-.mobius-question.--is-desktop{
-    box-sizing:border-box;
-    width:var(--question-desktop-width);
-  }
-.mobius-question.--has-help-open{
-    background-color:var(--color-background-highlight);
-  }
-.mobius-question__label{
-  display:block;
-  padding-right:var(--size-xs);
-  margin-bottom:var(--size-sm);
-}
-.mobius-question__description{
-  margin-top:var(--size-xs);
-  margin-bottom:var(--size-xs);
-}
 .mobius-question-group{
   position:relative;
   margin-top:var(--size-xs);
@@ -2556,16 +2501,6 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-question-help__content > :last-child{
     margin-bottom:0;
   }
-.mobius-section{
-  max-width:626px;
-  margin:calc(var(--size-lg) + var(--size-sm)) auto 0;
-  padding:0;
-}
-.mobius-section__title{
-  margin-top:0;
-  margin-bottom:calc(var(--size-sm) + var(--size-xxs));
-  font-weight:var(--font-weight-normal);
-}
 .mobius-testimonial{
   background-color:var(--color-background-light);
   margin-top:var(--size-md);
@@ -3130,11 +3065,12 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-quote-headline__text{
   font-size:var(--font-size-3);
-  margin:0 4%;
+  margin:0 var(--size-sm);
   text-align:center;
 }
 .mobius-quote-headline__text--variant-without-qdp-drawer{
   font-size:var(--font-size-2);
+  margin:var(--size-xs) var(--size-sm) var(--size-lg);
 }
 .mobius-quote-headline__title{
   font-size:var(--font-size-title);
@@ -4456,6 +4392,46 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-trust-section__list .mobius-list__item-content{
   align-items:center;
 }
+.mobius-actions__container{
+  width:100%;
+}
+.mobius-actions__back{
+  display:inline-flex;
+  gap:var(--size-xs);
+  align-items:center;
+  text-underline-offset:var(--size-xxs);
+}
+.mobius-actions__back .mobius-icon{
+    font-size:var(--font-size-lead);
+  }
+.mobius-actions__next{
+  display:inline-flex;
+  gap:var(--size-xs);
+  align-items:center;
+}
+.mobius-question__help-link{
+  display:flex;
+  align-items:center;
+  gap:var(--size-xxs);
+  margin-bottom:var(--size-sm);
+  -webkit-text-decoration:underline;
+  text-decoration:underline;
+  text-underline-offset:var(--size-xxs);
+}
+.mobius-question__help-link-drawer .mobius-drawer__content{
+    color:var(--color-text-medium);
+    line-height:var(--line-height-normal);
+  }
+.mobius-question__label{
+  display:block;
+  font-size:var(--font-size-lead);
+  margin-bottom:var(--size-xs);
+}
+.mobius-question__secondary-text{
+  color:var(--color-text-medium);
+  margin-top:0;
+  margin-bottom:var(--size-xs);
+}
 :root,
 :host{
   --duration:0.15s;
@@ -4525,6 +4501,27 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-payment-toggle__text.--yearly{
     color:var(--color-primary);
   }
+.mobius-section{
+  display:grid;
+  grid-template-columns:minmax(100%, 552px);
+}
+.mobius-section__title{
+  font-size:var(--font-size-small-title);
+  line-height:var(--line-height-tight);
+  margin:var(--size-sm) 0;
+}
+.mobius-section__preamble{
+  color:var(--color-text-medium);
+  margin-bottom:var(--size-xxl);
+}
+.mobius-section__postamble{
+  color:var(--color-text-medium);
+  margin-top:var(--size-xxl);
+}
+.mobius-section__question-container{
+  display:grid;
+  gap:var(--size-lg);
+}
 .mobius-trade-selector{
   display:inline-flex;
   flex-direction:column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,10 +26,10 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.3.0",
-    "@simplybusiness/mobius-datepicker": "^6.0.6",
-    "@simplybusiness/mobius-journey": "^6.10.0",
-    "@simplybusiness/theme-core": "^7.1.4"
+    "@simplybusiness/mobius": "^5.4.0",
+    "@simplybusiness/mobius-datepicker": "^6.0.8",
+    "@simplybusiness/mobius-journey": "^6.12.0",
+    "@simplybusiness/theme-core": "^7.1.6"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",
@@ -39,7 +39,7 @@
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-nested": "^6.2.0",
-    "postcss-preset-env": "^10.0.6",
+    "postcss-preset-env": "^10.0.8",
     "postcss-url": "^10.1.3",
     "resolve-url-loader": "^5.0.0",
     "ts-loader": "^9.5.1",

package/src/index.css

@@ -2,13 +2,10 @@
 @import "@simplybusiness/theme-core";
 
 /* @simplybusiness/mobius-journey */
-@import "@simplybusiness/mobius-journey/src/archived/Actions/Actions.css";
 @import "@simplybusiness/mobius-journey/src/archived/PaymentConfirmation/PaymentConfirmation.css";
 @import "@simplybusiness/mobius-journey/src/archived/PercentageTotalsQuestion/PercentageTotalsQuestion.css";
-@import "@simplybusiness/mobius-journey/src/archived/Question/Question.css";
 @import "@simplybusiness/mobius-journey/src/archived/QuestionGroup/QuestionGroup.css";
 @import "@simplybusiness/mobius-journey/src/archived/QuestionHelp/QuestionHelp.css";
-@import "@simplybusiness/mobius-journey/src/archived/Section/Section.css";
 @import "@simplybusiness/mobius-journey/src/archived/Testimonial/Testimonial.css";
 @import "@simplybusiness/mobius-journey/src/components/AgentReferral/InfoCard/InfoCard.css";
 @import "@simplybusiness/mobius-journey/src/components/AgentResources/AgentResources.css";
@@ -53,7 +50,11 @@
 @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/shared/Actions/Actions.css";
+@import "@simplybusiness/mobius-journey/src/components/shared/Question/HelpLink/HelpLink.css";
+@import "@simplybusiness/mobius-journey/src/components/shared/Question/Question.css";
 @import "@simplybusiness/mobius-journey/src/components/shared/PaymentToggle/PaymentToggle.css";
+@import "@simplybusiness/mobius-journey/src/components/shared/Section/Section.css";
 @import "@simplybusiness/mobius-journey/src/components/TradeSelector/TradeSelector.css";
 @import "@simplybusiness/mobius-journey/src/pages/AgentReferralPage/AgentReferralContainer.css";
 @import "@simplybusiness/mobius-journey/src/pages/Main.css";