@true-engineering/true-react-common-ui-kit 4.0.0-alpha42 → 4.0.0-alpha43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha42",
+  "version": "4.0.0-alpha43",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,12 +1,20 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
+import { IExtendableProps } from '../../types';
 import { RadioButton } from './RadioButton';
 
+const RADIO_SIZES = [undefined, 'micro'] as const;
+
 export default {
   title: 'Controls/RadioButton',
   component: RadioButton,
 };
 
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface IRadioButtonSizes extends IExtendableProps<typeof RADIO_SIZES> {}
+}
+
 const options = ['one', 'two', 'three'];
 
 const Template: ComponentStory<typeof RadioButton> = (args) => {
@@ -34,11 +42,16 @@ export const Default = Template.bind({});
 
 Default.args = {
   children: 'Label',
+  size: undefined,
   // isChecked: false,
   isInvalid: false,
   isDisabled: false,
 };
 
+Default.argTypes = {
+  size: { options: [undefined, ...RADIO_SIZES], control: 'inline-radio' },
+};
+
 Default.parameters = {
   controls: {
     exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],

package/src/components/RadioButton/RadioButton.styles.ts

@@ -1,4 +1,5 @@
 import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IRadioButtonSizes } from './types';
 
 export const useStyles = createThemedStyles('RadioButton', {
   input: {
@@ -34,4 +35,4 @@ export const useStyles = createThemedStyles('RadioButton', {
   isInvalid: {},
 });
 
-export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles, IRadioButtonSizes>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,14 +1,19 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
+import { IRadioButtonSize } from './types';
 import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
 
 export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
   children?: ReactNode;
   value: Value;
   groupName: string;
+  size?: IRadioButtonSize;
   isChecked?: boolean;
   /** @default false */
   isDisabled?: boolean;
@@ -21,6 +26,7 @@ export function RadioButton<Value extends string>({
   children,
   value,
   groupName,
+  size,
   isChecked,
   isDisabled = false,
   isInvalid = false,
@@ -33,10 +39,11 @@ export function RadioButton<Value extends string>({
 
   return (
     <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
+      className={clsx(classes.label, isNotEmpty(size) && classes[size], {
+        [classes.isDisabled]: isDisabled,
+      })}
       htmlFor={`${groupName}--${value}`}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <input
         id={`${groupName}--${value}`}

package/src/components/RadioButton/types.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IRadioButtonSizes {}
+
+export type IRadioButtonSize = keyof IRadioButtonSizes;

package/src/components/TextButton/TextButton.stories.tsx

@@ -10,7 +10,7 @@ export default {
   component: TextButton,
   args: {
     children: 'Text Button',
-    icon: 'chevron-right-small',
+    icon: 'calendar',
     size: 'l',
     view: 'primary',
     isBold: false,