From c9271750baf5a2c9f0a17002d5e962c474955f66 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 24 Sep 2024 17:52:51 +0800
Subject: [PATCH] pkp/pkp-lib#10447 Create new ButtonIcon component (#413)

* pkp/pkp-lib#i10447 Add new icons to Icon Gallery

* pkp/pkp-lib#10447 Add ButtonIcon component

* pkp/pkp-lib#10447 Add Copy icon and remove fixed width and height on Expand and History icons

* pkp/pkp-lib#10447 Update ButtonIcon style and props, provide documentation

* pkp/pkp-lib#10447 Update DropdownActions component to use ButtonIcon

* pkp/pkp-lib#10447 Adjust button size for ButtonIcon component

* pkp/pkp-lib#10447 Remove prop enlarged icon for ButtonIcon component

* pkp/pkp-lib#10447 Update how button is clicked in DropdownActions story for ellipsis/icon only mode
---
 src/components/ButtonIcon/ButtonIcon.mdx      |  19 +
 .../ButtonIcon/ButtonIcon.stories.js          |  35 ++
 src/components/ButtonIcon/ButtonIcon.vue      |  47 ++
 .../DropdownActions.stories.js                |   2 +-
 .../DropdownActions/DropdownActions.vue       |  17 +-
 src/components/Icon/Icon.stories.js           |  11 +-
 src/components/Icon/Icon.vue                  |  20 +-
 src/components/Icon/icons/Add.vue             |   8 +
 src/components/Icon/icons/ArrowLeft.vue       |   8 +
 src/components/Icon/icons/ArrowRight.vue      |  18 +
 src/components/Icon/icons/Attention.vue       |   8 +
 src/components/Icon/icons/Book.vue            |  13 +
 src/components/Icon/icons/Calendar.vue        | 514 ++++++++++++++++++
 src/components/Icon/icons/ChevronLeft.vue     |  10 +
 src/components/Icon/icons/ChevronRight.vue    |  10 +
 src/components/Icon/icons/Clock.vue           |  10 +
 src/components/Icon/icons/Copy.vue            |  14 +
 src/components/Icon/icons/Expand.vue          |   8 +-
 src/components/Icon/icons/History.vue         |   8 +-
 19 files changed, 758 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ButtonIcon/ButtonIcon.mdx
 create mode 100644 src/components/ButtonIcon/ButtonIcon.stories.js
 create mode 100644 src/components/ButtonIcon/ButtonIcon.vue
 create mode 100644 src/components/Icon/icons/Add.vue
 create mode 100644 src/components/Icon/icons/ArrowLeft.vue
 create mode 100644 src/components/Icon/icons/ArrowRight.vue
 create mode 100644 src/components/Icon/icons/Attention.vue
 create mode 100644 src/components/Icon/icons/Book.vue
 create mode 100644 src/components/Icon/icons/Calendar.vue
 create mode 100644 src/components/Icon/icons/ChevronLeft.vue
 create mode 100644 src/components/Icon/icons/ChevronRight.vue
 create mode 100644 src/components/Icon/icons/Clock.vue
 create mode 100644 src/components/Icon/icons/Copy.vue

