Added minimize/maximize toasts (#272)

* Added min/max toasts

* Update changelog

* Replace icon

Author: mgavrila

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [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'] & {