From bd7765c12c4cbfc4e01cb4d22d8649899da8a13d Mon Sep 17 00:00:00 2001 From: TheSisb Date: Sun, 18 Feb 2024 22:04:06 -0600 Subject: [PATCH] fix(website): several layout improvements - Responsive layout - Fix several overflow issues - Fix Accessibility section - Animate We Do The Thinking Section --- .../assets/illustrations/DoodleLoopFooter.tsx | 86 +++++++++ .../src/components/homepage/Accessibility.tsx | 164 +++++++++--------- .../homepage/CommunityOfBuilders.tsx | 69 ++++---- .../components/homepage/DesignEfficiency.tsx | 72 ++++---- .../homepage/ForTwilioCustomers.tsx | 29 ++-- .../src/components/homepage/NewHomeHero.tsx | 30 ++-- .../src/components/homepage/NewSection.tsx | 16 +- .../components/homepage/SectionContainer.tsx | 13 ++ .../components/homepage/SectionSeparator.tsx | 18 +- .../src/components/homepage/Templates.tsx | 14 +- .../src/components/homepage/Themeable.tsx | 10 +- .../components/homepage/WeDoTheThinking.tsx | 93 ++++++---- .../component-showcase/ColumnTwoShowcase.tsx | 1 + .../homepage/component-showcase/index.tsx | 6 +- .../site-wrapper-new/site-footer/index.tsx | 2 +- .../paste-website/src/pages/new/index.tsx | 26 +-- 16 files changed, 392 insertions(+), 257 deletions(-) create mode 100644 packages/paste-website/src/assets/illustrations/DoodleLoopFooter.tsx create mode 100644 packages/paste-website/src/components/homepage/SectionContainer.tsx diff --git a/packages/paste-website/src/assets/illustrations/DoodleLoopFooter.tsx b/packages/paste-website/src/assets/illustrations/DoodleLoopFooter.tsx new file mode 100644 index 0000000000..d8616fbd32 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/DoodleLoopFooter.tsx @@ -0,0 +1,86 @@ +import { animated, useSpring } from "@twilio-paste/animation-library"; +import { useTheme } from "@twilio-paste/theme"; +import * as React from "react"; +import VisibilitySensor from "react-visibility-sensor"; + +const dashArray = 350; + +export const DoodleLoopFooter = (): JSX.Element => { + const [show, setShow] = React.useState(false); + const theme = useTheme(); + + function handleVisibilityChange(isVisible: boolean): void { + if (!show) { + setShow(isVisible); + } + } + + const styles = useSpring({ + x: show ? 0 : -1 * dashArray, + config: { mass: 1, tension: 280, friction: 40 }, + }); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx index 6c935d2e9a..222ac3de41 100644 --- a/packages/paste-website/src/components/homepage/Accessibility.tsx +++ b/packages/paste-website/src/components/homepage/Accessibility.tsx @@ -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 => { @@ -31,20 +33,15 @@ const Accessibility: React.FC = (): React.ReactElement => { const modalHeadingID = useUID(); return ( - - + + Accessibility @@ -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. - - - - - - Focus management - Screen reader support - Keyboard support - - - - - - - - - Focus management - - - - 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't interact with the - underlying page. - - - - - - - - - - - - - - screen reader support - - - - - keyboard support - - - - + + + + + + Focus management + Screen reader support + Keyboard support + + + + + + + + + Focus management + + + + 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't interact with the underlying + page. + + + + + + + + + + + + + + screen reader support + + + + + keyboard support + + + + - + + + + + ); }; diff --git a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx index d1756d8033..49aa2e3b60 100644 --- a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx +++ b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx @@ -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 ( @@ -29,40 +30,46 @@ const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, descri const CommunityOfBuilders: React.FC = (): React.ReactElement => { return ( - - - - - - Join our community of builders - - - - - - - + + + + + Join our community of builders + + + + + + + + + + - - - - + ); }; diff --git a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx index 29e133c50b..5c7ac92464 100644 --- a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx +++ b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx @@ -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 ( - - - Design efficiency - - - - Built by designers, for designers - - 1-to-1 code and design libraries means production-ready design prototypes, too. - - With our libraries, you can swap themes easily with Figma variable modes, and prep design files for - efficient design and engineering collaboration. - - - Find us on Figma Community - - icons icons icons icons icons - - - - + + Design efficiency + + + + + Built by designers, for designers + + + 1-to-1 code and design libraries means production-ready design prototypes, too. + + + With our libraries, you can swap themes easily with Figma variable modes, and prep design files for + efficient design and engineering collaboration. + + + Find us on Figma Community + + icons icons icons icons icons + + + - + ); }; diff --git a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx index c2319a7c1d..8bcf5c27a9 100644 --- a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx +++ b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx @@ -5,22 +5,23 @@ import Image from "next/image"; import * as React from "react"; import PuzzleIllo from "../../assets/illustrations/puzzle_illo.svg"; +import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; const ForTwilioCustomers: React.FC = (): React.ReactElement => { return ( - + - + { > For Twilio customers - - Some blurb here that’s basically a quick setup guide for customers. + + Some blurb here that's basically a quick setup guide for customers. { Figma Community file - - + + diff --git a/packages/paste-website/src/components/homepage/NewHomeHero.tsx b/packages/paste-website/src/components/homepage/NewHomeHero.tsx index 89888c30e0..ffae478104 100644 --- a/packages/paste-website/src/components/homepage/NewHomeHero.tsx +++ b/packages/paste-website/src/components/homepage/NewHomeHero.tsx @@ -3,35 +3,24 @@ import { DisplayHeading } from "@twilio-paste/display-heading"; import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; -import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; import CircleIcon from "../icons/CircleIcon"; import { BouncyAnchor } from "./BouncyAnchor"; import { SearchBox } from "./SearchBox"; +import { SectionContainer } from "./SectionContainer"; import { ComponentShowcase } from "./component-showcase"; const HomeHero = (): JSX.Element => { const theme = useTheme(); return ( - - + + @@ -60,16 +49,19 @@ const HomeHero = (): JSX.Element => { - + + + + - + - + ); }; diff --git a/packages/paste-website/src/components/homepage/NewSection.tsx b/packages/paste-website/src/components/homepage/NewSection.tsx index dc9266e981..5ec26666f3 100644 --- a/packages/paste-website/src/components/homepage/NewSection.tsx +++ b/packages/paste-website/src/components/homepage/NewSection.tsx @@ -2,21 +2,21 @@ import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import * as React from "react"; -import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionContainer } from "./SectionContainer"; import { WhatsNew } from "./WhatsNew"; const NewSection: React.FC = (): React.ReactElement => { return ( - + We're hiring a Product Designer! Apply here @@ -28,7 +28,7 @@ const NewSection: React.FC = (): React.ReactElement => { Check out our roadmap - + ); }; diff --git a/packages/paste-website/src/components/homepage/SectionContainer.tsx b/packages/paste-website/src/components/homepage/SectionContainer.tsx new file mode 100644 index 0000000000..dbe478619f --- /dev/null +++ b/packages/paste-website/src/components/homepage/SectionContainer.tsx @@ -0,0 +1,13 @@ +import { Box, type BoxProps } from "@twilio-paste/box"; +import * as React from "react"; +import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; + +export const SectionContainer: React.FC = ({ children, ...props }) => { + return ( + + + {children} + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/SectionSeparator.tsx b/packages/paste-website/src/components/homepage/SectionSeparator.tsx index 1f27d3e396..305c3a5bd7 100644 --- a/packages/paste-website/src/components/homepage/SectionSeparator.tsx +++ b/packages/paste-website/src/components/homepage/SectionSeparator.tsx @@ -1,19 +1,23 @@ import { Box } from "@twilio-paste/box"; -import { Text } from "@twilio-paste/text"; import * as React from "react"; interface SectionSeparatorProps { children: React.ReactNode; - gridArea?: string; } -const SectionSeparator: React.FC = ({ children, gridArea }) => { +const SectionSeparator: React.FC = ({ children }) => { return ( - - + + {children} - - + + ); }; diff --git a/packages/paste-website/src/components/homepage/Templates.tsx b/packages/paste-website/src/components/homepage/Templates.tsx index b14f96e8d4..22657b466c 100644 --- a/packages/paste-website/src/components/homepage/Templates.tsx +++ b/packages/paste-website/src/components/homepage/Templates.tsx @@ -6,11 +6,18 @@ import { Text } from "@twilio-paste/text"; import * as React from "react"; import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionContainer } from "./SectionContainer"; const Templates: React.FC = (): React.ReactElement => { return ( - - + + Explore our templates @@ -47,7 +54,6 @@ const Templates: React.FC = (): React.ReactElement => { rowGap="space70" > { - + ); }; diff --git a/packages/paste-website/src/components/homepage/Themeable.tsx b/packages/paste-website/src/components/homepage/Themeable.tsx index cfbf838a94..c0a2d87f4a 100644 --- a/packages/paste-website/src/components/homepage/Themeable.tsx +++ b/packages/paste-website/src/components/homepage/Themeable.tsx @@ -8,12 +8,13 @@ import * as React from "react"; import FigmaLogo from "../../assets/illustrations/figma-logo.svg"; import ReactLogo from "../../assets/illustrations/react-logo.svg"; import TypescriptLogo from "../../assets/illustrations/ts-logo.svg"; -import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionContainer } from "./SectionContainer"; import { SectionSeparator } from "./SectionSeparator"; const Themeable: React.FC = (): React.ReactElement => { return ( - + + Themeable and composable { gridTemplateAreas='"separator" "row1" "row2"' justifyItems="center" rowGap="space100" - width="100%" - maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH} > - Themeable and composable @@ -79,7 +77,7 @@ const Themeable: React.FC = (): React.ReactElement => { - + ); }; diff --git a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx index 01917b33c0..09ab169b30 100644 --- a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx +++ b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx @@ -1,35 +1,58 @@ +import { animated, useSpring } from "@twilio-paste/animation-library"; import { Box } from "@twilio-paste/box"; import { Heading } from "@twilio-paste/heading"; import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon"; import { Paragraph } from "@twilio-paste/paragraph"; import { Text } from "@twilio-paste/text"; import * as React from "react"; +import VisibilitySensor from "react-visibility-sensor"; +import { SectionContainer } from "./SectionContainer"; + +const AnimatedBox = animated(Box); const ThinkingLine: React.FC<{ children: React.ReactNode }> = ({ children }): React.ReactElement => { + const [show, setShow] = React.useState(false); + + function handleVisibilityChange(isVisible: boolean): void { + if (!show) { + setShow(isVisible); + } + } + + const styles = useSpring({ + opacity: show ? 1 : 0.1, + }); + return ( - - - + + + + + + + {children} + - - {children} - - + ); }; const WeDoTheThinking: React.FC = (): React.ReactElement => { return ( - - + + - We do the thinking so you don't have to + + We do the thinking{" "} + + so you don't have to Creating seamless and accessible user experiences can be a tough task. But we help you simplify the journey. @@ -38,26 +61,28 @@ const WeDoTheThinking: React.FC = (): React.ReactElement => { Paste handles the research, design, testing, and engineering of the core building blocks. This frees up your energy to tackle customer challenges instead of UI issues. - - Accessibility standards - User research - Competitive analysis - Product requirements - Design & API review - Usage guidelines - Built-in constraints - Dos and Dont's - Performance + + + Accessibility standards + User research + Competitive analysis + Product requirements + Design & API review + Usage guidelines + Built-in constraints + Dos and Dont's + Performance + - + ); }; diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx index 8dd66b59d7..978acaa80d 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx @@ -30,6 +30,7 @@ export const ColumnTwoShowcase: React.FC = () => { gridArea="bottom2" // width="100%" width="369px" + position="relative" > Auto recharge disabled diff --git a/packages/paste-website/src/components/homepage/component-showcase/index.tsx b/packages/paste-website/src/components/homepage/component-showcase/index.tsx index e2d2cde4b1..58858b7211 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/index.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -8,9 +8,8 @@ import { ProgressStepsShowcase } from "./ProgressStepsShowcase"; const ComponentShowcase: React.FC = () => { return ( = () => { columnGap="space70" backgroundColor="colorBackgroundInverseStrong" padding="space130" - top="0" height="min-content" width="fit-content" // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -29,6 +27,7 @@ const ComponentShowcase: React.FC = () => { borderBottomRightRadius="32px" zIndex="zIndex10" element="COMPONENT_SHOWCASE" + overflow="hidden" > = () => { borderRadius="borderRadius30" gridArea="top" element="TOP_ROW" + overflow="hidden" > diff --git a/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx b/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx index 356c2f3bab..00a9657bcd 100644 --- a/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx +++ b/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx @@ -8,7 +8,7 @@ const SiteFooter: React.FC = () => { return ( - - - - - - - - - - - - + + + + + + + + + + + + + + ); };