Merge branch 'main' into tabs/center-align-tab

twilio-labs · Jun 16, 2021 · 9604bd1 · 9604bd1
2 parents 799b8e9 + f4775cd
commit 9604bd1
Show file tree

Hide file tree

Showing 92 changed files with 1,420 additions and 611 deletions.
diff --git a/packages/paste-codemods/package.json b/packages/paste-codemods/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@twilio-paste/codemods",
   "version": "0.2.3",
-  "status": "beta",
+  "status": "production",
   "description": "A collection of codemods for maintaining projects built with Paste.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/avatar/package.json b/packages/paste-core/components/avatar/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/avatar",
   "version": "2.1.1",
   "category": "graphic",
-  "status": "alpha",
+  "status": "production",
   "description": "The Avatar is a pictorial representation of a user or object. It can display the initials of that entity or an image.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/base-radio-checkbox/package.json b/packages/paste-core/components/base-radio-checkbox/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/base-radio-checkbox",
   "version": "6.0.3",
   "category": "user input",
-  "status": "beta",
+  "status": "production",
   "description": "A shared base component for radio and checks",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/breadcrumb/package.json b/packages/paste-core/components/breadcrumb/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/breadcrumb",
   "version": "4.0.2",
   "category": "navigation",
-  "status": "alpha",
+  "status": "production",
   "description": "Breadcrumbs are used to show navigation hierarchy within a page. They provide a way for users to navigate a nested path of parent pages.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/combobox/package.json b/packages/paste-core/components/combobox/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/combobox",
   "version": "7.0.3",
   "category": "user input",
-  "status": "alpha",
+  "status": "production",
   "description": "An accessible styled drop-down list box.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/disclosure/package.json b/packages/paste-core/components/disclosure/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/disclosure",
   "version": "5.0.6",
   "category": "interaction",
-  "status": "beta",
+  "status": "production",
   "description": "The Disclosure is used to create accessible, hierarchical, and collapsible structure to your pages.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/form/package.json b/packages/paste-core/components/form/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/form",
   "version": "6.0.2",
   "category": "user input",
-  "status": "beta",
+  "status": "production",
   "description": "All the basic form elements for Twilio Paste",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/input-box/package.json b/packages/paste-core/components/input-box/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/input-box",
   "version": "4.0.6",
   "category": "user input",
-  "status": "beta",
+  "status": "production",
   "description": "Visual box around every Paste input type",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/menu/package.json b/packages/paste-core/components/menu/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/menu",
   "version": "7.0.2",
   "category": "interaction",
-  "status": "alpha",
+  "status": "production",
   "description": "A menu presents a list of menu items that a user can choose to perform an action with.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/popover/package.json b/packages/paste-core/components/popover/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/popover",
   "version": "6.0.1",
   "category": "interaction",
-  "status": "alpha",
+  "status": "production",
   "description": "A Popover is used for displaying additional rich content on top of something.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/tabs/package.json b/packages/paste-core/components/tabs/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/tabs",
   "version": "2.0.4",
   "category": "interaction",
-  "status": "alpha",
+  "status": "production",
   "description": "Twilio's Tabs component.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/tooltip/package.json b/packages/paste-core/components/tooltip/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/tooltip",
   "version": "4.0.3",
   "category": "interaction",
-  "status": "alpha",
+  "status": "production",
   "description": "The Tooltip is a popup that displays clarifying text related to an element that has been focused or hovered on.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/components/typography/package.json b/packages/paste-core/components/typography/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/typography",
   "version": "3.0.2",
   "category": "typography",
-  "status": "alpha",
+  "status": "production",
   "description": "Twilio's Typography component",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@twilio-paste/core",
   "version": "9.6.1",
-  "status": "beta",
+  "status": "production",
   "description": "Contains all the core packages from the Paste internal design system.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-libraries/animation/package.json b/packages/paste-libraries/animation/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/animation-library",
   "version": "0.3.2",
   "category": "interaction",
-  "status": "beta",
+  "status": "production",
   "description": "Paste's animation library of choice.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-libraries/dropdown/package.json b/packages/paste-libraries/dropdown/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/dropdown-library",
   "version": "1.1.1",
   "category": "dropdown",
-  "status": "beta",
+  "status": "production",
   "description": "A library to build dropdowns.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-libraries/reakit/package.json b/packages/paste-libraries/reakit/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/reakit-library",
   "version": "0.8.1",
   "category": "library",
-  "status": "backlog",
+  "status": "production",
   "description": "The reakit third-party library.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-libraries/styling/package.json b/packages/paste-libraries/styling/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/styling-library",
   "version": "0.3.3",
   "category": "library",
-  "status": "beta",
+  "status": "production",
   "description": "Custom CSS-in-JS wrapper library for use in Paste.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-libraries/uid/package.json b/packages/paste-libraries/uid/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio-paste/uid-library",
   "version": "0.2.1",
   "category": "library",
-  "status": "beta",
+  "status": "production",
   "description": "A library to generate unique IDs for use in user interfaces such as forms.",
   "author": "Twilio Inc.",
   "license": "MIT",

diff --git a/packages/paste-website/gatsby-config.js b/packages/paste-website/gatsby-config.js
@@ -171,7 +171,6 @@ const gatsbyConfig = {
           {
             baseId: process.env.AIRTABLE_BASEID,
             tableName: `System`,
-            tableView: `Roadmap`,
           },
         ],
       },

