@seamly/web-ui 22.2.0 → 22.3.0-beta.2

package/src/javascripts/ui/components/layout/{icon.js → icon.tsx}

@@ -27,44 +27,81 @@ import { className as classNameFn } from 'lib/css'
 
 /* eslint-enable import/no-webpack-loader-syntax */
 
-const ICONS = {
-  send32: iconSend32,
-  balloon32: iconBalloon32,
-  newTopic32: iconNewTopic32,
-  newTranslation16: iconNewTranslation16,
-  newTranslation32: iconNewTranslation32,
-  avatar32: iconAvatar32,
-  chevronDown8: iconChevronDown8,
-  chevronDown32: iconChevronDown32,
-  chevronRight8: iconChevronRight8,
-  chevronRight16: iconChevronRight16,
-  close8: iconClose8,
-  close16: iconClose16,
-  enlarge32: iconEnlarge32,
-  options32: iconOptions32,
-  file32: iconFile32,
-  upload32: iconUpload32,
-  download16: iconDownload16,
-  error16: iconError16,
-  arrowLeft16: iconArrowLeft16,
-  arrowRight16: iconArrowRight16,
-  check32: iconCheck32,
-  check16: iconCheck16,
-}
-
-const Icon = ({ name, size = '32', className = undefined, alt }) => {
-  const iconName = `${name}${size}`
+export const ICONS = {
+  send: {
+    32: iconSend32,
+  },
+  balloon: {
+    32: iconBalloon32,
+  },
+  newTopic: {
+    32: iconNewTopic32,
+  },
+  newTranslation: {
+    16: iconNewTranslation16,
+    32: iconNewTranslation32,
+  },
+  avatar: {
+    32: iconAvatar32,
+  },
+  chevronDown: {
+    8: iconChevronDown8,
+    32: iconChevronDown32,
+  },
+  chevronRight: {
+    8: iconChevronRight8,
+    16: iconChevronRight16,
+  },
+  close: {
+    8: iconClose8,
+    16: iconClose16,
+  },
+  enlarge: {
+    32: iconEnlarge32,
+  },
+  options: {
+    32: iconOptions32,
+  },
+  file: {
+    32: iconFile32,
+  },
+  upload: {
+    32: iconUpload32,
+  },
+  download: {
+    16: iconDownload16,
+  },
+  error: {
+    16: iconError16,
+  },
+  arrowLeft: {
+    16: iconArrowLeft16,
+  },
+  arrowRight: {
+    16: iconArrowRight16,
+  },
+  check: {
+    16: iconCheck16,
+    32: iconCheck32,
+  },
+} as const
 
-  return (
-    <>
-      <div
-        aria-hidden="true"
-        className={className || classNameFn('icon')}
-        dangerouslySetInnerHTML={{ __html: ICONS[iconName] }}
-      />
-      {alt && <span className={classNameFn('visually-hidden')}>{alt}</span>}
-    </>
-  )
+export type IconProps = {
+  name: keyof typeof ICONS
+  size?: '8' | '16' | '32'
+  className?: string
+  alt: string
 }
 
+const Icon = ({ name, size = '32', className, alt }: IconProps) => (
+  <>
+    <div
+      aria-hidden="true"
+      className={className || classNameFn('icon')}
+      dangerouslySetInnerHTML={{ __html: ICONS[name][size] }}
+    />
+    {alt && <span className={classNameFn('visually-hidden')}>{alt}</span>}
+  </>
+)
+
 export default Icon

package/src/javascripts/ui/components/options/options-button.js

@@ -236,7 +236,7 @@ const OptionsButton = () => {
         aria-expanded={multiMenu ? menuIsOpen.toString() : null}
         aria-disabled={!multiMenu && !firstOption.available ? 'true' : null}
       >
-        {multiMenu && <Icon name="options" size="32" />}
+        {multiMenu && <Icon name="options" size="32" alt="" />}
         <span className={className('button__text')}>
           {multiMenu
             ? t('options.openButtonText')

package/src/javascripts/ui/components/suggestions/suggestions-item.js

@@ -30,7 +30,7 @@ const SuggestionsItem = ({
         onClick={handleClick}
         className={className('button', 'button--primary')}
       >
-        {hasIcon && <Icon name="chevronRight" size="8" />}
+        {hasIcon && <Icon name="chevronRight" size="8" alt="" />}
         {question}
       </button>
     </li>

package/src/javascripts/ui/components/view/window-view/window-open-button.js

@@ -29,7 +29,7 @@ const ButtonIcon = () => {
       alt=""
     />
   ) : (
-    <Icon name="avatar" size="32" />
+    <Icon name="avatar" size="32" alt="" />
   )
 }
 
@@ -57,9 +57,14 @@ const WindowOpenButton = ({ onClick }) => {
         aria-hidden={isOpen}
         onClick={handleClick}
       >
-        <span className={className('message-count')} aria-hidden="true">
-          {!!count && count}
-        </span>
+        <InOutTransition
+          isActive={!!count}
+          transitionStartState={transitionStartStates.notRendered}
+        >
+          <span className={className('message-count')} aria-hidden="true">
+            {count}
+          </span>
+        </InOutTransition>
         <ButtonIcon />
       </button>
     </InOutTransition>

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -66,7 +66,7 @@ const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
           className={className('modal__close')}
           onClick={onClose}
         >
-          <Icon name="close" size="16" />
+          <Icon name="close" size="16" alt="" />
           {t('lightbox.closeLabel')}
         </button>
       </div>

package/src/javascripts/ui/hooks/use-session-expired-command.ts

@@ -1,17 +1,46 @@
-import { useEffect } from 'preact/hooks'
+import { useEffect, useRef } from 'preact/hooks'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import { useInterrupt } from 'domains/interrupt/hooks'
+import { setInterrupt } from 'domains/interrupt/slice'
+import { useAppDispatch } from 'domains/store'
 import useSeamlyCommands from './use-seamly-commands'
 
 export default function useSessionExpiredCommand() {
   const {
     meta: { originalError, action },
   } = useInterrupt()
+  const dispatch = useAppDispatch()
   const seamlyCommands = useSeamlyCommands()
   const isExpiredError = originalError?.name === 'SeamlySessionExpiredError'
+  const limit = useRef(0)
+  const limitTimer = useRef<ReturnType<typeof setTimeout>>(null)
 
   useEffect(() => {
     if (isExpiredError && seamlyCommands[action]) {
+      if (limit.current >= 10) {
+        limitTimer.current = setTimeout(() => {
+          limit.current = 0
+        }, 10000)
+
+        const error = new SeamlyGeneralError()
+        dispatch(
+          setInterrupt({
+            name: error.name,
+            message: error.message,
+            langKey: error.langKey,
+            originalEvent: error.originalEvent,
+            originalError: error.originalError,
+            action: error.action,
+          }),
+        )
+        return () => {}
+      }
+      limit.current += 1
       seamlyCommands[action]()
     }
-  }, [action, seamlyCommands, isExpiredError])
+
+    return () => {
+      if (limitTimer.current) clearTimeout(limitTimer.current)
+    }
+  }, [action, seamlyCommands, isExpiredError, dispatch])
 }

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

@@ -18,15 +18,15 @@
 .#{$n}-card__content {
   display: flex;
   flex: 1 1 auto;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: $spacer * 0.5;
   padding: $spacer * 0.5 $spacer * 0.75 $spacer * 0.75;
 }
 
 .#{$n}-card__title {
   display: block;
-  flex: 0 0 100%;
   width: 100%;
+  height: fit-content;
   margin: 0;
   padding: 0;
   font-size: $fontsize-default;
@@ -36,12 +36,13 @@
 .#{$n}-card__description {
   display: block;
   width: 100%;
+  height: fit-content;
 }
 
 .#{$n}-card__content .#{$n}-button {
   display: block;
-  align-self: flex-end;
   width: 100%;
+  margin-top: auto;
   font-weight: $fontweight-bold;
   text-decoration: none;
 }

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

@@ -1,5 +1,5 @@
 .#{$n}-message-count {
-  display: flex;
+  display: none;
   position: absolute;
   z-index: 1;
   top: $spacer * -0.5;
@@ -8,21 +8,23 @@
   justify-content: center;
   width: $messagecountsize;
   height: $messagecountsize;
-  transform: scale(1);
+  transform: scale(0);
   transform-origin: 50% 50%;
-  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-    opacity $transition;
+  transition: transform $transition, opacity $transition;
   border-radius: 50%;
-  opacity: 1;
+  opacity: 0;
   background-color: $negative;
   color: $white;
   font-size: $fontsize-small;
   font-weight: $fontweight-bold;
   line-height: 1;
 
-  &:empty {
-    transform: scale(0);
-    transition: transform $transition, opacity $transition;
-    opacity: 0;
+  &.#{$n}-transition--visible {
+    display: flex;
+  }
+
+  &.#{$n}-transition--in {
+    transform: scale(1);
+    opacity: 1;
   }
 }