From e5dffc9c12d6e9d29f5f71630e26c23c3b52c3fd Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 10:38:41 +0200
Subject: [PATCH 1/7] feat: [WEB-69] add Input Component

---
 src/components/Input.astro | 128 +++++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/components/Input.astro

diff --git a/src/components/Input.astro b/src/components/Input.astro
new file mode 100644
index 0000000..ab6d119
--- /dev/null
+++ b/src/components/Input.astro
@@ -0,0 +1,128 @@
+---
+export interface Props extends HTMLInputElement {
+	variant?: "primary" | "secondary";
+}
+
+const { class: className, variant, ...rest } = Astro.props;
+---
+
+<div class:list={["wrapper", variant, className]}>
+	<input class="input" {...rest} />
+</div>
+
+<style lang="scss">
+	@import "../styles/_imports.scss";
+
+	:root {
+		--input-color: var(--color-gray-600);
+		--input-background-color: var(--color-white);
+		--input-placeholder-color: var(--color-cardboard);
+
+		--input-hover-color: var(--color-gray-600);
+		--input-hover-background-color: var(--color-gray-50);
+
+		--input-focus-color: var(--color-gray-700);
+		--input-focus-background-color: var(--color-white);
+		--input-focus-outline-color: var(--color-green-100);
+
+		--input-invalid-color: var(--color-purple-200);
+		--input-invalid-background-color: var(--color-white);
+		--input-invalid-outline-color: var(--color-purple-200);
+	}
+
+	.wrapper {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-decoration: none;
+		position: relative;
+		height: pxToRem(40);
+		clip-path: polygon(
+			12px 0%,
+			calc(100% - 12px) 0%,
+			100% 50%,
+			calc(100% - 12px) 100%,
+			12px 100%,
+			0% 50%
+		);
+		padding-inline: pxToRem(30);
+		column-gap: var(--spacing-1x);
+		background-color: var(--input-background-color);
+
+		transition: var(--transition-duration-quick)
+			var(--transition-easing-default);
+		transition-property: color, background-color;
+
+		&:not(:disabled) {
+			cursor: pointer;
+		}
+
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			inset: pxToRem(2) pxToRem(3);
+			background-color: var(--input-background-color);
+			transition: background-color var(--transition-duration-quick)
+				var(--transition-easing-default);
+			clip-path: polygon(
+				11px 0%,
+				calc(100% - 11px) 0%,
+				100% 50%,
+				calc(100% - 11px) 100%,
+				11px 100%,
+				0% 50%
+			);
+			z-index: 1;
+		}
+
+		&:where(:has(input:not(:disabled):hover)) {
+			--input-color: var(--input-hover-color);
+			--input-background-color: var(--input-hover-background-color);
+			&::before {
+				background-color: var(--input-hover-background-color);
+			}
+		}
+
+		&:where(:has(input:focus-visible)) {
+			--input-color: var(--input-focus-color);
+			--input-background-color: var(--input-focus-outline-color);
+			&::before {
+				background-color: var(--input-focus-background-color);
+			}
+		}
+
+		&:where(:has(input:disabled)) {
+			/* rgba only accepts rgb values */
+			--input-placeholder-color: rgba(170, 153, 136, 0.4); /* cardboard */
+			--input-color: rgba(77, 78, 78, 0.4); /* gray-600 */
+		}
+
+		&:where(:has(input:user-invalid)) {
+			--input-color: var(--input-invalid-color);
+			--input-background-color: var(--input-invalid-outline-color);
+			&::before {
+				background-color: var(--input-invalid-background-color);
+			}
+		}
+	}
+
+	.input {
+		border: 0 none;
+		appearance: none;
+		outline: none !important;
+		background-color: transparent;
+		color: var(--input-color);
+		font-variant-numeric: lining-nums tabular-nums;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 1.25;
+		letter-spacing: 0.16px;
+		z-index: 2;
+
+		&::placeholder {
+			color: var(--input-placeholder-color);
+		}
+	}
+</style>

From a13d6c098e990c45ee0563d0cfc492cef5da47b3 Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 11:03:30 +0200
Subject: [PATCH 2/7] feat: [WEB-69] add variant styles to Input Component

---
 src/components/Input.astro | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/Input.astro b/src/components/Input.astro
index ab6d119..88cce8a 100644
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@@ -16,20 +16,31 @@ const { class: className, variant, ...rest } = Astro.props;
 	:root {
 		--input-color: var(--color-gray-600);
 		--input-background-color: var(--color-white);
+		--input-outline-background-color: var(--color-white);
 		--input-placeholder-color: var(--color-cardboard);
 
 		--input-hover-color: var(--color-gray-600);
 		--input-hover-background-color: var(--color-gray-50);
 
 		--input-focus-color: var(--color-gray-700);
-		--input-focus-background-color: var(--color-white);
 		--input-focus-outline-color: var(--color-green-100);
 
 		--input-invalid-color: var(--color-purple-200);
-		--input-invalid-background-color: var(--color-white);
 		--input-invalid-outline-color: var(--color-purple-200);
 	}
 
