@seamly/web-ui 20.0.0-beta.2 → 20.0.0-beta.5

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

@@ -4,9 +4,9 @@
   overscroll-behavior: contain;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions {
+.#{$n}-chat--layout-inline > .#{$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,7 @@
   overscroll-behavior: contain;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
   flex: 1 1 100%;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -77,7 +77,7 @@
   margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
   width: 100%;
   margin-right: 0;
 }

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

@@ -1,50 +1,36 @@
-.#{$n}-unstarted-wrapper {
+.#{$n}-unstarted-wrapper:empty {
+  display: none;
+}
+
+.#{$n}-unstarted-wrapper--window {
+  position: fixed;
+  z-index: $z-index;
+  right: $spacer * 1.5;
+  bottom: $spacer * 1.5 + $avatarsize-large;
+  max-width: calc(100% - #{$spacer * 3});
+
+  @include media('>phablet-l') {
+    max-width: $spacer * 14;
+  }
+}
+
+.#{$n}-unstarted-wrapper--inline {
   display: none;
   width: 100%;
+  max-height: 0;
   overflow: hidden;
   transition: margin $transition, max-height $transition;
 
-  &:not(&.#{$n}-unstarted-wrapper--window) {
-    max-height: 0;
-
-    @include media('>desktop') {
-      width: 67%;
-    }
+  @include media('>desktop') {
+    width: 67%;
   }
 }
 
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible {
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--visible {
   display: block;
 }
 
-.#{$n}-unstarted-wrapper:not(.#{$n}-unstarted-wrapper--window).#{$n}-transition--in {
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--in {
   max-height: $spacer * 30;
   margin-bottom: $spacer;
 }
-
-.#{$n}-unstarted-wrapper .#{$n}-pre-chat-messages,
-.#{$n}-unstarted-wrapper .#{$n}-cvco-suggestions {
-  display: none;
-  transition: transform $transition, opacity $transition;
-  opacity: 0;
-}
-
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-pre-chat-messages,
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-cvco-suggestions {
-  display: block;
-}
-
-.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-pre-chat-messages,
-.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-cvco-suggestions {
-  transition: transform $transition-delay, opacity $transition-delay;
-  opacity: 1;
-}
-
-.#{$n}-unstarted-wrapper--window .#{$n}-pre-chat-messages {
-  transform: scale(0);
-  transform-origin: 100% 100%;
-}
-
-.#{$n}-unstarted-wrapper--window.#{$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;
 }
 

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

@@ -4,16 +4,14 @@
 // BASE
 // ----
 .#{$n}-error {
-  display: flex;
-  align-items: flex-start;
+  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/7-deprecated/5-components/_input.scss

@@ -3,7 +3,7 @@
 
 // BASE
 // ----
-.#{$n}-input {
+.#{$n}-entry-form {
   display: flex;
   flex: 1 1 100%;
   width: 100%;

package/src/stylesheets/7-deprecated/5-components/_message.scss

@@ -193,7 +193,7 @@ $avatar-size: $badge-touch-size;
     }
   }
 
-  &.cvco-message--source-user .#{$n}-message__body {
+  &.#{$n}-message--source-user .#{$n}-message__body {
     a {
       color: $white;
     }

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

@@ -132,7 +132,7 @@ $button-transition: $transition;
     background-color: $brand3;
   }
 
-  &:hover .cvco-icon svg path {
+  &:hover .#{$n}-icon svg path {
     fill: $white;
   }
 }

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

@@ -3,7 +3,7 @@
 
 // BASE
 // ----
-.#{$n}-app__options {
+.#{$n}-chat__options {
   display: flex;
   position: relative;
   align-items: center;
@@ -12,15 +12,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;
@@ -28,23 +28,23 @@
   border-radius: $buttons-border-radius;
 }
 
-&.#{$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 $spacer * 0.75;
   width: $spacer * 0.75;
   height: $spacer * 0.75;
   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}-button--disabled .#{$n}-icon path {
+.#{$n}-chat__options__button.#{$n}-button--disabled .#{$n}-icon path {
   fill: currentColor;
 }
 
@@ -191,8 +191,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
 }
 
 .#{$n}-options__body form {

package/src/stylesheets/style-guide.scss

@@ -11,7 +11,7 @@
     margin: 0 0 4rem;
   }
 
