Bring back fieldSize for TextArea

Addresses RISDEV-212
digitalservicebund · Jan 13, 2024 · 46b95dd · elaydis · Jan 23, 2024 · 46b95dd
1 parent 464876b
commit 46b95dd
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 13 deletions.
diff --git a/frontend/src/components/DocumentUnitTexts.vue b/frontend/src/components/DocumentUnitTexts.vue
@@ -21,6 +21,7 @@ const data = computed(() =>
       aria: item.label,
       value: props.texts[item.name as keyof Texts],
       fieldType: item.fieldType,
+      fieldSize: item.fieldSize,
     }
   }),
 )
@@ -42,6 +43,7 @@ const data = computed(() =>
           :aria-label="item.aria"
           class="ml-2 pl-2 outline outline-2 outline-blue-900"
           editable
+          :field-size="item.fieldSize"
           :value="item.value"
           @update-value="emit('updateValue', [item.id, $event])"
         />

diff --git a/frontend/src/fields/caselaw/textFields.ts b/frontend/src/fields/caselaw/textFields.ts
@@ -1,16 +1,23 @@
 import TextAreaInput from "@/shared/components/input/TextAreaInput.vue"
 import TextInput from "@/shared/components/input/TextInput.vue"
+import { TextAreaInputAttributes } from "@/shared/components/input/types"
 
 function defineTextEntry(
   name: string,
   label: string,
   fieldType: typeof TextInput | typeof TextAreaInput,
+  fieldSize: TextAreaInputAttributes["fieldSize"] = "big",
 ) {
-  return { name, label, fieldType }
+  return {
+    name,
+    label,
+    fieldType,
+    ...(fieldType == TextAreaInput && { fieldSize }),
+  }
 }
 export const texts = [
   defineTextEntry("decisionName", "Entscheidungsname", TextInput),
-  defineTextEntry("headline", "Titelzeile", TextAreaInput),
+  defineTextEntry("headline", "Titelzeile", TextAreaInput, "small"),
   defineTextEntry("guidingPrinciple", "Leitsatz", TextAreaInput),
   defineTextEntry("headnote", "Orientierungssatz", TextAreaInput),
   defineTextEntry("tenor", "Tenor", TextAreaInput),

diff --git a/frontend/src/routes/kitchensink/index/textEditor.vue b/frontend/src/routes/kitchensink/index/textEditor.vue
@@ -10,20 +10,40 @@ import TextEditor from "@/shared/components/input/TextEditor.vue"
       Resize the window to see different views of text editor.
     </p>
 
-    <KitchensinkStory name="Editable">
+    <KitchensinkStory name="Editable big">
       <TextEditor
         aria-label="text editor"
         class="overflow-y-auto outline outline-2 outline-blue-900"
         editable
+        field-size="big"
         value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia quibusdam totam inventore quaerat consectetur, facere iure fugit dolorem quia pariatur."
       />
     </KitchensinkStory>
 
+    <KitchensinkStory name="Editable medium">
+      <TextEditor
+        aria-label="text editor"
+        class="overflow-y-auto outline outline-2 outline-blue-900"
+        editable
+        field-size="medium"
+        value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia."
+      />
+    </KitchensinkStory>
+
+    <KitchensinkStory name="Editable small">
+      <TextEditor
+        aria-label="text editor"
+        class="overflow-y-auto outline outline-2 outline-blue-900"
+        editable
+        field-size="small"
+        value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit."
+      />
+    </KitchensinkStory>
+
     <KitchensinkStory name="Not editable">
       <TextEditor
         aria-label="text editor"
         class="outline outline-2 outline-blue-900"
-        field-size="medium"
         value="This texteditor is disabled: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia quibusdam totam inventore quaerat consectetur, facere iure fugit dolorem quia pariatur."
       />
     </KitchensinkStory>

diff --git a/frontend/src/shared/components/input/FieldSize.ts b/frontend/src/shared/components/input/FieldSize.ts
diff --git a/frontend/src/shared/components/input/TextEditor.vue b/frontend/src/shared/components/input/TextEditor.vue
@@ -31,6 +31,7 @@ import { TableStyle } from "../../editor/tableStyle"
 import TextEditorButton, {
   EditorButton,
 } from "@/shared/components/input/TextEditorButton.vue"
+import { TextAreaInputAttributes } from "@/shared/components/input/types"
 import { useCollapsingMenuBar } from "@/shared/composables/useCollapsingMenuBar"
 import IconExpand from "~icons/ic/baseline-expand"
 import IconAlignJustify from "~icons/ic/baseline-format-align-justify"
@@ -50,12 +51,14 @@ interface Props {
   value?: string
   editable?: boolean
   ariaLabel?: string
+  fieldSize?: TextAreaInputAttributes["fieldSize"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
   value: undefined,
   editable: false,
   ariaLabel: "Editor Feld",
+  fieldSize: "medium",
 })
 
 const emit = defineEmits<{
@@ -247,8 +250,15 @@ const maxButtonEntries = computed(() =>
 
 const editorExpanded = ref(false)
 const editorSize = computed(() => {
-  if (props.editable) return editorExpanded.value ? "h-640" : "h-320"
-  else return ""
+  return editorExpanded.value
+    ? "h-640"
+    : props.fieldSize == "big"
+      ? "h-320"
+      : props.fieldSize == "medium"
+        ? "h-160"
+        : props.fieldSize == "small"
+          ? "h-96"
+          : undefined
 })
 const { collapsedButtons } = useCollapsingMenuBar(
   editorButtons,

diff --git a/frontend/src/shared/components/input/types.ts b/frontend/src/shared/components/input/types.ts
@@ -168,16 +168,17 @@ export interface CheckboxInputField extends BaseInputField {
 //TEXTAREA
 export type TextaraInputModelType = string
 
-export interface TextaraInputAttributes extends BaseInputAttributes {
+export interface TextAreaInputAttributes extends BaseInputAttributes {
   placeholder?: string
   readOnly?: boolean
   autosize?: boolean
   rows?: number
+  fieldSize: "big" | "medium" | "small"
 }
 
-export interface TextaraInputField extends BaseInputField {
+export interface TextAreaInputField extends BaseInputField {
   type: InputType.TEXTAREA
-  inputAttributes: TextaraInputAttributes
+  inputAttributes: TextAreaInputAttributes
 }
 
 export type InputField =
@@ -189,7 +190,7 @@ export type InputField =
   | DateChipsInputField
   | NestedInputField
   | ComboboxInputField
-  | TextaraInputField
+  | TextAreaInputField
 
 export type InputAttributes =
   | TextInputAttributes
@@ -198,7 +199,7 @@ export type InputAttributes =
   | NestedInputAttributes
   | DateAttributes
   | ComboboxAttributes
-  | TextaraInputAttributes
+  | TextAreaInputAttributes
 
 export type ModelType =
   | TextInputModelType

diff --git a/frontend/test/shared/components/input/textEditor.spec.ts b/frontend/test/shared/components/input/textEditor.spec.ts
@@ -39,7 +39,6 @@ describe("text editor", async () => {
     render(TextEditor, {
       props: {
         value: "Test Value",
-        fieldSize: "large",
         ariaLabel: "Test Editor Feld",
       },
       global: { plugins: [router] },
@@ -56,6 +55,20 @@ describe("text editor", async () => {
     expect(screen.getByTestId("Test Editor Feld")).toBeInTheDocument()
   })
 
+  test.each([
+    ["big", "h-320"],
+    ["medium", "h-160"],
+    ["small", "h-96"],
+    [undefined, "h-160"],
+  ])("renders %s field with correct class", async (a, expected) => {
+    render(TextEditor, {
+      props: { fieldSize: a },
+      global: { plugins: [router] },
+    })
+
+    expect(await screen.findByTestId("Editor Feld")).toHaveClass(expected)
+  })
+
   test("show buttons on focus", async () => {
     render(TextEditor, {
       props: {