From 1dfd20b5b6fbde7cee02dc259d5068dddfe58c6a Mon Sep 17 00:00:00 2001
From: Jake Albaugh <jalbaugh@figma.com>
Date: Thu, 13 Jun 2024 15:07:03 -0500
Subject: [PATCH] page compositions especially footer

---
 figma.config.json                             |   2 +-
 ...{Headers.stories.tsx => Pages.stories.tsx} |   5 +-
 src/ui/compositions/Footers/Footers.tsx       | 173 ++++++++++--------
 src/ui/primitives/Text/Text.figma.tsx         |  16 ++
 src/ui/primitives/Text/Text.tsx               |  27 ++-
 src/ui/primitives/Text/text.css               |  15 +-
 6 files changed, 149 insertions(+), 89 deletions(-)
 rename src/stories/ui/compositions/{Headers.stories.tsx => Pages.stories.tsx} (79%)

diff --git a/figma.config.json b/figma.config.json
index 9a75946..43fe925 100644
--- a/figma.config.json
+++ b/figma.config.json
@@ -88,7 +88,7 @@
       "<FIGMA_URL_TEXT_CODE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2104-22325",
       "<FIGMA_URL_TEXT_LIST>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2010-10204",
       "<FIGMA_URL_TEXT_LIST_ITEM>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2077-11663",
-      "<FIGMA_URL_TEXT_LINK_LIST>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7990",
+      "<FIGMA_URL_TEXT_LINK_LIST>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=322-9321",
       "<FIGMA_URL_TEXT_LINK_LIST_ITEM>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7973",
       "<FIGMA_URL_TEXT_PRICE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2142-11622",
       "<FIGMA_URL_TEXT_CONTENT_HEADING>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7834",
diff --git a/src/stories/ui/compositions/Headers.stories.tsx b/src/stories/ui/compositions/Pages.stories.tsx
similarity index 79%
rename from src/stories/ui/compositions/Headers.stories.tsx
rename to src/stories/ui/compositions/Pages.stories.tsx
index fa1b1d8..15e23fe 100644
--- a/src/stories/ui/compositions/Headers.stories.tsx
+++ b/src/stories/ui/compositions/Pages.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Header } from "ui/compositions";
+import { Footer, Header } from "ui/compositions";
 import { Flex, Section } from "ui/layout";
 
 const meta: Meta<typeof Header> = {
   component: Header,
-  title: "UI Compositions/Headers",
+  title: "UI Compositions/Pages",
   parameters: { layout: "centered" },
 };
 export default meta;
@@ -16,6 +16,7 @@ export const Default: StoryObj<typeof Header> = {
       <Section>
         <Flex container>Something</Flex>
       </Section>
+      <Footer />
     </>
   ),
 };
