Improve test coverage and refactor storybook arch (#723)

* Improve test coverage and refactor storybook arch

* Fix coverage

* Fix tests

* Fix lint

* Fix lint

front/src/modules/ui/button/components/IconButton.tsx

@@ -83,14 +83,20 @@ const StyledIconButton = styled.button<Pick<ButtonProps, 'variant' | 'size'>>`
     }
   }};
   justify-content: center;
+  outline: none;
   padding: 0;
   transition: background 0.1s ease;
-  user-select: none;
   &:hover {
     background: ${({ theme, disabled }) => {
       return disabled ? 'auto' : theme.background.transparent.light;
     }};
   }
+  user-select: none;
+  &:active {
+    background: ${({ theme, disabled }) => {
+      return disabled ? 'auto' : theme.background.transparent.medium;
+    }};
+  }
   width: ${({ size }) => {
     switch (size) {
       case 'large':
@@ -102,11 +108,6 @@ const StyledIconButton = styled.button<Pick<ButtonProps, 'variant' | 'size'>>`
         return '20px';
     }
   }};
-  &:active {
-    background: ${({ theme, disabled }) => {
-      return disabled ? 'auto' : theme.background.transparent.medium;
-    }};
-  }
 `;
 
 export function IconButton({

front/src/modules/ui/button/components/RoundedIconButton.tsx

@@ -14,15 +14,16 @@ const StyledIconButton = styled.button`
 
   justify-content: center;
 
+  outline: none;
   padding: 0;
   transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
-  width: 20px;
 
   &:disabled {
     background: ${({ theme }) => theme.background.quaternary};
     color: ${({ theme }) => theme.font.color.tertiary};
     cursor: default;
   }
+  width: 20px;
 `;
 
 export function RoundedIconButton({

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -56,7 +56,7 @@ const StyledButtonContainer = styled.div`
 `;
 
 const meta: Meta<typeof Button> = {
-  title: 'UI/Buttons/Button',
+  title: 'UI/Button/Button',
   component: Button,
   decorators: [withKnobs],
 };

front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx

@@ -53,7 +53,7 @@ const StyledIconButtonContainer = styled.div`
 `;
 
 const meta: Meta<typeof IconButton> = {
-  title: 'UI/Buttons/IconButton',
+  title: 'UI/Button/IconButton',
   component: IconButton,
   decorators: [withKnobs],
 };

front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx

@@ -8,7 +8,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { MainButton } from '../MainButton';
 
 const meta: Meta<typeof MainButton> = {
-  title: 'UI/Buttons/MainButton',
+  title: 'UI/Button/MainButton',
   component: MainButton,
 };
 

front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -8,7 +8,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { RoundedIconButton } from '../RoundedIconButton';
 
 const meta: Meta<typeof RoundedIconButton> = {
-  title: 'UI/Buttons/RoundedIconButton',
+  title: 'UI/Button/RoundedIconButton',
   component: RoundedIconButton,
 };