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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "22.3.0-beta.1",
+  "version": "22.3.0-beta.2",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",

package/src/javascripts/domains/translations/components/options-dialog/translation-option.tsx

@@ -36,7 +36,7 @@ const TranslationOption: FC<TranslationOptionProps> = ({
       onKeyDown={onKeyDown}
       id={id}
     >
-      <Icon alt="" name="check" size="16" />
+      <Icon name="check" size="16" alt="" />
       {label} {description && <span>({description})</span>}
     </li>
   )

package/src/javascripts/style-guide/states.js

@@ -1280,6 +1280,7 @@ const standardState = {
               cardAskText.payload.body,
               cardNavigate.payload.body,
               cardTopic.payload.body,
+              cardNoImage.payload.body,
             ],
           },
         },
@@ -1612,6 +1613,13 @@ const standardState = {
         sendTranscript: { enabled: true },
       },
     },
+    config: {
+      ...baseState.config,
+      context: {
+        ...baseState.context,
+        locale: 'nl',
+      },
+    },
     translations: {
       ...translationsSlice,
       isAvailable: true,

package/src/javascripts/ui/components/chat-status/chat-status-action.tsx

@@ -1,9 +1,9 @@
-import Icon from 'ui/components/layout/icon'
+import Icon, { IconProps } from 'ui/components/layout/icon'
 import { className } from 'lib/css'
 
 type ChatStatusActionProps = {
   handleClick: () => void
-  icon: string
+  icon: IconProps['name']
   title: string
   srButtonText?: string
 }

package/src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js

@@ -24,7 +24,7 @@ export default function CarouselControls({
         aria-label={t('carousel.controls.previous')}
         onClick={handlePrevious}
       >
-        <Icon name="arrowLeft" size="16" />
+        <Icon name="arrowLeft" size="16" alt="" />
       </button>
       {children}
       <button
@@ -32,7 +32,7 @@ export default function CarouselControls({
         aria-label={t('carousel.controls.next')}
         onClick={handleNext}
       >
-        <Icon name="arrowRight" size="16" />
+        <Icon name="arrowRight" size="16" alt="" />
       </button>
     </div>
   )

package/src/javascripts/ui/components/conversation/event/choice-prompt.js

@@ -119,7 +119,7 @@ const ChoicePrompt = ({ event, children, ...props }) => {
           {showOptions
             ? t('message.choicePrompts.cancelChooseAgain')
             : t('message.choicePrompts.chooseAgain')}
-          <Icon name="chevronDown" size="8" />
+          <Icon name="chevronDown" size="8" alt="" />
         </button>
       )}
       {showOptions && (

package/src/javascripts/ui/components/conversation/event/image-lightbox.js

@@ -24,7 +24,7 @@ const ImageLightbox = ({ description, url }) => {
         onClick={onOpenLightboxHandler}
       >
         {t('message.image.srTextEnlargeButtonLabel', { description })}
-        <Icon name="enlarge" size="32" />
+        <Icon name="enlarge" size="32" alt="" />
       </button>
       {showLightBox && (
         <Lightbox

package/src/javascripts/ui/components/conversation/event-divider.js

@@ -31,7 +31,12 @@ export default function EventDivider({
       {hasGraphic && (
         <span className={className('divider__graphic')}>
           {iconName ? (
-            <Icon name={iconName} size={iconSize} className={iconClassName} />
+            <Icon
+              name={iconName}
+              size={iconSize}
+              className={iconClassName}
+              alt=""
+            />
           ) : (
             <img
               src={graphicSrc}

package/src/javascripts/ui/components/form-controls/error.js

@@ -17,7 +17,7 @@ export default function Error({ id, error }) {
     >
       {isAvailable && error && (
         <span id={id} className={className('error__message')}>
-          <Icon name="error" size="16" />
+          <Icon name="error" size="16" alt="" />
           {error}
         </span>
       )}

package/src/javascripts/ui/components/form-controls/file-input.js

@@ -66,7 +66,7 @@ export default function FileInput({
         ])}
       >
         <label htmlFor={id} className={className('upload__label')}>
-          <Icon name="upload" size="32" />
+          <Icon name="upload" size="32" alt="" />
           <div>
             <span className={className(['upload__label--text'])}>
               {labelText}

package/src/javascripts/ui/components/layout/agent-info.js

@@ -43,7 +43,7 @@ const AgentInfo = () => {
               alt=""
             />
           ) : (
-            <Icon name="avatar" size="32" />
+            <Icon name="avatar" size="32" alt="" />
           )}
           <span className={className(classNames)} aria-hidden="true">
             {unreadMessageCount}

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="" />
   )
 }
 

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/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;
 }