From 14d034211a90757d5215a92e4d2525c3b08140ea Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Wed, 3 Aug 2022 12:35:35 +0300
Subject: [PATCH] ended styling button styles according design

---
 src/components/Button.tsx      | 99 +++++++++++++++++++++++-----------
 src/stories/Button.stories.tsx | 21 ++++++--
 2 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9eb334e..b859583 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,15 +4,68 @@
 import React from "react";
 import classNames from "classnames";
 import '../index.css'
+import { StyleType } from "core/_variants";
 /* -------------------------------------------------------------------------- */
 /*                               Component props                              */
 /* -------------------------------------------------------------------------- */
 type Props = {
-    emphasis?: 'high' | 'medium' | 'low' | undefined,
+    emphasis?: StyleType | undefined,
     disabled?:boolean,
     iconed?: boolean,
 } & Omit<React.ComponentPropsWithoutRef<"button">, "">
 
+/* -------------------------------------------------------------------------- */
+/*                                Emphasis styles                           */
+/* -------------------------------------------------------------------------- */
+
+const buttonEnableHighEmphasis = `
+    bg-blue-500
+    hover:bg-blue-400
+    active:bg-blue-700    
+    focus:shadow-lg shadow-blue-500
+    focus:outline outline-blue-400/10 outline-8`;
+
+const buttonDisabledHighEmphasis = 
+    `bg-gray-200
+    focus:outline-none`;
+
+const buttonGeneralHighEmphasis = `
+    text-white 
+`
+
+const buttonEnabledMediumEmphasis = 
+    `text-blue-500
+    border-gray-500
+    active:border-blue-600
+    active:text-blue-600
+    hover:border-blue-400
+    hover:text-blue-400
+    focus:outline outline-blue-400/10 outline-8
+    focus:border-blue-600/70`;
+
+
+const buttonDisabledMediumEmphasis = 
+    `text-gray-200
+    border-gray-200
+    focus:outline-none`;
+
+const buttonGeneralMediumEmphasis = 
+    `bg-white
+    border`;
+
+
+const buttonEnabledLowEmphasis = 
+    `text-gray-900
+    hover:text-blue-400
+    active:text-blue-600
+    focus:bg-gray-50`;
+
+const buttonDisabledLowEmphasis = 
+    `text-gray-200`;
+
+const buttonGenerealLowEmphasis = 
+    `focus:outline-none
+    bg-transparent`;
 
 /* -------------------------------------------------------------------------- */
 /*                          Component implementation                          */
@@ -38,38 +91,20 @@ export const Button = ({
                 'transition-all': !disabled,
                 'transition duration-200':!disabled,
                 
-            },
-            {
-                // Define high emphasis
-                'text-white': emphasis === 'high',
-                'text-gray-300': disabled && emphasis !='high',
-                'bg-blue-500': !disabled && emphasis ==='high',
-                'hover:bg-blue-400': !disabled && emphasis ==='high',                
-                'active:bg-blue-700': !disabled && emphasis ==='high',
-                'bg-gray-200': disabled && emphasis ==='high',
-                'focus:outline outline-blue-500/60 outline-5':!disabled && emphasis === 'high',
-                'focus:shadow-lg shadow-blue-500':!disabled && emphasis === 'high',
-                
-                //Define medium emphasis
-                'text-blue-500': !disabled && emphasis === 'medium',
-                'hover:text-blue-400': !disabled && emphasis === 'medium' || emphasis === 'low',
-                'active:text-blue-600': !disabled && emphasis === 'medium',
-                'bg-white': emphasis === 'medium',
-                'focus:outline outline-blue-400/10 outline-8':!disabled && emphasis === 'medium' || emphasis === 'high',
-                //Border
-                'border': emphasis === 'medium',
-                'border-gray-200' : disabled && emphasis === 'medium',
-                'border-gray-500': !disabled && emphasis === 'medium',
-                'hover:border-blue-400':!disabled && emphasis === 'medium',
-                'active:border-blue-600': !disabled && emphasis === 'medium',
-                'focus:border-blue-600/70':!disabled && emphasis === 'medium',
+            },            
+            {   // Define high emphasis
+                [`${buttonEnableHighEmphasis}`]: !disabled && emphasis === 'high',
+                [`${buttonDisabledHighEmphasis}`]: disabled && emphasis === 'high',
+                [`${buttonGeneralHighEmphasis}`] : emphasis === 'high',    
+                // Define medium emphasis
+                [`${buttonEnabledMediumEmphasis}`]: !disabled && emphasis === 'medium',
+                [`${buttonDisabledMediumEmphasis}`]: disabled && emphasis === 'medium',
+                [`${buttonGeneralMediumEmphasis}`]: emphasis === 'medium',
+                // Define low emphasis
+                [`${buttonEnabledLowEmphasis}`]: !disabled && emphasis === 'low',
+                [`${buttonDisabledLowEmphasis}`]: disabled && emphasis ==='low',
+                [`${buttonGenerealLowEmphasis}`]: emphasis === 'low',
 
-                //define low emphasis 
-                'text-gray-900': !disabled && emphasis === 'low',
-                'active:text-blue-700': !disabled && emphasis === 'low',
-                'bg-transparent': emphasis ==='low',           
-                'focus:bg-gray-100': emphasis === 'low',  
-                'focus:outline-none': emphasis === 'low',
             },
             className,
         ])} 
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index afa6387..97390a8 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Children } from "react";
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Button } from "../components/Button";
 
@@ -11,9 +11,20 @@ export default{
 
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
-export const Normal = Template.bind({});
-
-Normal.args = {
+export const High = Template.bind({});
+High.args = {
     emphasis: 'high',
-    children: ['Hello there'],
+    children: ['High'],
 };
+
+export const Medium = Template.bind({});
+Medium.args = {
+    emphasis: 'medium',
+    children: ['Medium'],
+};
+
+export const Low = Template.bind({});
+Low.args = {
+    emphasis:'low',
+    children:['Low'],
+};
\ No newline at end of file