feat(common):[components] add WIconButton

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;
+    }
+}

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;

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'),
+  },
+};

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';