@seamly/web-ui 20.0.0-beta.1 → 20.0.0-beta.4

package/src/stylesheets/1-settings/_config.scss

@@ -37,7 +37,7 @@ $white: #fff !default;
 $black: #000 !default;
 
 // BACKGROUND COLORS
-$app-bg: $white !default;
+$chat-bg: $white !default;
 
 $threadlist-agent-text-bgcolor: $grey-a;
 $threadlist-user-text-bgcolor: $brand2;
@@ -70,13 +70,13 @@ $borderradius-small: $borderradius * 0.5 !default;
 $borderradius-large: $borderradius * 2 !default;
 
 // DIMENSIONS
-$app-window-width: $spacer * 18 !default;
-$app-window-height: $spacer * 36 !default;
+$chat-window-width: $spacer * 18 !default;
+$chat-window-height: $spacer * 36 !default;
 
-$app-inline-height: $spacer * 32 !default;
-$app-inline-maxheight: 90vh !default;
+$chat-inline-height: $spacer * 32 !default;
+$chat-inline-maxheight: 90vh !default;
 
-$app-suggestions-maxheight: $spacer * 16 !default;
+$chat-suggestions-maxheight: $spacer * 16 !default;
 
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;

package/src/stylesheets/{3-app/_app.scss → 3-chat/_chat.scss}

@@ -1,4 +1,4 @@
-.#{$n}-app {
+.#{$n}-chat {
   @include boxSizing;
 
   display: flex;
@@ -7,12 +7,12 @@
   transition: margin $transition, height $transition, transform $transition,
     opacity $transition;
   outline: 0;
-  color: set-text-color($app-bg);
+  color: set-text-color($chat-bg);
   font-family: $fontfamily-default;
   font-size: $fontsize-small;
 }
 
-.#{$n}-app--layout-inline {
+&.#{$n}-app--layout-inline .#{$n}-chat {
   height: fit-content;
   background-color: initial;
   box-shadow: none;
@@ -22,19 +22,19 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app-wrapper {
+&.#{$n}-app--layout-inline .#{$n}-chat--collapsed .#{$n}-chat-wrapper {
   height: auto;
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--user-responded {
+&.#{$n}-app--layout-inline .#{$n}-chat--user-responded {
   transition: none;
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--user-responded .#{$n}-app-wrapper {
+&.#{$n}-app--layout-inline .#{$n}-chat--user-responded .#{$n}-chat-wrapper {
   transition: none;
 }
 
-.#{$n}-app--layout-window {
+&.#{$n}-app--layout-window .#{$n}-chat {
   @include responsiveAppSizing();
 
   display: none;
@@ -42,23 +42,23 @@
   z-index: $z-index;
   right: $spacer;
   bottom: $spacer;
-  width: $app-window-width;
+  width: $chat-window-width;
   max-width: calc(100% - #{$spacer * 2});
-  height: $app-window-height;
+  height: $chat-window-height;
   transform: scale(0);
   opacity: 0;
 }
 
-.#{$n}-app--layout-window.#{$n}-transition--visible {
+&.#{$n}-app--layout-window .#{$n}-chat.#{$n}-transition--visible {
   display: flex;
 }
 
-.#{$n}-app--layout-window.#{$n}-transition--in {
+&.#{$n}-app--layout-window .#{$n}-chat.#{$n}-transition--in {
   transform: scale(1);
   opacity: 1;
 }
 
-.#{$n}-app--layout-app {
+&.#{$n}-app--layout-app .#{$n}-chat {
   position: fixed;
   z-index: $z-index;
   top: 0;
@@ -71,7 +71,7 @@
   max-height: 100%;
 }
 
-.#{$n}-app-wrapper {
+.#{$n}-chat-wrapper {
   display: flex;
   position: relative;
   z-index: 1;
@@ -81,18 +81,18 @@
   overflow: hidden;
   transition: flex $transition, width $transition, height $transition,
     border-radius $transition;
