Skip to content

Commit

Permalink
fix(website): several layout improvements
Browse files Browse the repository at this point in the history 
- Responsive layout
- Fix several overflow issues
- Fix Accessibility section
- Animate We Do The Thinking Section
  • Loading branch information
@TheSisb
TheSisb committed Feb 19, 2024
1 parent 95d8d63 commit bd7765c
Show file tree
Hide file tree
Showing 16 changed files with 392 additions and 257 deletions.
86 changes: 86 additions & 0 deletions packages/paste-website/src/assets/illustrations/DoodleLoopFooter.tsx
View file

Large diffs are not rendered by default.

164 changes: 81 additions & 83 deletions packages/paste-website/src/components/homepage/Accessibility.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
import { useUID } from "@twilio-paste/uid-library";
import * as React from "react";

import { DoodleLoopFooter } from "../../assets/illustrations/DoodleLoopFooter";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { BouncyAnchor } from "./BouncyAnchor";
import { SectionContainer } from "./SectionContainer";
import { SectionSeparator } from "./SectionSeparator";

const Accessibility: React.FC = (): React.ReactElement => {
Expand All @@ -31,20 +33,15 @@ const Accessibility: React.FC = (): React.ReactElement => {
const modalHeadingID = useUID();

return (
<Box display="flex" justifyContent="center" marginY="space200">
<Box
element="ACCESSIBILITY"
display="flex"
flexDirection="column"
width="100%"
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
>
<SectionContainer>
<Box element="ACCESSIBILITY" width="100%" maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}>
<SectionSeparator>Accessibility</SectionSeparator>
<Box
display="flex"
flexDirection="row"
flexDirection={["column", "column", "column", "row"]}
columnGap="space200"
paddingTop="space150"
rowGap="space150"
paddingTop="space160"
justifyContent="space-between"
>
<Box fontWeight="fontWeightSemibold" fontSize="fontSize40" lineHeight="lineHeight40" maxWidth="size60">
Expand All @@ -66,82 +63,83 @@ const Accessibility: React.FC = (): React.ReactElement => {
Keyboard navigation and focus management to allow task completion through a variety of input devices.
</ListItem>
</UnorderedList>
<BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
</Box>
<Box>
<Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
<TabList aria-label="Horizontal product tabs">
<Tab id={selectedTabId}>Focus management</Tab>
<Tab>Screen reader support</Tab>
<Tab>Keyboard support</Tab>
</TabList>
<TabPanels>
<TabPanel paddingTop="space0">
<Box
width="size60"
paddingX="space150"
paddingY="space100"
backgroundColor="colorBackgroundOverlay"
borderBottomLeftRadius="borderRadius30"
borderBottomRightRadius="borderRadius30"
>
<ModalContext.Provider value={{ onDismiss }}>
<ModalDialogContent aria-labelledby={modalHeadingID}>
<ModalHeader>
<ModalHeading as="h3" id={modalHeadingID}>
Focus management
</ModalHeading>
</ModalHeader>
<ModalBody>
All elements required to interact with the modal, including closing or acknowledging it, are
contained in the modal since they trap focus, and users can&apos;t interact with the
underlying page.
</ModalBody>
<ModalFooter>
<ModalFooterActions>
<Button variant="secondary" onClick={onDismiss}>
Cancel
</Button>
<Button variant="primary" onClick={onOpenModal}>
Next
<ArrowForwardIcon decorative />
</Button>
</ModalFooterActions>
</ModalFooter>
</ModalDialogContent>
</ModalContext.Provider>
</Box>
</TabPanel>
<TabPanel paddingTop="space0">
<Box
width="size60"
paddingX="space150"
paddingY="space100"
backgroundColor="colorBackgroundOverlay"
borderBottomLeftRadius="borderRadius30"
borderBottomRightRadius="borderRadius30"
>
screen reader support
</Box>
</TabPanel>
<TabPanel paddingTop="space0">
<Box
width="size60"
paddingX="space150"
paddingY="space100"
backgroundColor="colorBackgroundOverlay"
borderBottomLeftRadius="borderRadius30"
borderBottomRightRadius="borderRadius30"
>
keyboard support
</Box>
</TabPanel>
</TabPanels>
</Tabs>
<Box paddingTop="space70">
<BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
</Box>
</Box>
<Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
<TabList aria-label="Horizontal product tabs">
<Tab id={selectedTabId}>Focus management</Tab>
<Tab>Screen reader support</Tab>
<Tab>Keyboard support</Tab>
</TabList>
<TabPanels>
<TabPanel paddingTop="space0">
<Box
paddingX="space150"
paddingY="space100"
backgroundColor="colorBackgroundOverlay"
borderBottomLeftRadius="borderRadius30"
borderBottomRightRadius="borderRadius30"
>
<ModalContext.Provider value={{ onDismiss }}>
<ModalDialogContent aria-labelledby={modalHeadingID}>
<ModalHeader>
<ModalHeading as="h3" id={modalHeadingID}>
Focus management
</ModalHeading>
</ModalHeader>
<ModalBody>
All elements required to interact with the modal, including closing or acknowledging it, are
contained in the modal since they trap focus, and users can&apos;t interact with the underlying
page.
</ModalBody>
<ModalFooter>
<ModalFooterActions>
<Button variant="secondary" onClick={onDismiss}>
Cancel
</Button>
<Button variant="primary" onClick={onOpenModal}>
Next
<ArrowForwardIcon decorative />
</Button>
</ModalFooterActions>
</ModalFooter>
</ModalDialogContent>
</ModalContext.Provider>
</Box>
</TabPanel>
<TabPanel paddingTop="space0">
<Box
paddingX="space150"
paddingY="space100"
backgroundColor="colorBackgroundOverlay"
borderBottomLeftRadius="borderRadius30"
borderBottomRightRadius="borderRadius30"
>
screen reader support
</Box>
</TabPanel>
<TabPanel paddingTop="space0">
<Box
paddingX="space150"
paddingY="space100"
backgroundColor="colorBackgroundOverlay"
borderBottomLeftRadius="borderRadius30"
borderBottomRightRadius="borderRadius30"
>
keyboard support
</Box>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Box>
</Box>

<Box display={["none", "none", "none", "flex"]} justifyContent="center" marginTop="space140">
<DoodleLoopFooter />
</Box>
</SectionContainer>
);
};

Expand Down
69 changes: 38 additions & 31 deletions packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import * as React from "react";

import DesignTool from "../../assets/illustrations/illo_design-tool.svg";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { SectionContainer } from "./SectionContainer";

const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, description }): React.ReactElement => {
return (
Expand All @@ -29,40 +30,46 @@ const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, descri

const CommunityOfBuilders: React.FC = (): React.ReactElement => {
return (
<Box position="relative">
<Box display="flex" justifyContent="center" marginY="space200">
<Box
element="THEMEABLE"
display="flex"
flexDirection="column"
width="100%"
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
backgroundColor="colorBackgroundWarningWeakest"
paddingY="space170"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
paddingX="104px"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
borderRadius="24px"
>
<Box display="flex" flexDirection="column" rowGap="space130" justifyContent="space-between">
<Heading as="h3" variant="heading10" marginBottom="space0">
Join our community of builders
</Heading>
<Box display="flex" flexDirection="row" columnGap="space70">
<StatBox stat="13k builders" description="Weekly npm downloads" />
<StatBox stat="70k" description="Components in production" />
<StatBox stat="1.1M" description="Figma components inserted" />
<StatBox stat="30" description="Monthly Github Discussions" />
</Box>
<SectionContainer paddingY="space70">
<Box
element="COMMUNITY_OF_BUILDERS"
position="relative"
display="flex"
flexDirection="column"
width="100%"
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
backgroundColor="colorBackgroundWarningWeakest"
paddingY="space170"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
paddingX="104px"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
borderRadius="24px"
>
<Box display="flex" flexDirection="column" rowGap="space130" justifyContent="space-between">
<Heading as="h3" variant="heading10" marginBottom="space0">
Join our community of builders
</Heading>
<Box
display="flex"
flexDirection={["column", "column", "row"]}
columnGap="space70"
rowGap="space70"
justifyContent="space-between"
>
<StatBox stat="13k" description="Weekly npm downloads" />
<StatBox stat="70k" description="Components in production" />
<StatBox stat="1.1M" description="Figma components inserted" />
<StatBox stat="30" description="Monthly Github Discussions" />
</Box>
</Box>

<Box width="size20" height="size10" position="absolute" bottom={-50} right={250}>
<Image src={DesignTool} aria-hidden="true" role="img" alt="token colors illustration" />
</Box>
</Box>
<Box width="size20" height="size10" position="absolute" bottom={-50} right={250}>
<Image src={DesignTool} aria-hidden="true" role="img" alt="token colors illustration" />
</Box>
</Box>
</SectionContainer>
);
};

Expand Down
72 changes: 33 additions & 39 deletions packages/paste-website/src/components/homepage/DesignEfficiency.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,50 @@
import { Box } from "@twilio-paste/box";
import { Heading } from "@twilio-paste/heading";
import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon";
import { Paragraph } from "@twilio-paste/paragraph";
import { Text } from "@twilio-paste/text";
import Image from "next/image";
import * as React from "react";

import TokenColors from "../../assets/illustrations/token_colors.svg";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { SectionContainer } from "./SectionContainer";
import { SectionSeparator } from "./SectionSeparator";

const DesignEfficiency: React.FC = (): React.ReactElement => {
return (
<Box display="flex" justifyContent="center" marginY="space200">
<Box
element="THEMEABLE"
display="flex"
flexDirection="column"
width="100%"
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
>
<SectionSeparator>Design efficiency</SectionSeparator>
<Box display="flex" justifyContent="space-between">
<Box paddingTop="space190" display="flex" flexDirection="column" maxWidth="size40">
<Heading as="h3" variant="heading20">
Built by designers, for designers
</Heading>
<Paragraph>1-to-1 code and design libraries means production-ready design prototypes, too.</Paragraph>
<Text as="span" fontSize="fontSize40" lineHeight="lineHeight40" marginBottom="space70">
With our libraries, you can swap themes easily with Figma variable modes, and prep design files for
efficient design and engineering collaboration.
</Text>
<Text
as="a"
href="#"
color="colorTextLink"
fontWeight="fontWeightSemibold"
fontSize="fontSize40"
lineHeight="lineHeight40"
display="flex"
_hover={{ color: "colorTextLinkStronger" }}
>
Find us on Figma Community <LinkExternalIcon decorative={false} title="external link" size="sizeIcon40" />
</Text>
icons icons icons icons icons
</Box>
<Box maxWidth="size40" alignSelf="center" textAlign="center" paddingTop="space150">
<Image src={TokenColors} width="500" aria-hidden="true" role="img" alt="token colors illustration" />
</Box>
<SectionContainer>
<SectionSeparator>Design efficiency</SectionSeparator>

<Box display="flex" flexDirection={["column", "column", "row"]} justifyContent="space-between">
<Box paddingTop="space190" display="flex" flexDirection="column" maxWidth="size40" flexShrink={0}>
<Heading as="h3" variant="heading20">
Built by designers, for designers
</Heading>
<Text as="span" fontSize="fontSize40" lineHeight="lineHeight40" marginBottom="space70">
1-to-1 code and design libraries means production-ready design prototypes, too.
</Text>
<Text as="span" fontSize="fontSize40" lineHeight="lineHeight40" marginBottom="space70">
With our libraries, you can swap themes easily with Figma variable modes, and prep design files for
efficient design and engineering collaboration.
</Text>
<Text
as="a"
href="#"
color="colorTextLink"
fontWeight="fontWeightSemibold"
fontSize="fontSize40"
lineHeight="lineHeight40"
display="flex"
_hover={{ color: "colorTextLinkStronger" }}
>
Find us on Figma Community <LinkExternalIcon decorative={false} title="external link" size="sizeIcon40" />
</Text>
icons icons icons icons icons
</Box>
<Box paddingTop="space150" textAlign="right" flexGrow={1}>
<Image src={TokenColors} width="500" aria-hidden="true" role="img" alt="" />
</Box>
</Box>
</Box>
</SectionContainer>
);
};

Expand Down
Loading

0 comments on commit bd7765c

Please sign in to comment.