docs: create footer (#958)

packages/components/src/components/ColumnLayout/ColumnLayout.tsx

@@ -7,6 +7,8 @@ import type {
   PropsWithClassName,
   PropsWithElementType,
 } from "@/lib/types/props";
+import type { PropsContext } from "@/lib/propsContext";
+import { PropsContextProvider } from "@/lib/propsContext";
 
 type GapSize = "s" | "m" | "l";
 
@@ -52,10 +54,18 @@ export const ColumnLayout: FC<ColumnLayoutProps> = (props) => {
 
   const Element = elementType;
 
+  const propsContext: PropsContext = {
+    Section: {
+      hideSeparator: true,
+    },
+  };
+
   return (
     <div className={rootClassName} style={style}>
       <Element aria-label={ariaLabel} className={styles.columnLayout}>
-        {children}
+        <PropsContextProvider props={propsContext}>
+          {children}
+        </PropsContextProvider>
       </Element>
     </div>
   );

packages/components/src/components/Section/Section.module.scss

@@ -4,7 +4,7 @@
   row-gap: var(--section--content-to-content-spacing);
   container-type: inline-size;
 
-  + .section {
+  + &:not(.hideSeparator) .section {
     margin-block-start: var(--section--section-to-section-spacing);
     border-block-start-width: var(--section--border-width);
     border-block-start-style: var(--section--border-style);

packages/components/src/components/Section/Section.tsx

@@ -13,6 +13,8 @@ export interface SectionProps
     FlowComponentProps {
   /** @internal */
   renderContextMenuSection?: boolean;
+  /** @internal */
+  hideSeparator?: boolean;
 }
 
 export const Section = flowComponent("Section", (props) => {
@@ -21,6 +23,7 @@ export const Section = flowComponent("Section", (props) => {
     className,
     refProp: ref,
     renderContextMenuSection,
+    hideSeparator,
     ...rest
   } = props;
 
@@ -32,7 +35,11 @@ export const Section = flowComponent("Section", (props) => {
     return <ContextMenuSection>{children}</ContextMenuSection>;
   }
 
-  const rootClassName = clsx(styles.section, className);
+  const rootClassName = clsx(
+    styles.section,
+    className,
+    styles.hideSeparator && hideSeparator,
+  );
 
   const headingId = useId();
 

packages/docs/src/app/_components/layout/Footer/Footer.tsx

@@ -0,0 +1,69 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import { Section } from "@mittwald/flow-react-components/Section";
+import { Heading } from "@mittwald/flow-react-components/Heading";
+import { Header } from "@mittwald/flow-react-components/Header";
+import { Link } from "@mittwald/flow-react-components/Link";
+import styles from "./footer.module.scss";
+import { Image } from "@mittwald/flow-react-components/Image";
+import feedback from "../../../../../assets/Styleguide-Footer_Feedback.svg";
+import logoMittwald from "../../../../../assets/mittwald-logo-footer.svg";
+import clsx from "clsx";
+
+const Footer: FC = () => {
+  return (
+    <LayoutCard elementType="footer" className={styles.footer}>
+      <ColumnLayout m={[1, 1, 2]} l={[1, 1, 2, 1]}>
+        <Section>
+          <Header>
+            <Heading level={3}>Contributoren-Seiten</Heading>
+          </Header>
+          <Link color="dark" href="https://github.com/mittwald/flow">
+            GitHub Repo
+          </Link>
+          <Link color="dark" href="https://developer.mittwald.de/">
+            Developer-Portal
+          </Link>
+        </Section>
+        <Section>
+          <Header>
+            <Heading level={3}>Rechtliches</Heading>
+          </Header>
+          <Link color="dark" href="https://www.mittwald.de/impressum">
+            Impressum
+          </Link>
+          <Link color="dark" href="https://www.mittwald.de/datenschutz">
+            Datenschutz
+          </Link>
+        </Section>
+
+        <Section>
+          <Heading level={3}>Hilf uns, Flow noch besser zu machen!</Heading>
+          Fehlt dir eine bestimmte Component oder etwas Anderes? Hast du
+          Feedback? Dann teile es uns gerne auf GitHub mit.
+          <Link
+            color="dark"
+            href="https://github.com/mittwald/flow/issues/new?template=general-style-guide-feedback.md"
+          >
+            Feedback zu Flow geben
+          </Link>
+        </Section>
+        <Image
+          src={feedback.src}
+          alt="Styleguide Feedback"
+          className={clsx(styles.feedbackPicture)}
+        />
+      </ColumnLayout>
+      <br />
+      <small>
+        <Image src={logoMittwald.src} alt="mittwald Logo" />© 2024 Mittwald CM
+        Service GmbH & Co. KG
+      </small>
+    </LayoutCard>
+  );
+};
+
+export default Footer;

packages/docs/src/app/_components/layout/Footer/footer.module.scss

@@ -0,0 +1,15 @@
+.footer {
+  background-color: var(--color--hosting-blue--200);
+  margin: 0;
+
+  & > * {
+    max-width: 1500px;
+    margin: 0 auto;
+  }
+}
+
+@container (max-width: 850px) {
+  .feedbackPicture {
+    display: none;
+  }
+}

packages/docs/src/app/_components/layout/Footer/index.ts

@@ -0,0 +1,3 @@
+import Footer from "@/app/_components/layout/Footer/Footer";
+
+export default Footer;

packages/docs/src/app/global.scss

@@ -3,3 +3,7 @@
     -webkit-text-size-adjust: 100%;
   }
 }
+
+body {
+  margin: 0;
+}

packages/docs/src/app/layout.tsx

@@ -15,6 +15,7 @@ import MobileNavigation from "@/app/_components/layout/MobileNavigation/MobileNa
 import { NotificationProvider } from "@mittwald/flow-react-components/NotificationProvider";
 import { Link } from "@mittwald/flow-react-components/Link";
 import { Image } from "@mittwald/flow-react-components/Image";
+import Footer from "@/app/_components/layout/Footer/Footer";
 
 export const metadata: Metadata = {
   title: "Flow – mittwald Design System",
@@ -47,6 +48,7 @@ const RootLayout: FC<PropsWithChildren> = async (props) => {
               <MainNavigation docs={docs.map((mdx) => mdx.serialize())} />
               <main className={styles.main}>{props.children}</main>
             </div>
+            <Footer />
           </NotificationProvider>
         </LinkProvider>
       </body>