@seamly/web-ui 20.2.0 → 20.3.0

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,6 +1,6 @@
-import { useFileUploads } from './seamly-hooks'
 import { Selectors } from 'domains/forms'
 import { useSelectorWithProps } from 'domains/redux'
+import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {
   const fileList = useSelectorWithProps(

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

@@ -103,7 +103,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+  return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + sizes[i]
 }
 
 export const getUrlParams = () => {

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

@@ -42,6 +42,7 @@ export const actionTypes = {
   interactivityUpdate: 'interactivity_update',
   dismiss: 'dismiss',
   sendTranscript: 'send_transcript',
+  setTopic: 'set_topic',
   setTranslation: 'set_translation',
   clickCta: 'click_cta',
   clickCard: 'click_card',

package/src/stylesheets/1-settings/_animations.scss

@@ -4,7 +4,7 @@
   75%,
   100% {
     transform: scaleY(0.45);
-    border-radius: 50% 50%;
+    border-radius: 50%;
   }
 
   37.5% {

package/src/stylesheets/1-settings/_config.scss

@@ -22,23 +22,28 @@ $brand3: #4a48c1 !default; // 'tertiary'
 $interaction: $brand3 !default;
 $interaction-dark: $brand2 !default;
 
+// NEGATIVE
 $negative: #db1639 !default;
 $negative-dark: #ad001f !default;
 
+// GREYS
 $grey-a: #eff3f6 !default;
 $grey-b: #dee3e5 !default;
 $grey-c: #a3b4bf !default;
 $grey-d: #6a7f8c !default;
 $grey-e: #3d4166 !default;
 
+// DISABLED
 $disabled: #5e727b; // 5:1
 
+// BLACK & WHITE
 $white: #fff !default;
 $black: #000 !default;
 
 // BACKGROUND COLORS
 $chat-bg: $white !default;
 
+// THREADLIST
 $threadlist-agent-text-bgcolor: $grey-a;
 $threadlist-user-text-bgcolor: $brand2;
 
@@ -51,11 +56,13 @@ $fontsize-large: 18px !default;
 $fontsize-xlarge: 21px !default;
 $fontsize-xxlarge: 24px !default;
 
+// FONT-WEIGHTS
 $fontweight-light: 300 !default;
 $fontweight-regular: 400 !default;
 $fontweight-semibold: 600 !default;
 $fontweight-bold: 700 !default;
 
+// FONT-FAMILY
 $fontfamily-default: arial, helvetica, sans-serif !default;
 
 // SPACER
@@ -73,34 +80,42 @@ $borderradius-large: $borderradius * 2 !default;
 $chat-window-width: $spacer * 18 !default;
 $chat-window-height: $spacer * 36 !default;
 
+// CHAT INLINE
 $chat-inline-height: $spacer * 32 !default;
 $chat-inline-maxheight: 90vh !default;
 
+// CHAT SUGGESTION
 $chat-suggestions-maxheight: $spacer * 16 !default;
 
+// VIEWPORT SIZES
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;
 
+// ICON SIZES
 $iconsize-small: 16px !default;
 $iconsize: 24px !default;
 $iconsize-large: 32px !default;
 
+// BUTTON SIZED
 $buttonsize-small: 32px !default;
 $buttonsize: 40px !default;
 
+// AVATAR SIZES
 $avatarsize: 32px !default;
 $avatarsize-large: 48px !default;
 
+// DIVIDER
 $dividersize: 32px !default;
 
+// MESSAGE COUNT
 $messagecountsize: $spacer * 1.25;
 
 // Z-INDEX
 $z-index: 1 !default;
 
 // BOX SHADOWS
-$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsla(204, 26%, 28%, 0.15),
-  0 $spacer * 0.15 $spacer * 0.5 hsla(204, 26%, 28%, 0.2) !default;
+$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsl(204deg 26% 28% / 15%),
+  0 $spacer * 0.15 $spacer * 0.5 hsl(204deg 26% 28% / 20%) !default;
 $boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;
 
 // TRANSITIONS

package/src/stylesheets/2-tools/_functions.scss

@@ -1,15 +1,15 @@
-// SET TEXT COLOR
+/** SET TEXT COLOR */
 @function set-text-color($color) {
-  @if (lightness($color) > 66.66) {
+  @if lightness($color) > 66.66 {
     @return $grey-e;
   } @else {
     @return $white;
   }
 }
 
-// SET BORDER COLOR
+/** SET BORDER COLOR */
 @function set-border-color($color) {
-  @if (lightness($color) > 66.66) {
+  @if lightness($color) > 66.66 {
     @return $grey-c;
   } @else {
     @return $white;

package/src/stylesheets/2-tools/_mixins.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-max-universal */
-// BOX-SIZING
+/** BOX-SIZING */
 @mixin boxSizing($value: border-box) {
   box-sizing: $value;
 
@@ -10,14 +10,15 @@
   }
 }
 
-// RESPONSIVE APP SIZING
+/** RESPONSIVE APP SIZING */
 @mixin responsiveAppSizing() {
   max-width: calc(#{$viewport-width} - #{$spacer * 2});
   max-height: calc(#{$viewport-height * 0.85} - #{$spacer * 2});
 
   @include media('>phablet-l') {
     max-height: calc(#{$viewport-height} - #{$spacer * 2});
-    // iOS Safari needs a bit more space
+
+    /** iOS Safari needs a bit more space */
     @supports (-webkit-overflow-scrolling: touch) {
       max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
     }
@@ -27,39 +28,40 @@
     right: $spacer;
     bottom: $spacer;
     max-height: calc(#{$viewport-height} - #{$spacer * 2});
-    // iOS Safari needs a bit more space
+
+    /** iOS Safari needs a bit more space */
     @supports (-webkit-overflow-scrolling: touch) {
       max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
     }
   }
 }
 
-// UNLIST
+/** UNLIST */
 @mixin unList() {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-// STYLE PLACEHOLDER
+/** STYLE PLACEHOLDER */
 @mixin stylePlaceholder() {
-  &::-webkit-input-placeholder {
-    // Chrome/Opera/Safari
+  &::input-placeholder {
+    /** Chrome/Opera/Safari */
     @content;
   }
 
-  &::-moz-placeholder {
-    // Firefox 19+
+  &::placeholder {
+    /** Firefox 19+ */
     @content;
   }
 
-  &:-ms-input-placeholder {
-    // IE 10+
+  &:input-placeholder {
+    /** IE 10+ */
     @content;
   }
 
-  &:-moz-placeholder {
-    // Firefox 18-
+  &:placeholder {
+    /** Firefox 18- */
     @content;
   }
 }

package/src/stylesheets/3-chat/_chat.scss

@@ -27,7 +27,7 @@
 }
 
 .#{$n}-chat--layout-window {
-  @include responsiveAppSizing();
+  @include responsiveAppSizing;
 
   display: none;
   position: fixed;

package/src/stylesheets/5-components/_choice-prompt.scss

@@ -50,7 +50,7 @@
 }
 
 .#{$n}-button--choose-again .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .#{$n}-button--choose-again[aria-expanded='true'] .#{$n}-icon {

package/src/stylesheets/5-components/_collapse-button.scss

@@ -10,7 +10,7 @@
   height: $buttonsize;
   padding: 0;
   border: 0 none;
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $white;
   box-shadow: $boxshadow;
 }

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

@@ -26,7 +26,7 @@
   font-size: $fontsize-default;
   resize: none;
 
-  @include stylePlaceholder() {
+  @include stylePlaceholder {
     overflow: visible;
     color: $grey-c;
     line-height: $spacer;

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

@@ -24,8 +24,8 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-fill-mode: forwards;
-  border-radius: 50% 50%;
-  background-color: currentColor;
+  border-radius: 50%;
+  background-color: currentcolor;
 
   &.#{$n}-one {
     animation-delay: $loader-quarter-duration;

package/src/stylesheets/5-components/_message-carousel.scss

@@ -131,7 +131,7 @@
     height: $iconsize-small * 0.6;
     transform: translate(-50%, -50%);
     transform-origin: 50% 50%;
-    border-radius: 50% 50%;
+    border-radius: 50%;
     background-color: $grey-c;
   }
 }

package/src/stylesheets/5-components/_message-count.scss

@@ -11,7 +11,7 @@
   transform: scale(1);
   transform-origin: 50% 50%;
   transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $negative;
   color: $white;
   font-size: $fontsize-small;

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

@@ -1,7 +1,6 @@
 .#{$n}-message {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   width: 80%;
 }
 

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

@@ -97,7 +97,7 @@
   height: $buttonsize;
   padding: 0;
   border: 0 none;
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $white;
   color: transparent;
   font-size: 0;

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

@@ -34,7 +34,7 @@
 }
 
 .#{$n}-chat__options__button .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 // CONTEXT MENU
@@ -174,7 +174,7 @@
 }
 
 .#{$n}-options__close .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .#{$n}-options__form {
@@ -232,7 +232,7 @@
     border: $thin-border solid $grey-b;
   }
 
-  @include stylePlaceholder() {
+  @include stylePlaceholder {
     overflow: visible;
     color: $grey-c;
     line-height: $spacer;

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

@@ -63,26 +63,25 @@
 
 .#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
   flex: 1 1 100%;
-  flex-direction: column;
-  flex-wrap: nowrap;
+  flex-flow: column nowrap;
   height: 100%;
   max-height: 100%;
   overflow-y: auto;
 }
 
-.#{$n}-suggestions-item {
+.#{$n}-suggestions__item {
   display: block;
   flex: 0 0 auto;
   max-width: 100%;
   margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
-.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__item {
   width: 100%;
   margin-right: 0;
 }
 
-.#{$n}-suggestions-item .#{$n}-icon {
+.#{$n}-suggestions__item .#{$n}-icon {
   display: none;
 }
 

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

@@ -116,7 +116,7 @@
 }
 
 .#{$n}-upload__label .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .#{$n}-upload__label--text {

package/src/stylesheets/7-deprecated/1-settings/_animations.scss

@@ -8,7 +8,7 @@
   75%,
   100% {
     transform: scaleY(0.45);
-    border-radius: 50% 50%;
+    border-radius: 50%;
   }
 
   37.5% {

package/src/stylesheets/7-deprecated/1-settings/_config.scss

@@ -21,22 +21,28 @@ $brand3: #4a48c1 !default; // 'tertiary'
 // UI COLORS
 $interaction: $brand3 !default;
 
+// Highlight color
 $highlight: #ffc700 !default;
 
+// Positive colors
 $positive: #00875e !default;
 $positive-light: #19b183 !default;
 
+// Negative colors
 $negative: #db1639 !default;
 $negative-dark: #ad001f !default;
 
+// Greys
 $grey-a: #eff3f6 !default;
 $grey-b: #dee3e5 !default;
 $grey-c: #a3b4bf !default;
 $grey-d: #6a7f8c !default;
 $grey-e: #3d4166 !default;
 
+// Disabled color
 $disabled: #5e727b; // 5:1
 
+// BLACK & WHITE
 $white: #fff !default;
 $black: #000 !default;
 
@@ -51,8 +57,10 @@ $fontsize-default: 16px !default;
 $fontsize-large: 18px !default;
 $fontsize-xlarge: 21px !default;
 
+// FONT-WEIGHT
 $fontweight-bold: 700 !default;
 
+// FONT-FAMILY
 $fontfamily-default: arial, helvetica, sans-serif !default;
 
 // SPACER
@@ -69,26 +77,21 @@ $borderradius-small: $borderradius * 0.5 !default;
 // DIMENSIONS
 $app-initial-width: 195px !default;
 $app-started-width: 375px !default;
-
 $app-full-height: 720px !default;
 $app-collapsed-height: 54px !default;
-
 $app-inline-height: 480px !default;
-
 $post-full-height: 170px !default;
 $post-collapsed-height: 65px !default;
-
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;
-
 $badge-touch-size: 32px !default;
 
 // Z-INDEX
 $z-index: 1 !default;
 
 // BOX SHADOWS
-$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsla(204, 26%, 28%, 0.15),
-  0 $spacer * 0.15 $spacer * 0.5 hsla(204, 26%, 28%, 0.2) !default;
+$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsl(204deg 26% 28% / 15%),
+  0 $spacer * 0.15 $spacer * 0.5 hsl(204deg 26% 28% / 20%) !default;
 $boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;
 
 // TRANSITIONS

package/src/stylesheets/7-deprecated/2-tools/_functions.scss

@@ -4,7 +4,7 @@
 // SET TEXT COLOR
 
 @function set-text-color($color) {
-  @if (lightness($color) > 66.66) {
+  @if lightness($color) > 66.66 {
     @return $grey-e;
   } @else {
     @return $white;
@@ -14,7 +14,7 @@
 // SET BORDER COLOR
 
 @function set-border-color($color) {
-  @if (lightness($color) > 66.66) {
+  @if lightness($color) > 66.66 {
     @return $grey-c;
   } @else {
     @return $white;

package/src/stylesheets/7-deprecated/2-tools/_mixins.scss

@@ -25,6 +25,7 @@
 
   @include media('>phablet-l') {
     max-height: calc(#{$viewport-height} - #{$flex-spacer * 2});
+
     // iOS Safari needs a bit more space
     @supports (-webkit-overflow-scrolling: touch) {
       max-height: calc(#{$viewport-height * 0.9} - #{$flex-spacer * 2});
@@ -35,6 +36,7 @@
     right: $spacer;
     bottom: $spacer;
     max-height: calc(#{$viewport-height} - #{$spacer * 2});
+
     // iOS Safari needs a bit more space
     @supports (-webkit-overflow-scrolling: touch) {
       max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
@@ -55,22 +57,22 @@
 // -----------------
 
 @mixin stylePlaceholder() {
-  &::-webkit-input-placeholder {
+  &::input-placeholder {
     // Chrome/Opera/Safari
     @content;
   }
 
-  &::-moz-placeholder {
+  &::placeholder {
     // Firefox 19+
     @content;
   }
 
-  &:-ms-input-placeholder {
+  &:input-placeholder {
     // IE 10+
     @content;
   }
 
-  &:-moz-placeholder {
+  &:placeholder {
     // Firefox 18-
     @content;
   }

package/src/stylesheets/7-deprecated/3-app/_app.scss

@@ -1,9 +1,9 @@
-// See settings/_config.scss for vars
+/** See settings/_config.scss for vars */
 $app-parts-padding: $spacer * 0.5;
 $app-header-bgcolor: $brand3;
 
 .#{$n}-app--deprecated {
-  @include responsiveAppSizing();
+  @include responsiveAppSizing;
   @include boxSizing;
 
   display: flex;

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

@@ -38,6 +38,7 @@
   color: $grey-e;
   font-size: $fontsize-small;
   resize: none;
+
   // iOS will zoom in on focus if font-size below 16px, and not go back.
   // User has to pinch to zoom out; very nasty UX. So:
   @supports (-webkit-overflow-scrolling: touch) {

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

@@ -42,7 +42,7 @@
     animation-iteration-count: infinite;
     animation-direction: normal;
     animation-fill-mode: forwards;
-    border-radius: 50% 50%;
+    border-radius: 50%;
     background-color: $interaction;
   }
 }

package/src/stylesheets/7-deprecated/5-components/_collapse-button.scss

@@ -11,7 +11,7 @@
   height: $badge-touch-size;
   padding: 0;
   border: 0 none;
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $white;
   box-shadow: $boxshadow;
 }

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

@@ -4,7 +4,7 @@
 // VARS
 // ----
 
-$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgba(0, 0, 0, 0.1);
+$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgb(0 0 0 / 10%);
 
 // BASE
 // ----

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

@@ -32,6 +32,7 @@
   color: $grey-e;
   font-size: $fontsize-small;
   resize: none;
+
   // iOS will zoom in on focus if font-size below 16px, and not go back.
   // User has to pinch to zoom out; bad UX.
   // Do not change this:
@@ -39,7 +40,7 @@
     font-size: 16px;
   }
 
-  @include stylePlaceholder() {
+  @include stylePlaceholder {
     overflow: visible;
     color: $grey-c;
     line-height: $spacer;

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

@@ -37,8 +37,8 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-fill-mode: forwards;
-  border-radius: 50% 50%;
-  background-color: currentColor;
+  border-radius: 50%;
+  background-color: currentcolor;
 
   &.#{$n}-one {
     animation-delay: $loader-quarter-duration;

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

@@ -22,7 +22,7 @@ $messagecount-size: $spacer;
   height: $messagecount-size;
   transform: scale(1);
   transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $messagecount-bgcolor;
   color: $messagecount-textcolor;
   font-size: $fontsize-small;

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

@@ -4,8 +4,7 @@ $avatar-size: $badge-touch-size;
 
 .#{$n}-message {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   width: 80%;
   font-family: $fontfamily-default;
   font-size: $fontsize-small;
@@ -176,7 +175,7 @@ $avatar-size: $badge-touch-size;
     p,
     ul,
     ol {
-      margin: 0 0 1em 0;
+      margin: 0 0 1em;
     }
 
     ul,
@@ -245,7 +244,7 @@ $avatar-size: $badge-touch-size;
     transform: translate(48%, -$padding);
     border-radius: 50%;
     background: $white;
-    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
 
     > svg {
       position: absolute;

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

@@ -4,7 +4,7 @@
 // VARS
 // ----
 
-$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgba(0, 0, 0, 0.1);
+$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgb(0 0 0 / 10%);
 $control-small-radius: $spacer;
 $button-transition: $transition;
 

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

@@ -45,7 +45,7 @@
 }
 
 .#{$n}-chat__options__button[aria-disabled='true'] .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 // CONTEXT MENU
@@ -253,7 +253,7 @@
     font-size: 16px; // KEEP THIS FIXED
   }
 
-  @include stylePlaceholder() {
+  @include stylePlaceholder {
     overflow: visible;
     color: $grey-c;
     line-height: $spacer;