Feature [WEB-69] Newsletter

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,8 @@ 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 +235,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;
 		}
 	}
 

src/components/Input.astro

@@ -0,0 +1,129 @@
+---
+export interface Props extends HTMLInputElement {
+	variant?: "primary" | "secondary";
+}
+
+const { class: className, variant, ...rest } = Astro.props;
+---
+
+<div class:list={["wrapper", variant]}>
+	<input class:list={["input", className]} {...rest} />
+</div>
+
+<style lang="scss">
+	@import "../styles/_imports.scss";
+
+	: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-outline-color: var(--color-green-100);
+
+		--input-invalid-color: var(--color-purple-200);
+		--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;
+		width: 100%;
+		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: var(--spacing-5x);
+		column-gap: var(--spacing-1x);
+		background-color: var(--input-outline-background-color);
+
+		transition: var(--transition-duration-quick)
+			var(--transition-easing-default);
+		transition-property: color, background-color;
+
+		&::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);
+			--input-outline-background-color: var(--input-hover-background-color);
+		}
+
+		&:where(:has(input:focus-visible)) {
+			--input-color: var(--input-focus-color);
+			--input-outline-background-color: var(--input-focus-outline-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-outline-background-color: var(--input-invalid-outline-color);
+		}
+	}
+
+	.input {
+		border: 0 none;
+		appearance: none;
+		width: inherit;
+		outline: none !important;
+		padding-inline: 0;
+		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>

src/components/NewsletterForm.astro

@@ -0,0 +1,58 @@
+---
+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);
+		padding-inline-start: var(--spacing-4x);
+
+		@include breakpoint-up("xxl") {
+			padding-inline-start: 0;
+		}
+	}
+
+	.group {
+		display: flex;
+		max-width: 50ch;
+
+		input {
+			margin-right: var(--spacing-3x);
+		}
+
+		button {
+			margin-left: calc(-1 * var(--spacing-3x));
+		}
+	}
+</style>