diff --git a/src/ui/compositions/Footers/Footers.tsx b/src/ui/compositions/Footers/Footers.tsx
index 235bfc1..73b0bcf 100644
--- a/src/ui/compositions/Footers/Footers.tsx
+++ b/src/ui/compositions/Footers/Footers.tsx
@@ -1,3 +1,4 @@
+import useMediaQuery from "hooks/useMediaQuery";
 import { IconInstagram, IconLinkedin, IconTwitter, IconYoutube } from "icons";
 import {
   ButtonGroup,
@@ -15,6 +16,8 @@ import {
 
 export type FooterProps = Omit<SectionProps, "variant" | "padding">;
 export function Footer({ className, ...props }: FooterProps) {
+  const { isMobile, isTablet, isTabletDown } = useMediaQuery();
+  const listDensity = isTabletDown ? "tight" : "default";
   return (
     <Section
       elementType="footer"
@@ -25,88 +28,106 @@ export function Footer({ className, ...props }: FooterProps) {
       {...props}
     >
       <Flex wrap type="quarter" gap="xl" container>
-        <FlexItem size="minor">
-          <Flex direction="column" gap="xl" alignSecondary="start">
+        <FlexItem size={isTablet ? "full" : "minor"}>
+          <Flex
+            direction={isTabletDown ? "row" : "column"}
+            alignPrimary="space-between"
+            gap="xl"
+            alignSecondary="start"
+          >
             <FlexItem>
               <Logo />
             </FlexItem>
             <SocialButtons />
           </Flex>
         </FlexItem>
-        <FlexItem size="minor">
-          <TextLinkList title={<TextStrong>Use cases</TextStrong>}>
-            <TextListItem>
-              <TextLink href="#">UI design</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">UX design</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Wireframing</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Diagramming</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Brainstorming</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Online whiteboard</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Team collaboration</TextLink>
-            </TextListItem>
-          </TextLinkList>
-        </FlexItem>
-        <FlexItem size="minor">
-          <TextLinkList title={<TextStrong>Explore</TextStrong>}>
-            <TextListItem>
-              <TextLink href="#">Design</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Prototyping</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Development features</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Design systems</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Collaboration features</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Design process</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">FigJam</TextLink>
-            </TextListItem>
-          </TextLinkList>
-        </FlexItem>
-        <FlexItem size="minor">
-          <TextLinkList title={<TextStrong>Resources</TextStrong>}>
-            <TextListItem>
-              <TextLink href="#">Blog</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Best practices</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Colors</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Color wheel</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Support</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Developers</TextLink>
-            </TextListItem>
-            <TextListItem>
-              <TextLink href="#">Resource library</TextLink>
-            </TextListItem>
-          </TextLinkList>
+        <FlexItem size={isTablet ? "full" : "major"}>
+          <Flex
+            type="auto"
+            gap="xl"
+            wrap
+            alignPrimary="stretch"
+            direction={isMobile ? "column" : "row"}
+          >
+            <TextLinkList
+              density={listDensity}
+              title={<TextStrong>Use cases</TextStrong>}
+            >
+              <TextListItem>
+                <TextLink href="#">UI design</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">UX design</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Wireframing</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Diagramming</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Brainstorming</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Online whiteboard</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Team collaboration</TextLink>
+              </TextListItem>
+            </TextLinkList>
+            <TextLinkList
+              density={listDensity}
+              title={<TextStrong>Explore</TextStrong>}
+            >
+              <TextListItem>
+                <TextLink href="#">Design</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Prototyping</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Development features</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Design systems</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Collaboration features</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Design process</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">FigJam</TextLink>
+              </TextListItem>
+            </TextLinkList>
+            <TextLinkList
+              density={listDensity}
+              title={<TextStrong>Resources</TextStrong>}
+            >
+              <TextListItem>
+                <TextLink href="#">Blog</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Best practices</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Colors</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Color wheel</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Support</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Developers</TextLink>
+              </TextListItem>
+              <TextListItem>
+                <TextLink href="#">Resource library</TextLink>
+              </TextListItem>
+            </TextLinkList>
+          </Flex>
         </FlexItem>
       </Flex>
     </Section>
diff --git a/src/ui/primitives/Text/Text.figma.tsx b/src/ui/primitives/Text/Text.figma.tsx
index c840c2f..ea1eb6a 100644
--- a/src/ui/primitives/Text/Text.figma.tsx
+++ b/src/ui/primitives/Text/Text.figma.tsx
@@ -7,6 +7,7 @@ import {
   TextEmphasis,
   TextHeading,
   TextLink,
+  TextLinkList,
   TextListItem,
   TextPrice,
   TextSmall,
@@ -61,6 +62,21 @@ figma.connect(TextCode, "<FIGMA_URL_TEXT_CODE>", {
   props: { text: figma.string("Text") },
   example: ({ text }) => <TextCode>{text}</TextCode>,
 });
+figma.connect(TextLinkList, "<FIGMA_URL_TEXT_LINK_LIST>", {
+  props: {
+    children: figma.string("Text Link List Item"),
+    title: figma.boolean("Has Title", {
+      true: figma.children("Text Strong"),
+      false: undefined,
+    }),
+    density: figma.enum("Density", { Default: "default", Tight: "tight" }),
+  },
+  example: ({ children, density, title }) => (
+    <TextLinkList density={density} title={title}>
+      {children}
+    </TextLinkList>
+  ),
+});
 figma.connect(TextListItem, "<FIGMA_URL_TEXT_LIST_ITEM>", {
   props: { text: figma.string("Text") },
   example: ({ text }) => <TextListItem>{text}</TextListItem>,
diff --git a/src/ui/primitives/Text/Text.tsx b/src/ui/primitives/Text/Text.tsx
index 40eb3cb..f3561fd 100644
--- a/src/ui/primitives/Text/Text.tsx
+++ b/src/ui/primitives/Text/Text.tsx
@@ -151,16 +151,25 @@ export function TextListItem({ className, ...props }: TextListItemProps) {
 
 export type TextListProps = Omit<ComponentPropsWithoutRef<"ul">, "title"> & {
   title?: ReactNode;
+  density?: "default" | "tight";
 };
-export function TextList({ className, title, ...props }: TextListProps) {
-  const classNames = clsx(className, "text-list");
-  const list = <ul className={classNames} {...props} />;
-  return title ? (
-    <Flex direction="column" gap="xl">
-      {title} {list}
-    </Flex>
-  ) : (
-    list
+export function TextList({
+  children,
+  className,
+  density = "default",
+  title,
+  ...props
+}: TextListProps) {
+  const classNames = clsx(
+    className,
+    "text-list",
+    `text-list-density-${density}`,
+  );
+  return (
+    <ul className={classNames} {...props}>
+      {title && <li className="text-list-title">{title}</li>}
+      {children}
+    </ul>
   );
 }
 
diff --git a/src/ui/primitives/Text/text.css b/src/ui/primitives/Text/text.css
index ed5d6ff..84dac80 100644
--- a/src/ui/primitives/Text/text.css
+++ b/src/ui/primitives/Text/text.css
@@ -64,9 +64,22 @@
 .text-list {
   display: flex;
   flex-direction: column;
-  gap: var(--sds-size-gap-md);
   margin: 0;
 
+  &.text-list-density-default {
+    gap: var(--sds-size-gap-md);
+    .text-list-title {
+      margin-bottom: var(--sds-size-gap-lg);
+    }
+  }
+
+  &.text-list-density-tight {
+    gap: var(--sds-size-gap-sm);
+    .text-list-title {
+      margin-bottom: var(--sds-size-gap-xs);
+    }
+  }
+
   &.text-link-list {
     list-style: none;
     padding: 0;