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

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

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.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';