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

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;
 }
 

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;
 }
 

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.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/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',

package/src/stylesheets/6-webui-only/_hover.scss

@@ -1,151 +0,0 @@
-@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/styles-webui-only.scss

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