Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

ended styling button styles according design

Browse Source
This commit is contained in:
Maximus 2022-08-03 12:35:35 +03:00
parent 8f1b1d8c33
commit 14d034211a
2 changed files with 83 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/Button.tsx
View File

@ -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 */
@ -39,37 +92,19 @@ export const Button = ({
'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 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 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 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,
])}

21
src/stories/Button.stories.tsx
View File

@ -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'],
};