feat(design-system): make button v3 size prop responsive [AR-53845]

.changeset/kind-facts-pick.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+Make `DsButtonV3` `size` prop responsive

packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss

@@ -83,3 +83,9 @@
 .onDarkColumnHeader {
 	color: var(--secondary-300);
 }
+
+.responsiveRow {
+	display: flex;
+	align-items: center;
+	gap: var(--sm);
+}

packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import classNames from 'classnames';
 import { fn } from 'storybook/test';
 import DsButtonV3 from './ds-button-v3';
+import { DsButtonV3 as DsButtonV3Wrapped } from './index';
 import {
 	type ButtonV3Color,
 	buttonV3Colors,
@@ -231,3 +232,22 @@ export const MatrixIcons: Story = {
 		</div>
 	),
 };
+
+export const ResponsiveSize: Story = {
+	parameters: { layout: 'centered' },
+	render: () => (
+		<div className={storyStyles.responsiveRow}>
+			<DsButtonV3Wrapped size={{ lg: 'large', md: 'small' }} icon="check_circle" onClick={fn()}>
+				lg: large / md: small
+			</DsButtonV3Wrapped>
+
+			<DsButtonV3Wrapped size={{ lg: 'medium', md: 'tiny' }} icon="check_circle" onClick={fn()}>
+				lg: medium / md: tiny
+			</DsButtonV3Wrapped>
+
+			<DsButtonV3Wrapped size="medium" icon="check_circle" onClick={fn()}>
+				static: medium
+			</DsButtonV3Wrapped>
+		</div>
+	),
+};

packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { DsIcon, type IconSize } from '../ds-icon';
 import { DsSpinner } from '../ds-spinner';
 import styles from './ds-button-v3.module.scss';
-import type { ButtonV3Size, DsButtonV3Props } from './ds-button-v3.types.ts';
+import type { ButtonV3Size, DsButtonV3BaseProps } from './ds-button-v3.types.ts';
 
 const iconSizeMap: Record<ButtonV3Size, IconSize> = Object.freeze({
 	large: 'small',
@@ -25,7 +25,7 @@ const DsButtonV3 = ({
 	selected = false,
 	type = 'button',
 	...rest
-}: DsButtonV3Props) => {
+}: DsButtonV3BaseProps) => {
 	const isIconOnly = icon !== undefined && !children;
 
 	return (

packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts

@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, Ref } from 'react';
 import type { IconType } from '../ds-icon';
+import type { ResponsiveValue } from '../../utils/responsive';
 
 export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
 export type ButtonV3Variant = (typeof buttonV3Variants)[number];
@@ -10,7 +11,7 @@ export type ButtonV3Color = (typeof buttonV3Colors)[number];
 export const buttonV3Sizes = ['large', 'medium', 'small', 'tiny'] as const;
 export type ButtonV3Size = (typeof buttonV3Sizes)[number];
 
-export interface DsButtonV3Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	ref?: Ref<HTMLButtonElement>;
 
 	/**
@@ -47,3 +48,11 @@ export interface DsButtonV3Props extends ButtonHTMLAttributes<HTMLButtonElement>
 	 */
 	loading?: boolean;
 }
+
+export interface DsButtonV3Props extends Omit<DsButtonV3BaseProps, 'size'> {
+	/**
+	 * Size of the button. Accepts a static value or a responsive object.
+	 * @default 'medium'
+	 */
+	size?: ResponsiveValue<ButtonV3Size>;
+}

packages/design-system/src/components/ds-button-v3/index.ts

@@ -1,2 +1,6 @@
-export { default as DsButtonV3 } from './ds-button-v3';
+import { withResponsiveProps } from '../../utils/responsive';
+import DsButtonV3Base from './ds-button-v3';
+
+export const DsButtonV3 = withResponsiveProps(DsButtonV3Base, ['size']);
+
 export * from './ds-button-v3.types';