From d3731ad5133af91c15560e0a58bb63e84f57c850 Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Thu, 20 Nov 2025 09:58:13 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=B2=D0=BD=D0=B5=D1=88=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=B2=D0=B8?= =?UTF-8?q?=D0=B4=D0=B0=20=D0=BA=D0=BE=D0=B4=D0=B0=20=D0=BB=D0=B8=D0=BD?= =?UTF-8?q?=D1=82=D0=B5=D1=80=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/Button/Button.module.scss | 42 ++++++--- src/shared/ui/Button/Button.stories.tsx | 116 ++++++++++++------------ src/shared/ui/Button/Button.tsx | 85 ++++++++--------- src/shared/ui/Button/index.ts | 7 +- 4 files changed, 139 insertions(+), 111 deletions(-) diff --git a/src/shared/ui/Button/Button.module.scss b/src/shared/ui/Button/Button.module.scss index 1157614..7fed480 100644 --- a/src/shared/ui/Button/Button.module.scss +++ b/src/shared/ui/Button/Button.module.scss @@ -1,18 +1,26 @@ .button { display: inline-flex; - align-items: center; justify-content: center; - border: none; - background: transparent; - cursor: pointer; - transition: all 0.3s ease; + align-items: center; + padding: 0; - outline: none; + font-family: var(--font-family-main); + border: none; + + background: transparent; + + outline: none; + + cursor: pointer; + + transition: all 0.3s ease; + &:disabled { - opacity: 0.5; cursor: not-allowed; + + opacity: 0.5; } // Variants @@ -22,33 +30,39 @@ } &.regular { - border-radius: 1em; padding: 0.5em 1em; + + border-radius: 1em; } // Sizes &.small { height: 40px; + font-size: 14px; } &.medium { height: 50px; + font-size: 18px; } &.large { height: 60px; + font-size: 24px; } // Color Schemes &.primary { $color-primary: var(--color-primary); - background-color: transparent; color: $color-primary; + border: 1px solid $color-primary; + background-color: transparent; + &:hover:not(:disabled) { background-color: var(--color-white); } @@ -56,22 +70,26 @@ &.secondary { $color-blue: var(--color-blue); - background-color: var(--color-white); color: $color-blue; - box-shadow: 0px 0px 15px rgb($color-blue / 10%); + + background-color: var(--color-white); + + box-shadow: 0 0 15px rgb($color-blue / 10%); } // Icon handling .icon { display: flex; - align-items: center; justify-content: center; + align-items: center; + width: 100%; height: 100%; svg { width: 40%; height: 40%; + object-fit: contain; } } diff --git a/src/shared/ui/Button/Button.stories.tsx b/src/shared/ui/Button/Button.stories.tsx index 78ea6ff..a025dd9 100644 --- a/src/shared/ui/Button/Button.stories.tsx +++ b/src/shared/ui/Button/Button.stories.tsx @@ -1,36 +1,38 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { Button } from './Button' import ChevronLeftIcon from '@/shared/assets/chevron--left.svg' +import { Button } from './Button' + +import type { Meta, StoryObj } from '@storybook/react' + const meta = { - title: 'Shared/Button', - component: Button, - parameters: { - layout: 'centered', + title: 'Shared/Button', + component: Button, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + variant: { + control: 'select', + options: ['round', 'regular'], + description: 'Вариант внешнего вида', }, - tags: ['autodocs'], - argTypes: { - variant: { - control: 'select', - options: ['round', 'regular'], - description: 'Вариант внешнего вида', - }, - size: { - control: 'select', - options: ['small', 'medium', 'large'], - description: 'Размер кнопки', - }, - colorScheme: { - control: 'select', - options: ['primary', 'secondary'], - description: 'Цветовая схема', - }, - disabled: { - control: 'boolean', - description: 'Активность кнопки', - }, - onClick: { action: 'clicked' }, + size: { + control: 'select', + options: ['small', 'medium', 'large'], + description: 'Размер кнопки', }, + colorScheme: { + control: 'select', + options: ['primary', 'secondary'], + description: 'Цветовая схема', + }, + disabled: { + control: 'boolean', + description: 'Активность кнопки', + }, + onClick: { action: 'clicked' }, + }, } satisfies Meta export default meta @@ -40,63 +42,63 @@ type Story = StoryObj * Базовая кнопка */ export const Default: Story = { - args: { - children: 'Submit', - variant: 'regular', - size: 'medium', - colorScheme: 'primary', - }, + args: { + children: 'Submit', + variant: 'regular', + size: 'medium', + colorScheme: 'primary', + }, } /** * Альтернативная цветовая схема */ export const SecondaryColorScheme: Story = { - args: { - children: 'Submit', - variant: 'regular', - size: 'medium', - colorScheme: 'secondary', - }, + args: { + children: 'Submit', + variant: 'regular', + size: 'medium', + colorScheme: 'secondary', + }, } /** * Маленькая кнопка */ export const Small: Story = { - args: { - children: 'Submit', - size: 'small', - }, + args: { + children: 'Submit', + size: 'small', + }, } /** * Большая кнопка */ export const Large: Story = { - args: { - children: 'Submit', - size: 'large', - }, + args: { + children: 'Submit', + size: 'large', + }, } /** * Кнопка с SVG иконкой (шеврон) */ export const WithIcon: Story = { - args: { - children: , - variant: 'round', - size: 'medium', - }, + args: { + children: , + variant: 'round', + size: 'medium', + }, } /** * Отключенная кнопка */ export const Disabled: Story = { - args: { - children: 'Submit', - disabled: true, - }, + args: { + children: 'Submit', + disabled: true, + }, } diff --git a/src/shared/ui/Button/Button.tsx b/src/shared/ui/Button/Button.tsx index 8eb1195..ab8c82f 100644 --- a/src/shared/ui/Button/Button.tsx +++ b/src/shared/ui/Button/Button.tsx @@ -1,27 +1,30 @@ -import { ButtonHTMLAttributes, memo, PropsWithChildren } from 'react' import classNames from 'classnames' +import { ButtonHTMLAttributes, memo, PropsWithChildren } from 'react' + import styles from './Button.module.scss' export type ButtonVariant = 'round' | 'regular' export type ButtonSize = 'small' | 'medium' | 'large' export type ButtonColorScheme = 'primary' | 'secondary' -export interface ButtonProps extends ButtonHTMLAttributes, PropsWithChildren { - /** - * Вариант внешнего вида кнопки - * @default 'round' - */ - variant?: ButtonVariant - /** - * Размер кнопки - * @default 'medium' - */ - size?: ButtonSize - /** - * Цветовая схема - * @default 'timeframe' - */ - colorScheme?: ButtonColorScheme +export interface ButtonProps + extends ButtonHTMLAttributes, + PropsWithChildren { + /** + * Вариант внешнего вида кнопки + * @default 'round' + */ + variant?: ButtonVariant + /** + * Размер кнопки + * @default 'medium' + */ + size?: ButtonSize + /** + * Цветовая схема + * @default 'timeframe' + */ + colorScheme?: ButtonColorScheme } /** @@ -29,32 +32,32 @@ export interface ButtonProps extends ButtonHTMLAttributes, Pr * Поддерживает различные варианты отображения, размеры и цветовые схемы. */ export const Button = memo((props: ButtonProps) => { - const { - className, - children, - variant = 'round', - size = 'medium', - colorScheme = 'primary', - disabled, - ...otherProps - } = props + const { + className, + children, + variant = 'round', + size = 'medium', + colorScheme = 'primary', + disabled, + ...otherProps + } = props - const mods: Record = { - [styles[variant]]: true, - [styles[size]]: true, - [styles[colorScheme]]: true, - } + const mods: Record = { + [styles[variant]]: true, + [styles[size]]: true, + [styles[colorScheme]]: true, + } - return ( - - ) + return ( + + ) }) Button.displayName = 'Button' diff --git a/src/shared/ui/Button/index.ts b/src/shared/ui/Button/index.ts index e69c4f3..754dcce 100644 --- a/src/shared/ui/Button/index.ts +++ b/src/shared/ui/Button/index.ts @@ -1,2 +1,7 @@ export { Button } from './Button' -export type { ButtonProps, ButtonVariant, ButtonSize, ButtonColorScheme } from './Button' +export type { + ButtonProps, + ButtonVariant, + ButtonSize, + ButtonColorScheme, +} from './Button'