feat: add row_verbose layout (#7)

Author: amje

src/lib/kit/components/Layouts/Row/Row.scss

@@ -54,8 +54,19 @@
 
     &__right {
         display: flex;
+        flex-direction: column;
         flex-grow: 1;
         margin-left: 15px;
+
+        &-inner {
+            display: flex;
+        }
+    }
+
+    &__description {
+        margin-top: 10px;
+        color: var(--yc-color-text-secondary);
+        word-break: break-word;
     }
 
     &__remove-button {

src/lib/kit/components/Layouts/Row/Row.tsx

@@ -18,13 +18,18 @@ import './Row.scss';
 
 const b = block('row');
 
-export const Row = <T extends FieldValue, S extends Spec>({
+interface RowProps {
+    verboseDescription?: boolean;
+}
+
+const RowBase = <T extends FieldValue, S extends Spec>({
     name,
     spec,
     input,
     meta,
+    verboseDescription,
     children,
-}: LayoutProps<T, S>) => {
+}: LayoutProps<T, S> & RowProps) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
 
     return (
@@ -35,7 +40,7 @@ export const Row = <T extends FieldValue, S extends Spec>({
                         {spec.viewSpec.layoutTitle}
                         {spec.required && <span className={b('required-mark')}>*</span>}
                     </div>
-                    {spec.viewSpec.layoutDescription ? (
+                    {!verboseDescription && spec.viewSpec.layoutDescription ? (
                         <div className={b('note')}>
                             <HelpPopover
                                 htmlContent={spec.viewSpec.layoutDescription}
@@ -46,19 +51,35 @@ export const Row = <T extends FieldValue, S extends Spec>({
                 </div>
             </div>
             <div className={b('right')}>
-                <ErrorWrapper
-                    name={name}
-                    meta={meta}
-                    withoutChildErrorStyles={isArraySpec(spec) || isObjectSpec(spec)}
-                >
-                    {children}
-                </ErrorWrapper>
-                {arrayItem ? (
-                    <Button view="flat" className={b('remove-button')} onClick={input.onDrop}>
-                        <Icon data={Xmark} size={16} />
-                    </Button>
+                <div className={b('right-inner')}>
+                    <ErrorWrapper
+                        name={name}
+                        meta={meta}
+                        withoutChildErrorStyles={isArraySpec(spec) || isObjectSpec(spec)}
+                    >
+                        {children}
+                    </ErrorWrapper>
+                    {arrayItem ? (
+                        <Button view="flat" className={b('remove-button')} onClick={input.onDrop}>
+                            <Icon data={Xmark} size={16} />
+                        </Button>
+                    ) : null}
+                </div>
+                {verboseDescription && spec.viewSpec.layoutDescription ? (
+                    <div
+                        className={b('description')}
+                        dangerouslySetInnerHTML={{__html: spec.viewSpec.layoutDescription}}
+                    />
                 ) : null}
             </div>
         </div>
     );
 };
+
+export const Row = <T extends FieldValue, S extends Spec>(props: LayoutProps<T, S>) => (
+    <RowBase {...props} />
+);
+
+export const RowVerbose = <T extends FieldValue, S extends Spec>(props: LayoutProps<T, S>) => (
+    <RowBase verboseDescription {...props} />
+);

src/lib/kit/constants/config.tsx

@@ -28,6 +28,7 @@ import {
     OneOfView,
     Row,
     Row2,
+    RowVerbose,
     Secret,
     Section,
     Section2,
@@ -76,6 +77,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -96,6 +98,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
         },
         validators: {
@@ -108,6 +111,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -124,6 +128,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -149,6 +154,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
             transparent: Transparent,
             section: Section,