feat(OneOfTogglerCard): added new display toggler card

docs/spec.md

@@ -136,9 +136,9 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 
 #### OneOfParams
 
-| Property | Type                 | Required | Description |
-| :------- | :------------------- | :------: | :---------- |
-| toggler  | `'select'` `'radio'` |          | Switch type |
+| Property | Type                          | Required | Description |
+| :------- | :---------------------------- | :------: | :---------- |
+| toggler  | `'select'` `'radio'` `'card'` |          | Switch type |
 
 #### FileInput
 

src/lib/core/types/specs.ts

@@ -87,7 +87,7 @@ export interface ObjectSpec<LinkType = any> {
         order?: string[];
         link?: LinkType;
         oneOfParams?: {
-            toggler?: 'select' | 'radio';
+            toggler?: 'select' | 'radio' | 'card';
         };
         placeholder?: string;
     };

src/lib/kit/hooks/useOneOf/TogglerCard/TogglerCard.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}toggler-card {
+    width: 254px;
+    padding: 10px;
+    height: 88px;
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+    }
+
+    &__text {
+        margin-top: 12px;
+        display: block;
+        margin-right: 15px;
+        height: 36px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

src/lib/kit/hooks/useOneOf/TogglerCard/TogglerCard.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import {HelpPopover} from '@gravity-ui/components';
+import {Card, Text} from '@gravity-ui/uikit';
+
+import {block} from '../../../utils';
+
+import './TogglerCard.scss';
+
+const b = block('toggler-card');
+
+interface TogglerCardProps {
+    description?: string;
+    title: string;
+    text: string;
+    onOneOfChange: ([newValue]: string[]) => void;
+    disabled?: boolean;
+    value: string;
+    oneOfValue: string;
+}
+
+export const TogglerCard: React.FC<TogglerCardProps> = ({
+    description,
+    title,
+    text,
+    onOneOfChange,
+    disabled,
+    value,
+    oneOfValue,
+}) => {
+    const onClick = React.useCallback(() => {
+        onOneOfChange([value]);
+    }, [onOneOfChange, value]);
+
+    return (
+        <Card
+            onClick={onClick}
+            type="selection"
+            disabled={disabled ? oneOfValue !== value : disabled}
+            selected={oneOfValue === value}
+            size="m"
+            className={b()}
+        >
+            <div className={b('header')}>
+                <Text variant="subheader-2" ellipsis>
+                    {title}
+                </Text>
+                {description ? (
+                    <HelpPopover htmlContent={description} placement={['bottom', 'top']} />
+                ) : null}
+            </div>
+            <Text variant="body-1" color="secondary" className={b('text')}>
+                {text}
+            </Text>
+        </Card>
+    );
+};

src/lib/kit/hooks/useOneOf/TogglerCard/index.ts

@@ -0,0 +1 @@
+export * from './TogglerCard';

src/lib/kit/hooks/useOneOf/useOneOf.scss

@@ -8,5 +8,22 @@
                 max-width: unset;
             }
         }
+
+        &_card {
+            & + .#{$ns}group-indent {
+                & > .#{$ns}use-search:not(.#{$ns}group-indent) {
+                    padding-top: 0px;
+                    margin-top: 15px;
+                }
+            }
+        }
+    }
+
+    &__card {
+        display: flex;
+
+        & > :first-child {
+            margin-right: 8px;
+        }
     }
 }

src/lib/kit/hooks/useOneOf/useOneOf.tsx

@@ -6,6 +6,8 @@ import _ from 'lodash';
 import {ObjectIndependentInputProps} from '../../../core';
 import {block} from '../../utils';
 
+import {TogglerCard} from './TogglerCard';
+
 import './useOneOf.scss';
 
 const b = block('use-oneof');
@@ -68,17 +70,44 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         [spec.description, spec.viewSpec.order, specProperties],
     );
 
-    const selectToggler = React.useMemo(
-        () =>
+    const togglerType = React.useMemo(() => {
+        if (spec.viewSpec.oneOfParams?.toggler === 'card' && options.length < 3) {
+            return 'card';
+        }
+
+        if (
             spec.viewSpec.oneOfParams?.toggler !== 'radio' &&
             (spec.viewSpec.oneOfParams?.toggler === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)),
-        [options, spec.viewSpec.oneOfParams?.toggler],
-    );
+                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))
+        ) {
+            return 'select';
+        }
+
+        return 'radio';
+    }, [options, spec.viewSpec.oneOfParams?.toggler]);
 
     const togglerInput = React.useMemo(() => {
-        if (selectToggler) {
+        if (togglerType === 'card') {
+            return (
+                <div className={b('card')}>
+                    {options.map(({value}) => (
+                        <TogglerCard
+                            title={specProperties[value]?.viewSpec.layoutTitle || ''}
+                            disabled={spec.viewSpec.disabled}
+                            text={spec.description?.[value] || ''}
+                            description={specProperties[value]?.viewSpec.layoutDescription}
+                            onOneOfChange={onOneOfChange}
+                            value={value}
+                            key={value}
+                            oneOfValue={oneOfValue}
+                        />
+                    ))}
+                </div>
+            );
+        }
+
+        if (togglerType === 'select') {
             return (
                 <Select
                     width="max"
@@ -106,14 +135,23 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
                 ))}
             </RadioButton>
         );
-    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
+    }, [
+        togglerType,
+        oneOfValue,
+        spec.viewSpec.disabled,
+        name,
+        options,
+        onOneOfChange,
+        specProperties,
+    ]);
 
     const toggler = React.useMemo(() => {
         if (Layout) {
             return (
                 <div
                     className={b('toggler', {
-                        radio: !selectToggler,
+                        radio: togglerType === 'radio',
+                        card: togglerType === 'card',
                     })}
                 >
                     <Layout {...props}>{togglerInput}</Layout>
@@ -122,7 +160,7 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         }
 
         return <div>{togglerInput}</div>;
-    }, [Layout, togglerInput, selectToggler, props]);
+    }, [Layout, togglerInput, togglerType, props]);
 
     return {oneOfValue, specProperties, toggler, togglerInput};
 };

src/stories/ObjectMultiOneOf.stories.tsx

@@ -55,7 +55,13 @@ const spec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['items', 'viewSpec.type', 'viewSpec.itemLabel', 'viewSpec.table'];
+const excludeOptions = [
+    'items',
+    'viewSpec.type',
+    'viewSpec.itemLabel',
+    'viewSpec.table',
+    'viewSpec.oneOfParams',
+];
 
 const value = {
     person: {

src/stories/ObjectMultiOneOfFlat.stories.tsx

@@ -55,7 +55,13 @@ const spec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['items', 'viewSpec.type', 'viewSpec.itemLabel', 'viewSpec.table'];
+const excludeOptions = [
+    'items',
+    'viewSpec.type',
+    'viewSpec.itemLabel',
+    'viewSpec.table',
+    'viewSpec.oneOfParams',
+];
 
 const value = {
     person: {

src/stories/components/InputPreview/constants.ts

@@ -284,7 +284,7 @@ const oneOfParams: ObjectSpec = {
     properties: {
         toggler: {
             type: SpecTypes.String,
-            enum: ['―', 'radio', 'select'],
+            enum: ['―', 'radio', 'select', 'card'],
             viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Switch type'},
         },
     },