EPMRPP-108273 || Add new icons: Configuration, GroupBy, PinFilled, PinOutline

src/components/icons/icons.stories.module.scss

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.grid {
+  display: grid;
+  max-width: 900px;
+  padding: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 16px;
+}
+
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid var(--rp-ui-color-field-border);
+  border-radius: 8px;
+  background-color: var(--rp-ui-base-bg-000);
+  cursor: pointer;
+  gap: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.icon-name {
+  width: 100%;
+  overflow: hidden;
+  color: var(--rp-ui-color-text-primary);
+  font-family: var(--rp-ui-base-font-family-heading);
+  font-size: 12px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: text;
+}
+

src/components/icons/icons.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { BaseIconButton } from '@components/baseIconButton/baseIconButton';
-import { CloseIcon, DeleteIcon, DropdownIcon, MinusIcon, PlusIcon, SearchIcon } from './index';
-
-const icons = [CloseIcon, PlusIcon, MinusIcon, DeleteIcon, DropdownIcon, SearchIcon];
+import * as icons from './index';
+import styles from './icons.stories.module.scss';
 
 const meta: Meta<typeof BaseIconButton> = {
   title: 'Icons/Icons',
@@ -18,18 +17,28 @@ export default meta;
 
 type Story = StoryObj<typeof BaseIconButton>;
 
-export const Icons: Story = {
+export const IconsGrid: Story = {
   render: () => {
+    const handleCopyName = (name: string) => {
+      navigator.clipboard.writeText(name);
+    };
+
     return (
-      <>
-        {icons.map((Icon) => {
-          return (
+      <div className={styles.grid}>
+        {Object.entries(icons).map(([name, Icon]) => (
+          <div
+            key={name}
+            className={styles['icon-item']}
+            onClick={() => handleCopyName(name)}
+            title={`Click to copy: ${name}`}
+          >
             <BaseIconButton>
               <Icon />
             </BaseIconButton>
-          );
-        })}
-      </>
+            <div className={styles['icon-name']}>{name}</div>
+          </div>
+        ))}
+      </div>
     );
   },
 };

src/components/icons/index.ts

@@ -13,6 +13,7 @@ export { default as ChevronRightBreadcrumbsIcon } from './svg/chevronRightBreadc
 export { default as ClearIcon } from './svg/clear.svg';
 export { default as CloseEyeIcon } from './svg/closeEye.svg';
 export { default as CloseIcon } from './svg/close.svg';
+export { default as ConfigurationIcon } from './svg/configuration.svg';
 export { default as CopyIcon } from './svg/copy.svg';
 export { default as CoveredManuallyIcon } from './svg/coveredManually.svg';
 export { default as CsvIcon } from './svg/csv.svg';
@@ -29,6 +30,7 @@ export { default as FileOtherIcon } from './svg/fileOther.svg';
 export { default as FilterFilledIcon } from './svg/filterFilled.svg';
 export { default as FilterOutlineIcon } from './svg/filterOutline.svg';
 export { default as FlagIcon } from './svg/flag.svg';
+export { default as GroupByIcon } from './svg/groupBy.svg';
 export { default as HideIcon } from './svg/hide.svg';
 export { default as ImageIcon } from './svg/image.svg';
 export { default as InfoIcon } from './svg/info.svg';
@@ -39,6 +41,8 @@ export { default as MinusIcon } from './svg/minus.svg';
 export { default as MoveToFolderIcon } from './svg/moveToFolder.svg';
 export { default as OpenEyeIcon } from './svg/openEye.svg';
 export { default as PdfIcon } from './svg/pdf.svg';
+export { default as PinFilledIcon } from './svg/pinFilled.svg';
+export { default as PinOutlineIcon } from './svg/pinOutline.svg';
 export { default as PlusIcon } from './svg/plus.svg';
 export { default as PrevChapterIcon } from './svg/prevChapter.svg';
 export { default as PrevPageIcon } from './svg/prevPage.svg';