@redneckz/wildless-cms-uni-blocks 0.8.20 → 0.8.22

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -48,10 +48,11 @@ export type StepsBlockContent = HeadlineCommonProps & {
    * @maxItems 5
    */
   steps?: Step[];
+  stepVersion?: BlockVersion;
   /** @title Кнопка */
   button?: ButtonWithIconProps;
   /**
-   * @title Размер шагов (моб.)
+   * @title Размер шагов
    * @default normal
    */
   size?: SizeVersion; // TODO: mobile content

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,5 +1,3 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-
 export type StyleType = {
   description: string;
   iconText: string;
@@ -8,42 +6,10 @@ export type StyleType = {
   dot: string;
 };
 
-export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    description: '!text-secondary-text text-l-light',
-    iconText: 'text-secondary-text',
-    iconBackground: 'bg-main-divider',
-    iconConnector: 'bg-secondary-light',
-    dot: 'bg-secondary-text',
-  },
-  secondary: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  gray: {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  transparent: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  '': {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
+export const STEPS_BLOCK_STYLE: StyleType = {
+  description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
+  iconText: 'text-white group-data-primary:text-secondary-text',
+  iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
+  iconConnector: 'bg-white group-data-primary:bg-secondary-light',
+  dot: 'bg-white/80 group-data-primary:bg-secondary-text',
 };

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+import { Text } from '../Text/Text';
 import { RadioButtonGroup } from './RadioButtonGroup';
 
 const items = [
@@ -15,11 +16,27 @@ const items = [
 export default {
   default: (
     <div>
-      <RadioButtonGroup
-        items={items}
-        checkedItem={'Аннуитетный'}
-        onChange={(text) => console.log('Выбран пункт меню: ', text)}
-      />
+      <div className="mb-5">
+        <Text color="text-secondary-text" font="font-light">
+          Горизонтальный
+        </Text>
+        <RadioButtonGroup
+          items={items}
+          checkedItem={'Аннуитетный'}
+          onChange={(text) => console.log('Выбран пункт меню: ', text)}
+        />
+      </div>
+      <div>
+        <Text color="text-secondary-text" font="font-light">
+          Вертикальный
+        </Text>
+        <RadioButtonGroup
+          items={items}
+          orientation="vertical"
+          checkedItem={'Аннуитетный'}
+          onChange={(text) => console.log('Выбран пункт меню: ', text)}
+        />
+      </div>
     </div>
   ),
 };

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { ListOrientation } from '../../model/ListOrientation';
 import { Checkbox } from '../Checkbox/Checkbox';
 
 export interface RadioButtonItem {
@@ -10,11 +11,17 @@ interface RadioButtonGroupProps {
   items?: RadioButtonItem[];
   checkedItem?: string;
   onChange?: (id: string) => void;
+  orientation?: ListOrientation;
 }
 
+const orientationStyleMap: Record<ListOrientation, string> = {
+  horizontal: 'gap-10',
+  vertical: 'flex-col gap-3',
+};
+
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
-  ({ items, checkedItem, onChange: onChangeCheckedItem }) => (
-    <div className="flex flex-col gap-3">
+  ({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (
+    <div className={`flex ${orientationStyleMap[orientation]}`}>
       {items?.map(({ id, text }) => (
         <Checkbox
           key={String(id)}