+	/**
+	* variants need to be declared before styles
+	* otherwise the outline styles will not work
+	* TODO: investigate why - probably a cascade issue
+	*/
+	.secondary {
+		--input-background-color: var(--color-gray-50);
+		--input-outline-background-color: var(--color-gray-50);
+		--input-hover-background-color: var(--color-gray-100);
+		--input-focus-background-color: var(--color-gray-50);
+	}
+
 	.wrapper {
 		display: inline-flex;
 		justify-content: center;
@@ -47,16 +58,12 @@ const { class: className, variant, ...rest } = Astro.props;
 		);
 		padding-inline: pxToRem(30);
 		column-gap: var(--spacing-1x);
-		background-color: var(--input-background-color);
+		background-color: var(--input-outline-background-color);
 
 		transition: var(--transition-duration-quick)
 			var(--transition-easing-default);
 		transition-property: color, background-color;
 
-		&:not(:disabled) {
-			cursor: pointer;
-		}
-
 		&::before {
 			content: "";
 			display: block;
@@ -79,17 +86,12 @@ const { class: className, variant, ...rest } = Astro.props;
 		&:where(:has(input:not(:disabled):hover)) {
 			--input-color: var(--input-hover-color);
 			--input-background-color: var(--input-hover-background-color);
-			&::before {
-				background-color: var(--input-hover-background-color);
-			}
+			--input-outline-background-color: var(--input-hover-background-color);
 		}
 
 		&:where(:has(input:focus-visible)) {
 			--input-color: var(--input-focus-color);
-			--input-background-color: var(--input-focus-outline-color);
-			&::before {
-				background-color: var(--input-focus-background-color);
-			}
+			--input-outline-background-color: var(--input-focus-outline-color);
 		}
 
 		&:where(:has(input:disabled)) {
@@ -100,10 +102,7 @@ const { class: className, variant, ...rest } = Astro.props;
 
 		&:where(:has(input:user-invalid)) {
 			--input-color: var(--input-invalid-color);
-			--input-background-color: var(--input-invalid-outline-color);
-			&::before {
-				background-color: var(--input-invalid-background-color);
-			}
+			--input-outline-background-color: var(--input-invalid-outline-color);
 		}
 	}
 

From 469957a43afb5585043f1f8e128fc8944b4d4034 Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 11:26:50 +0200
Subject: [PATCH 3/7] feat: [WEB-69] add NewsletterForm to Footer

---
 src/components/Footer.astro         | 14 ++++----
 src/components/NewsletterForm.astro | 52 +++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/components/NewsletterForm.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6a532ca..1cfd181 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,9 +2,9 @@
 import { client } from "../utils/graphql-client";
 import { graphql } from "gql.tada";
 import Button from "./Button.astro";
-// import NewsletterSignup from "./NewsletterSignup.astro";
 import Logo from "./Logo.astro";
 import Link from "./Link.astro";
+import NewsletterForm from "./NewsletterForm.astro";
 import Vercel from "../assets/vercel.svg?raw";
 
 const { slug } = Astro.params;
@@ -77,11 +77,7 @@ const socialMediaItems =
 ---
 
 <footer class="footer container">
-	{
-		/** TODO: add NewsletterSignup
-		 * <div class="newsletter"><NewsletterSignup /></div>
-		 */
-	}
+	<div class="newsletter"><NewsletterForm /></div>
 	<ul class="cta nav-list nav-list__cta">
 		{
 			ctas.map((item) => (
@@ -238,14 +234,20 @@ const socialMediaItems =
 
 	.newsletter {
 		grid-area: newsletter;
+
+		@include breakpoint-up("lg") {
+			justify-self: end;
+		}
 	}
 
 	.social {
 		grid-area: social;
+		margin-block-start: var(--spacing-8x);
 
 		@include breakpoint-up("lg") {
 			align-self: center;
 			justify-self: end;
+			margin-block-start: 0;
 		}
 	}
 
diff --git a/src/components/NewsletterForm.astro b/src/components/NewsletterForm.astro
new file mode 100644
index 0000000..c02a80f
--- /dev/null
+++ b/src/components/NewsletterForm.astro
@@ -0,0 +1,52 @@
+---
+import Button from "./Button.astro";
+import Input from "./Input.astro";
+---
+
+<form
+	class="form"
+	action="//frontendconf.us2.list-manage.com/subscribe/post?u=d6e0840333568eaec22d009ab&id=d822473667"
+	method="post"
+	id="mc-embedded-subscribe-form"
+	name="mc-embedded-subscribe-form"
+	target="_blank"
+>
+	<label for="email" class="label">Sign up for the newsletter</label>
+	<div class="group">
+		<Input type="email" id="email" name="EMAIL" placeholder="E-Mail" />
+		<Button type="submit" variant="tertiary">Go</Button>
+	</div>
+</form>
+
+<style lang="scss">
+	@import "../styles/_imports.scss";
+
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-5x);
+
+		@include breakpoint-up("xxl") {
+			flex-direction: row;
+			align-items: center;
+			gap: var(--spacing-10x);
+		}
+	}
+
+	.label {
+		@extend %typo-lead;
+		color: var(--color-purple-100);
+	}
+
+	.group {
+		display: flex;
+
+		input {
+			margin-right: var(--spacing-3x);
+		}
+
+		button {
+			margin-left: calc(-1 * var(--spacing-3x));
+		}
+	}
+</style>

From 346114fd7df8eaae23b54cffad974755ce9eae64 Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 11:32:49 +0200
Subject: [PATCH 4/7] chore: [WEB-69] cleanup code

---
 src/components/Footer.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 1cfd181..d046c38 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -78,6 +78,7 @@ const socialMediaItems =
 
 <footer class="footer container">
 	<div class="newsletter"><NewsletterForm /></div>
+
 	<ul class="cta nav-list nav-list__cta">
 		{
 			ctas.map((item) => (

From 8925b046518032ef11190120d219863836c3de95 Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 11:38:00 +0200
Subject: [PATCH 5/7] feat: [WEB-69] improve NewsletterForm responsive styles

---
 src/components/Input.astro          | 3 ++-
 src/components/NewsletterForm.astro | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Input.astro b/src/components/Input.astro
index 88cce8a..2530ea9 100644
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@@ -56,7 +56,7 @@ const { class: className, variant, ...rest } = Astro.props;
 			12px 100%,
 			0% 50%
 		);
-		padding-inline: pxToRem(30);
+		padding-inline: var(--spacing-5x);
 		column-gap: var(--spacing-1x);
 		background-color: var(--input-outline-background-color);
 
@@ -110,6 +110,7 @@ const { class: className, variant, ...rest } = Astro.props;
 		border: 0 none;
 		appearance: none;
 		outline: none !important;
+		padding-inline: 0;
 		background-color: transparent;
 		color: var(--input-color);
 		font-variant-numeric: lining-nums tabular-nums;
diff --git a/src/components/NewsletterForm.astro b/src/components/NewsletterForm.astro
index c02a80f..b232ce8 100644
--- a/src/components/NewsletterForm.astro
+++ b/src/components/NewsletterForm.astro
@@ -36,6 +36,11 @@ import Input from "./Input.astro";
 	.label {
 		@extend %typo-lead;
 		color: var(--color-purple-100);
+		padding-inline-start: var(--spacing-4x);
+
+		@include breakpoint-up("xxl") {
+			padding-inline-start: 0;
+		}
 	}
 
 	.group {

From 394855a55e2985724e168940929387a5fd86ab9e Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 12:11:55 +0200
Subject: [PATCH 6/7] feat: [WEB-69] improve Input width handling

---
 src/components/Input.astro | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Input.astro b/src/components/Input.astro
index 2530ea9..1c97e35 100644
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@@ -6,8 +6,8 @@ export interface Props extends HTMLInputElement {
 const { class: className, variant, ...rest } = Astro.props;
 ---
 
-<div class:list={["wrapper", variant, className]}>
-	<input class="input" {...rest} />
+<div class:list={["wrapper", variant]}>
+	<input class:list={["input", className]} {...rest} />
 </div>
 
 <style lang="scss">
@@ -43,7 +43,7 @@ const { class: className, variant, ...rest } = Astro.props;
 
 	.wrapper {
 		display: inline-flex;
-		justify-content: center;
+		width: 100%;
 		align-items: center;
 		text-decoration: none;
 		position: relative;
@@ -109,6 +109,7 @@ const { class: className, variant, ...rest } = Astro.props;
 	.input {
 		border: 0 none;
 		appearance: none;
+		width: inherit;
 		outline: none !important;
 		padding-inline: 0;
 		background-color: transparent;

From c68fed93e4a0789e611be366a0d5c30e169800bb Mon Sep 17 00:00:00 2001
From: Manuel Lieb <manuel.lieb@unic.com>
Date: Sat, 6 Jul 2024 12:12:10 +0200
Subject: [PATCH 7/7] feat: [WEB-69] set max-width for NewsletterForm input

---
 src/components/NewsletterForm.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NewsletterForm.astro b/src/components/NewsletterForm.astro
index b232ce8..37fc57a 100644
--- a/src/components/NewsletterForm.astro
+++ b/src/components/NewsletterForm.astro
@@ -45,6 +45,7 @@ import Input from "./Input.astro";
 
 	.group {
 		display: flex;
+		max-width: 50ch;
 
 		input {
 			margin-right: var(--spacing-3x);