Merge branch 'main' of github.com:TYPO3incubator/surfcamp-team6

assets/global.js

@@ -1,4 +1,5 @@
 import './scss/global.scss'
 import './js/modal.js'
 import './js/theme-settings.js'
+import './js/animations.js'
 import './js/accordion.js'

assets/js/animations.js

@@ -0,0 +1,19 @@
+import { animateCountUp } from './counter-animation'
+
+const numbersCe = document.querySelector('[data-el="numbers"]');
+const numbers = numbersCe.querySelectorAll('[data-el="number"]')
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          observer.disconnect()
+          if (numbers.length) {
+            numbers.forEach((number) => {
+              animateCountUp(number, 2500)
+            })
+          }
+        }
+    })
+}, { threshold: 0.2 });
+
+observer.observe(numbersCe)

assets/js/counter-animation.js

@@ -0,0 +1,34 @@
+export const animateCountUp = (el, animationDuration) => {
+  // How long you want the animation to take, in ms
+// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second
+const frameDuration = 1000 / 60;
+// Use that to calculate how many frames we need to complete the animation
+const totalFrames = Math.round( animationDuration / frameDuration );
+// An ease-out function that slows the count as it progresses
+const easeOutQuad = t => t * ( 2 - t );
+
+  let frame = 0;
+  const countTo = parseInt( el.innerHTML, 10 );
+  // Start the animation running 60 times per second
+  const counter = setInterval( () => {
+    frame++;
+    // Calculate our progress as a value between 0 and 1
+    // Pass that value to our easing function to get our
+    // progress on a curve
+    const progress = easeOutQuad( frame / totalFrames );
+    // Use the progress value to calculate the current count
+    const currentCount = Math.round( countTo * progress );
+
+    // If the current count has changed, update the element
+    if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
+      el.innerHTML = currentCount;
+    }
+
+    // If we’ve reached our last frame, stop the animation
+    if ( frame === totalFrames ) {
+      clearInterval( counter );
+    }
+  }, frameDuration );
+};
+
+

assets/scss/base/_global.scss

@@ -26,29 +26,66 @@ html {
     --brightness: 0.4;
 }
 
