WIP Add form styles

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss

@@ -0,0 +1,16 @@
+.form-field {
+    @apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 block w-full;
+
+    &--has-error {
+        @apply border-red-500;
+    }
+}
+
+.form-checkbox,
+.form-radio {
+    @apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-4 w-4 ;
+
+    &--has-error {
+        @apply border-red-500;
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss

@@ -20,6 +20,7 @@
     @import "components/cookie-consent";
     @import "components/calendar";
     @import "components/datepicker";
+    @import "components/forms";
     @import "components/herounit";
     @import "components/lightbox";
     @import "components/map";

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html

@@ -6,7 +6,8 @@
                 property="{element.identifier}"
                 id="{element.uniqueIdentifier}"
                 value="{element.properties.value}"
-                class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-6 w-6"
+                class="form-checkbox"
+                errorClass="form-checkbox--has-error"
                 additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
             />
             <span class="ml-2">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html

@@ -5,8 +5,8 @@
 				type="email"
 				property="{element.identifier}"
 				id="{element.uniqueIdentifier}"
-                class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
+                class="form-field"
-				errorClass="{element.properties.elementErrorClassAttribute}"
+                errorClass="form-field--has-error"
 				additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 		/>
 	</f:render>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html

@@ -5,12 +5,14 @@
             <f:form.checkbox
                     property="{element.identifier}"
                     id="{element.uniqueIdentifier}"
-                    class="{element.properties.elementClassAttribute}"
+                    class="form-checkbox"
+                    errorClass="form-checkbox--has-error"
                     value="{element.properties.value}"
-                    errorClass="{element.properties.elementErrorClassAttribute}"
                     additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
             />
-            <span class="ml-2">{formvh:translateElementProperty(element: element, property: 'label') -> f:format.raw()} <f:link.typolink parameter="{element.properties.pageUid}" target="_blank">{formvh:translateElementProperty(element: element, property: 'linkText')}</f:link.typolink><f:if condition="{element.required}"> <f:render partial="Field/Required" /></f:if></span>
+            <span class="ml-2">
+                {formvh:translateElementProperty(element: element, property: 'label') -> f:format.raw()} <f:link.typolink class="underline" parameter="{element.properties.pageUid}" target="_blank">{formvh:translateElementProperty(element: element, property: 'linkText')}</f:link.typolink><f:if condition="{element.required}"> <f:render partial="Field/Required" /></f:if>
+            </span>
         </label>
     </f:render>
 </formvh:renderRenderable>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html

@@ -10,7 +10,7 @@
                         multiple="1"
                         id="{element.uniqueIdentifier}-{idIterator.index}"
                         value="{value}"
-                        class="border-gray-400 focus:border-gray-800 h-6 w-6"
+                        class="form-checkbox"
                         additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
                     />
                     <span class="ml-2">{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html

@@ -6,10 +6,10 @@
 				<f:form.select
 						property="{element.identifier}"
 						id="{element.uniqueIdentifier}"
-						class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 w-full mt-1"
+                        class="form-field"
+                        errorClass="form-field--has-error"
 						options="{formvh:translateElementProperty(element: element, property: 'options')}"
 						multiple="multiple"
-						errorClass="form-multiselect-error"
 						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 						prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
 						prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
@@ -19,10 +19,10 @@
 				<f:form.select
 						property="{element.identifier}"
 						id="{element.uniqueIdentifier}"
-						class="{element.properties.elementClassAttribute} form-multiselect block w-full mt-1"
+                        class="form-field"
+                        errorClass="form-field--has-error"
 						options="{formvh:translateElementProperty(element: element, property: 'options')}"
 						multiple="multiple"
-                        errorClass="form-multiselect-error"
 						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 				/>
 			</f:else>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html

@@ -5,8 +5,8 @@
 				type="number"
 				property="{element.identifier}"
 				id="{element.uniqueIdentifier}"
-                class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
+                class="form-field"
-				errorClass="{element.properties.elementErrorClassAttribute}"
+                errorClass="form-field--has-error"
 				additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 		/>
 	</f:render>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html

@@ -9,8 +9,8 @@
                         property="{element.identifier}"
                         id="{element.uniqueIdentifier}-{idIterator.index}"
                         value="{value}"
-                        class="border-gray-400 focus:border-gray-800"
+                        class="form-radio"
-                        errorClass="form-radio-error"
+                        errorClass="form-radio--has-error"
                         additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
                     />
                     <span class="ml-2">{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}</span>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html

@@ -7,8 +7,8 @@
 						property="{element.identifier}"
 						id="{element.uniqueIdentifier}"
 						options="{formvh:translateElementProperty(element: element, property: 'options')}"
-						class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 w-full mt-1"
+                        class="form-field"
-						errorClass="form-select-error"
+                        errorClass="form-field--has-error"
 						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 						prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
 						prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
@@ -19,8 +19,8 @@
 						property="{element.identifier}"
 						id="{element.uniqueIdentifier}"
 						options="{formvh:translateElementProperty(element: element, property: 'options')}"
-						class="{element.properties.elementClassAttribute}  border-gray-400 focus:border-gray-800 w-full mt-1"
+                        class="form-field"
-                        errorClass="form-select-error"
+                        errorClass="form-field--has-error"
 						additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 				/>
 			</f:else>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html

@@ -5,8 +5,8 @@
 				type="tel"
 				property="{element.identifier}"
 				id="{element.uniqueIdentifier}"
-                class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
+                class="form-field"
-				errorClass="{element.properties.elementErrorClassAttribute}"
+                errorClass="form-field--has-error"
 				additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 		/>
 	</f:render>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html

@@ -4,8 +4,8 @@
 		<f:form.textfield
 			property="{element.identifier}"
 			id="{element.uniqueIdentifier}"
-			class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
+			class="form-field"
-			errorClass="form-input-error"
+			errorClass="form-field--has-error"
 			additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 		/>
 	</f:render>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html

@@ -4,10 +4,10 @@
 		<f:form.textarea
 			property="{element.identifier}"
 			id="{element.uniqueIdentifier}"
-			class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 mt-1 w-full"
+            class="form-field"
+            errorClass="form-field--has-error"
 			rows="{element.properties.rows}"
 			cols="{element.properties.cols}"
-			errorClass="form-textarea-error"
 			additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
 		/>
 	</f:render>