Merge branch 'development' into ic/fix-addr-table

Author: iuliacimpeanu

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - [Fixed trimmed address not showing in address-table](https://github.com/multiversx/mx-sdk-dapp-ui/pull/273)
+- [Added minimize/maximize action for toasts](https://github.com/multiversx/mx-sdk-dapp-ui/pull/272)
 - [Eslint and prettierrc fixes](https://github.com/multiversx/mx-sdk-dapp-ui/pull/270)
 - [Refactored sign transactions panel internal components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/267)
 

src/common/Icon/Icon.tsx

@@ -23,6 +23,8 @@ import { CopyIcon } from './components/CopyIcon';
 import { HourglassIcon } from './components/HourglassIcon';
 import { LayersIcon } from './components/LayersIcon';
 import { LockIcon } from './components/LockIcon';
+import { MaximizeIcon } from './components/MaximizeIcon';
+import { MinimizeIcon } from './components/MinimizeIcon';
 import { PencilIcon } from './components/PencilIcon';
 import { SpinnerIcon } from './components/SpinnerIcon';
 import { TriangularWarningIcon } from './components/TriangularWarningIcon';
@@ -112,6 +114,12 @@ export const Icon = ({ name, ...properties }: IconPropsType) => {
     case 'arrow-right':
       return <ArrowRightIcon />;
 
+    case 'minimize':
+      return <MinimizeIcon />;
+
+    case 'maximize':
+      return <MaximizeIcon />;
+
     default:
       console.error(`No data for the ${name} icon.`);
       return null;

src/common/Icon/components/MaximizeIcon/MaximizeIcon.tsx

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+
+const styles = {
+  maximizeIcon: 'mvx:text-inherit',
+} satisfies Record<string, string>;
+
+export const MaximizeIcon = ({ class: className }: { class?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 448 512"
+    fill="currentColor"
+    class={{ [styles.maximizeIcon]: true, [className]: Boolean(className) }}
+  >
+    <path d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z" />
+  </svg>
+);

src/common/Icon/components/MaximizeIcon/index.ts

@@ -0,0 +1 @@
+export * from './MaximizeIcon';

src/common/Icon/components/MinimizeIcon/MinimizeIcon.tsx

@@ -0,0 +1,27 @@
+import { h } from '@stencil/core';
+
+const styles = {
+  minimizeIcon: 'mvx:text-inherit',
+} satisfies Record<string, string>;
+
+export const MinimizeIcon = ({ class: className }: { class?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 448 512"
+    fill="currentColor"
+    class={{ [styles.minimizeIcon]: true, [className]: Boolean(className) }}
+  >
+    <path
+      d="M160 64c0-17.7-14.3-32-32-32S96 46.3 96 64l0 64-64 0c-17.7 0-32 
+      14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96zM32 320c-17.7 0-32 
+      14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 
+      32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM352 64c0-17.7-14.3-32-32-32s-32 
+      14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 
+      32-32s-14.3-32-32-32l-64 0 0-64zM320 320c-17.7 0-32 14.3-32 
+      32l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 
+      32-32s-14.3-32-32-32l-96 0z"
+    />
+  </svg>
+);

src/common/Icon/components/MinimizeIcon/index.ts

@@ -0,0 +1 @@
+export * from './MinimizeIcon';

src/common/Icon/icon.types.ts

@@ -27,6 +27,8 @@ export enum IconNamesEnum {
   arrowsRotate = 'arrows-rotate',
   spinner = 'spinner',
   arrowRight = 'arrow-right',
+  minimize = 'minimize',
+  maximize = 'maximize',
 }
 
 export type IconPropsType = JSXBase.IntrinsicElements['svg'] & {

src/components/functional/toasts-list/toast-list.scss

@@ -18,16 +18,19 @@
 }
 
 .view-all-button-container {
-  @apply mvx:absolute mvx:-bottom-12 mvx:right-0 mvx:z-1;
+  @apply mvx:absolute mvx:-bottom-12 mvx:right-0 mvx:z-1 mvx:flex;
 }
 
+.minimize-button,
+.maximize-button,
 .view-all-button {
   @apply mvx:backdrop-blur-2xl mvx:py-2 mvx:px-4 mvx:text-base mvx:font-normal mvx:leading-6 mvx:cursor-pointer;
   @apply mvx:ease-in-out mvx:transition-opacity mvx:duration-200;
   border-radius: 100px;
   border: 2px solid var(--mvx-border-color-secondary);
   background: var(--mvx-bg-color-primary);
   color: var(--mvx-text-color-primary);
+  min-height: 44px;
 
   &:hover {
     @apply mvx:opacity-80;

src/components/functional/toasts-list/toast-list.tsx

@@ -1,4 +1,6 @@
 import { Component, h, Method, State } from '@stencil/core';
+import { Icon } from 'common/Icon';
+import { IconNamesEnum } from 'common/Icon/icon.types';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
 import type { IEventBus } from 'utils/EventBus';
 import { EventBus } from 'utils/EventBus';
@@ -18,6 +20,7 @@ export class ToastList {
   @State() transactionToasts: ITransactionToast[] = [];
   @State() customToasts: CustomToastType[] = [];
   @State() isVisible: boolean = true;
+  @State() isMinimized: boolean = false;
 
   @Method()
   async getEventBus() {
@@ -80,24 +83,40 @@ export class ToastList {
     this.customToasts = [...payload];
   };
 
+  private readonly toggleMinimize = () => {
+    this.isMinimized = !this.isMinimized;
+  };
+
   private resetState() {
     this.transactionToasts = [];
     this.customToasts = [];
     this.isVisible = true;
+    this.isMinimized = false;
   }
 
   render() {
     const hasTransactionToasts = this.transactionToasts?.length > 0;
 
+    const toastListClasses = {
+      'toast-list': true,
+      'toast-list-bottom': hasTransactionToasts,
+      'hidden': !this.isVisible,
+    };
+
+    if (this.isMinimized && hasTransactionToasts) {
+      return (
+        <div class={toastListClasses} id="toast-list">
+          <div class="view-all-button-container">
+            <button class="maximize-button" onClick={this.toggleMinimize} aria-label="Maximize Toasts">
+              <Icon name={IconNamesEnum.maximize} />
+            </button>
+          </div>
+        </div>
+      );
+    }
+
     return (
-      <div
-        class={{
-          'toast-list': true,
-          'toast-list-bottom': hasTransactionToasts,
-          'hidden': !this.isVisible,
-        }}
-        id="toast-list"
-      >
+      <div class={toastListClasses} id="toast-list">
         {this.customToasts?.map(toast => (
           <mvx-generic-toast toast={toast} onDeleteToast={() => this.handleCustomToastDelete(toast.toastId)} />
         ))}
@@ -108,6 +127,9 @@ export class ToastList {
 
         {hasTransactionToasts && (
           <div class="view-all-button-container">
+            <button class="minimize-button" onClick={this.toggleMinimize} aria-label="Minimize Toasts">
+              <Icon name={IconNamesEnum.minimize} />
+            </button>
             <button class="view-all-button" onClick={this.handleViewAllClick}>
               View All
             </button>