-  border: $thin-border solid set-border-color($app-bg);
+  border: $thin-border solid set-border-color($chat-bg);
   border-radius: $borderradius;
-  background-color: $app-bg;
+  background-color: $chat-bg;
   box-shadow: $boxshadow-soft;
 }
 
-.#{$n}-app--layout-app .#{$n}-app-wrapper {
+&.#{$n}-app--layout-app .#{$n}-chat-wrapper {
   border: 0 none;
   border-radius: 0;
 }
 
-.#{$n}-app--layout-inline .#{$n}-app-wrapper {
+&.#{$n}-app--layout-inline .#{$n}-chat-wrapper {
   width: 100%;
   height: 0;
 
@@ -111,12 +111,14 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-transition--in .#{$n}-app-wrapper {
-  height: $app-inline-height;
-  max-height: $app-inline-maxheight;
+&.#{$n}-app--layout-inline
+  .#{$n}-chat.#{$n}-transition--in
+  .#{$n}-chat-wrapper {
+  height: $chat-inline-height;
+  max-height: $chat-inline-maxheight;
 }
 
-.#{$n}-app__container {
+.#{$n}-chat__container {
   display: flex;
   position: relative;
   flex-direction: column;
@@ -124,7 +126,7 @@
   height: 100%;
 }
 
-.#{$n}-app__body {
+.#{$n}-chat__body {
   display: flex;
   position: relative;
   flex-grow: 4;
@@ -132,11 +134,11 @@
   overflow-y: auto;
 }
 
-.#{$n}-app--layout-window .#{$n}-app__body {
+&.#{$n}-app--layout-window .#{$n}-chat__body {
   overscroll-behavior: contain;
 }
 
-.#{$n}-app__entry {
+.#{$n}-chat__entry {
   position: relative;
   flex: 0 0 auto;
   padding: $spacer * 0.5;
@@ -147,7 +149,7 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app__entry {
+&.#{$n}-app--layout-inline .#{$n}-chat.#{$n}-app--collapsed .#{$n}-chat__entry {
   border: 0 none;
 }
 

package/src/stylesheets/5-components/_conversation.scss

@@ -29,12 +29,12 @@
   }
 }
 
-.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-conversation {
+.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-conversation {
   padding-top: $buttonsize + $spacer * 2;
 }
 
 .#{$n}-chat-status
-  ~ .#{$n}-app__container
+  ~ .#{$n}-chat__container
   .#{$n}-disclaimer
   + .#{$n}-conversation {
   padding-top: 0;

package/src/stylesheets/5-components/_disclaimer.scss

@@ -11,7 +11,7 @@
   padding-right: $buttonsize + $spacer * 2;
 }
 
-.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-disclaimer {
+.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-disclaimer {
   margin-top: $buttonsize + $spacer * 2;
   padding: $spacer * 0.5 $spacer;
 }

package/src/stylesheets/5-components/_error.scss

@@ -3,17 +3,15 @@
 
 // BASE
 // ----
-.#{$n}-error__message {
-  display: flex;
-  align-items: flex-start;
+.#{$n}-error {
+  display: block;
   width: 100%;
-  margin: 0 0 $spacer * 0.5;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  border-radius: $borderradius-small;
-  background-color: rgba($negative, 0.1);
-  color: $negative-dark;
-  font-size: $fontsize-small;
-  font-weight: $fontweight-bold;
+  margin: 0 0 $spacer * 0.25;
+
+  &:empty {
+    display: none;
+    margin: 0;
+  }
 
   .#{$n}-icon {
     flex: 0 0 16px;
@@ -21,4 +19,16 @@
     height: 16px;
     margin-right: $spacer * 0.25;
   }
+
+  .#{$n}-error__message {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: $spacer * 0.25 $spacer * 0.5;
+    border-radius: $borderradius-small;
+    background-color: rgba($negative, 0.1);
+    color: $negative-dark;
+    font-size: $fontsize-small;
+    font-weight: $fontweight-bold;
+  }
 }

