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

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