From 39f849980bd1192aa4a430b37df3041b57952802 Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Tue, 26 Sep 2023 18:47:12 +0300
Subject: [PATCH] feat(FormRow): add direction prop

---
 src/components/FormRow/FormRow.scss           | 31 ++++++++++++++-----
 src/components/FormRow/FormRow.tsx            |  3 +-
 .../FormRow/__stories__/FormRow.stories.tsx   |  6 ++++
 src/components/FormRow/types.ts               |  2 ++
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/FormRow/FormRow.scss b/src/components/FormRow/FormRow.scss
index e5ed7b1c..47a926f4 100644
--- a/src/components/FormRow/FormRow.scss
+++ b/src/components/FormRow/FormRow.scss
@@ -1,21 +1,38 @@
 @use '../variables';
 
-.#{variables.$ns}form-row {
+$block: '.#{variables.$ns}form-row';
+
+#{$block} {
     --gc-form-row-label-width: 172px;
     --gc-form-row-field-height: 28px;
 
-    margin-bottom: 20px;
-    align-items: flex-start;
     display: flex;
+    margin-bottom: 20px;
+
+    &_direction_row {
+        align-items: flex-start;
+
+        #{$block}__left {
+            min-height: var(--gc-form-row-field-height);
+            flex-shrink: 0;
+            width: var(--gc-form-row-label-width);
+            padding-right: 8px;
+        }
+    }
+
+    &_direction_column {
+        flex-direction: column;
+
+        #{$block}__left {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+    }
 
     &__left {
         display: flex;
         flex-flow: row;
-        min-height: var(--gc-form-row-field-height);
         box-sizing: border-box;
-        flex-shrink: 0;
-        width: var(--gc-form-row-label-width);
-        padding-right: 8px;
     }
 
     &__field-name {
diff --git a/src/components/FormRow/FormRow.tsx b/src/components/FormRow/FormRow.tsx
index f2cc06ef..5515d4c1 100644
--- a/src/components/FormRow/FormRow.tsx
+++ b/src/components/FormRow/FormRow.tsx
@@ -17,11 +17,12 @@ const FormRowComponent: FC<FormRowProps> = ({
     fieldId,
     required = false,
     children,
+    direction = 'row',
 }) => {
     const LabelComponent = fieldId ? 'label' : 'span';
 
     return (
-        <div className={b(null, className)}>
+        <div className={b({direction}, className)}>
             <div className={b('left')}>
                 <LabelComponent className={b('field-name')} htmlFor={fieldId ? fieldId : undefined}>
                     <span className={b('field-name-text')}>{label}</span>
diff --git a/src/components/FormRow/__stories__/FormRow.stories.tsx b/src/components/FormRow/__stories__/FormRow.stories.tsx
index 8842e7e4..0c64fabf 100644
--- a/src/components/FormRow/__stories__/FormRow.stories.tsx
+++ b/src/components/FormRow/__stories__/FormRow.stories.tsx
@@ -20,6 +20,7 @@ export default {
         label: 'Enter your name',
         fieldId,
         children: <TextInput id={fieldId} />,
+        direction: 'row',
     },
     argTypes: {
         children: argTypeReactNode,
@@ -88,3 +89,8 @@ WithHelpPopoverAndLongLabel.args = {
     ...WithLongLabel.args,
     ...WithHelpPopover.args,
 };
+
+export const ColumnDirection = Template.bind({});
+ColumnDirection.args = {
+    direction: 'column',
+};
diff --git a/src/components/FormRow/types.ts b/src/components/FormRow/types.ts
index e1431a0a..9ee965a1 100644
--- a/src/components/FormRow/types.ts
+++ b/src/components/FormRow/types.ts
@@ -13,6 +13,8 @@ export interface FormRowProps {
     /** Field component itself. `<FormRow.FieldDescription/>` could be used here
      * next to field component itself */
     children?: ReactNode;
+    /** Direction in which the elements are placed */
+    direction?: 'row' | 'column';
 }
 
 export type FormRowFieldDescriptionProps = PropsWithChildren<{}> &