package/src/stylesheets/5-components/_message-count.scss

@@ -1,6 +1,7 @@
 .#{$n}-message-count {
   display: flex;
   position: absolute;
+  z-index: 1;
   top: $spacer * -0.5;
   right: $spacer * -0.5;
   align-items: center;

package/src/stylesheets/5-components/_modal.scss

@@ -17,7 +17,7 @@
   padding: $spacer;
   transform: scale(1);
   opacity: 1;
-  background-color: rgba($app-bg, 0.8);
+  background-color: rgba($chat-bg, 0.8);
 }
 
 .#{$n}-modal__float {
@@ -29,7 +29,7 @@
   border: $thin-border solid $grey-b;
   border-radius: $borderradius;
   outline: 0;
-  background-color: $app-bg;
+  background-color: $chat-bg;
   box-shadow: $boxshadow-soft;
 }
 

package/src/stylesheets/5-components/_options.scss

@@ -1,4 +1,4 @@
-.#{$n}-app__options {
+.#{$n}-chat__options {
   display: flex;
   position: relative;
   flex: 0;
@@ -9,15 +9,15 @@
   border-top: $thin-border solid $grey-b;
 }
 
-.#{$n}-app__options-item--left {
+.#{$n}-chat__options-item--left {
   margin-right: auto;
 }
 
-&.#{$n}-app--collapsed .#{$n}-app__options {
+&.#{$n}-app--collapsed .#{$n}-chat__options {
   display: none;
 }
 
-.#{$n}-app__options__button {
+.#{$n}-chat__options__button {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -25,23 +25,23 @@
   border-radius: $borderradius-small;
 }
 
-&.#{$n}-app--collapsed .#{$n}-app__options-button {
+&.#{$n}-app--collapsed .#{$n}-chat__options-button {
   display: none;
 }
 
-.#{$n}-app__options__button .#{$n}-icon {
+.#{$n}-chat__options__button .#{$n}-icon {
   flex: 0 0 $iconsize-small;
   width: $iconsize-small;
   height: $iconsize-small;
   margin-right: $spacer * 0.25;
 }
 
-.#{$n}-app__options__button .#{$n}-icon svg {
+.#{$n}-chat__options__button .#{$n}-icon svg {
   width: 100%;
   height: 100%;
 }
 
-.#{$n}-app__options__button .#{$n}-icon path {
+.#{$n}-chat__options__button .#{$n}-icon path {
   fill: currentColor;
 }
 

package/src/stylesheets/5-components/_pre-chat-messages.scss

@@ -5,7 +5,7 @@
   padding: 0;
 }
 
-.#{$n}-pre-chat-messages--window {
+&.#{$n}-app--layout-window .#{$n}-pre-chat-messages {
   position: fixed;
   z-index: $z-index;
   right: $spacer;
@@ -21,7 +21,11 @@
   margin-bottom: $spacer * 0.5;
 }
 
-.#{$n}-pre-chat-messages--window .#{$n}-message__body {
+&.#{$n}-app--layout-window .#{$n}-pre-chat-messages .#{$n}-message {
+  width: 100%;
+}
+
+&.#{$n}-app--layout-window .#{$n}-pre-chat-messages .#{$n}-message__body {
   padding: $spacer * 0.5 $spacer * 0.75;
   border: $thin-border solid $white;
   border-radius: $borderradius;

package/src/stylesheets/5-components/_suggestions.scss

