diff --git a/packages/components/src/components/buttons/IconButton/IconButton.stories.tsx b/packages/components/src/components/buttons/IconButton/IconButton.stories.tsx index 750696ebb822..c65091b3397d 100644 --- a/packages/components/src/components/buttons/IconButton/IconButton.stories.tsx +++ b/packages/components/src/components/buttons/IconButton/IconButton.stories.tsx @@ -12,19 +12,50 @@ export const IconButton: StoryObj = { args: { label: 'label', icon: 'ARROW_RIGHT_LONG', + variant: 'primary', + size: 'large', + isDisabled: false, + isLoading: false, }, argTypes: { label: { type: 'string', }, - bottomLabel: { - type: 'string', - }, icon: { options: variables.ICONS, control: { type: 'select', }, }, + bottomLabel: { + type: 'string', + }, + variant: { + control: { + type: 'radio', + }, + options: ['primary', 'secondary', 'tertiary', 'info', 'warning', 'destructive'], + }, + size: { + control: { + type: 'radio', + }, + options: ['large', 'medium', 'small', 'tiny'], + }, + iconSize: { + control: { + type: 'number', + }, + }, + isDisabled: { + control: { + type: 'boolean', + }, + }, + isLoading: { + control: { + type: 'boolean', + }, + }, }, }; diff --git a/packages/components/src/components/buttons/PinButton/PinButton.stories.tsx b/packages/components/src/components/buttons/PinButton/PinButton.stories.tsx index eb65c7c029ef..d117a77a9913 100644 --- a/packages/components/src/components/buttons/PinButton/PinButton.stories.tsx +++ b/packages/components/src/components/buttons/PinButton/PinButton.stories.tsx @@ -7,4 +7,22 @@ const meta: Meta = { } as Meta; export default meta; -export const PinButton: StoryObj = {}; +export const PinButton: StoryObj = { + args: { + 'data-value': '1', + }, + argTypes: { + 'data-value': { + control: { + type: 'text', + }, + }, + onClick: { + table: { + type: { + summary: 'React.MouseEventHandler | undefined', + }, + }, + }, + }, +}; diff --git a/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx b/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx index fdbe4a7f4eca..c7c2c590a1e4 100644 --- a/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx +++ b/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { TextButton as TextButtonComponent, TextButtonProps } from './TextButton'; +import { variables } from '../../../config'; const meta: Meta = { title: 'Buttons/TextButton', @@ -10,5 +11,52 @@ export default meta; export const TextButton: StoryObj = { args: { children: 'Button label', + iconAlignment: 'left', + size: 'large', + isDisabled: false, + isLoading: false, + }, + argTypes: { + children: { + table: { + type: { + summary: 'ReactNode', + }, + }, + }, + icon: { + options: { + 'No icon': null, + ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}), + }, + control: { + type: 'select', + }, + }, + iconAlignment: { + control: { + type: 'radio', + }, + options: ['left', 'right'], + }, + size: { + control: { + type: 'radio', + }, + options: ['large', 'medium', 'small', 'tiny'], + }, + isDisabled: { + control: { + type: 'boolean', + }, + }, + isLoading: { + control: { + type: 'boolean', + }, + }, + title: { + control: { type: 'text' }, + }, }, }; diff --git a/packages/components/src/components/buttons/TextButton/TextButton.tsx b/packages/components/src/components/buttons/TextButton/TextButton.tsx index 63be78f52ab6..61689d56eee7 100644 --- a/packages/components/src/components/buttons/TextButton/TextButton.tsx +++ b/packages/components/src/components/buttons/TextButton/TextButton.tsx @@ -17,7 +17,7 @@ const TextButtonContainer = styled.button<{ flex-direction: ${({ $iconAlignment }) => $iconAlignment === 'right' && 'row-reverse'}; gap: ${({ $hasIcon }) => $hasIcon && spacingsPx.xs}; height: ${({ $size: size }) => (size === 'small' ? 22 : 26)}px; - padding: 4px; + padding: ${spacingsPx.xxs}; border: 1px solid transparent; border-radius: ${borders.radii.xxs}; background: none; @@ -47,7 +47,7 @@ const TextButtonContainer = styled.button<{ &:disabled { color: ${({ theme }) => theme.textDisabled}; - cursor: default; + cursor: not-allowed; path { fill: ${({ theme }) => theme.iconDisabled}; diff --git a/packages/components/src/components/buttons/TooltipButton/TooltipButton.stories.tsx b/packages/components/src/components/buttons/TooltipButton/TooltipButton.stories.tsx index 65a16472857b..0ad5bdb63fec 100644 --- a/packages/components/src/components/buttons/TooltipButton/TooltipButton.stories.tsx +++ b/packages/components/src/components/buttons/TooltipButton/TooltipButton.stories.tsx @@ -1,5 +1,8 @@ import { Meta, StoryObj } from '@storybook/react'; import { TooltipButton as TooltipButtonComponent } from './TooltipButton'; +import { getFramePropsStory } from '../../common/frameProps'; +import { allowedButtonFrameProps } from '../Button/Button'; +import { variables } from '../../../config'; const meta: Meta = { title: 'Buttons/TooltipButton', @@ -10,7 +13,81 @@ export default meta; export const TooltipButton: StoryObj = { args: { children: 'Button', + variant: 'primary', + size: 'medium', isDisabled: true, + isLoading: false, + isFullWidth: false, + iconAlignment: 'left', + title: 'Button title', tooltipContent: 'Example tooltip', + ...getFramePropsStory(allowedButtonFrameProps).args, + }, + argTypes: { + children: { + table: { + type: { + summary: 'ReactNode', + }, + }, + }, + variant: { + control: { + type: 'radio', + }, + options: ['primary', 'secondary', 'tertiary', 'info', 'warning', 'destructive'], + }, + size: { + control: { + type: 'radio', + }, + options: ['large', 'medium', 'small', 'tiny'], + }, + isDisabled: { + control: { + type: 'boolean', + }, + }, + isLoading: { + control: { + type: 'boolean', + }, + }, + isFullWidth: { + control: { + type: 'boolean', + }, + }, + icon: { + options: { + 'No icon': null, + ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}), + }, + control: { + type: 'select', + }, + }, + iconSize: { + control: { + type: 'number', + }, + }, + iconAlignment: { + control: { + type: 'radio', + }, + options: ['left', 'right'], + }, + title: { + control: { type: 'text' }, + }, + tooltipContent: { + table: { + type: { + summary: 'ReactNode', + }, + }, + }, + ...getFramePropsStory(allowedButtonFrameProps).argTypes, }, }; diff --git a/packages/components/src/components/buttons/TooltipButton/TooltipButton.tsx b/packages/components/src/components/buttons/TooltipButton/TooltipButton.tsx index 083998c352f3..fbb0b7157e16 100644 --- a/packages/components/src/components/buttons/TooltipButton/TooltipButton.tsx +++ b/packages/components/src/components/buttons/TooltipButton/TooltipButton.tsx @@ -3,17 +3,17 @@ import styled, { useTheme } from 'styled-components'; import { Icon } from '../../assets/Icon/Icon'; import { Tooltip } from '../../Tooltip/Tooltip'; import { Button, ButtonProps } from '../Button/Button'; +import { spacingsPx } from '@trezor/theme'; const StyledButton = styled(Button)` position: relative; - padding-left: 32px; - padding-right: 32px; + padding-inline: ${spacingsPx.xxl}; `; const InfoIcon = styled(Icon)` position: absolute; - top: 4px; - right: 4px; + top: ${spacingsPx.xxs}; + right: ${spacingsPx.xxs}; `; export interface TooltipButtonProps extends ButtonProps { @@ -22,7 +22,7 @@ export interface TooltipButtonProps extends ButtonProps { export const TooltipButton = ({ tooltipContent, - isDisabled, + isDisabled = false, children, ...buttonProps }: TooltipButtonProps) => { diff --git a/packages/components/src/components/form/Textarea/Textarea.stories.tsx b/packages/components/src/components/form/Textarea/Textarea.stories.tsx index 5164221c1a2f..c023f05dc09c 100644 --- a/packages/components/src/components/form/Textarea/Textarea.stories.tsx +++ b/packages/components/src/components/form/Textarea/Textarea.stories.tsx @@ -21,17 +21,24 @@ const Component = ({ ...args }) => { export const Textarea: StoryObj = { render: Component, args: { + isDisabled: false, label: 'Label', rows: 5, maxLength: 500, characterCount: true, + hasBottomPadding: true, }, argTypes: { + isDisabled: { + control: { + type: 'boolean', + }, + }, label: { - control: 'text', + control: { type: 'text' }, }, placeholder: { - control: 'text', + control: { type: 'text' }, }, rows: { control: { @@ -41,23 +48,48 @@ export const Textarea: StoryObj = { type: 'range', }, }, + maxLength: { + control: { type: 'number' }, + }, labelHoverRight: { - control: 'text', + control: { type: 'text' }, }, labelRight: { - control: 'text', + control: { type: 'text' }, }, bottomText: { - control: 'text', + control: { type: 'text' }, }, innerRef: { - control: false, + table: { + type: { + summary: 'Ref', + }, + }, }, value: { - control: false, + control: { type: 'text' }, }, characterCount: { - control: 'boolean', + control: { + type: 'object', + }, + table: { + type: { + summary: 'boolean | { current: number | undefined; max: number }', + }, + }, + }, + inputState: { + control: { + type: 'radio', + }, + options: [null, 'warning', 'error'], + }, + hasBottomPadding: { + control: { + type: 'boolean', + }, }, }, }; diff --git a/packages/components/src/components/form/Textarea/Textarea.tsx b/packages/components/src/components/form/Textarea/Textarea.tsx index b6d0470bb517..829d50b078c1 100644 --- a/packages/components/src/components/form/Textarea/Textarea.tsx +++ b/packages/components/src/components/form/Textarea/Textarea.tsx @@ -55,6 +55,11 @@ const StyledTextarea = styled.textarea<{ $inputState?: InputState; $elevation: E border: none; resize: none; white-space: pre-wrap; + + &:disabled { + cursor: not-allowed; + pointer-events: auto; + } `; const TextareaLabel = styled(Label)` @@ -91,7 +96,7 @@ export const Textarea = ({ value, maxLength, labelHoverRight, - isDisabled, + isDisabled = false, innerRef, label, inputState,