Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading
Loading status checks…
some cleanup
Browse files Browse the repository at this point in the history
@jake-figma
jake-figma committed Jun 1, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
1 parent 50b3909 commit a59b7fa
Showing 15 changed files with 316 additions and 3,395 deletions.
92 changes: 2 additions & 90 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
import { StandardFooter, StandardHeader } from "blocks";
import { IconFacebook, IconInstagram, IconLinkedin, IconYoutube } from "icons";
import { AuthenticationProvider } from "providers";
import {
ButtonGroup,
Flex,
FlexItem,
IconButton,
Logo,
Section,
TextContentTitle,
TextLink,
TextLinkList,
TextListItem,
TextStrong,
} from "ui";
import { Flex, Section, TextContentTitle } from "ui";

function App() {
return (
@@ -24,82 +11,7 @@ function App() {
<TextContentTitle align="center" title="Title" subtitle="Subtitle" />
</Flex>
</Section>
<StandardFooter>
<Flex container type="quarter" wrap gap="xl">
<FlexItem size="minor">
<Flex direction="column" gap="lg">
<Logo />
<ButtonGroup>
<IconButton
aria-label="Write a nice description of the action."
onPress={() => {}}
size="sm"
variant="subtle"
>
<IconFacebook />
</IconButton>
<IconButton
aria-label="Write a nice description of the action."
onPress={() => {}}
size="sm"
variant="subtle"
>
<IconLinkedin />
</IconButton>
<IconButton
aria-label="Write a nice description of the action."
onPress={() => {}}
size="sm"
variant="subtle"
>
<IconYoutube />
</IconButton>
<IconButton
aria-label="Write a nice description of the action."
onPress={() => {}}
size="sm"
variant="subtle"
>
<IconInstagram />
</IconButton>
</ButtonGroup>
</Flex>
</FlexItem>
<TextLinkList title={<TextStrong>Text Strong</TextStrong>}>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
</TextLinkList>
<TextLinkList title={<TextStrong>Text Strong</TextStrong>}>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
</TextLinkList>
<TextLinkList title={<TextStrong>Text Strong</TextStrong>}>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item</TextLink>
</TextListItem>
</TextLinkList>
</Flex>
</StandardFooter>
<StandardFooter />
</AuthenticationProvider>
);
}
0 src/blocks/Cards/Card.figma.tsx → src/blocks/Cards/Cards.figma.tsx
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion src/blocks/Cards/Cards.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { Card, PricingCard, ProductInfoCard, TestimonialCard } from "./Cards";

const meta: Meta<typeof Card> = {
component: Card,
title: "blocks/Card",
title: "blocks/Cards",
parameters: { layout: "centered" },
};
export default meta;
2 changes: 1 addition & 1 deletion src/blocks/Cards/Cards.tsx
View file
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ import {
TextTitlePage,
} from "ui";
import { AnchorOrButton, AnchorOrButtonProps } from "ui/utils/AnchorOrButton";
import "./card.css";
import "./cards.css";

export type CardProps = ComponentPropsWithoutRef<"div"> & {
direction?: "horizontal" | "vertical";
10 changes: 0 additions & 10 deletions src/blocks/Cards/card.css → src/blocks/Cards/cards.css
View file
Original file line number Diff line number Diff line change
@@ -8,20 +8,10 @@

&.card-direction-vertical {
flex-direction: column;
/* grid-template-areas: "content";
&:has(.card-asset) {
grid-template-areas: "asset" "content";
} */
}

&.card-direction-horizontal {
flex-direction: var(--sds-responsive-direction-column-to-row);
/* grid-template-areas: "content";
&:has(.card-asset) {
grid-template-areas: "asset content";
grid-template-columns: auto 1fr;
} */
}

&.card-variant-stroke {
105 changes: 102 additions & 3 deletions src/blocks/Footers/Footers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,113 @@
import { Section, type SectionProps } from "ui";
import { IconInstagram, IconLinkedin, IconTwitter, IconYoutube } from "icons";
import {
ButtonGroup,
Flex,
FlexItem,
IconButton,
Logo,
Section,
TextLink,
TextLinkList,
TextListItem,
TextStrong,
type SectionProps,
} from "ui";

export type StandardFooterProps = Omit<SectionProps, "variant" | "padding">;
export function StandardFooter({ className, ...props }: StandardFooterProps) {
return (
<Section
elementType="footer"
variant="brand"
variant="stroke"
paddingTop="md"
paddingBottom="lg"
style={{ marginTop: "auto" }}
{...props}
/>
>
<Flex wrap type="quarter" gap="xl" container>
<FlexItem size="minor">
<Flex direction="column" gap="xl" alignSecondary="start">
<FlexItem>
<Logo />
</FlexItem>
<SocialButtons />
</Flex>
</FlexItem>
<FlexItem size="minor">
<TextLinkList title={<TextStrong>Something 1</TextStrong>}>
<TextListItem>
<TextLink href="#">List item 1</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item 2</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item 3</TextLink>
</TextListItem>
</TextLinkList>
</FlexItem>
<FlexItem size="minor">
<TextLinkList title={<TextStrong>Something 2</TextStrong>}>
<TextListItem>
<TextLink href="#">List item 1</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item 2</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item 3</TextLink>
</TextListItem>
</TextLinkList>
</FlexItem>
<FlexItem size="minor">
<TextLinkList title={<TextStrong>Something 3</TextStrong>}>
<TextListItem>
<TextLink href="#">List item 1</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item 2</TextLink>
</TextListItem>
<TextListItem>
<TextLink href="#">List item 3</TextLink>
</TextListItem>
</TextLinkList>
</FlexItem>
</Flex>
</Section>
);
}

export function SocialButtons() {
return (
<ButtonGroup>
<IconButton
variant="subtle"
aria-label="Twitter"
href="https://www.twitter.com"
>
<IconTwitter />
</IconButton>
<IconButton
variant="subtle"
aria-label="Instagram"
href="https://www.instagram.com"
>
<IconInstagram />
</IconButton>
<IconButton
variant="subtle"
aria-label="YouTube"
href="https://www.youtube.com"
>
<IconYoutube />
</IconButton>
<IconButton
variant="subtle"
aria-label="LinkedIn"
href="https://www.linkedin.com"
>
<IconLinkedin />
</IconButton>
</ButtonGroup>
);
}
21 changes: 21 additions & 0 deletions src/blocks/Headers/Headers.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Meta, StoryObj } from "@storybook/react";
import { Flex, Section } from "ui";
import { StandardHeader } from "./Headers";

const meta: Meta<typeof StandardHeader> = {
component: StandardHeader,
title: "blocks/Headers",
parameters: { layout: "centered" },
};
export default meta;

export const Default: StoryObj<typeof StandardHeader> = {
render: () => (
<>
<StandardHeader />
<Section>
<Flex container>Something</Flex>
</Section>
</>
),
};
167 changes: 116 additions & 51 deletions src/blocks/Headers/Headers.tsx
View file
Original file line number Diff line number Diff line change
@@ -9,6 +9,8 @@ import {
Button,
ButtonGroup,
Description,
Dialog,
DialogModal,
Flex,
FlexItem,
IconButton,
@@ -23,33 +25,14 @@ import {
Section,
type SectionProps,
} from "ui";
import "./headers.css";

function HeaderUser() {
function HeaderNavigation() {
const { currentUser, login, logout } = useContext(AuthenticationContext);
return currentUser ? (
<MenuTrigger>
<AvatarButton
src={currentUser.avatar}
initials={currentUser.name.charAt(0)}
/>
<MenuPopover placement="bottom right">
<Menu>
<MenuItem>
<AvatarBlock>
<Avatar
src={currentUser.avatar}
initials={currentUser.name.charAt(0)}
/>
<Label>{currentUser.name}</Label>
<Description>View profile</Description>
</AvatarBlock>
</MenuItem>
<MenuItem onAction={logout}>Log out</MenuItem>
</Menu>
</MenuPopover>
</MenuTrigger>
) : (
<ButtonGroup>
const [open, setOpen] = useState(false);

const userButtons = (
<>
<Button
variant="secondary"
size="sm"
@@ -75,50 +58,127 @@ function HeaderUser() {
>
Register
</Button>
</ButtonGroup>
</>
);
}

function HeaderNavigation() {
const [open, setOpen] = useState(false);
return (
<Flex
direction="column"
gap="md"
alignPrimary="center"
alignSecondary="center"
>
<FlexItem className="display-flex-to-none">
<Flex alignPrimary="center">
<>
<Flex
direction="column"
gap="md"
alignPrimary="center"
alignSecondary="center"
>
<FlexItem className="display-flex-to-none">
<Flex alignPrimary="center">
<IconButton
variant="subtle"
aria-label="Toggle navigation menu"
onPress={() => setOpen(true)}
>
<IconMenu />
</IconButton>
</Flex>
</FlexItem>
<FlexItem className="display-none-to-flex">
<Flex gap="lg" alignSecondary="center">
<Navigation>
<NavigationItem isSelected>Home</NavigationItem>
<NavigationItem>About</NavigationItem>
</Navigation>
{currentUser ? (
<MenuTrigger>
<AvatarButton
src={currentUser.avatar}
initials={currentUser.name.charAt(0)}
/>
<MenuPopover placement="bottom right">
<Menu>
<MenuItem>
<AvatarBlock>
<Avatar
src={currentUser.avatar}
initials={currentUser.name.charAt(0)}
/>
<Label>{currentUser.name}</Label>
<Description>View profile</Description>
</AvatarBlock>
</MenuItem>
<MenuItem onAction={logout}>Log out</MenuItem>
</Menu>
</MenuPopover>
</MenuTrigger>
) : (
<ButtonGroup>{userButtons}</ButtonGroup>
)}
</Flex>
</FlexItem>
</Flex>
<DialogModal isOpen={open}>
<Dialog className={clsx("navigation-dialog")}>
<IconButton
className={clsx("navigation-dialog-close")}
variant="subtle"
aria-label="Toggle navigation menu"
onPress={() => setOpen(!open)}
aria-label="Close navigation menu"
onPress={() => setOpen(false)}
>
{open ? <IconX /> : <IconMenu />}
<IconX />
</IconButton>
</Flex>
</FlexItem>
<Navigation className={clsx({ "display-none-to-flex": !open })}>
<NavigationItem isSelected>Home</NavigationItem>
<NavigationItem>About</NavigationItem>
</Navigation>
</Flex>
<Flex direction="column" alignPrimary="space-between">
<Navigation>
<NavigationItem isSelected>Home</NavigationItem>
<NavigationItem>About</NavigationItem>
</Navigation>
{currentUser ? (
<Flex alignSecondary="center" gap="sm" direction="column">
<FlexItem>
<Flex alignPrimary="center">
<Avatar
src={currentUser.avatar}
initials={currentUser.name.charAt(0)}
/>
</Flex>
</FlexItem>
<FlexItem>
<Flex alignPrimary="center">
<Label>{currentUser.name}</Label>
</Flex>
</FlexItem>
<FlexItem>
<Flex alignPrimary="center">
<Button variant="subtle" size="sm" onPress={logout}>
Log out
</Button>
</Flex>
</FlexItem>
</Flex>
) : (
<ButtonGroup align="justify">{userButtons}</ButtonGroup>
)}
</Flex>
</Dialog>
</DialogModal>
</>
);
}

export type StandardHeaderProps = Omit<SectionProps, "variant" | "padding">;
export function StandardHeader({ className, ...props }: StandardHeaderProps) {
return (
<Section elementType="header" variant="stroke" padding="sm" {...props}>
<Section
className="header"
elementType="header"
variant="stroke"
padding="sm"
{...props}
>
<Flex container alignPrimary="space-between" alignSecondary="center">
<FlexItem size="minor">
<Logo />
</FlexItem>
<FlexItem size="major">
<Flex gap="xl" alignPrimary="end" alignSecondary="center">
<HeaderNavigation />
<HeaderUser />
</Flex>
</FlexItem>
</Flex>
@@ -128,14 +188,19 @@ export function StandardHeader({ className, ...props }: StandardHeaderProps) {
export type VerticalHeaderProps = Omit<SectionProps, "variant" | "padding">;
export function VerticalHeader({ className, ...props }: VerticalHeaderProps) {
return (
<Section elementType="header" variant="subtle" padding="sm" {...props}>
<Section
className="header"
elementType="header"
variant="subtle"
padding="sm"
{...props}
>
<Flex direction="column" alignSecondary="center" gap="md">
<Flex alignPrimary="center">
<Logo />
</Flex>
<Flex alignPrimary="center">
<HeaderNavigation />
<HeaderUser />
</Flex>
</Flex>
</Section>
34 changes: 34 additions & 0 deletions src/blocks/Headers/headers.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.header {
background: var(--sds-color-bg-default-default);
left: 0;
position: sticky;
top: 0;
z-index: var(--global-stack-top);
}

.navigation-dialog {
border: none;
border-radius: var(--sds-size-radius-none);
display: flex;
flex-direction: column;
height: 100%;
padding-left: var(--sds-size-padding-lg);
padding-right: var(--sds-size-padding-lg);
max-width: 100%;
width: 100%;

> .flex {
flex: 1;
}

.navigation {
flex: 1;
justify-content: center;
}
}

.navigation-dialog-close {
position: absolute;
right: var(--sds-size-padding-md);
top: var(--sds-size-padding-md);
}
29 changes: 0 additions & 29 deletions src/figma/figmaComponents.stories.tsx
View file

This file was deleted.

3,202 changes: 0 additions & 3,202 deletions src/figma/figmaComponents.tsx
View file

This file was deleted.

8 changes: 8 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
@@ -6,6 +6,8 @@
--global-focus-ring-size: calc(var(--sds-responsive-border-width) * 2);
--global-focus-ring-color: var(--sds-color-blue-500);
--global-line-height-paragraph: 1.4;
--global-stack-top: 999;
--global-stack-focus: 999;
}

.display-none-to-flex {
@@ -31,7 +33,13 @@ body {
margin: 0;
}

html,
body {
height: 100%;
}

#root {
min-height: 100%;
width: 100%;
}

13 changes: 9 additions & 4 deletions src/ui/Avatar/avatar.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
.avatar-button {
border-radius: var(--avatar-border-radius);
cursor: pointer;
display: inline-flex;
height: var(--avatar-diameter);
position: relative;
width: var(--avatar-diameter);
&:focus-visible {
outline: none;
@@ -24,14 +22,17 @@

.avatar {
border-radius: var(--avatar-border-radius);
display: inline-flex;
position: relative;
height: var(--avatar-diameter);
width: var(--avatar-diameter);
> img,
> svg {
border-radius: var(--avatar-border-radius);
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
}

> svg {
@@ -46,11 +47,15 @@
.avatar-block {
align-items: center;
display: grid;
grid-template-areas: "avatar label" "avatar description";
grid-template-areas: "avatar label";
grid-template-columns: auto 1fr;
column-gap: var(--sds-size-gap-sm);
row-gap: var(--sds-size-gap-xs);

&:has(> .description) {
grid-template-areas: "avatar label" "avatar description";
}

> .avatar {
grid-area: avatar;
}
2 changes: 1 addition & 1 deletion src/ui/Figma.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ function Figma() {

const meta: Meta<typeof Figma> = {
component: Figma,
title: "figma/Preview",
title: "z/figma/Preview",
parameters: { layout: "centered" },
};
export default meta;
24 changes: 21 additions & 3 deletions src/ui/Text/text.css
View file
Original file line number Diff line number Diff line change
@@ -10,13 +10,31 @@
.text-body-emphasis {
font: var(--sds-font-body-emphasis);
}

.text-body-link {
font: var(--sds-font-body-link);
}
.text-body-link {
--border-radius: var(--sds-size-radius-xs);
color: inherit;
font: var(--sds-font-body-link);
text-decoration: underline;
position: relative;
&:focus-visible {
outline: none;
--offset: calc(var(--sds-responsive-border-width) * 2);
&::before {
content: "";
border-radius: calc(var(--border-radius) + var(--offset));
bottom: calc(-1 * var(--offset));
box-shadow: 0 0 0 var(--global-focus-ring-size)
var(--global-focus-ring-color);
left: calc(-1 * var(--offset));
position: absolute;
right: calc(-1 * var(--offset));
top: calc(-1 * var(--offset));
z-index: var(--global-stack-focus);
}
}
}

.text-input {
font: var(--sds-font-input);
}

0 comments on commit a59b7fa

Please sign in to comment.