@seamly/web-ui 20.1.0-alpha.1 → 20.2.0-alpha.2

package/src/stylesheets/5-components/_chat-status.scss

@@ -15,6 +15,10 @@
   box-shadow: $boxshadow;
 }
 
+&.#{$n}-app--collapsed .#{$n}-chat-status {
+  display: none;
+}
+
 .#{$n}-chat--layout-window .#{$n}-chat-status {
   width: calc(100% - #{$spacer * 2.5 + $buttonsize});
 }

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

@@ -57,7 +57,7 @@
   padding: 0;
   border-radius: $borderradius-small;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     cursor: auto;
   }
 }
@@ -67,6 +67,6 @@
   fill: $interaction;
 }
 
-.#{$n}-input__submit:disabled .#{$n}-icon path {
+.#{$n}-input__submit[aria-disabled='true'] .#{$n}-icon path {
   fill: $grey-c;
 }

package/src/stylesheets/5-components/_message-translation-info.scss

@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+&.#{$n}-app--collapsed .#{$n}-message__translation-info {
+  display: none;
+}
+
 .#{$n}-message__translation-label {
   margin-right: $spacer * 0.25;
   font-size: $fontsize-small;

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

@@ -22,14 +22,14 @@
       transition: color $transition, background-color $transition;
     }
 
-    .#{$n}-button--primary:not(.#{$n}-button--disabled) {
+    .#{$n}-button--primary:not([aria-disabled='true']) {
       &:hover {
         background-color: $interaction-dark;
       }
     }
 
-    .#{$n}-button--secondary:not(.#{$n}-button--disabled),
-    .#{$n}-button--tertiary:not(.#{$n}-button--disabled) {
+    .#{$n}-button--secondary:not([aria-disabled='true']),
+    .#{$n}-button--tertiary:not([aria-disabled='true']) {
       &:hover {
         color: $interaction-dark;
       }
@@ -89,7 +89,7 @@
       }
     }
 
-    .#{$n}-input__submit:not(:disabled):hover .#{$n}-icon path {
+    .#{$n}-input__submit:not([aria-disabled='true']):hover .#{$n}-icon path {
       fill: $interaction-dark;
     }
 
@@ -137,7 +137,7 @@
       }
     }
 
-    .#{$n}-options__menu__item:not(.#{$n}-button--disabled) {
+    .#{$n}-options__menu__item:not([aria-disabled='true']) {
       transition: color $transition;
 
       &:hover {

package/src/stylesheets/7-deprecated/4-base/_formelements.scss

@@ -6,7 +6,7 @@
 .#{$n}-input__checkbox {
   margin-right: $spacer * 0.5;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     opacity: 0.5;
   }
 }
@@ -19,7 +19,7 @@
   font-weight: $fontweight-bold;
 }
 
-.#{$n}-input__checkbox:disabled + .#{$n}-label {
+.#{$n}-input__checkbox[aria-disabled='true'] + .#{$n}-label {
   opacity: 0.5;
 }
 
@@ -48,8 +48,8 @@
     border: $thin-border solid $brand3;
   }
 
-  &:disabled,
-  &:disabled:hover {
+  &[aria-disabled='true'],
+  &[aria-disabled='true']:hover {
     border: $thin-border solid $grey-c;
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
     color: $grey-c;

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

@@ -47,7 +47,7 @@ $button-transition: $transition;
   font-weight: $fontweight-bold;
 }
 
-.#{$n}-button--disabled {
+.#{$n}-button[aria-disabled='true'] {
   color: $disabled;
   cursor: auto;
 }

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

@@ -66,7 +66,7 @@
   justify-content: center;
   padding: 0;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     opacity: 0.5;
     cursor: auto;
   }

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

@@ -79,6 +79,10 @@ $avatar-size: $badge-touch-size;
   width: 100%;
 }
 
+&.#{$n}-app--collapsed .#{$n}-message__translation-info {
+  display: none;
+}
+
 .#{$n}-message__translation-label {
   margin-right: $spacer * 0.25;
   font-size: $fontsize-small;

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

@@ -44,7 +44,7 @@
   height: 100%;
 }
 
-.#{$n}-chat__options__button.#{$n}-button--disabled .#{$n}-icon path {
+.#{$n}-chat__options__button[aria-disabled='true'] .#{$n}-icon path {
   fill: currentColor;
 }
 
@@ -106,7 +106,7 @@
   }
 }
 
-.#{$n}-options__menu .#{$n}-button.#{$n}-button--disabled {
+.#{$n}-options__menu .#{$n}-button[aria-disabled='true'] {
   &:hover {
     background-color: initial;
     color: $disabled;

package/webpack/config.common.js

@@ -29,9 +29,13 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const PRODUCTION = [argv.mode, process.env.NODE_ENV].includes('production')
 
+  const pkg = require(path.join(ROOT, './package.json'))
+
   const plugins = [
     new webpack.DefinePlugin({
       'process.env.API_DOMAIN': JSON.stringify(process.env.API_DOMAIN),
+      PACKAGE_NAME: JSON.stringify(pkg.name),
+      PACKAGE_VERSION: JSON.stringify(pkg.version),
     }),
   ]
 
@@ -47,6 +51,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       publicPath: PUBLIC_PATH,
     },
     resolve: {
+      modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
       alias: {
         ...ALIASSES,
       },

package/webpack/config.package.js

@@ -1,4 +1,5 @@
 /* eslint-disable */
+const webpackDefinePlugin = require('webpack').DefinePlugin
 const webpackMerge = require('webpack-merge').merge
 const glob = require('glob')
 const path = require('path')
@@ -43,6 +44,15 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
         (key) => new RegExp(`^${key}(\\/.*)`, 'i'),
       ),
     ],
+    plugins: [
+      new webpackDefinePlugin({
+        PACKAGE_NAME: JSON.stringify(pkg.name),
+        PACKAGE_VERSION: JSON.stringify(pkg.version),
+      }),
+    ],
+    resolve: {
+      modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
+    },
     module: {
       rules: [
         {