Skip to content

Commit

Permalink
page compositions especially footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@jake-figma
jake-figma committed Jun 13, 2024
1 parent f6712bc commit 1dfd20b
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 89 deletions.
2 changes: 1 addition & 1 deletion figma.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions ...ories/ui/compositions/Headers.stories.tsx → ...stories/ui/compositions/Pages.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -16,6 +16,7 @@ export const Default: StoryObj<typeof Header> = {
<Section>
<Flex container>Something</Flex>
</Section>
<Footer />
</>
),
};
173 changes: 97 additions & 76 deletions src/ui/compositions/Footers/Footers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import useMediaQuery from "hooks/useMediaQuery";
import { IconInstagram, IconLinkedin, IconTwitter, IconYoutube } from "icons";
import {
ButtonGroup,
Expand All @@ -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"
Expand All @@ -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>
Expand Down
16 changes: 16 additions & 0 deletions src/ui/primitives/Text/Text.figma.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
TextEmphasis,
TextHeading,
TextLink,
TextLinkList,
TextListItem,
TextPrice,
TextSmall,
Expand Down Expand Up @@ -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>,
Expand Down
27 changes: 18 additions & 9 deletions src/ui/primitives/Text/Text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

Expand Down
15 changes: 14 additions & 1 deletion src/ui/primitives/Text/text.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 1dfd20b

Please sign in to comment.