From 74fae399cd2311b3e990b0e1fc19647b65959960 Mon Sep 17 00:00:00 2001
From: VictoryGod18 <96035378+VictoryGod18@users.noreply.github.com>
Date: Mon, 23 Jan 2023 12:00:01 +0000
Subject: [PATCH] feat(common):[components] add WIconButton

---
 src/common/components/WIconButton/index.scss  | 22 ++++++++++++
 src/common/components/WIconButton/index.tsx   | 25 ++++++++++++++
 .../components/WIconButton/insex.stories.tsx  | 34 +++++++++++++++++++
 src/common/components/index.ts                |  1 +
 4 files changed, 82 insertions(+)
 create mode 100644 src/common/components/WIconButton/index.scss
 create mode 100644 src/common/components/WIconButton/index.tsx
 create mode 100644 src/common/components/WIconButton/insex.stories.tsx

diff --git a/src/common/components/WIconButton/index.scss b/src/common/components/WIconButton/index.scss
new file mode 100644
index 00000000..8b834c67
--- /dev/null
+++ b/src/common/components/WIconButton/index.scss
@@ -0,0 +1,22 @@
+@import '@/common/scss/colors.scss';
+@import '@/common/scss/sizes.scss';
+
+.w-icon-button {
+    width: 44px;
+    height: 44px;
+    padding: 2px;
+    border-radius: calc($s-border-radius + 2px);
+    background-color: $c-bg-white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-big{
+        width: 56px;
+        height: 56px;
+    }
+    &-small{
+        width: 30px;
+        height: 30px;
+    }
+}
diff --git a/src/common/components/WIconButton/index.tsx b/src/common/components/WIconButton/index.tsx
new file mode 100644
index 00000000..eed492be
--- /dev/null
+++ b/src/common/components/WIconButton/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import SImageVector from '../SImageVector/index';
+//--stylesheet-----------------------------------------------------------------------------------
+import './index.scss';
+
+interface Props {
+    size: 'big' | 'small';
+    content: string;
+    handlerClick: CallableFunction;
+}
+
+//--component definition-------------------------------------------------------------------------
+
+const WIconButton: React.FC<Props> = ({ size, content, handlerClick }) => {
+    return (
+        <div
+          className={`w-icon-button w-icon-button-${size}`}
+          onClick={() => handlerClick()}
+        >
+            <SImageVector content={content} />
+        </div>
+    );
+};
+
+export default WIconButton;
diff --git a/src/common/components/WIconButton/insex.stories.tsx b/src/common/components/WIconButton/insex.stories.tsx
new file mode 100644
index 00000000..ac8b3299
--- /dev/null
+++ b/src/common/components/WIconButton/insex.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { linkTo } from '@storybook/addon-links';
+import WIconButton from '.';
+
+//-------------------------------------------------------------------------------------------------
+
+
+export default {
+  title: 'Common/WIconButton',
+  component: WIconButton,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof WIconButton>;
+
+type Story = StoryObj<typeof WIconButton>;
+
+//-------------------------------------------------------------------------------------------------
+
+export const Big: Story = {
+  args: {
+    size: 'big',
+    content: '',
+    handlerClick: linkTo('Common/WIconButton', 'Small'),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    content: '',
+    handlerClick: linkTo('Common/WIconButton', 'Big'),
+  },
+};
diff --git a/src/common/components/index.ts b/src/common/components/index.ts
index c06df842..4f136a39 100644
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -5,3 +5,4 @@ export { default as WTextButton } from './WTextButton';
 export { default as SImage } from './SImage';
 export { default as SImageVector } from './SImageVector';
 export { default as SImageRaster } from './SImageRaster';
+export { default as WIconButton } from './WIconButton';