chore: homehero 2

twilio-labs · Feb 6, 2024 · 48ab2a0 · 48ab2a0
1 parent fa23740
commit 48ab2a0
Show file tree

Hide file tree

Showing 14 changed files with 312 additions and 79 deletions.
diff --git a/packages/paste-website/public/images/avatars/token1.png b/packages/paste-website/public/images/avatars/token1.png
diff --git a/packages/paste-website/public/images/avatars/token2.png b/packages/paste-website/public/images/avatars/token2.png
diff --git a/packages/paste-website/public/images/avatars/token3.png b/packages/paste-website/public/images/avatars/token3.png
diff --git a/packages/paste-website/public/images/avatars/token4.png b/packages/paste-website/public/images/avatars/token4.png
diff --git 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 (
-    <Box
-      paddingX={["space90", "space180"]}
-      position="relative"
-      display="grid"
-      gridTemplateColumns="600px min-content"
-      maxWidth={SITE_CONTENT_MAX_WIDTH}
-      marginLeft="auto"
-      marginRight="auto"
-      zIndex="zIndex10"
-      overflow="hidden"
-      element="HOME_HERO"
-    >
+    <Box element="HOME_HERO_WRAPPER">
       <Box
-        display="flex"
-        flexDirection="column"
-        rowGap="space130"
-        paddingRight="space130"
-        paddingTop="160px"
-        // alignSelf="center"
-        element="HEADER"
+        paddingX={["space90", "space180"]}
+        position="relative"
+        display="grid"
+        gridTemplateColumns="600px min-content"
+        maxWidth={SITE_CONTENT_MAX_WIDTH}
+        marginLeft="auto"
+        marginRight="auto"
+        zIndex="zIndex10"
+        overflow="hidden"
+        element="HOME_HERO"
       >
-        <Box display="flex" flexDirection="column" rowGap="space50">
-          <DisplayHeading as="h1" variant="displayHeading10" marginBottom="space0">
-            Paste
-          </DisplayHeading>
-          <Text
-            as="div"
-            fontSize="fontSize90"
-            lineHeight="lineHeight90"
-            fontWeight="fontWeightSemibold"
-            letterSpacing="-2%"
-          >
-            Build inclusive, delightful customer experiences with Twilio’s open-source design system.
-          </Text>
-        </Box>
-        <SearchBox />
         <Box
           display="flex"
           flexDirection="column"
-          rowGap="space50"
-          fontWeight="fontWeightBold"
-          fontSize="fontSize60"
-          lineHeight="lineHeight60"
+          rowGap="space130"
+          paddingTop="space200"
+          paddingRight="space130"
+          alignSelf="center"
+          element="HEADER"
         >
-          <BouncyAnchor text="Get started for developers" href="/introduction/for-engineers/quickstart" />
-          <BouncyAnchor text="Get started for designers" href="/introduction/for-designers/design-guidelines" />
+          <Box display="flex" flexDirection="column" rowGap="space50">
+            <DisplayHeading as="h1" variant="displayHeading10" marginBottom="space0">
+              Paste
+            </DisplayHeading>
+            <Text
+              as="div"
+              fontSize="fontSize90"
+              lineHeight="lineHeight90"
+              fontWeight="fontWeightSemibold"
+              letterSpacing="-2%"
+            >
+              Build inclusive, delightful customer experiences with Twilio’s open-source design system.
+            </Text>
+          </Box>
+          <SearchBox />
+          <Box
+            display="flex"
+            flexDirection="column"
+            rowGap="space50"
+            fontWeight="fontWeightBold"
+            fontSize="fontSize60"
+            lineHeight="lineHeight60"
+          >
+            <BouncyAnchor text="Get started for developers" href="/introduction/for-engineers/quickstart" />
+            <BouncyAnchor text="Get started for designers" href="/introduction/for-designers/design-guidelines" />
+          </Box>
         </Box>
+        <ComponentShowcase />
+      </Box>
+      <Box zIndex="zIndex0" position="absolute" top="50rem" left="40%">
+        <CircleIcon
+          css={{ height: theme.heights.size30, width: theme.widths.size30 }}
+          color={theme.backgroundColors.colorBackgroundBrandHighlight}
+          decorative
+        />
       </Box>
-      <ComponentShowcase />
     </Box>
   );
 };

