From 45879b43a19820e9082fef4828ba489f64a8e872 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Mon, 19 Feb 2024 13:52:23 +0100
Subject: [PATCH] :sparkles: - feat: add support for vertical alignment in page
 component

---
 src/components/page/page.scss |  6 ++++++
 src/components/page/page.tsx  | 14 +++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/page/page.scss b/src/components/page/page.scss
index b3559146..6b89a9b2 100644
--- a/src/components/page/page.scss
+++ b/src/components/page/page.scss
@@ -4,11 +4,17 @@
   background-color: var(--page-color-background);
   container-name: page;
   container-type: inline-size;
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
   padding: var(--spacing-h-xl);
   width: 100%;
   min-height: 100%;
 
+  &--valign-middle {
+    justify-content: center;
+  }
+
   @media screen and (min-width: constants.$breakpoint-desktop) {
     padding: var(--spacing-v-xl) var(--spacing-h-xl);
   }
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
index e52d806b..4771dfb1 100644
--- a/src/components/page/page.tsx
+++ b/src/components/page/page.tsx
@@ -1,19 +1,27 @@
+import clsx from "clsx";
 import React from "react";
 
 import "./page.scss";
 
 export type PageProps = React.PropsWithChildren<{
-  // Props here.
+  /** Vertical alignment of page content. */
+  valign?: "start" | "middle";
 }>;
 
 /**
  * Provides the base theme for a page.
  * @param children
+ * @param valign
  * @param props
  * @constructor
  */
-export const Page: React.FC<PageProps> = ({ children, ...props }) => (
-  <div className="mykn-page" {...props}>
+export const Page: React.FC<PageProps> = ({ children, valign, ...props }) => (
+  <div
+    className={clsx("mykn-page", {
+      [`mykn-page--valign-${valign}`]: valign,
+    })}
+    {...props}
+  >
     {children}
   </div>
 );