fix(docs): layout of the footer component (#1036)

mittwald · Dec 12, 2024 · d8adfa4 · d8adfa4
1 parent 8dda6c6
commit d8adfa4
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 60 deletions.
diff --git a/packages/components/src/components/ColumnLayout/ColumnLayout.tsx b/packages/components/src/components/ColumnLayout/ColumnLayout.tsx
@@ -10,7 +10,7 @@ import type {
 import type { PropsContext } from "@/lib/propsContext";
 import { PropsContextProvider } from "@/lib/propsContext";
 
-type GapSize = "s" | "m" | "l";
+type GapSize = "s" | "m" | "l" | "xl";
 
 export interface ColumnLayoutProps
   extends PropsWithChildren,

diff --git a/packages/components/src/integrations/nextjs/components/Link/Link.tsx b/packages/components/src/integrations/nextjs/components/Link/Link.tsx
@@ -10,8 +10,6 @@ export const Link = forwardRef<HTMLAnchorElement, Props>(
   function Link(props, ref) {
     const { href, isDisabled, ...rest } = props;
 
-    console.log(props);
-
     return (
       <NextLink
         href={href ?? "#"}

diff --git a/packages/design-tokens/src/structure/column-layout.yml b/packages/design-tokens/src/structure/column-layout.yml
@@ -8,3 +8,5 @@ column-layout:
       value: "{size-px.m}"
     l:
       value: "{size-px.l}"
+    xl:
+      value: "{size-px.xl}"
diff --git a/packages/docs/src/app/_components/layout/Footer/Footer.tsx b/packages/docs/src/app/_components/layout/Footer/Footer.tsx
@@ -2,66 +2,66 @@
 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";
+import { FooterSection } from "./components/FooterSection";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
 
 const Footer: FC = () => {
   return (
+    // logo außerhalb des columns, column außenrum
+    // mobile 32px padding
     <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>
+      <div className={styles.footerWrapper}>
+        <ColumnLayout
+          gap="xl"
+          m={[1, 1, 2]}
+          l={[1, 1, 2]}
+          className={styles.footerColumnLayout}
+        >
+          <FooterSection title="Ressourcen">
+            <Link color="dark" href="https://github.com/mittwald/flow">
+              GitHub Repo
+            </Link>
+            <Link color="dark" href="https://developer.mittwald.de/">
+              Developer-Portal
+            </Link>
+          </FooterSection>
+          <FooterSection title="Rechtliches">
+            <Link color="dark" href="https://www.mittwald.de/impressum">
+              Impressum
+            </Link>
+            <Link color="dark" href="https://www.mittwald.de/datenschutz">
+              Datenschutz
+            </Link>
+          </FooterSection>
+          <FooterSection title="Hilf uns, Flow noch besser zu machen!">
+            Fehlt dir eine bestimmte Component oder etwas Anderes? Hast du
+            Feedback? Dann teile es uns gerne auf GitHub mit.
+            <Link
+              className={styles.feedbackLink}
+              color="dark"
+              href="https://github.com/mittwald/flow/issues/new?template=general-style-guide-feedback.md"
+            >
+              Feedback zu Flow geben
+            </Link>
+          </FooterSection>
+          <div className={styles.mittwaldLogo}>
+            <Image src={logoMittwald.src} alt="mittwald Logo" />© 2024 Mittwald
+            CM Service GmbH & Co. KG
+          </div>
+        </ColumnLayout>
+        <div>
+          <Image
+            src={feedback.src}
+            alt="Styleguide Feedback"
+            className={styles.feedbackPicture}
+          />
+        </div>
+      </div>
     </LayoutCard>
   );
 };

diff --git a/packages/docs/src/app/_components/layout/Footer/components/FooterSection.module.scss b/packages/docs/src/app/_components/layout/Footer/components/FooterSection.module.scss
@@ -0,0 +1,11 @@
+.footerSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-px--s);
+  font-size: var(--font-size-text--s);
+}
+
+.footerSectionContent {
+  display: grid;
+  gap: var(--size-px--xs);
+}
diff --git a/packages/docs/src/app/_components/layout/Footer/components/FooterSection.tsx b/packages/docs/src/app/_components/layout/Footer/components/FooterSection.tsx
@@ -0,0 +1,15 @@
+import styles from "./FooterSection.module.scss";
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import { Heading } from "@mittwald/flow-react-components/Heading";
+
+export interface FooterSectionProps extends PropsWithChildren {
+  title: string;
+}
+
+export const FooterSection: FC<FooterSectionProps> = ({ children, title }) => (
+  <div className={styles.footerSection}>
+    <Heading level={3}>{title}</Heading>
+    <div className={styles.footerSectionContent}>{children}</div>
+  </div>
+);
diff --git a/packages/docs/src/app/_components/layout/Footer/footer.module.scss b/packages/docs/src/app/_components/layout/Footer/footer.module.scss
@@ -1,15 +1,50 @@
 .footer {
+  container-type: inline-size;
   background-color: var(--color--hosting-blue--200);
   margin: 0;
+  padding: var(--size-px--xxl);
+}
 
-  & > * {
-    max-width: 1500px;
-    margin: 0 auto;
-  }
+.footerColumnLayout {
+  width: 100%;
+}
+
+.footerWrapper {
+  display: flex;
+  gap: var(--size-px--xxl);
+  max-width: 1500px;
+  margin: 0 auto;
+}
+
+.mittwaldLogo {
+  display: grid;
+  grid-column: span 3 / span 3;
+  gap: var(--size-px--s);
 }
 
 @container (max-width: 850px) {
-  .feedbackPicture {
-    display: none;
+  .footer {
+    .feedbackPicture {
+      display: none;
+    }
+
+    .mittwaldLogo {
+      grid-column: span 3 / span 3;
+    }
+  }
+}
+
+@container (max-width: 550px) {
+  .footer {
+    padding: var(--size-px--xl);
+
+    .footerWrapper {
+      flex-direction: column;
+      gap: var(--size-px--xl);
+    }
+
+    .mittwaldLogo {
+      grid-column: auto;
+    }
   }
 }