diff --git 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 (
     <>
       <Box
+        backgroundColor="colorBackgroundBody"
         borderStyle="solid"
         borderWidth="borderWidth10"
         borderColor="colorBorderWeaker"

diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx
@@ -1,13 +1,32 @@
+import { Anchor } from "@twilio-paste/anchor";
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react/jsx-max-depth */
+import { Avatar, AvatarGroup } from "@twilio-paste/avatar";
 import { Badge } from "@twilio-paste/badge";
 import { Box } from "@twilio-paste/box";
 import { Button } from "@twilio-paste/button";
 import { ButtonGroup } from "@twilio-paste/button-group";
+import { CodeBlock } from "@twilio-paste/code-block";
+import { Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState } from "@twilio-paste/disclosure";
+import { DisplayPill, DisplayPillGroup } from "@twilio-paste/display-pill-group";
+import { BuildIcon } from "@twilio-paste/icons/esm/BuildIcon";
 import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon";
+import { CustomIcon } from "@twilio-paste/icons/esm/CustomIcon";
+import { DataLineChartIcon } from "@twilio-paste/icons/esm/DataLineChartIcon";
 import { EditIcon } from "@twilio-paste/icons/esm/EditIcon";
+import { ExpandIcon } from "@twilio-paste/icons/esm/ExpandIcon";
 import { ExportIcon } from "@twilio-paste/icons/esm/ExportIcon";
+import { FeedIcon } from "@twilio-paste/icons/esm/FeedIcon";
+import { FileImageIcon } from "@twilio-paste/icons/esm/FileImageIcon";
+import { ShareIcon } from "@twilio-paste/icons/esm/ShareIcon";
+import { ShowIcon } from "@twilio-paste/icons/esm/ShowIcon";
+import { TimeIcon } from "@twilio-paste/icons/esm/TimeIcon";
+import { TipIcon } from "@twilio-paste/icons/esm/TipIcon";
+import { TranslationIcon } from "@twilio-paste/icons/esm/TranslationIcon";
 import { VoiceCapableIcon } from "@twilio-paste/icons/esm/VoiceCapableIcon";
+import { InlineCode } from "@twilio-paste/inline-code";
+import { Label } from "@twilio-paste/label";
+import { Slider } from "@twilio-paste/slider";
 import {
   StatusMenu,
   StatusMenuBadge,
@@ -16,6 +35,8 @@ import {
   useStatusMenuState,
 } from "@twilio-paste/status";
 import type { StatusBadgeVariants } from "@twilio-paste/status";
+import { Switch } from "@twilio-paste/switch";
+import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
 import { ComboboxShowcase } from "./ComboboxShowcase";
@@ -54,19 +75,40 @@ const ProcessObject = {
 export const ColumnOneShowcase: React.FC = () => {
   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 (
-    <Box element="COLUMN_1" width="size50">
+    <Box
+      element="COLUMN_1"
+      width="100%"
+      gridArea="bottom1"
+      display="flex"
+      flexDirection="column"
+      rowGap="space70"
+      maxWidth="527px"
+    >
       <Box
         backgroundColor="colorBackgroundBody"
         display="inline-flex"
         flexDirection="column"
         rowGap="space70"
         padding="space70"
         borderRadius="borderRadius30"
+        element="FIRST_BOX_COLUMN_1"
       >
         <ComboboxShowcase />
         <Box display="flex" flexDirection="row" columnGap="space60" alignItems="center">
@@ -173,6 +215,102 @@ export const ColumnOneShowcase: React.FC = () => {
           </>
         </Box>
       </Box>
+      <Box
+        backgroundColor="colorBackgroundBody"
+        width="100%"
+        padding="space70"
+        borderRadius="borderRadius30"
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        element="SECOND_BOX_COLUMN_1"
+      >
+        <Switch name="animations_switch" checked={switchOn} onChange={() => setSwitchOn(!switchOn)}>
+          Enable animations
+        </Switch>
+        <AvatarGroup size="sizeIcon70" variant="user">
+          <Avatar name="Maria Ardovini" src="/images/avatars/avatar4.png" />
+          <Avatar name="Tri O'Hara" src="/images/avatars/avatar1.png" />
+          <Avatar name="Imani Nakai" src="/images/avatars/avatar2.png" />
+        </AvatarGroup>
+        <InlineCode>{"</Theme.Provider>"}</InlineCode>
+      </Box>
+
+      <CodeBlock variant="single-line" language="shell" code="npm install @twilio-paste/core @twilio-paste/icons" />
+      <Box
+        backgroundColor="colorBackgroundBody"
+        width="100%"
+        padding="space70"
+        borderRadius="borderRadius30"
+        element="SECOND_BOX_COLUMN_1"
+      >
+        <Label htmlFor={sliderId}>Animation tension</Label>
+        <Slider id={sliderId} value={sliderValue} onChange={(newValue) => setSliderValue(newValue)} hideRangeLabels />
+      </Box>
+      <Disclosure state={customDisclosureState}>
+        <DisclosureHeading as="h3" variant="heading30">
+          Helpful links
+        </DisclosureHeading>
+        <DisclosureContent>
+          <Box display="flex" columnGap="space90">
+            <Box display="flex" flexDirection="column" rowGap="space50" marginLeft="space60" marginBottom="space30">
+              <Anchor href="/components/icon">Icons list</Anchor>
+              <Box display="flex" flexDirection="column" rowGap="space20" flexWrap="wrap">
+                <Box display="flex" flexDirection="row" columnGap="space30">
+                  <EditIcon decorative={false} title="edit icon" size="sizeIcon40" color="colorTextIcon" />
+                  <ShowIcon decorative={false} title="show icon" size="sizeIcon40" color="colorTextIcon" />
+                  <BuildIcon decorative={false} title="build icon" size="sizeIcon40" color="colorTextIcon" />
+                  <CustomIcon decorative={false} title="custom icon" size="sizeIcon40" color="colorTextIcon" />
+                </Box>
+                <Box display="flex" flexDirection="row" columnGap="space30">
+                  <ExpandIcon decorative={false} title="expand icon" size="sizeIcon40" color="colorTextIcon" />
+                  <FeedIcon decorative={false} title="feed icon" size="sizeIcon40" color="colorTextIcon" />
+                  <FileImageIcon decorative={false} title="file image icon" size="sizeIcon40" color="colorTextIcon" />
+                  <TranslationIcon
+                    decorative={false}
+                    title="translation icon"
+                    size="sizeIcon40"
+                    color="colorTextIcon"
+                  />
+                </Box>
+                <Box display="flex" flexDirection="row" columnGap="space30">
+                  <ShareIcon decorative={false} title="share icon" size="sizeIcon40" color="colorTextIcon" />
+                  <TipIcon decorative={false} title="tip icon" size="sizeIcon40" color="colorTextIcon" />
+                  <TimeIcon decorative={false} title="time icon" size="sizeIcon40" color="colorTextIcon" />
+                  <DataLineChartIcon
+                    decorative={false}
+                    title="data line chart icon"
+                    size="sizeIcon40"
+                    color="colorTextIcon"
+                  />
+                </Box>
+              </Box>
+            </Box>
+            <Box display="flex" flexDirection="column" rowGap="space50">
+              <Anchor href="/tokens/list">Tokens list</Anchor>
+              <DisplayPillGroup aria-label="design tokens">
+                <DisplayPill>
+                  <Avatar name="color-text-success" src="/images/avatars/token1.png" size="sizeIcon10" />
+                  $color-text-success
+                </DisplayPill>
+                <DisplayPill>
+                  <Avatar name="color-text" src="/images/avatars/token2.png" size="sizeIcon10" />
+                  $color-text
+                </DisplayPill>
+                <DisplayPill>
+                  <Avatar name="color-data-visualization" src="/images/avatars/token3.png" size="sizeIcon10" />
+                  $color-data-visualization-10
+                </DisplayPill>
+                <DisplayPill>
+                  <Avatar name="color-background-primary" src="/images/avatars/token4.png" size="sizeIcon10" />
+                  $color-background-primary
+                </DisplayPill>
+              </DisplayPillGroup>
+            </Box>
+          </Box>
+        </DisclosureContent>
+      </Disclosure>
     </Box>
   );
 };