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

package/src/javascripts/ui/hooks/utility-hooks.js

@@ -5,7 +5,7 @@ import {
   useState,
   useMemo,
 } from 'preact/hooks'
-import { randomId } from '../../lib/id'
+import { randomId } from 'lib/id'
 
 export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:

package/src/javascripts/ui/utils/seamly-utils.js

@@ -200,9 +200,16 @@ const participantReducer = (state, action) => {
         currentAgent: '',
       }
     case SET_PARTICIPANT:
-      const { participants } = state
-      const { id, avatar, name, introduction } = action.participant
+      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.
+      if (!state) {
+        return {
+          participants: {},
+          currentAgent: '',
+        }
+      }
 
+      const { participants } = state || { participants: {} }
+      const { id, avatar, name, introduction } = action.participant
       const oldParticipant = participants[id]
 
       const newParticipants = {

package/src/stylesheets/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;
 }
 
@@ -39,7 +39,7 @@
   font-size: $fontsize-default;
   resize: none;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     border: $thin-border solid $grey-c;
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
     color: $grey-c;

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

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

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-body.scss

@@ -150,18 +150,28 @@
 
 // Download
 .#{$n}-message--type-upload {
+  .#{$n}-message__body {
+    padding: 0;
+  }
+
   .#{$n}-download {
     display: flex;
     align-items: center;
-    width: 100%;
-  }
-
-  a {
+    padding: $spacer * 0.5 $spacer * 0.75;
+    border-radius: $borderradius;
     color: inherit;
     text-align: left;
     word-break: break-all;
   }
 
+  .#{$n}-download-link {
+    text-decoration: underline;
+  }
+
+  .#{$n}-download:not(.#{$n}-download-link) .#{$n}-file-download {
+    text-decoration: line-through;
+  }
+
   .#{$n}-icon {
     flex: 0 0 $iconsize-small;
     width: $iconsize-small;
@@ -175,14 +185,11 @@
   }
 }
 
-.#{$n}-conversation__item--source-agent .#{$n}-message--type-upload {
-  .#{$n}-icon path {
-    fill: $interaction;
-  }
-
-  a {
-    color: $interaction;
-  }
+.#{$n}-conversation__item--source-agent
+  .#{$n}-message--type-upload
+  .#{$n}-icon
+  path {
+  fill: $interaction;
 }
 
 .#{$n}-message .#{$n}-message__info {

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;
       }
@@ -50,19 +50,31 @@
     }
 
     .#{$n}-message__body a {
-      transition: color $transition;
+      transition: background-color $transition, color $transition;
 
       &:hover {
         text-decoration: none;
       }
     }
 
-    .#{$n}-conversation__item--source-agent
-      .#{$n}-message__body.#{$n}-message__body
-      a {
-      &:hover {
-        color: $interaction-dark;
-      }
+    .#{$n}-conversation__item--source-agent .#{$n}-message__body a:hover {
+      color: $interaction-dark;
+    }
+
+    .#{$n}-download-link:hover {
+      background-color: $interaction;
+    }
+
+    .#{$n}-download-link:hover .#{$n}-file-download {
+      color: $white;
+    }
+
+    .#{$n}-message--type-upload .#{$n}-icon path {
+      transition: fill $transition;
+    }
+
+    .#{$n}-download-link:hover .#{$n}-icon path {
+      fill: $white;
     }
 
     .#{$n}-input__text {
@@ -77,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;
     }
 
@@ -125,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

@@ -294,12 +294,13 @@ $avatar-size: $badge-touch-size;
     display: flex;
     align-items: center;
     width: 100%;
+    text-decoration: line-through;
+    word-break: break-all;
   }
 
-  .#{$n}-download a {
+  .#{$n}-download-link {
     color: inherit;
-    text-align: left;
-    word-break: break-all;
+    text-decoration: underline;
 
     &:hover {
       text-decoration: none;

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

@@ -43,6 +43,9 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
         (key) => new RegExp(`^${key}(\\/.*)`, 'i'),
       ),
     ],
+    resolve: {
+      modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
+    },
     module: {
       rules: [
         {

package/src/javascripts/domains/config/middleware.js

@@ -1,22 +0,0 @@
-import * as Actions from './actions'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-
-export default function createMiddleware() {
-  return ({ dispatch }) =>
-    (next) =>
-    (action) => {
-      const result = next(action)
-
-      switch (action.type) {
-        case String(Actions.initialize):
-        case String(Actions.update):
-          if (action?.config?.defaults?.agentName) {
-            dispatch({
-              type: seamlyActions.SET_HEADER_SUB_TITLE,
-              title: action?.config?.defaults?.agentName,
-            })
-          }
-      }
-      return result
-    }
-}