chore: add progress bar page using inDevelopment component

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/pages/components/meter/index.mdx

@@ -36,7 +36,7 @@ export const getStaticProps = async () => {
 
 <NormalizedComponentHeader
   categoryRoute={SidebarCategoryRoutes.COMPONENTS}
-  storybookUrl="/?path=/story/components-meter--"
+  storybookUrl="/?path=/story/components-meter--default"
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/meter"
   data={props.data}
 />
@@ -63,7 +63,7 @@ A Meter is a visual representation to indicate how full something is.
 
 A Meter represents a bucket that can be empty, full, or somewhere in between. Use a Meter when you need to show capacity. For example, use a Meter to show how much data is being used or how many emails were sent successfully.
 
-A Progress Bar (coming soon!) represents **only** task completion, like a file upload or filling out a form. If you’re not displaying progress on a particular task, use a Meter.
+A [Progress Bar](/components/progress-bar) represents **only** task completion, like a file upload or filling out a form. If you’re not displaying progress on a particular task, use a Meter.
 
 ### Accessibility
 

packages/paste-website/src/pages/components/progress-bar/index.mdx

@@ -0,0 +1,55 @@
+export const meta = {
+  title: 'Meter',
+  package: '@twilio-paste/meter',
+  description: 'Meter is a visual representation of a numerical value within a known range.',
+  slug: '/components/meter/',
+};
+
+import Changelog from '@twilio-paste/progress-bar/CHANGELOG.md';
+import packageJson from '@twilio-paste/progress-bar/package.json';
+
+import {InDevelopment} from '../../../components/empty-state/InDevelopment';
+import DefaultLayout from '../../../layouts/DefaultLayout';
+import {SidebarCategoryRoutes} from '../../../constants';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export default DefaultLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Progress bar');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+    },
+  };
+};
+
+<NormalizedComponentHeader
+  categoryRoute={SidebarCategoryRoutes.COMPONENTS}
+  storybookUrl="/?path=/story/components-progressbar--default"
+  githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/progress-bar"
+  data={props.data}
+/>
+
+---
+
+<contentwrapper>
+
+<PageAside data={mdxHeadings} />
+
+<content>
+
+<InDevelopment showBreadcrumb={false} />
+
+<ChangelogRevealer>
+  <Changelog />
+</ChangelogRevealer>
+
+</content>
+
+</contentwrapper>