From 49ee5885ab87ad89efd38ad0001e165e0e2aae7d Mon Sep 17 00:00:00 2001
From: Julia Gruber <jg@studiomitte.com>
Date: Thu, 11 Apr 2024 21:31:53 +0100
Subject: [PATCH] [TASK] overwrite form styling

---
 assets/scss/base/_global.scss                 |  9 ++++++--
 .../TypoScript/Form/setup.typoscript          |  2 +-
 .../_LandingPage/Yaml/FormElements/Form.yaml  |  2 ++
 .../ProductLaunch/Pages/Default.html          |  1 -
 .../Content/FormFormframework.html            |  8 +++++--
 .../_LandingPage/Layouts/Default.html         |  2 +-
 .../_LandingPage/Partials/Forms/Page.html     |  8 +++++++
 tailwind.config.js                            | 23 +++++++++++++++----
 8 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Forms/Page.html

diff --git a/assets/scss/base/_global.scss b/assets/scss/base/_global.scss
index 0eb6361..5892b76 100644
--- a/assets/scss/base/_global.scss
+++ b/assets/scss/base/_global.scss
@@ -44,7 +44,7 @@ html {
         @apply text-5xl font-bold font-heading block;
     }
 
-    .heading-xl, form h2 {
+    .heading-xl {
         @apply text-3xl font-bold font-heading block;
     }
 
@@ -58,7 +58,6 @@ html {
     h4,
     h5,
     span {
-        @apply mb-1;
         &.default {
             @apply text-lg font-bold font-heading block;
         }
@@ -108,6 +107,7 @@ html {
         &-label {
             @apply inline-block mb-1 font-bold;
         }
+
         &-text {
             @apply block mt-1 text-xs;
         }
@@ -115,17 +115,21 @@ html {
         &-control {
             @apply bg-white shadow appearance-none rounded w-full py-2 px-3 text-black leading-tight focus:outline-none focus:ring-2 resize-none;
         }
+
         &-check {
             &-label {
                 @apply flex items-center gap-2;
             }
         }
+
         &-checkbox {
             @apply rounded h-5 w-5 accent-secondary-500;
         }
+
         &-radio {
             @apply h-5 w-5 accent-secondary-500;
         }
+
         &-group {
             @apply mb-4 last:mb-0;
         }
@@ -140,6 +144,7 @@ html {
     [type="file"] {
         @apply text-primarytext;
     }
+
     [type="file"]::-webkit-file-upload-button {
         @extend .btn;
         @extend .btn-primary;
diff --git a/local_packages/success/Configuration/Sets/_LandingPage/TypoScript/Form/setup.typoscript b/local_packages/success/Configuration/Sets/_LandingPage/TypoScript/Form/setup.typoscript
index baaab94..c4597ae 100644
--- a/local_packages/success/Configuration/Sets/_LandingPage/TypoScript/Form/setup.typoscript
+++ b/local_packages/success/Configuration/Sets/_LandingPage/TypoScript/Form/setup.typoscript
@@ -4,4 +4,4 @@ plugin.tx_form {
             110 = EXT:success/Configuration/Sets/_LandingPage/Yaml/FormSetup.yaml
         }
     }
-}
+}
\ No newline at end of file
diff --git a/local_packages/success/Configuration/Sets/_LandingPage/Yaml/FormElements/Form.yaml b/local_packages/success/Configuration/Sets/_LandingPage/Yaml/FormElements/Form.yaml
index 13c94ad..bb60798 100644
--- a/local_packages/success/Configuration/Sets/_LandingPage/Yaml/FormElements/Form.yaml
+++ b/local_packages/success/Configuration/Sets/_LandingPage/Yaml/FormElements/Form.yaml
@@ -3,6 +3,8 @@ prototypes:
     formElementsDefinition:
       Form:
         renderingOptions:
+          partialRootPaths:
+            20: 'EXT:success/Resources/Private/Templates/_LandingPage/Partials/Forms/'
           translation:
             translationFiles:
               10: 'EXT:success/Resources/Private/Language/locallang_form.xlf'
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html
index bba7443..7357a34 100644
--- a/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html
+++ b/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html
@@ -24,5 +24,4 @@
     </main>
     <f:render partial="Footer" arguments="{_all}" />
     <f:render partial="Page/Modal" />
-    <span class="heading-xxl heading-xl heading-lg form-group form-label form-text"></span>
 </html>
diff --git a/local_packages/success/Resources/Private/Templates/_LandingPage/Content/FormFormframework.html b/local_packages/success/Resources/Private/Templates/_LandingPage/Content/FormFormframework.html
index 65b9603..f119cae 100644
--- a/local_packages/success/Resources/Private/Templates/_LandingPage/Content/FormFormframework.html
+++ b/local_packages/success/Resources/Private/Templates/_LandingPage/Content/FormFormframework.html
@@ -5,8 +5,12 @@
 
 <f:layout name="Default"/>
 <f:section name="Main">
-    <div class="container px-5 mx-auto py-12 max-w-screen-md">
-        <f:cObject typoscriptObjectPath="tt_content.form_formframework.20" data="{rawData}"/>
+    <div class="container px-5 mx-auto max-w-screen-md">
+        <f:render partial="Content/Header"
+                  arguments="{headerLayout: data.header_layout, headerStyle: data.header_style, header: data.header}"/>
+        <div class="mt-5">
+            <f:cObject typoscriptObjectPath="tt_content.form_formframework.20" data="{rawData}"/>
+        </div>
     </div>
 </f:section>
 </html>
diff --git a/local_packages/success/Resources/Private/Templates/_LandingPage/Layouts/Default.html b/local_packages/success/Resources/Private/Templates/_LandingPage/Layouts/Default.html
index 8cc280c..c9d8898 100644
--- a/local_packages/success/Resources/Private/Templates/_LandingPage/Layouts/Default.html
+++ b/local_packages/success/Resources/Private/Templates/_LandingPage/Layouts/Default.html
@@ -14,7 +14,7 @@
     <f:defaultCase></f:defaultCase>
 </f:switch>
 
-<div id="c{data.uid}" class="{background} space-before-{data.space_before_class} space-before-{data.space_after_class}">
+<div id="c{data.uid}" class="{background} space-before-{data.space_before_class} space-after-{data.space_after_class}">
     <f:render section="Main" />
 </div>
 </html>
diff --git a/local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Forms/Page.html b/local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Forms/Page.html
new file mode 100644
index 0000000..e440793
--- /dev/null
+++ b/local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Forms/Page.html
@@ -0,0 +1,8 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{page}">
+
+    <f:for each="{page.elements}" as="element">
+        <f:render partial="{element.templateName}" arguments="{element: element}" />
+    </f:for>
+</formvh:renderRenderable>
+</html>
diff --git a/tailwind.config.js b/tailwind.config.js
index f6ab863..c188bdb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,10 +45,23 @@ export default {
       lighttext: 'var(--color-lighttext)',
     },
     extend: {},
-    safelist: [
-      'heading-xxl',
-      'heading-xl',
-      'heading-lg',
-    ]
   },
+  safelist: [
+    'heading-xxl',
+    'heading-xl',
+    'heading-lg',
+    'space-before-extra-small',
+    'space-before-small',
+    'space-before-medium',
+    'space-before-large',
+    'space-before-extra-large',
+    'space-after-extra-small',
+    'space-after-small',
+    'space-after-medium',
+    'space-after-large',
+    'space-after-extra-large',
+    'form-group',
+    'form-label',
+    'form-text'
+  ]
 }