From 40b53166379c2500c2c8d34df2ad58b54617285e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalvis=20Kalni=C5=86=C5=A1?= Date: Thu, 12 Dec 2024 23:02:33 +0200 Subject: [PATCH] refactor(theme): style Button --- jsapp/js/components/common/button.stories.tsx | 150 ++++++++++-------- jsapp/js/components/drawer.es6 | 1 - jsapp/js/global.d.ts | 3 +- jsapp/js/theme/index.ts | 6 +- jsapp/js/theme/kobo/Button.module.css | 31 ++++ jsapp/js/theme/kobo/Button.ts | 58 +++++++ jsapp/js/theme/kobo/index.ts | 89 +++++++++++ 7 files changed, 267 insertions(+), 71 deletions(-) create mode 100644 jsapp/js/theme/kobo/Button.module.css create mode 100644 jsapp/js/theme/kobo/Button.ts create mode 100644 jsapp/js/theme/kobo/index.ts diff --git a/jsapp/js/components/common/button.stories.tsx b/jsapp/js/components/common/button.stories.tsx index d7664d36c3..024250e591 100644 --- a/jsapp/js/components/common/button.stories.tsx +++ b/jsapp/js/components/common/button.stories.tsx @@ -1,14 +1,37 @@ import React from 'react'; import type {ComponentStory, ComponentMeta} from '@storybook/react'; -import Button from './button'; -import type {ButtonType, ButtonSize, ButtonProps} from './button'; import type {TooltipAlignment} from './tooltip'; import {IconNames} from 'jsapp/fonts/k-icons'; import type {IconName} from 'jsapp/fonts/k-icons'; +import type {ButtonProps, MantineSize, PolymorphicComponentProps} from '@mantine/core'; +import {Button, MantineProvider} from '@mantine/core'; +import Icon from './icon'; +import '@mantine/core/styles.css'; +import {themeKobo} from 'jsapp/js/theme'; -const buttonTypes: ButtonType[] = ['primary', 'secondary', 'danger', 'secondary-danger', 'text']; +const buttonVariants: Array = [ + 'filled', + 'light', + // 'outline', + // 'white', + // 'subtle', + // 'default', + // 'gradient', -const buttonSizes: ButtonSize[] = ['s', 'm', 'l']; + //// Custom: + 'danger', + 'danger-secondary', + + 'transparent', +]; + +const buttonSizes: MantineSize[] = [ + // 'xs', + 'sm', + 'md', + 'lg', + // 'xl', +]; const tooltipPositions: TooltipAlignment[] = ['right', 'left', 'center']; @@ -16,9 +39,9 @@ export default { title: 'common/Button', component: Button, argTypes: { - type: { - description: 'Type of button', - options: buttonTypes, + variant: { + description: 'Variant of button', + options: buttonVariants, control: 'select', }, size: { @@ -26,7 +49,7 @@ export default { options: buttonSizes, control: 'radio', }, - startIcon: { + leftSection: { description: 'Icon on the beginning (please use only one of the icons)', options: Object.keys(IconNames), control: {type: 'select'}, @@ -57,57 +80,59 @@ export default { }, } as ComponentMeta; -const Template: ComponentStory = (args) => + + + + ); + }) + )) + ))} + + ); diff --git a/jsapp/js/components/drawer.es6 b/jsapp/js/components/drawer.es6 index 773275a77e..b4288d190d 100644 --- a/jsapp/js/components/drawer.es6 +++ b/jsapp/js/components/drawer.es6 @@ -69,7 +69,6 @@ const FormSidebar = observer( return ( <>