diff --git a/packages/paste-website/src/component-examples/ComboboxExamples.ts b/packages/paste-website/src/component-examples/ComboboxExamples.ts
@@ -36,19 +36,18 @@ render(
 `.trim();
 
 export const autoCompleteExample = `
-const products = ['SMS', 'Phone Numbers', 'Video'];
+const artists = ['The Aces', 'Brandi Carlile', 'Claud', 'Deb Never', 'Hayley Kiyoko', 'Janelle Monáe', 'LP', 'MUNA', 'Sam Smith', 'Years & Years'];
 
 const AutoCompleteCombobox = () => {
-  const [inputItems, setInputItems] = React.useState(products);
+  const [inputItems, setInputItems] = React.useState(artists);
   return (
     <Combobox
       autocomplete
       items={inputItems}
-      labelText="Select a product"
-      helpText="Please choose a Twilio product."
+      labelText="Select an artist"
       onInputValueChange={({inputValue}) => {
         if (inputValue !== undefined) {
-          setInputItems(products.filter(item => item.toLowerCase().startsWith(inputValue.toLowerCase())));
+          setInputItems(artists.filter(item => item.toLowerCase().startsWith(inputValue.toLowerCase())));
         }
       }}
     />

diff --git a/packages/paste-website/src/components/StatusLegend.tsx b/packages/paste-website/src/components/StatusLegend.tsx
diff --git a/packages/paste-website/src/components/component-overview-table/index.tsx b/packages/paste-website/src/components/component-overview-table/index.tsx
@@ -1,63 +1,104 @@
 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';
+import {PeerReviewStatus} from '../component-status/PeerReviewStatus';
 import {SiteLink} from '../SiteLink';
-import {SidebarCategoryRoutes, PackageStatus} from '../../constants';
-import {getPackagePath, getHumanizedNameFromPackageName} from '../../utils/RouteUtils';
-import {ComponentNode} from '../../utils/types';
-import {filteredComponents, sortNodeByName} from '../../utils/componentFilters';
+import type {SidebarCategoryRoutes} from '../../constants';
+import {getPackagePath} from '../../utils/RouteUtils';
+import type {AirTableComponentNode} from '../../utils/types';
 
 interface ComponentOverviewTableProps {
   children?: React.ReactElement;
   categoryRoute?: typeof SidebarCategoryRoutes[keyof typeof SidebarCategoryRoutes];
-  componentsList?: [ComponentNode];
+  componentsList?: [AirTableComponentNode];
 }
 
 const ComponentOverviewTable: React.FC<ComponentOverviewTableProps> = ({categoryRoute, componentsList}) => {
   if (componentsList == null || categoryRoute == null) {
     return null;
   }
 
-  // Sort backlog items to the bottom of the list
-  const sortedBacklogList = componentsList
-    .filter(({node}) => node.status === PackageStatus.BACKLOG)
-    .sort(sortNodeByName);
-  const sortedComponentsList = componentsList.filter(filteredComponents).sort(sortNodeByName);
-
   return (
     <Box marginTop="space60" marginBottom="space60">
       <Table>
         <THead>
           <Tr>
             <Th>Name</Th>
-            <Th>Status</Th>
-            <Th>Version</Th>
+            <Th textAlign="center" width="150px">
+              Code ready
+            </Th>
+            <Th textAlign="center" width="150px">
+              Design assets
+            </Th>
+            <Th textAlign="center" width="150px">
+              Documentation
+            </Th>
+            <Th textAlign="center" width="150px">
+              <Box display="flex" alignItems="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">
+                    Component/Pattern has been reviewed by both design and engineering committees.
+                  </Popover>
+                </PopoverContainer>
+              </Box>
+            </Th>
           </Tr>
         </THead>
         <TBody>
-          {sortedComponentsList.map(({node}) => {
+          {componentsList.map(({node}) => {
+            const {
+              Feature,
+              Figma,
+              Documentation,
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              Design_committee_review,
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              Engineer_committee_review,
+              Code,
+            } = node.data;
+
             return (
-              <Tr key={node.name}>
+              <Tr key={Feature}>
                 <Td>
-                  <SiteLink to={getPackagePath(categoryRoute, node.name)}>
-                    {getHumanizedNameFromPackageName(node.name)}
-                  </SiteLink>
+                  <SiteLink to={getPackagePath(categoryRoute, Feature)}>{Feature}</SiteLink>
                 </Td>
-                <Td>{node.status}</Td>
-                <Td>{node.version}</Td>
-              </Tr>
-            );
-          })}
-          {sortedBacklogList.map(({node}) => {
-            return (
-              <Tr key={node.name}>
-                <Td>
-                  <SiteLink to={getPackagePath(categoryRoute, node.name)}>
-                    {getHumanizedNameFromPackageName(node.name)}
-                  </SiteLink>
+                <Td textAlign="center">
+                  <AssetStatus label="Code done" status={Code} />
+                </Td>
+                <Td textAlign="center">
+                  <AssetStatus label="Design assets done" status={Figma} />
+                </Td>
+                <Td textAlign="center">
+                  {Documentation === true ? (
+                    <Box display="flex" alignItems="center" justifyContent="center">
+                      <SuccessIcon
+                        display="inline-block"
+                        decorative={false}
+                        title="Documentation done"
+                        color="colorTextSuccess"
+                        size="sizeIcon30"
+                      />
+                    </Box>
+                  ) : (
+                    <Text as="span" color="colorTextWeak">
+                      Pending
+                    </Text>
+                  )}
+                </Td>
+                <Td textAlign="center">
+                  <PeerReviewStatus designStatus={Design_committee_review} engineerStatus={Engineer_committee_review} />
                 </Td>
-                <Td>{node.status}</Td>
-                <Td>&nbsp;</Td>
               </Tr>
             );
           })}