feat: add page templates to website (#3484)

cypress/integration/sitemap-vrt/constants.ts

@@ -129,8 +129,12 @@ export const SITEMAP = [
   '/introduction/for-designers/design-guidelines/',
   '/introduction/for-engineers/manual-installation/',
   '/introduction/for-engineers/quickstart/',
-  '/patterns/button-vs-anchor/',
   '/introduction/working-with-us/',
+  '/page-templates/',
+  '/page-templates/object-details/',
+  '/page-templates/objects-list/',
+  '/page-templates/settings/',
+  '/patterns/button-vs-anchor/',
   '/patterns/confirmation/',
   '/patterns/delete/',
   '/patterns/data-export/',
@@ -140,7 +144,6 @@ export const SITEMAP = [
   '/patterns/error-state/',
   '/patterns/navigation/',
   '/patterns/notifications-and-feedback/',
-  '/patterns/object-details/',
   '/patterns/privacy/',
   '/patterns/status/',
   '/primitives/combobox-primitive/',

packages/paste-website/scripts/fetch-data.mjs

@@ -41,6 +41,18 @@ const getAllPatterns = async () => {
   return patterns.map(({fields}) => fields);
 };
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+const getAllPageTemplates = async () => {
+  const patterns = await systemTable
+    .select({
+      filterByFormula: 'AND({Component Category} = "page_template", Documentation, status, status != "in development")',
+      sort: [{field: 'Feature'}],
+      fields: ['Feature', 'status'],
+    })
+    .all();
+  return patterns.map(({fields}) => fields);
+};
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
 const getAllPackages = async () => {
   const root = path.resolve(process.cwd(), '../');
@@ -55,6 +67,7 @@ const getAllPackages = async () => {
     allPastePrimitive: [],
     allPasteThemePackage: [],
     allPastePattern: [],
+    allPastePageTemplate: [],
   };
 
   packages.forEach(async (packageJson) => {
@@ -70,6 +83,9 @@ const getAllPackages = async () => {
   const patterns = await getAllPatterns();
   data.allPastePattern = [...patterns];
 
+  const pageTemplates = await getAllPageTemplates();
+  data.allPastePageTemplate = [...pageTemplates];
+
   await fs.mkdir(dataPath, {recursive: true}, (err) => {
     if (err) {
       // eslint-disable-next-line no-console

packages/paste-website/src/components/component-overview-table/index.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import {Box} from '@twilio-paste/box';
 import {Table, THead, TBody, Tr, Th, Td} from '@twilio-paste/table';
-import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/popover';
 import {Text} from '@twilio-paste/text';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
 import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon';
 
 import {AssetStatus} from '../component-status/AssetStatus';
@@ -46,19 +44,7 @@ const ComponentOverviewTable: React.FC<React.PropsWithChildren<ComponentOverview
               Documentation
             </Th>
             <Th textAlign="center" width="170px">
-              <Box display="flex" alignItems="center" justifyContent="center">
-                <Text as="span" marginRight="space20">
-                  Peer review
-                </Text>
-                <PopoverContainer baseId="peer-review-popover">
-                  <PopoverButton variant="link" size="icon_small">
-                    <InformationIcon decorative={false} title="More information about peer review" />
-                  </PopoverButton>
-                  <Popover aria-label="Peer review information">
-                    A Component/Pattern has been reviewed by the relevant committee(s) and/or peer stakeholders.
-                  </Popover>
-                </PopoverContainer>
-              </Box>
+              Peer review
             </Th>
           </Tr>
         </THead>

packages/paste-website/src/components/empty-state/InDevelopment.tsx

@@ -11,15 +11,20 @@ import {getHumanizedNameFromPackageName} from '../../utils/RouteUtils';
 interface InDevelopmentProps {
   type?: 'component' | 'primitive' | 'layout';
   name: string;
+  showBreadcrumb?: boolean;
 }
 
-const InDevelopment: React.FC<React.PropsWithChildren<InDevelopmentProps>> = ({type, name}) => {
+const InDevelopment: React.FC<React.PropsWithChildren<InDevelopmentProps>> = ({type, showBreadcrumb = true, name}) => {
   return (
     <>
-      <Breadcrumb>
-        <BreadcrumbItem href="/">Home</BreadcrumbItem>
-        <BreadcrumbItem href={SidebarCategoryRoutes.COMPONENTS}>Components</BreadcrumbItem>
-      </Breadcrumb>
+      {showBreadcrumb ? (
+        <Breadcrumb>
+          <BreadcrumbItem href="/">Home</BreadcrumbItem>
+          <BreadcrumbItem href={SidebarCategoryRoutes.COMPONENTS}>Components</BreadcrumbItem>
+        </Breadcrumb>
+      ) : (
+        <></>
+      )}
       <Heading as="h1" variant="heading10">
         {getHumanizedNameFromPackageName(name)}
       </Heading>

packages/paste-website/src/components/homepage/HomeHero.tsx

@@ -77,18 +77,18 @@ const HomeHero = (): JSX.Element => {
                   <NewIcon decorative />
                   New
                 </Badge>
-                <NewComponentBannerText>Our Figma library now updated with variables,</NewComponentBannerText>
+                <NewComponentBannerText>Introducing page templates!</NewComponentBannerText>
                 <NewComponentBannerLink
-                  href="https://www.figma.com/community/file/1207476064127503112/Twilio-Paste-Components"
+                  href="/page-templates"
                   onClick={() =>
                     event({
                       category: 'Hero',
                       action: 'click-new-banner',
-                      label: 'Figma Community with variables',
+                      label: 'Page templates announcement',
                     })
                   }
                 >
-                  check it out!
+                  See more
                 </NewComponentBannerLink>
               </NewComponentBanner>
               <Text

packages/paste-website/src/components/ingredients/Ingredients.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {Box} from '@twilio-paste/box';
+import {Card} from '@twilio-paste/card';
+
+interface ListProps {
+  children: React.ReactNode;
+}
+
+const Ingredients: React.FC<ListProps> = ({children}) => {
+  return (
+    <Box display="flex" flexDirection="row" columnGap="space130" justifyContent="center" marginBottom="space70">
+      {children}
+    </Box>
+  );
+};
+
+const Required: React.FC<ListProps> = ({children}) => {
+  return (
+    <Box maxWidth="size40">
+      <Card padding="space0">
+        <Box paddingX="space70" paddingBottom="space40" paddingTop="space60">
+          <strong>Required</strong>
+          {children}
+        </Box>
+      </Card>
+    </Box>
+  );
+};
+
+const Related: React.FC<ListProps> = ({children}) => {
+  return (
+    <Box maxWidth="size40">
+      <Card padding="space0">
+        <Box paddingX="space70" paddingBottom="space40" paddingTop="space60">
+          <strong>Related</strong>
+          {children}
+        </Box>
+      </Card>
+    </Box>
+  );
+};
+
+export {Ingredients, Required, Related};

packages/paste-website/src/components/ingredients/ObjectDetailsIngredients.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {UnorderedList, ListItem} from '@twilio-paste/list';
+import {Anchor} from '@twilio-paste/anchor';
+
+import {Ingredients, Required, Related} from './Ingredients';
+
+const ObjectDetailsIngredients: React.FC = () => {
+  return (
+    <Ingredients>
+      <Required>
+        <UnorderedList>
+          <ListItem>
+            <Anchor href="/components/breadcrumb">Breadcrumb</Anchor> and{' '}
+            <Anchor href="/components/heading">Heading</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/description-list">Description List</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/stack">Stack</Anchor> and <Anchor href="/components/grid">Grid</Anchor>
+          </ListItem>
+        </UnorderedList>
+      </Required>
+      <Related>
+        <UnorderedList>
+          <ListItem>
+            <Anchor href="/components/anchor">Anchor</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/button">Button</Anchor> and{' '}
+            <Anchor href="components/button-group">Button Group</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/in-page-navigation">In Page Navigation</Anchor> and{' '}
+            <Anchor href="/components/tabs">Tabs</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/icon">Icon: Information</Anchor>
+          </ListItem>
+        </UnorderedList>
+      </Related>
+    </Ingredients>
+  );
+};
+
+export {ObjectDetailsIngredients};

packages/paste-website/src/components/ingredients/ObjectsListIngredients.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {UnorderedList, ListItem} from '@twilio-paste/list';
+import {Anchor} from '@twilio-paste/anchor';
+
+import {Ingredients, Required, Related} from './Ingredients';
+
+const ObjectsListIngredients: React.FC = () => {
+  return (
+    <Ingredients>
+      <Required>
+        <UnorderedList>
+          <ListItem>
+            <Anchor href="/components/breadcrumb">Breadcrumb</Anchor> and{' '}
+            <Anchor href="/components/heading">Heading</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/data-grid">Data Grid</Anchor>
+          </ListItem>
+        </UnorderedList>
+      </Required>
+      <Related>
+        <UnorderedList>
+          <ListItem>
+            <Anchor href="/components/anchor">Anchor</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/button">Button</Anchor> and{' '}
+            <Anchor href="components/button-group">Button Group</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/in-page-navigation">In Page Navigation</Anchor> and{' '}
+            <Anchor href="/components/tabs">Tabs</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/paragraph">Paragraph</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/icon">Icons: Export, Filter, More, Search</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/patterns/filter-group">Filter group pattern</Anchor>
+            <UnorderedList>
+              <ListItem>
+                <Anchor href="/components/select">Select</Anchor> and{' '}
+                <Anchor href="/components/combobox">Combobox</Anchor>
+              </ListItem>
+              <ListItem>
+                <Anchor href="/components/separator">Separator</Anchor>
+              </ListItem>
+              <ListItem>
+                <Anchor href="/components/input">Input</Anchor>
+              </ListItem>
+            </UnorderedList>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/patterns/data-export">Data export pattern</Anchor>
+          </ListItem>
+        </UnorderedList>
+      </Related>
+    </Ingredients>
+  );
+};
+
+export {ObjectsListIngredients};

packages/paste-website/src/components/ingredients/SettingsIngredients.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {UnorderedList, ListItem} from '@twilio-paste/list';
+import {Anchor} from '@twilio-paste/anchor';
+
+import {Ingredients, Required, Related} from './Ingredients';
+
+const SettingsIngredients: React.FC = () => {
+  return (
+    <Ingredients>
+      <Required>
+        <UnorderedList>
+          <ListItem>
+            <Anchor href="/components/breadcrumb">Breadcrumb</Anchor> and{' '}
+            <Anchor href="/components/heading">Heading</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/form">Form</Anchor> and form elements like{' '}
+            <Anchor href="/components/input">Input</Anchor>, <Anchor href="/components/checkbox">Checkbox</Anchor>,{' '}
+            <Anchor href="/components/radio-group">Radio Group</Anchor>,{' '}
+            <Anchor href="/components/select">Select</Anchor>, <Anchor href="/components/combobox">Combobox</Anchor>,{' '}
+            <Anchor href="/components/textarea">Textarea</Anchor>,{' '}
+            <Anchor href="/components/date-picker">Date Picker</Anchor>,{' '}
+            <Anchor href="/components/time-picker">Time Picker</Anchor>,{' '}
+            <Anchor href="/components/help-text">Help Text</Anchor>, and <Anchor href="/components/label">Label</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/button">Button</Anchor> and{' '}
+            <Anchor href="/components/button-group">Button Group</Anchor>
+          </ListItem>
+        </UnorderedList>
+      </Required>
+      <Related>
+        <UnorderedList>
+          <ListItem>
+            <Anchor href="/components/anchor">Anchor</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/avatar">Avatar</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/badge">Badge</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/callout">Callout</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/card">Card</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/description-list">Description List</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/in-page-navigation">In Page Navigation</Anchor> and{' '}
+            <Anchor href="/components/tabs">Tabs</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/modal">Modal</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/paragraph">Paragraph</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/separator">Separator</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/switch">Switch</Anchor>
+          </ListItem>
+          <ListItem>
+            <Anchor href="/components/icon">Icons: Information, Copy, Edit</Anchor>
+          </ListItem>
+        </UnorderedList>
+      </Related>
+    </Ingredients>
+  );
+};
+
+export {SettingsIngredients};

packages/paste-website/src/components/shortcodes/generic-header/index.tsx

@@ -6,6 +6,7 @@ import {Stack} from '@twilio-paste/stack';
 import {Text} from '@twilio-paste/text';
 import {Heading} from '@twilio-paste/heading';
 import {useTheme} from '@twilio-paste/theme';
+import {Breadcrumb, BreadcrumbItem} from '@twilio-paste/breadcrumb';
 import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon';
 
 import {PackageStatusLegend} from '../package-status-legend';
@@ -96,7 +97,13 @@ const GenericHeader: React.FC<React.PropsWithChildren<GenericHeaderProps>> = ({
       )}
       {shouldShowBreadcrumbs && (
         <Box marginBottom="space50">
-          {isFoundations ? <>{categoryName}</> : <Anchor href={categoryRoute}>{categoryName}</Anchor>}
+          <Breadcrumb>
+            {isFoundations ? (
+              <BreadcrumbItem>{categoryName}</BreadcrumbItem>
+            ) : (
+              <BreadcrumbItem href={categoryRoute}>{categoryName}</BreadcrumbItem>
+            )}
+          </Breadcrumb>
         </Box>
       )}
       <Box display="flex" alignItems="center" flexWrap="wrap" marginBottom="space70" rowGap="space70" maxWidth="size70">