-  .chat-inline h2 {
+  .chat-inline > h2 {
     @media only screen and (max-width: 800px) {
       padding-left: 1rem;
     }

package/src/stylesheets/styles-default-implementation.scss

@@ -0,0 +1,3 @@
+@import '1-settings/config';
+@import '6-default-implementation/hover';
+@import '6-default-implementation/scrollbar';

package/src/stylesheets/styles.scss

@@ -6,13 +6,12 @@
 @import '2-tools/functions';
 @import '2-tools/mixins';
 
-@import '3-app/app';
-@import '5-components/buttons';
-
 .#{$n}-app {
+  @import '3-chat/chat';
   @import '4-base/elements';
   @import '4-base/formelements';
   @import '5-components/avatar';
+  @import '5-components/buttons';
   @import '5-components/choice-prompt';
   @import '5-components/conversation';
   @import '5-components/divider';
@@ -39,6 +38,12 @@
   @import '5-components/notification';
   @import '5-components/character-limit';
   @import '5-components/collapse-button';
+  @import '5-components/message-body';
+  @import '5-components/message-count';
+  @import '5-components/suggestions';
+  @import '5-components/window-open-button';
+  @import '5-components/pre-chat-messages';
+  @import '5-components/unstarted';
 }
 
 .#{$n}-app,
@@ -46,10 +51,4 @@
   @import '4-base/a11y';
 }
 
-@import '5-components/message-body';
-@import '5-components/message-count';
-@import '5-components/suggestions';
 @import '5-components/modal';
-@import '5-components/window-open-button';
-@import '5-components/pre-chat-messages';
-@import '5-components/unstarted';

package/webpack/config.common.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 const path = require('path')
+const webpack = require('webpack')
 const webpackMerge = require('webpack-merge').merge
 const site = require('@seamly/doc-site/lib/config/site')
 const BundleAnalyzerPlugin =
@@ -28,7 +29,12 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const PRODUCTION = [argv.mode, process.env.NODE_ENV].includes('production')
 
-  const plugins = []
+  const plugins = [
+    new webpack.DefinePlugin({
+      'process.env.API_DOMAIN': JSON.stringify(process.env.API_DOMAIN),
+    }),
+  ]
+
   if (env.analyze) {
     plugins.push(new BundleAnalyzerPlugin())
   }

package/webpack/config.package.js

@@ -156,7 +156,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
             {
               loader: 'file-loader',
               options: {
-                name: 'styles.css',
+                name: '[name].css',
               },
             },
             'extract-loader',
@@ -167,6 +167,14 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     },
     entry: {
       styles: path.join(SRC_ROOT, 'stylesheets/styles.scss'),
+      'styles-default-implementation': path.join(
+        SRC_ROOT,
+        'stylesheets/styles-default-implementation.scss',
+      ),
+      'deprecated-view': path.join(
+        SRC_ROOT,
+        'stylesheets/deprecated-view.scss',
+      ),
     },
   }
 

package/webpack/config.test.js

@@ -26,6 +26,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}, options = {}) => {
     entry: {
       // Demo and test files
       'tests/index': path.join(PUBLIC_ROOT, '/tests/index.js'),
+      'tests/deprecated': path.join(PUBLIC_ROOT, '/tests/deprecated.js'),
       'tests/style-guide': path.join(PUBLIC_ROOT, '/tests/style-guide.js'),
       'tests/init-with-callback/index': path.join(
         PUBLIC_ROOT,

package/webpack/defaults.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-const BABEL_TRANSPILE_MODULES = ['debug', 'superagent', 'phoenix', 'marked']
+const BABEL_TRANSPILE_MODULES = ['debug', 'superagent', 'phoenix']
 const BROWSERS = 'last 1 version, > 1%, not dead, not ie 11, not ie_mob 11'
 
 const ROOT = path.resolve(__dirname, '..')
@@ -47,11 +47,8 @@ const ALIASSES = {
     'stylesheets',
     'styles.scss',
   ),
-  '@seamly/web-ui/src/stylesheets/styles-webui-only.scss': path.resolve(
-    SRC_ROOT,
-    'stylesheets',
-    'styles-webui-only.scss',
-  ),
+  '@seamly/web-ui/src/stylesheets/styles-default-implementation.scss':
+    path.resolve(SRC_ROOT, 'stylesheets', 'styles-default-implementation.scss'),
   '@seamly/web-ui/src/stylesheets/style-guide.scss': path.resolve(
     SRC_ROOT,
     'stylesheets',