@simplybusiness/theme-simplybusiness 1.18.2 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @simplybusiness/theme-simplybusiness
 
+## 1.19.0
+
+### Minor Changes
+
+- 9d7e55a: Implement typing bubbles to simulate 'thinking' by the Chatbot component.
+
+### Patch Changes
+
+- Updated dependencies [c200c3b]
+- Updated dependencies [9d7e55a]
+- Updated dependencies [9d1fcfa]
+- Updated dependencies [af1a4c9]
+- Updated dependencies [af40186]
+  - @simplybusiness/mobius-interventions@1.39.0
+  - @simplybusiness/mobius-chatbot@1.2.0
+  - @simplybusiness/mobius-journey@8.15.1
+
 ## 1.18.2
 
 ### Patch Changes

package/dist/index.css

@@ -6463,15 +6463,15 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-chatbot__footer{
   display:flex;
   flex-direction:column;
-  padding-top:16px;
+  padding-top:var(--size-sm);
   padding-bottom:10px;
-  gap:16px;
+  gap:var(--size-sm);
   margin-top:auto;
 }
 .mobius-chatbot__input{
   display:flex;
   flex-direction:row;
-  gap:8px;;
+  gap:var(--size-xs);
 }
 .mobius-chatbot__submit-button.mobius-button{
     border-radius:var(--radius-1);
@@ -6484,8 +6484,8 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-chatbot__text{
   color:var(--color-text-medium);
   margin:0;
-  font-size:12px;
-  line-height:16px;
+  font-size:var(--font-size-1);
+  line-height:var(--size-sm);
   font-weight:normal;
 }
 .mobius-user-message{
@@ -6509,13 +6509,13 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-options-message{
   display:flex;
-  padding-left:40px;
+  padding-left:var(--size-xl);
   width:100%;
 }
 .mobius-options-message__options{
   display:flex;
   flex-direction:column;
-  gap:8px;
+  gap:var(--size-xs);
 }
 .mobius-option.mobius-button{
     border-radius:var(--radius-2);
@@ -6524,15 +6524,15 @@ svg:not(:host).svg-inline--mobius-icon{
   margin:0;
 }
 .mobius-text-message{
-  padding-top:16px;
+  padding-top:var(--size-sm);
   display:flex;
   flex-direction:row;
-  gap:8px;
+  gap:var(--size-xs);
 }
 .mobius-text-message__icon-container{
   background-color:var(--color-background-highlight);
-  height:32px;
-  width:32px;
+  height:var(--size-lg);
+  width:var(--size-lg);
   display:flex;
   border-radius:50%;
   align-items:center;
@@ -6541,12 +6541,43 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-text-message__content{
   display:flex;
   flex-direction:column;
-  gap:16px;
+  gap:var(--size-sm);
   width:100%;
 }
 .mobius-text-message__text{
   margin-top:0;
 }
+.mobius-typing-message{
+  padding-top:var(--size-sm);
+  display:flex;
+  flex-direction:row;
+  gap:var(--size-xs);
+}
+.mobius-typing-message__icon-container{
+  background-color:var(--color-background-highlight);
+  height:var(--size-lg);
+  width:var(--size-lg);
+  display:flex;
+  border-radius:50%;
+  align-items:center;
+  justify-content:center;
+}
+.mobius-typing-message__content{
+  display:flex;
+  flex-direction:row;
+  gap:var(--size-sm);
+  width:100%;
+  align-items:center;
+}
+.mobius-typing-message__dots{
+  display:flex;
+  width:100%;
+  height:100%;
+  background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22 standalone%3D%22no%22%3F%3E%3Csvg width%3D%22120%22 height%3D%2230%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Ccircle cx%3D%2215%22 cy%3D%2215%22 r%3D%2210%22 fill%3D%22black%22%3E    %3Canimate       attributeName%3D%22opacity%22       values%3D%220%3B1%3B0%22       dur%3D%221.5s%22       repeatCount%3D%22indefinite%22       begin%3D%220s%22 %2F%3E  %3C%2Fcircle%3E  %3Ccircle cx%3D%2260%22 cy%3D%2215%22 r%3D%2210%22 fill%3D%22black%22%3E    %3Canimate       attributeName%3D%22opacity%22       values%3D%220%3B1%3B0%22       dur%3D%221.5s%22       repeatCount%3D%22indefinite%22       begin%3D%220.5s%22 %2F%3E  %3C%2Fcircle%3E  %3Ccircle cx%3D%22105%22 cy%3D%2215%22 r%3D%2210%22 fill%3D%22black%22%3E    %3Canimate       attributeName%3D%22opacity%22       values%3D%220%3B1%3B0%22       dur%3D%221.5s%22       repeatCount%3D%22indefinite%22       begin%3D%221s%22 %2F%3E  %3C%2Fcircle%3E%3C%2Fsvg%3E");
+  background-position:left 10px center;
+  background-repeat:no-repeat;
+  background-size:64px;
+}
 :root,
 :host{
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "1.18.2",
+  "version": "1.19.0",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@simplybusiness/mobius": "^5.26.2",
-    "@simplybusiness/mobius-chatbot": "^1.1.0",
+    "@simplybusiness/mobius-chatbot": "^1.2.0",
     "@simplybusiness/mobius-datepicker": "^6.5.13",
-    "@simplybusiness/mobius-interventions": "^1.38.0",
-    "@simplybusiness/mobius-journey": "^8.15.0",
+    "@simplybusiness/mobius-interventions": "^1.39.0",
+    "@simplybusiness/mobius-journey": "^8.15.1",
     "@simplybusiness/theme-core": "^7.6.8"
   },
   "devDependencies": {

package/src/index.css

@@ -95,6 +95,7 @@
 @import "@simplybusiness/mobius-chatbot/src/components/OptionsMessage/OptionsMessage.css";
 @import "@simplybusiness/mobius-chatbot/src/components/Option/Option.css";
 @import "@simplybusiness/mobius-chatbot/src/components/TextMessage/TextMessage.css";
+@import "@simplybusiness/mobius-chatbot/src/components/TypingMessage/TypingMessage.css";
 
 /* Base customisation */
 @import "./fonts.css";