+.scroll-smooth {
+    scroll-behavior: smooth;
+}
+
+.scroll-auto {
+    scroll-behavior: auto;
+}
+
 @layer components {
     .btn {
-        @apply inline-block py-2 px-5 font-bold rounded transition-colors focus:ring focus:ring-2 focus:ring-primary-200;
+        @apply inline-block py-2 px-5 font-bold rounded transition-colors;
+
+        &:focus {
+            @apply ring ring-2 ring-primary-200;
+        }
     }
 
     .btn-primary {
-        @apply bg-primary-500 text-primarytext hover:bg-primary-700 focus:bg-primary-700;
+        @apply bg-primary-500 text-primarytext;
+
+        &:focus,
+        &:hover {
+            @apply bg-primary-700;
+        }
     }
 
     .btn-secondary {
-        @apply bg-secondary-500 text-secondarytext hover:bg-secondary-700 focus:bg-secondary-700;
+        @apply bg-secondary-500 text-secondarytext;
+
+        &:focus,
+        &:hover {
+            @apply bg-secondary-700;
+        }
     }
 
     .btn-light {
-        @apply bg-light-500 text-lighttext hover:bg-light-700 focus:bg-light-700;
+        @apply bg-light-500 text-lighttext;
+
+        &:focus,
+        &:hover {
+            @apply bg-light-700;
+        }
     }
 
     .btn-white {
-        @apply bg-white text-whitetext hover:bg-gray-100 focus:bg-gray-100;
+        @apply bg-white-variable text-whitetext;
+
+        &:focus,
+        &:hover {
+            @apply bg-gray-100;
+        }
     }
 
     .btn-black {
-        @apply bg-black text-blacktext hover:bg-gray-900 focus:bg-gray-900;
+        @apply bg-black text-blacktext;
+
+        &:focus,
+        &:hover {
+            @apply bg-gray-900;
+        }
     }
 
     button[type="submit"] {
@@ -80,8 +117,52 @@ html {
         }
     }
 
-    .rte a {
-        @apply underline hover:no-underline focus:no-underline focus:ring focus:ring-2 focus:ring-offset-2 focus:ring-primary-200;
+    .rte {
+        a:not(.btn) {
+            @apply underline;
+
+            &:hover,
+            &:focus {
+                @apply no-underline;
+            }
+
+            &:focus {
+                @apply ring ring-2 ring-primary-200
+            }
+        }
+
+        h1 {
+            @apply font-bold font-heading block text-2xl my-5;
+        }
+
+        h2 {
+            @apply font-bold font-heading block text-xl my-4;
+        }
+
+        h3 {
+            @apply font-bold font-heading block text-lg my-3;
+        }
+
+        h4 {
+            @apply font-bold font-heading block my-2;
+        }
+
+        h5,
+        h6 {
+            @apply font-bold block my-1;
+        }
+
+        ul {
+            @apply list-disc list-inside my-2;
+        }
+
+        ol {
+            @apply list-decimal list-inside my-2;
+        }
+
+        p + p {
+            @apply mt-2;
+        }
     }
 
     .background-primary {
@@ -97,7 +178,7 @@ html {
     }
 
     .background-white {
-        @apply bg-white text-whitetext;
+        @apply bg-white-variable text-whitetext;
     }
 
     .background-black {
@@ -126,7 +207,11 @@ html {
         }
 
         &-control {
-            @apply bg-white shadow appearance-none rounded w-full py-2 px-3 text-whitetext leading-tight focus:outline-none focus:ring-2 resize-none;
+            @apply bg-white-variable shadow appearance-none rounded w-full py-2 px-3 text-whitetext leading-tight resize-none;
+
+            &:focus {
+                @apply outline-none ring ring-2 ring-primary-200
+            }
         }
 
         &-check {
@@ -137,10 +222,18 @@ html {
 
         &-checkbox {
             @apply rounded h-5 w-5 accent-secondary-500;
+
+            &:focus {
+                @apply outline-none ring ring-2 ring-primary-200
+            }
         }
 
         &-radio {
             @apply h-5 w-5 accent-secondary-500;
+
+            &:focus {
+                @apply outline-none ring ring-2 ring-primary-200
+            }
         }
 
         &-group {

assets/scss/components/_modal.scss

@@ -13,7 +13,7 @@ body.modal-open {
 }
 
 .modal-content {
-    @apply bg-white rounded overflow-hidden text-whitetext shadow-lg relative;
+    @apply bg-white-variable rounded overflow-hidden text-whitetext shadow-lg relative;
 
     > .ce {
         @apply py-5;
@@ -25,7 +25,7 @@ body.modal-open {
 }
 
 .loading-indicator {
-    @apply hidden fixed top-1/2 left-1/2 border border-4 border-white border-t-primary-500 rounded-full animate-spin w-8 h-8;
+    @apply hidden fixed top-1/2 left-1/2 border border-4 border-white-variable border-t-primary-500 rounded-full animate-spin w-8 h-8;
 
     transform: translate(-50%, -50%);
 }

local_packages/success/Configuration/Sets/ProductLaunch/settings.yaml

@@ -17,7 +17,6 @@ ui:
       secondarytext: "var(--color-blacktext)"
       lighttext: "var(--color-whitetext)"
   dark:
-    font: []
     color:
       primary: "rgb(205, 156, 19)"
       secondary: "rgb(37, 37, 37)"

local_packages/success/Configuration/Sets/SetsPromotion/settings.yaml

@@ -1,3 +1,29 @@
-foo:
-  bar:
-    baz: 99
+ui:
+  theme: "light"
+  layout:
+    radius: "3px"
+    rotate: "0"
+    pagebg: "white"
+    footerbg: "secondary"
+    font:
+      text: "roboto"
+      heading: "roboto-mono"
+  light:
+    color:
+      primary: "rgb(255, 135, 0)"
+      secondary: "rgb(71, 128, 113)"
+      light: "rgb(163, 208, 196)"
+      primarytext: "var(--color-whitetext)"
+      secondarytext: "var(--color-blacktext)"
+      lighttext: "var(--color-whitetext)"
+  dark:
+    color:
+
+info:
+  owner:
+    name: "TYPO3 Surfcamp"
+    imprint: "https://typo3.org/legal-notice"
+    dataPrivacy: "https://typo3.org/privacy-policy"
+footer:
+  maxCols: '3'
+  pageId: 0

local_packages/success/Configuration/Sets/Whitepaper/settings.yaml

@@ -1,3 +1,29 @@
-foo:
-  bar:
-    baz: 99
+ui:
+  theme: "light"
+  layout:
+    radius: "0px"
+    rotate: "0"
+    pagebg: "white"
+    footerbg: "white"
+    font:
+      text: "lato"
+      heading: "roboto-slab"
+  light:
+    color:
+      primary: "rgb(255, 135, 0)"
+      secondary: "rgb(81, 81, 81)"
+      light: "rgb(255, 217, 173)"
+      primarytext: "white"
+      secondarytext: "white"
+      lighttext: "black"
+  dark:
+    color:
+
+info:
+  owner:
+    name: "TYPO3 GmbH"
+    imprint: "https://typo3.org/legal-notice"
+    dataPrivacy: "https://typo3.org/privacy-policy"
+footer:
+  maxCols: '3'
+  pageId: 0

local_packages/success/Configuration/Sets/_LandingPage/TypoScript/config.typoscript

@@ -0,0 +1 @@
+config.htmlTag.attributes.class = {$ui.scrollBehaviour}

local_packages/success/Configuration/Sets/_LandingPage/settings.definitions.yaml

@@ -33,6 +33,10 @@ settings:
     label: 'Default theme: Headline font'
     type: color
     default: 'rgb(1 97 239)'
+  ui.scrollBehaviour:
+    label: 'Scroll behaviour'
+    type: string
+    default: 'scroll-smooth'
   footer.maxCols:
     label: 'Max Footer columns'
     description: 'Values:Label | auto:auto | 4:4  | 3:3 | 2:2 | 1:1'

local_packages/success/Configuration/Sets/_LandingPage/setup.typoscript

@@ -2,6 +2,7 @@
 @import 'EXT:form/Configuration/TypoScript/setup.typoscript'
 @import 'EXT:success/Configuration/Sets/_LandingPage/TypoScript/RecordLinks/contentInModal.typoscript'
 @import 'EXT:success/Configuration/Sets/_LandingPage/TypoScript/Form/setup.typoscript'
+@import 'EXT:success/Configuration/Sets/_LandingPage/TypoScript/config.typoscript'
 
 page = PAGE
 page {