diff --git a/src/components/ButtonIcon/ButtonIcon.mdx b/src/components/ButtonIcon/ButtonIcon.mdx
new file mode 100644
index 000000000..b9f006991
--- /dev/null
+++ b/src/components/ButtonIcon/ButtonIcon.mdx
@@ -0,0 +1,19 @@
+import {Primary, Controls, Stories, Meta, Description} from '@storybook/blocks';
+
+import * as ButtonIconStories from './ButtonIcon.stories.js';
+
+<Meta of={ButtonIconStories} />
+
+# ButtonIcon
+
+## Usage
+
+Use the ButtonIcon component to create a button that displays only an icon, without any visible text.
+
+## Accessibility
+
+Since the button has no visible text, use a descriptive aria-label to ensure it's accessible to screen reader users.
+
+<Primary />
+<Controls />
+<Stories />
diff --git a/src/components/ButtonIcon/ButtonIcon.stories.js b/src/components/ButtonIcon/ButtonIcon.stories.js
new file mode 100644
index 000000000..0c664b3a8
--- /dev/null
+++ b/src/components/ButtonIcon/ButtonIcon.stories.js
@@ -0,0 +1,35 @@
+import ButtonIcon from './ButtonIcon.vue';
+export default {
+	title: 'Components/ButtonIcon',
+	component: ButtonIcon,
+	render: (args) => ({
+		components: {ButtonIcon},
+		setup() {
+			return {args};
+		},
+		template: '<ButtonIcon v-bind="args" />',
+	}),
+};
+
+export const Default = {
+	args: {
+		icon: 'Add',
+		ariaLabel: 'Add more items',
+	},
+};
+
+export const Disabled = {
+	args: {
+		icon: 'Cancel',
+		ariaLabel: 'Cancel',
+		isDisabled: true,
+	},
+};
+
+export const Active = {
+	args: {
+		icon: 'Complete',
+		ariaLabel: 'Complete',
+		isActive: true,
+	},
+};
diff --git a/src/components/ButtonIcon/ButtonIcon.vue b/src/components/ButtonIcon/ButtonIcon.vue
new file mode 100644
index 000000000..ad1032ee8
--- /dev/null
+++ b/src/components/ButtonIcon/ButtonIcon.vue
@@ -0,0 +1,47 @@
+<template>
+	<button :class="styles" :aria-label="ariaLabel" :disabled="isDisabled">
+		<Icon class="h-5 w-5" :icon="icon" aria-hidden="true" />
+	</button>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+const props = defineProps({
+	/** Icon name to be displayed within the button */
+	icon: {
+		type: String,
+		required: true,
+	},
+	/** Accessible label for the button. */
+	ariaLabel: {
+		type: String,
+		default: null,
+	},
+	/** Indicates whether the button is in an active state. */
+	isActive: {
+		type: Boolean,
+		default: false,
+	},
+	/** Disables the button, making it unclickable and styled as disabled */
+	isDisabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const styles = computed(() => ({
+	// Base
+	'inline-flex relative items-center justify-center text-lg-semibold rounded w-9 h-9': true,
+	// Default
+	'text-primary bg-secondary': !props.isActive,
+	// Hover
+	'hover:text-on-dark hover:bg-hover': !props.isDisabled,
+	// Active
+	'text-on-dark bg-selection-dark border-transparent': props.isActive,
+	// Disabled
+	'hover:text-disabled hover:bg-secondary !text-disabled cursor-not-allowed':
+		props.isDisabled,
+}));
+</script>
diff --git a/src/components/DropdownActions/DropdownActions.stories.js b/src/components/DropdownActions/DropdownActions.stories.js
index 197042e17..85abcd785 100644
--- a/src/components/DropdownActions/DropdownActions.stories.js
+++ b/src/components/DropdownActions/DropdownActions.stories.js
@@ -146,7 +146,7 @@ export const EllipsisMenu = {
 		const canvas = within(canvasElement);
 		const user = userEvent.setup();
 
-		await user.click(canvas.getByText('User management options'));
+		await user.click(canvas.getByLabelText('User management options'));
 	},
 };
 
diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue
index f1dbba826..923fccb0a 100644
--- a/src/components/DropdownActions/DropdownActions.vue
+++ b/src/components/DropdownActions/DropdownActions.vue
@@ -3,20 +3,26 @@
 		<Menu as="div">
 			<div>
 				<MenuButton
-					class="hover:bg-gray-50 inline-flex w-full justify-center gap-x-1.5 rounded px-3 py-2"
+					class="hover:bg-gray-50 inline-flex w-full justify-center gap-x-1.5 rounded"
 					:class="
 						displayAsEllipsis
 							? 'text-3xl-normal'
-							: 'border border-light bg-secondary text-lg-normal'
+							: 'border border-light bg-secondary px-3 py-2 text-lg-normal'
 					"
 					:aria-label="ariaLabel || null"
 				>
-					<span :class="displayAsEllipsis ? 'sr-only' : ''">{{ label }}</span>
+					<span v-if="!displayAsEllipsis">{{ label }}</span>
 					<Icon
-						class="-mr-1 h-5 w-5 text-primary"
-						:icon="displayAsEllipsis ? 'MoreOptions' : 'Dropdown'"
+						v-if="!displayAsEllipsis"
+						class="h-5 w-5 text-primary"
+						icon="Dropdown"
 						aria-hidden="true"
 					/>
+					<ButtonIcon
+						v-else
+						icon="MoreOptions"
+						:aria-label="label"
+					></ButtonIcon>
 				</MenuButton>
 			</div>
 
@@ -72,6 +78,7 @@
 <script setup>
 import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
 import PkpButton from '@/components/Button/Button.vue';
+import ButtonIcon from '@/components/ButtonIcon/ButtonIcon.vue';
 import Icon from '@/components/Icon/Icon.vue';
 
 defineProps({
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index e958587ee..7afae93da 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -58,17 +58,26 @@ export const iconGallery = {
 
 	args: {
 		icons: [
+			'Add',
 			'Announcements',
 			'AnonymousReview',
+			'ArrowLeft',
+			'ArrowRight',
 			'AttachFile',
+			'Attention',
 			'BackButton',
 			'Bold',
+			'Book',
 			'Bullets',
+			'Calendar',
 			'Cancel',
 			'Catalog',
-			'Complete',
 			'ChevronDown',
+			'ChevronLeft',
+			'ChevronRight',
 			'ChevronUp',
+			'Clock',
+			'Complete',
 			'Dashboard',
 			'DefaultDocument',
 			'DecreaseTextSize',
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 3d9d214c8..a67339d1d 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -36,16 +36,25 @@
 <script></script>
 <script setup>
 import {defineProps, computed} from 'vue';
+import Add from './icons/Add.vue';
 import Announcements from './icons/Announcements.vue';
 import AnonymousReview from './icons/AnonymousReview.vue';
+import ArrowLeft from './icons/ArrowLeft.vue';
+import ArrowRight from './icons/ArrowRight.vue';
 import AttachFile from './icons/AttachFile.vue';
+import Attention from './icons/Attention.vue';
 import BackButton from './icons/BackButton.vue';
 import Bold from './icons/Bold.vue';
+import Book from './icons/Book.vue';
 import Bullets from './icons/Bullets.vue';
+import Calendar from './icons/Calendar.vue';
 import Cancel from './icons/Cancel.vue';
 import Catalog from './icons/Catalog.vue';
 import ChevronDown from './icons/ChevronDown.vue';
+import ChevronLeft from './icons/ChevronLeft.vue';
+import ChevronRight from './icons/ChevronRight.vue';
 import ChevronUp from './icons/ChevronUp.vue';
+import Clock from './icons/Clock.vue';
 import Complete from './icons/Complete.vue';
 import Dashboard from './icons/Dashboard.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
@@ -103,17 +112,26 @@ import View from './icons/View.vue';
 import Workflow from './icons/Workflow.vue';
 
 const svgIcons = {
+	Add,
 	Announcements,
 	AnonymousReview,
+	ArrowLeft,
+	ArrowRight,
 	AttachFile,
+	Attention,
 	BackButton,
 	Bold,
+	Book,
 	Bullets,
+	Calendar,
 	Cancel,
 	Catalog,
-	Complete,
 	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
 	ChevronUp,
+	Clock,
+	Complete,
 	Dashboard,
 	DefaultDocument,
 	DecreaseTextSize,
diff --git a/src/components/Icon/icons/Add.vue b/src/components/Icon/icons/Add.vue
new file mode 100644
index 000000000..86f19fc7e
--- /dev/null
+++ b/src/components/Icon/icons/Add.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M20.5714 11.1429H12.8571V3.42857C12.8571 3.20124 12.7668 2.98323 12.6061 2.82248C12.4453 2.66174 12.2273 2.57143 12 2.57143C11.7727 2.57143 11.5547 2.66174 11.3939 2.82248C11.2332 2.98323 11.1429 3.20124 11.1429 3.42857V11.1429H3.42857C3.20124 11.1429 2.98323 11.2332 2.82248 11.3939C2.66174 11.5547 2.57143 11.7727 2.57143 12C2.57143 12.2273 2.66174 12.4453 2.82248 12.6061C2.98323 12.7668 3.20124 12.8571 3.42857 12.8571H11.1429V20.5714C11.1429 20.7988 11.2332 21.0168 11.3939 21.1775C11.5547 21.3383 11.7727 21.4286 12 21.4286C12.2273 21.4286 12.4453 21.3383 12.6061 21.1775C12.7668 21.0168 12.8571 20.7988 12.8571 20.5714V12.8571H20.5714C20.7988 12.8571 21.0168 12.7668 21.1775 12.6061C21.3383 12.4453 21.4286 12.2273 21.4286 12C21.4286 11.7727 21.3383 11.5547 21.1775 11.3939C21.0168 11.2332 20.7988 11.1429 20.5714 11.1429Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ArrowLeft.vue b/src/components/Icon/icons/ArrowLeft.vue
new file mode 100644
index 000000000..25ddcb586
--- /dev/null
+++ b/src/components/Icon/icons/ArrowLeft.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M21 11H5.41L6.71 9.71C6.8983 9.52169 7.00409 9.2663 7.00409 9C7.00409 8.7337 6.8983 8.4783 6.71 8.29C6.5217 8.10169 6.2663 7.99591 6 7.99591C5.7337 7.99591 5.4783 8.10169 5.29 8.29L2.29 11.29C2.19627 11.383 2.12188 11.4936 2.07111 11.6154C2.02034 11.7373 1.9942 11.868 1.9942 12C1.9942 12.132 2.02034 12.2627 2.07111 12.3846C2.12188 12.5064 2.19627 12.617 2.29 12.71L5.29 15.71C5.38296 15.8037 5.49356 15.8781 5.61542 15.9289C5.73728 15.9797 5.86799 16.0058 6 16.0058C6.13201 16.0058 6.26272 15.9797 6.38458 15.9289C6.50644 15.8781 6.61704 15.8037 6.71 15.71C6.80373 15.617 6.87812 15.5064 6.92889 15.3846C6.97966 15.2627 7.0058 15.132 7.0058 15C7.0058 14.868 6.97966 14.7373 6.92889 14.6154C6.87812 14.4936 6.80373 14.383 6.71 14.29L5.41 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ArrowRight.vue b/src/components/Icon/icons/ArrowRight.vue
new file mode 100644
index 000000000..de32ef299
--- /dev/null
+++ b/src/components/Icon/icons/ArrowRight.vue
@@ -0,0 +1,18 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M3 12H21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M18 15L21 12L18 9"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Attention.vue b/src/components/Icon/icons/Attention.vue
new file mode 100644
index 000000000..16f3c3211
--- /dev/null
+++ b/src/components/Icon/icons/Attention.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M13 2V16.5H11V2H13ZM11 19H13.004V21.004H11V19Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Book.vue b/src/components/Icon/icons/Book.vue
new file mode 100644
index 000000000..206b2b768
--- /dev/null
+++ b/src/components/Icon/icons/Book.vue
@@ -0,0 +1,13 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M4 8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H14C16.8284 2 18.2426 2 19.1213 2.87868C20 3.75736 20 5.17157 20 8V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8Z"
+			stroke="currentColor"
+		/>
+		<path
+			d="M19.8978 16H7.89778C6.96781 16 6.50282 16 6.12132 16.1022C5.08604 16.3796 4.2774 17.1883 4 18.2235"
+			stroke="currentColor"
+		/>
+		<path d="M7 16V2.5" stroke="currentColor" stroke-linecap="round" />
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Calendar.vue b/src/components/Icon/icons/Calendar.vue
new file mode 100644
index 000000000..fc63f7a49
--- /dev/null
+++ b/src/components/Icon/icons/Calendar.vue
@@ -0,0 +1,514 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_336_796)">
+			<g filter="url(#filter0_d_336_796)">
+				<path
+					d="M3 8.26667V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V8.26667M3 8.26667V5C3 4.44772 3.44772 4 4 4H20C20.5523 4 21 4.44772 21 5V8.26667M3 8.26667H21"
+					stroke="currentColor"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter1_d_336_796)">
+				<path
+					d="M7 2V5"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter2_d_336_796)">
+				<path
+					d="M17 2V5"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter3_d_336_796)">
+				<path
+					d="M18 11H16"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter4_d_336_796)">
+				<path
+					d="M18 17H16"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter5_d_336_796)">
+				<path
+					d="M13 11H11"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter6_d_336_796)">
+				<path
+					d="M13 17H11"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter7_d_336_796)">
+				<path
+					d="M8 11H6"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter8_d_336_796)">
+				<path
+					d="M8 17H6"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter9_d_336_796)">
+				<path
+					d="M18 14H16"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter10_d_336_796)">
+				<path
+					d="M13 14H11"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<g filter="url(#filter11_d_336_796)">
+				<path
+					d="M8 14H6"
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+		</g>
+		<defs>
+			<filter
+				id="filter0_d_336_796"
+				x="0"
+				y="3.5"
+				width="24"
+				height="22"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter1_d_336_796"
+				x="4"
+				y="1.5"
+				width="6"
+				height="9"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter2_d_336_796"
+				x="14"
+				y="1.5"
+				width="6"
+				height="9"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter3_d_336_796"
+				x="13"
+				y="10.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter4_d_336_796"
+				x="13"
+				y="16.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter5_d_336_796"
+				x="8"
+				y="10.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter6_d_336_796"
+				x="8"
+				y="16.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter7_d_336_796"
+				x="3"
+				y="10.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter8_d_336_796"
+				x="3"
+				y="16.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter9_d_336_796"
+				x="13"
+				y="13.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter10_d_336_796"
+				x="8"
+				y="13.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<filter
+				id="filter11_d_336_796"
+				x="3"
+				y="13.5"
+				width="8"
+				height="6"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset dy="2.5" />
+				<feGaussianBlur stdDeviation="1.25" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_336_796"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_336_796"
+					result="shape"
+				/>
+			</filter>
+			<clipPath id="clip0_336_796">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ChevronLeft.vue b/src/components/Icon/icons/ChevronLeft.vue
new file mode 100644
index 000000000..63f96e70b
--- /dev/null
+++ b/src/components/Icon/icons/ChevronLeft.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M10.0606 11.9999L15.5303 17.4696L14.4696 18.5303L7.93929 11.9999L14.4696 5.4696L15.5303 6.5303L10.0606 11.9999Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ChevronRight.vue b/src/components/Icon/icons/ChevronRight.vue
new file mode 100644
index 000000000..5537401ab
--- /dev/null
+++ b/src/components/Icon/icons/ChevronRight.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M13.9394 12.0001L8.46971 6.53039L9.53041 5.46973L16.0607 12.0001L9.53041 18.5304L8.46971 17.4697L13.9394 12.0001Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Clock.vue b/src/components/Icon/icons/Clock.vue
new file mode 100644
index 000000000..93c070aa7
--- /dev/null
+++ b/src/components/Icon/icons/Clock.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V11.6893L15.0303 13.9697C15.3232 14.2626 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2626 15.3232 13.9697 15.0303L11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Copy.vue b/src/components/Icon/icons/Copy.vue
new file mode 100644
index 000000000..453685a6d
--- /dev/null
+++ b/src/components/Icon/icons/Copy.vue
@@ -0,0 +1,14 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M20.9983 10C20.9862 7.82497 20.8897 6.64706 20.1213 5.87868C19.2426 5 17.8284 5 15 5H12C9.17157 5 7.75736 5 6.87868 5.87868C6 6.75736 6 8.17157 6 11V16C6 18.8284 6 20.2426 6.87868 21.1213C7.75736 22 9.17157 22 12 22H15C17.8284 22 19.2426 22 20.1213 21.1213C21 20.2426 21 18.8284 21 16V15"
+			stroke="currentColor"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M3 10V16C3 17.6569 4.34315 19 6 19M18 5C18 3.34315 16.6569 2 15 2H11C7.22876 2 5.34315 2 4.17157 3.17157C3.51839 3.82475 3.22937 4.69989 3.10149 6"
+			stroke="currentColor"
+			stroke-linecap="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Expand.vue b/src/components/Icon/icons/Expand.vue
index 90360e806..fe4051778 100644
--- a/src/components/Icon/icons/Expand.vue
+++ b/src/components/Icon/icons/Expand.vue
@@ -1,11 +1,5 @@
 <template>
-	<svg
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<rect width="24" height="24" transform="matrix(-1 0 0 1 24 0)" />
 		<path
 			d="M7.91675 17.355L13.2601 12L7.91675 6.645L9.56175 5L16.5617 12L9.56175 19L7.91675 17.355Z"
diff --git a/src/components/Icon/icons/History.vue b/src/components/Icon/icons/History.vue
index 94d580df5..e481c97a9 100644
--- a/src/components/Icon/icons/History.vue
+++ b/src/components/Icon/icons/History.vue
@@ -1,11 +1,5 @@
 <template>
-	<svg
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<rect width="24" height="24" />
 		<g clip-path="url(#clip0_7755_18920)">
 			<path