From 4f78ed43437b12304666e9ff66cfb42eb9c4165e Mon Sep 17 00:00:00 2001
From: tudi2d <phugenroth@googlemail.com>
Date: Mon, 30 Mar 2020 18:14:39 +0200
Subject: [PATCH 1/2] Set character limits for user input fields

---
 src/components/Tags/TagsSelect.tsx                |  2 +-
 .../Events/Content/EventsCreate/EventsCreate.tsx  |  3 ++-
 src/pages/Howto/Content/Common/Howto.form.tsx     | 15 +++++++--------
 src/pages/Howto/Content/Common/HowtoStep.form.tsx |  6 ++++--
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Tags/TagsSelect.tsx b/src/components/Tags/TagsSelect.tsx
index 8ff4df06ad..eb52d7d501 100644
--- a/src/components/Tags/TagsSelect.tsx
+++ b/src/components/Tags/TagsSelect.tsx
@@ -137,5 +137,5 @@ TagsSelect.defaultProps = {
   value: {},
   category: undefined,
   styleVariant: 'selector',
-  placeholder: 'Select tags - 4 maximum',
+  placeholder: 'Select tags (max 4)',
 }
diff --git a/src/pages/Events/Content/EventsCreate/EventsCreate.tsx b/src/pages/Events/Content/EventsCreate/EventsCreate.tsx
index ed6c48bb57..920843448e 100644
--- a/src/pages/Events/Content/EventsCreate/EventsCreate.tsx
+++ b/src/pages/Events/Content/EventsCreate/EventsCreate.tsx
@@ -159,7 +159,8 @@ export class EventsCreate extends React.Component<IProps, IState> {
                           validate={value => this.validateTitle(value)}
                           validateFields={[]}
                           component={InputField}
-                          placeholder="Title of your event"
+                          maxLength="140"
+                          placeholder="Title of your event (max 140 characters)"
                         />
                       </Flex>
                       <Flex
diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
index 41d62079be..471dcd17f3 100644
--- a/src/pages/Howto/Content/Common/Howto.form.tsx
+++ b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -229,14 +229,12 @@ export class HowtoForm extends React.Component<IProps, IState> {
                                     : false
                                 }
                                 component={InputField}
-                                placeholder="Make a chair from...
-                            "
+                                maxLength="50"
+                                placeholder="Make a chair from.. (max 50 characters)"
                               />
                             </Flex>
                             <Flex flexDirection={'column'} mb={3}>
-                              <Label>
-                                Select tags for your How-to (max 4) *
-                              </Label>
+                              <Label>Select tags for your How-to*</Label>
                               <Field
                                 name="tags"
                                 component={TagsSelectField}
@@ -255,7 +253,7 @@ export class HowtoForm extends React.Component<IProps, IState> {
                                 options={TIME_OPTIONS}
                                 component={SelectField}
                                 data-cy="time-select"
-                                placeholder="How much time? *"
+                                placeholder="How much time?"
                               />
                             </Flex>
                             <Flex flexDirection={'column'} mb={3}>
@@ -271,7 +269,7 @@ export class HowtoForm extends React.Component<IProps, IState> {
                                 validateFields={[]}
                                 component={SelectField}
                                 options={DIFFICULTY_OPTIONS}
-                                placeholder="How hard is it? *"
+                                placeholder="How hard is it?"
                               />
                             </Flex>
                             <Flex flexDirection={'column'} mb={3}>
@@ -290,7 +288,8 @@ export class HowtoForm extends React.Component<IProps, IState> {
                                   flex: 1,
                                   minHeight: '150px',
                                 }}
-                                placeholder="Introduction to your How-To, keep it to 100 words please! *"
+                                maxLength="700"
+                                placeholder="Introduction to your How-To (max 700 characters)"
                               />
                             </Flex>
                             <Label htmlFor="description">
diff --git a/src/pages/Howto/Content/Common/HowtoStep.form.tsx b/src/pages/Howto/Content/Common/HowtoStep.form.tsx
index 11918d09cd..9f324073f5 100644
--- a/src/pages/Howto/Content/Common/HowtoStep.form.tsx
+++ b/src/pages/Howto/Content/Common/HowtoStep.form.tsx
@@ -111,7 +111,8 @@ class HowtoStep extends Component<IProps, IState> {
             name={`${step}.title`}
             data-cy="step-title"
             component={InputField}
-            placeholder="Title of this step"
+            placeholder="Title of this step (max 30 characters)"
+            maxLength="30"
             validate={required}
             validateFields={[]}
           />
@@ -120,7 +121,8 @@ class HowtoStep extends Component<IProps, IState> {
           <Label htmlFor={`${step}.text`}>Description of this step *</Label>
           <Field
             name={`${step}.text`}
-            placeholder="Description of this step"
+            placeholder="Explain what you are doing in this step. if it gets to long break it into 2 steps (max 400 characters)"
+            maxLength="400"
             data-cy="step-description"
             component={TextAreaField}
             style={{ resize: 'vertical', height: '300px' }}

From b0ec80c1c86a42d096195592de6cab0508f69085 Mon Sep 17 00:00:00 2001
From: Benjamin Gammaire <benjamin.gammaire@gmail.com>
Date: Tue, 31 Mar 2020 14:54:30 +0100
Subject: [PATCH 2/2] invert intro description & how to step maxLength value

---
 src/pages/Howto/Content/Common/Howto.form.tsx     | 4 ++--
 src/pages/Howto/Content/Common/HowtoStep.form.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
index 471dcd17f3..a8ab3d45d8 100644
--- a/src/pages/Howto/Content/Common/Howto.form.tsx
+++ b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -288,8 +288,8 @@ export class HowtoForm extends React.Component<IProps, IState> {
                                   flex: 1,
                                   minHeight: '150px',
                                 }}
-                                maxLength="700"
-                                placeholder="Introduction to your How-To (max 700 characters)"
+                                maxLength="400"
+                                placeholder="Introduction to your How-To (max 400 characters)"
                               />
                             </Flex>
                             <Label htmlFor="description">
diff --git a/src/pages/Howto/Content/Common/HowtoStep.form.tsx b/src/pages/Howto/Content/Common/HowtoStep.form.tsx
index 9f324073f5..17fa02741e 100644
--- a/src/pages/Howto/Content/Common/HowtoStep.form.tsx
+++ b/src/pages/Howto/Content/Common/HowtoStep.form.tsx
@@ -121,8 +121,8 @@ class HowtoStep extends Component<IProps, IState> {
           <Label htmlFor={`${step}.text`}>Description of this step *</Label>
           <Field
             name={`${step}.text`}
-            placeholder="Explain what you are doing in this step. if it gets to long break it into 2 steps (max 400 characters)"
-            maxLength="400"
+            placeholder="Explain what you are doing in this step. if it gets to long break it into 2 steps (max 700 characters)"
+            maxLength="700"
             data-cy="step-description"
             component={TextAreaField}
             style={{ resize: 'vertical', height: '300px' }}