@@ -4,9 +4,9 @@
   overscroll-behavior: contain;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions {
+&.#{$n}-app--layout-inline .#{$n}-chat > .#{$n}-suggestions {
   flex-direction: column;
-  max-height: $app-suggestions-maxheight;
+  max-height: $chat-suggestions-maxheight;
   padding: $spacer;
   overflow: hidden;
   transition: max-height $transition, padding $transition, transform $transition,
@@ -30,9 +30,9 @@
   @include media('>phablet-l') {
     flex: 0 0 50%;
     width: 50%;
-    height: $app-inline-height;
+    height: $chat-inline-height;
     min-height: 100%;
-    max-height: $app-inline-maxheight;
+    max-height: $chat-inline-maxheight;
     transform: translateX(-100%);
   }
 
@@ -61,7 +61,10 @@
   overscroll-behavior: contain;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
+&.#{$n}-app--layout-inline
+  .#{$n}-chat
+  > .#{$n}-suggestions
+  .#{$n}-suggestions__list {
   flex: 1 1 100%;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -77,7 +80,10 @@
   margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
+&.#{$n}-app--layout-inline
+  .#{$n}-chat
+  > .#{$n}-suggestions
+  .#{$n}-suggestions-item {
   width: 100%;
   margin-right: 0;
 }

package/src/stylesheets/5-components/_unstarted.scss

@@ -3,21 +3,25 @@
   width: 100%;
   overflow: hidden;
   transition: margin $transition, max-height $transition;
+}
 
-  &:not(&.#{$n}-unstarted-wrapper--window) {
-    max-height: 0;
+&.#{$n}-app--layout-inline .#{$n}-unstarted-wrapper {
+  max-height: 0;
 
-    @include media('>desktop') {
-      width: 67%;
-    }
+  @include media('>desktop') {
+    width: 67%;
   }
 }
 
 .#{$n}-unstarted-wrapper.#{$n}-transition--visible {
   display: block;
+
+  &:empty {
+    display: none;
+  }
 }
 
-.#{$n}-unstarted-wrapper:not(.#{$n}-unstarted-wrapper--window).#{$n}-transition--in {
+&.#{$n}-app--layout-inline .#{$n}-unstarted-wrapper.#{$n}-transition--in {
   max-height: $spacer * 30;
   margin-bottom: $spacer;
 }
@@ -40,11 +44,13 @@
   opacity: 1;
 }
 
-.#{$n}-unstarted-wrapper--window .#{$n}-pre-chat-messages {
+&.#{$n}-app--layout-window .#{$n}-pre-chat-messages {
   transform: scale(0);
   transform-origin: 100% 100%;
 }
 
-.#{$n}-unstarted-wrapper--window.#{$n}-transition--in .#{$n}-pre-chat-messages {
+&.#{$n}-app--layout-window
+  .#{$n}-unstarted-wrapper.#{$n}-transition--in
+  .#{$n}-pre-chat-messages {
   transform: scale(1);
 }

package/src/stylesheets/6-default-implementation/_hover.scss

