From 48ab2a0a9e2509654f66ff02a004d80940ae02f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Mon, 5 Feb 2024 21:37:15 -0700 Subject: [PATCH] chore: homehero 2 --- .../public/images/avatars/token1.png | Bin 0 -> 17068 bytes .../public/images/avatars/token2.png | Bin 0 -> 12939 bytes .../public/images/avatars/token3.png | Bin 0 -> 14457 bytes .../public/images/avatars/token4.png | Bin 0 -> 15422 bytes .../src/components/homepage/HomeHero.tsx | 94 +++++++----- .../src/components/homepage/SearchBox.tsx | 1 + .../component-showcase/ColumnOneShowcase.tsx | 140 +++++++++++++++++- .../component-showcase/ColumnTwoShowcase.tsx | 73 ++++++++- .../homepage/component-showcase/index.tsx | 15 +- .../src/components/icons/CircleIcon.tsx | 37 +++++ .../site-footer/SiteFooterHeader.tsx | 13 -- .../site-footer/SiteFooterNav.tsx | 4 +- .../site-wrapper/site-footer/index.tsx | 8 +- packages/paste-website/src/pages/index.tsx | 6 +- 14 files changed, 312 insertions(+), 79 deletions(-) create mode 100644 packages/paste-website/public/images/avatars/token1.png create mode 100644 packages/paste-website/public/images/avatars/token2.png create mode 100644 packages/paste-website/public/images/avatars/token3.png create mode 100644 packages/paste-website/public/images/avatars/token4.png create mode 100644 packages/paste-website/src/components/icons/CircleIcon.tsx diff --git a/packages/paste-website/public/images/avatars/token1.png b/packages/paste-website/public/images/avatars/token1.png new file mode 100644 index 0000000000000000000000000000000000000000..17e0707555cbb9e42b856fc2e0c2c6cd8f31e917 GIT binary patch literal 17068 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 literal 0 HcmV?d00001 diff --git a/packages/paste-website/public/images/avatars/token2.png b/packages/paste-website/public/images/avatars/token2.png new file mode 100644 index 0000000000000000000000000000000000000000..b4679f455bab8f20144595aaade7efd2636ee895 GIT binary patch literal 12939 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 literal 0 HcmV?d00001 diff --git a/packages/paste-website/public/images/avatars/token4.png b/packages/paste-website/public/images/avatars/token4.png new file mode 100644 index 0000000000000000000000000000000000000000..357d391bb074072a57119fd3d781644677e9d232 GIT binary patch literal 15422 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 F{s;E3>^cAd literal 0 HcmV?d00001 diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx index b1983d03e1..d85dc52262 100644 --- a/packages/paste-website/src/components/homepage/HomeHero.tsx +++ b/packages/paste-website/src/components/homepage/HomeHero.tsx @@ -3,10 +3,12 @@ import { Box } from "@twilio-paste/box"; import { DisplayHeading } from "@twilio-paste/display-heading"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { Text } from "@twilio-paste/text"; +import { useTheme } from "@twilio-paste/theme"; import * as React from "react"; import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; import { event } from "../../lib/gtag"; +import CircleIcon from "../icons/CircleIcon"; import { SearchBox } from "./SearchBox"; import { ComponentShowcase } from "./component-showcase"; @@ -49,56 +51,66 @@ const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): }; const HomeHero = (): JSX.Element => { + const theme = useTheme(); return ( - + - - - Paste - - - Build inclusive, delightful customer experiences with Twilio’s open-source design system. - - - - - + + + Paste + + + Build inclusive, delightful customer experiences with Twilio’s open-source design system. + + + + + + + + + + + - ); }; diff --git a/packages/paste-website/src/components/homepage/SearchBox.tsx b/packages/paste-website/src/components/homepage/SearchBox.tsx index 169ee64fab..fbf5975631 100644 --- a/packages/paste-website/src/components/homepage/SearchBox.tsx +++ b/packages/paste-website/src/components/homepage/SearchBox.tsx @@ -22,6 +22,7 @@ const SearchBox: React.FC = () => { return ( <> { const [process, setProcess] = React.useState(ProcessObject.Success); const menu = useStatusMenuState(); + const [switchOn, setSwitchOn] = React.useState(true); const onClick = (status: any): void => { setProcess(ProcessObject[status as keyof typeof ProcessObject]); menu.hide(); }; + const [sliderValue, setSliderValue] = React.useState(50); + const sliderId = useUID(); + const [showDisclosure, setShowDisclosure] = React.useState(true); + const disclosure = useDisclosureState(); + const toggleDisclosure = (): void => setShowDisclosure((state) => !state); + const customDisclosureState = { + ...disclosure, + toggle: toggleDisclosure, + visible: showDisclosure, + }; + return ( - + { rowGap="space70" padding="space70" borderRadius="borderRadius30" + element="FIRST_BOX_COLUMN_1" > @@ -173,6 +215,102 @@ export const ColumnOneShowcase: React.FC = () => { + + setSwitchOn(!switchOn)}> + Enable animations + + + + + + + {""} + + + + + + setSliderValue(newValue)} hideRangeLabels /> + + + + Helpful links + + + + + Icons list + + + + + + + + + + + + + + + + + + + + + + + Tokens list + + + + $color-text-success + + + + $color-text + + + + $color-data-visualization-10 + + + + $color-background-primary + + + + + + ); }; 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 c069fe868c..f294d3d952 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx @@ -1,16 +1,83 @@ +import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout"; +import { ChatComposer } from "@twilio-paste/chat-composer"; +import { + ChatBookend, + ChatBookendItem, + ChatBubble, + ChatEvent, + ChatLog, + ChatMessage, + ChatMessageMeta, + ChatMessageMetaItem, +} from "@twilio-paste/chat-log"; +import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon"; +import { FilterIcon } from "@twilio-paste/icons/esm/FilterIcon"; +import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon"; import * as React from "react"; export const ColumnTwoShowcase: React.FC = () => { + const [followPressed, setFollowPressed] = React.useState(false); return ( - + Auto recharge disabled We recommend enabling auto recharge to keep your account active. - - box + + + + + + + + + Yesterday + + Chat Started ・ 3:34pm + + + Gibby Radki has joined the chat・3:43pm + + I have shipped the item back, how long will it take to get the refund? + + 3:45pm + + + + Hi Gibby + You should receive the refund within 10 days + Do you need help with anything else? + + Gibby Radki · 3:47pm + + + + { + throw e; + }, + }} + placeholder="Contact Owl Corp" + ariaLabel="A basic chat composer" + /> ); 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 f6c51f2a50..b6f177826d 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/index.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -10,18 +10,17 @@ const ComponentShowcase: React.FC = () => { = () => { > - - - - - - + + ); }; diff --git a/packages/paste-website/src/components/icons/CircleIcon.tsx b/packages/paste-website/src/components/icons/CircleIcon.tsx new file mode 100644 index 0000000000..a75baa87d8 --- /dev/null +++ b/packages/paste-website/src/components/icons/CircleIcon.tsx @@ -0,0 +1,37 @@ +import { useUID } from "@twilio-paste/uid-library"; +import * as React from "react"; + +export interface CircleIconProps { + className?: string; + size?: number; + color?: string; + title?: string; + decorative?: boolean; +} + +const CircleIcon = React.memo( + ({ title = "Circle Icon", decorative = true, className, color, size }: CircleIconProps) => { + const titleId = useUID(); + return ( + + + {title ? {title} : null} + {/* */} + + + + ); + }, +); + +export default CircleIcon; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx index c57e993cb4..cece23383e 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx @@ -1,5 +1,4 @@ import { Box } from "@twilio-paste/box"; -import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; import HeartDoodleIcon from "../../icons/HeartDoodleIcon"; @@ -19,18 +18,6 @@ const SiteFooterHeader = (): JSX.Element => { color={theme.textColors.colorTextInverse} decorative /> - - Black lives matter. - ); }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx index 625d2dc65e..e7aaf0ec9a 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx @@ -17,7 +17,7 @@ const SiteFooterNav = (): JSX.Element => { as="nav" display="flex" flexDirection={["column", "row"]} - marginLeft={["space0", "space120"]} + // marginLeft={["space0", "space120"]} textAlign={["center", "left"]} > @@ -182,7 +182,7 @@ const SiteFooterNav = (): JSX.Element => { - + { - const router = useRouter(); return ( - {router.pathname === "/" && } diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx index e8313e8743..f4c8fe1a82 100644 --- a/packages/paste-website/src/pages/index.tsx +++ b/packages/paste-website/src/pages/index.tsx @@ -32,11 +32,11 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType - + {/* */} - + {/* */} - + {/* */} ); };