From 78afec066bfa0ac19cee2d60f0665d42be98d038 Mon Sep 17 00:00:00 2001
From: Samad Yar Khan <smdyarkhan123@gmail.com>
Date: Sun, 10 Jul 2022 23:16:03 +0000
Subject: [PATCH] Add MultilineMedium and MultilineLarge Blok elements to the
 UIKit

---
 .../src/elements/PlainTextInputElement.tsx    | 40 ++++++++++++++++++-
 .../src/stories/Banner.stories.tsx            | 14 +++++++
 .../src/stories/Modal.stories.tsx             | 14 +++++++
 .../src/stories/payloads/input.ts             | 38 ++++++++++++++++++
 .../blocks/elements/PlainTextInputElement.ts  |  3 ++
 5 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx b/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
index 7394b605ed..2388f15492 100644
--- a/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
@@ -16,7 +16,45 @@ const PlainTextInputElement = ({
 }: PlainTextInputElementProps): ReactElement => {
   const [{ loading, value, error }, action] = useUiKitState(block, context);
 
-  if (block.multiline) {
+  if (block.multilineLarge) {
+    return (
+      <TextAreaInput
+        disabled={loading}
+        id={block.actionId}
+        name={block.actionId}
+        rows={30}
+        error={error}
+        value={value}
+        onChange={action}
+        placeholder={
+          block.placeholder
+            ? fromTextObjectToString(surfaceRenderer, block.placeholder, 0)
+            : undefined
+        }
+      />
+    );
+  }
+
+  if (block.multilineMedium) {
+    return (
+      <TextAreaInput
+        disabled={loading}
+        id={block.actionId}
+        name={block.actionId}
+        rows={15}
+        error={error}
+        value={value}
+        onChange={action}
+        placeholder={
+          block.placeholder
+            ? fromTextObjectToString(surfaceRenderer, block.placeholder, 0)
+            : undefined
+        }
+      />
+    );
+  }
+
+  if (block.multiline || block.multilineSmall) {
     return (
       <TextAreaInput
         disabled={loading}
diff --git a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx
index 956e29238b..d5023f0a5e 100644
--- a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx
+++ b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx
@@ -121,6 +121,20 @@ export const InputWithMultilinePlainTextInput = createStory(
   }
 );
 
+export const InputWithMediumMultilinePlainTextInput = createStory(
+  payloads.inputWithMediumMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
+export const InputWithLargeMultilinePlainTextInput = createStory(
+  payloads.inputWithLargeMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
 export const InputWithPlainTextInput = createStory(
   payloads.inputWithPlainTextInput,
   {
diff --git a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx
index ab4f63d95e..b5646b2f3d 100644
--- a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx
+++ b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx
@@ -162,6 +162,20 @@ export const InputWithMultilinePlainTextInput = createStory(
   }
 );
 
+export const InputWithMediumMultilinePlainTextInput = createStory(
+  payloads.inputWithMediumMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
+export const InputWithLargeMultilinePlainTextInput = createStory(
+  payloads.inputWithLargeMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
 export const InputWithPlainTextInput = createStory(
   payloads.inputWithPlainTextInput,
   {
diff --git a/packages/fuselage-ui-kit/src/stories/payloads/input.ts b/packages/fuselage-ui-kit/src/stories/payloads/input.ts
index b52911d3b1..dd255d1ba9 100644
--- a/packages/fuselage-ui-kit/src/stories/payloads/input.ts
+++ b/packages/fuselage-ui-kit/src/stories/payloads/input.ts
@@ -18,6 +18,44 @@ export const inputWithMultilinePlainTextInput: readonly UiKit.LayoutBlock[] = [
   },
 ] as const;
 
+export const inputWithMediumMultilinePlainTextInput: readonly UiKit.LayoutBlock[] =
+  [
+    {
+      type: 'input',
+      element: {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        type: 'plain_text_input',
+        multilineMedium: true,
+        actionId: 'input-0',
+      },
+      label: {
+        type: 'plain_text',
+        text: 'Label',
+        emoji: true,
+      },
+    },
+  ] as const;
+
+export const inputWithLargeMultilinePlainTextInput: readonly UiKit.LayoutBlock[] =
+  [
+    {
+      type: 'input',
+      element: {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        type: 'plain_text_input',
+        multilineLarge: true,
+        actionId: 'input-0',
+      },
+      label: {
+        type: 'plain_text',
+        text: 'Label',
+        emoji: true,
+      },
+    },
+  ] as const;
+
 export const inputWithPlainTextInput: readonly UiKit.LayoutBlock[] = [
   {
     type: 'input',
diff --git a/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts b/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
index c7e0e8e252..b58f4547da 100644
--- a/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
+++ b/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
@@ -8,4 +8,7 @@ export type PlainTextInputElement = Actionable<{
   multiline?: boolean;
   minLength?: number;
   maxLength?: number;
+  multilineLarge?: boolean;
+  multilineMedium?: boolean;
+  multilineSmall?: boolean;
 }>;