@@ -0,0 +1,153 @@
+.#{$n}-app {
+  @media (hover: hover) {
+    .#{$n}-button.#{$n}-collapse-button,
+    .#{$n}-modal__enlarge,
+    .#{$n}-modal__close {
+      transition: background-color $transition;
+
+      &:hover {
+        background-color: $interaction-dark;
+      }
+
+      path {
+        transition: fill $transition;
+      }
+
+      &:hover svg path {
+        fill: $white;
+      }
+    }
+
+    .#{$n}-button {
+      transition: color $transition, background-color $transition;
+    }
+
+    .#{$n}-button--primary:not(.#{$n}-button--disabled) {
+      &:hover {
+        background-color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-button--secondary:not(.#{$n}-button--disabled),
+    .#{$n}-button--tertiary:not(.#{$n}-button--disabled) {
+      &:hover {
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-choice-prompt__item--secondary .#{$n}-button {
+      &:hover {
+        background-color: initial;
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-message--type-cta .#{$n}-button {
+      &:hover {
+        background-color: $white;
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-message__body a {
+      transition: color $transition;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    .#{$n}-conversation__item--source-agent
+      .#{$n}-message__body.#{$n}-message__body
+      a {
+      &:hover {
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-input__text {
+      transition: padding $transition, border $transition;
+
+      &:hover {
+        border-color: $interaction-dark;
+      }
+
+      &:focus {
+        border-color: transparent;
+      }
+    }
+
+    .#{$n}-input__submit:not(:disabled):hover .#{$n}-icon path {
+      fill: $interaction-dark;
+    }
+
+    .#{$n}-card__content.#{$n}-card__content .#{$n}-button.#{$n}-button:hover {
+      color: $white;
+    }
+
+    .#{$n}-carousel__controls .#{$n}-button .#{$n}-icon svg path {
+      transition: fill $transition;
+    }
+
+    .#{$n}-carousel__controls .#{$n}-button:hover .#{$n}-icon svg path {
+      fill: $interaction-dark;
+    }
+
+    .#{$n}-carousel-pagination__button::before {
+      transition: background-color $transition;
+    }
+
+    .#{$n}-carousel-pagination__button:hover::before {
+      background-color: $interaction-dark;
+    }
+
+    .#{$n}-upload-toggle path {
+      transition: fill $transition;
+    }
+
+    .#{$n}-upload-toggle:hover path {
+      background-color: $interaction-dark;
+    }
+
+    .#{$n}-file-upload {
+      transition: border $transition;
+
+      &:hover {
+        border-color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-upload__label {
+      transition: color $transition;
+
+      &:hover {
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-options__menu__item:not(.#{$n}-button--disabled) {
+      transition: color $transition;
+
+      &:hover {
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-options__close {
+      transition: color $transition;
+
+      &:hover {
+        color: $interaction-dark;
+      }
+    }
+
+    .#{$n}-transcript__input,
+    .#{$n}-input__select {
+      transition: border $transition;
+
+      &:hover {
+        border-color: $interaction-dark;
+      }
+    }
+  }
+}

package/src/stylesheets/{6-webui-only → 6-default-implementation}/_scrollbar.scss

@@ -1,4 +1,4 @@
-.#{$n}-app__body,
+.#{$n}-chat__body,
 .#{$n}-app--layout-inline .#{$n}-suggestions__list,
 .#{$n}-options__wrapper {
   scrollbar-color: $brand1 transparent;

package/src/stylesheets/7-deprecated/3-app/_app.scss

@@ -95,7 +95,7 @@ $app-header-bgcolor: $brand3;
   }
 }
 
-.#{$n}-app__header {
+.#{$n}-chat__header {
   display: flex;
   position: relative;
   flex: 0 0 auto;
@@ -108,7 +108,7 @@ $app-header-bgcolor: $brand3;
   border-top-right-radius: $borderradius;
 }
 
-.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-app__header {
+.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-chat__header {
   border-bottom: 0;
   border-bottom-left-radius: $borderradius;
   border-bottom-right-radius: $borderradius;
@@ -167,7 +167,7 @@ $app-header-bgcolor: $brand3;
   }
 }
 
-.#{$n}-app__container {
+.#{$n}-chat__container {
   display: flex;
   position: relative;
   flex: 1 1 auto;
@@ -175,7 +175,7 @@ $app-header-bgcolor: $brand3;
   max-height: 100%;
 }
 
-.#{$n}-app__body {
+.#{$n}-chat__body {
   display: flex;
   position: relative;
   flex-grow: 4;
@@ -184,17 +184,17 @@ $app-header-bgcolor: $brand3;
   border-bottom: $thin-border solid $grey-b;
 }
 
-.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-app__body {
+.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-chat__body {
   display: none;
 }
 
-.#{$n}-app--layout-window.#{$n}-app--deprecated .#{$n}-app__body {
+.#{$n}-app--layout-window.#{$n}-app--deprecated .#{$n}-chat__body {
   overscroll-behavior: contain;
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -ms-scroll-chaining: none;
 }
 
-.#{$n}-app__entry {
+.#{$n}-chat__entry {
   position: relative;
   flex: 0 0 auto;
   padding: $app-parts-padding;
@@ -204,7 +204,7 @@ $app-header-bgcolor: $brand3;
   }
 }
 
-.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-app__entry {
+.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-chat__entry {
   display: none;
 }