Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(website): add progress bar page #3560

Merged
merged 2 commits into from
Oct 19, 2023
Merged

docs(website): add progress bar page #3560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0be8cd
docs(website): add progress bar page
TheSisb Oct 16, 2023
fa53842
chore: pr feedback
nkrantz Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions cypress/integration/sitemap-vrt/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,9 @@ export const SITEMAP = [
"/components/product-switcher/",
"/components/product-switcher/api",
"/components/product-switcher/changelog",
"/components/progress-bar/",
"/components/progress-bar/api",
"/components/progress-bar/changelog",
"/components/progress-steps/",
"/components/progress-steps/api",
"/components/progress-steps/changelog",
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/progress-bar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "1.0.0",
"category": "feedback",
"status": "alpha",
"description": "A Progress Bar visually displays the progression/duration of a system operation such as downloading, uploading, or processing information.",
"description": "A Progress Bar communicates the completion status of a process or task.",
"author": "Twilio Inc.",
"license": "MIT",
"main:dev": "src/index.tsx",
Expand Down
164 changes: 74 additions & 90 deletions packages/paste-core/components/progress-bar/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Anchor } from "@twilio-paste/anchor";
import { Box } from "@twilio-paste/box";
import { Button } from "@twilio-paste/button";
import { Form, FormControl } from "@twilio-paste/form";
import { HelpText } from "@twilio-paste/help-text";
import { AcceptIcon } from "@twilio-paste/icons/esm/AcceptIcon";
import { Separator } from "@twilio-paste/separator";
import { useUID } from "@twilio-paste/uid-library";
import * as React from "react";

Expand All @@ -13,8 +14,6 @@ export default {
title: "Components/ProgressBar",
};

const NumberFormatter = new Intl.NumberFormat("en-US");

export const Default = (): React.ReactNode => {
const progressBarId = useUID();
const helpTextId = useUID();
Expand All @@ -31,7 +30,7 @@ export const Default = (): React.ReactNode => {
setRerun(0);
return 100;
}
const newValue = previousValue + Math.random() * 12;
const newValue = previousValue + Math.random() * 20;

/*
* intentionally causes another loop for UX so that the
Expand All @@ -48,50 +47,55 @@ export const Default = (): React.ReactNode => {
}, [rerun]);

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<Box maxWidth="400px">
{value >= 100 ? (
<Box marginBottom="space90" display="flex" alignItems="center" columnGap="space30">
<AcceptIcon decorative size="sizeIcon30" color="colorTextSuccess" />
Your submission has been approved!
</Box>
) : (
<Box marginBottom="space90">
<ProgressBarLabel htmlFor={progressBarId} valueLabel={`${Math.round(value)}%`}>
Downloading more ram
Reviewing submission
</ProgressBarLabel>
<ProgressBar
id={progressBarId}
aria-describedby={helpTextId}
value={value}
valueLabel={`${Math.round(value)}%`}
/>
<HelpText id={helpTextId}>
Increasing your ram helps your computer run faster. {NumberFormatter.format(value)}% complete.
</HelpText>
</FormControl>
<Button
variant="primary"
onClick={() => {
setRerun(1);
setValue(0);
}}
disabled={rerun === 1}
>
Restart Progress
</Button>
</Form>
<HelpText id={helpTextId}>Automatically reviewing your submission with our AI agents.</HelpText>
</Box>
)}
<Button
variant="primary"
onClick={() => {
setRerun(1);
setValue(0);
}}
disabled={rerun === 1}
>
Restart Progress
</Button>
</Box>
);
};

export const Indeterminate = (): React.ReactNode => {
const progressBarId = useUID();
const progressBarIdA = useUID();
const progressBarIdB = useUID();
const helpTextId = useUID();

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<ProgressBarLabel htmlFor={progressBarId}>Downloading more ram</ProgressBarLabel>
<ProgressBar id={progressBarId} aria-describedby={helpTextId} isIndeterminate />
<HelpText id={helpTextId}>Increasing your ram helps your computer run faster.</HelpText>
</FormControl>
</Form>
<Box maxWidth="400px">
<ProgressBarLabel htmlFor={progressBarIdA}>Uploading sunrise_video.mov...</ProgressBarLabel>
<ProgressBar id={progressBarIdA} aria-describedby={helpTextId} isIndeterminate />
<Separator orientation="horizontal" verticalSpacing="space60" />
<ProgressBarLabel htmlFor={progressBarIdB}>Converting files...</ProgressBarLabel>
<ProgressBar id={progressBarIdB} aria-describedby={helpTextId} isIndeterminate />
<HelpText id={helpTextId}>
Connection lost. Check your connection and refresh the page to get up-to-date information.
</HelpText>
</Box>
);
};
Expand All @@ -101,18 +105,14 @@ export const ErrorStory = (): React.ReactNode => {
const helpTextId = useUID();

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<ProgressBarLabel htmlFor={progressBarId} valueLabel="50%">
mtn_sunrise.png
</ProgressBarLabel>
<ProgressBar id={progressBarId} aria-describedby={helpTextId} value={50} valueLabel="50%" hasError />
<HelpText variant="error" id={helpTextId}>
Upload failed. <Anchor href="#">Retry upload</Anchor>
</HelpText>
</FormControl>
</Form>
<Box maxWidth="400px">
<ProgressBarLabel htmlFor={progressBarId} valueLabel="50%">
mtn_sunrise.png
</ProgressBarLabel>
<ProgressBar id={progressBarId} aria-describedby={helpTextId} value={50} valueLabel="50%" hasError />
<HelpText variant="error" id={helpTextId}>
Upload failed. <Anchor href="#">Retry upload</Anchor>
</HelpText>
</Box>
);
};
Expand All @@ -123,18 +123,14 @@ export const DisabledStory = (): React.ReactNode => {
const helpTextId = useUID();

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<ProgressBarLabel disabled htmlFor={progressBarId} valueLabel="50%">
Campaign registration
</ProgressBarLabel>
<ProgressBar id={progressBarId} aria-describedby={helpTextId} value={80} disabled />
<HelpText variant="default" id={helpTextId}>
Your profile is in review. You will receive an email about your application status in 3-5 business days.
</HelpText>
</FormControl>
</Form>
<Box maxWidth="400px">
<ProgressBarLabel disabled htmlFor={progressBarId} valueLabel="50%">
Campaign registration
</ProgressBarLabel>
<ProgressBar id={progressBarId} aria-describedby={helpTextId} value={80} disabled />
<HelpText variant="default" id={helpTextId}>
Your profile is in review. You will receive an email about your application status in 3-5 business days.
</HelpText>
</Box>
);
};
Expand All @@ -144,16 +140,12 @@ export const LabelingApproaches = (): React.ReactNode => {
const labelId = useUID();

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<Box id={labelId}>Using aria-labelledby</Box>
<ProgressBar aria-labelledby={labelId} value={30} />

<Box marginTop="space40">Using aria-label</Box>
<ProgressBar aria-label="Using aria-label" value={50} />
</FormControl>
</Form>
<Box maxWidth="400px">
<Box id={labelId}>Using aria-labelledby</Box>
<ProgressBar aria-labelledby={labelId} value={30} />

<Box marginTop="space40">Using aria-label</Box>
<ProgressBar aria-label="Using aria-label" value={50} />
</Box>
);
};
Expand All @@ -162,15 +154,11 @@ export const CustomRange = (): React.ReactNode => {
const progressBarId = useUID();

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<ProgressBarLabel htmlFor={progressBarId} valueLabel="21 of 30">
Friends coming to your birthday
</ProgressBarLabel>
<ProgressBar id={progressBarId} value={21} maxValue={30} />
</FormControl>
</Form>
<Box maxWidth="400px">
<ProgressBarLabel htmlFor={progressBarId} valueLabel="688KB of 834KB">
mtn_sunrise.png
</ProgressBarLabel>
<ProgressBar id={progressBarId} value={688} maxValue={834} />
</Box>
);
};
Expand All @@ -179,21 +167,17 @@ export const CustomValueText = (): React.ReactNode => {
const progressBarId = useUID();

return (
<Box maxWidth="600px">
<Form>
<FormControl>
<ProgressBarLabel htmlFor={progressBarId} valueLabel="21 friends accepted">
Friends coming to your birthday
</ProgressBarLabel>
<ProgressBar
id={progressBarId}
value={21}
maxValue={30}
valueLabel="21 friends accepted"
formatOptions={{ maximumFractionDigits: 0, minimumFractionDigits: 0 }}
/>
</FormControl>
</Form>
<Box maxWidth="400px">
<ProgressBarLabel htmlFor={progressBarId} valueLabel="21 friends accepted">
Friends coming to your birthday
</ProgressBarLabel>
<ProgressBar
id={progressBarId}
value={21}
maxValue={30}
valueLabel="21 friends accepted"
formatOptions={{ maximumFractionDigits: 0, minimumFractionDigits: 0 }}
/>
</Box>
);
};
10 changes: 8 additions & 2 deletions packages/paste-website/src/components/shortcodes/StoryPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,18 @@ export interface StoryPreviewProps {
storyID: string;
title: string;
code: string;
height?: string;
}

const ENV = process.env.NODE_ENV || "development";
const BASE_URL = ENV === "production" ? "https://paste-storybook.twilio.design" : "http://localhost:9001";

const StoryPreview: React.FC<React.PropsWithChildren<StoryPreviewProps>> = ({ storyID, title, code }) => {
const StoryPreview: React.FC<React.PropsWithChildren<StoryPreviewProps>> = ({
storyID,
title,
code,
height = "500px",
}) => {
return (
<Box
padding="space20"
Expand All @@ -25,7 +31,7 @@ const StoryPreview: React.FC<React.PropsWithChildren<StoryPreviewProps>> = ({ st
src={`${BASE_URL}/iframe.html?args=&id=${storyID}&viewMode=story`}
style={{
width: "100%",
height: "500px",
height,
border: 0,
overflow: "hidden",
padding: "1.5rem",
Expand Down
72 changes: 72 additions & 0 deletions packages/paste-website/src/pages/components/progress-bar/api.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
export const meta = {
title: 'Progress Bar - API',
package: '@twilio-paste/progress-bar',
description: 'A Progress Bar communicates the completion status of a process or task.',
slug: '/components/progress-bar/api',
};

import Changelog from '@twilio-paste/progress-bar/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
import packageJson from '@twilio-paste/progress-bar/package.json';

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';

export default ComponentPageLayout;

export const getStaticProps = async () => {
const navigationData = await getNavigationData();
const feature = await getFeature('Progress Bar');
const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/progress-bar');
return {
props: {
data: {
...packageJson,
...feature,
},
componentApi,
mdxHeadings: [...mdxHeadings, ...componentApiTocData],
navigationData,
pageHeaderData: {
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/progress-bar',
storybookUrl: '/?path=/story/components-progressbar--default',
},
},
};
};

## Installation

```bash
yarn add @twilio-paste/progress-bar - or - yarn add @twilio-paste/core
```

## Usage


```jsx
import {ProgressBar, ProgressBarLabel} from '@twilio-paste/core/progress-bar';
import {Box} from '@twilio-paste/core/box';
import {HelpText} from '@twilio-paste/core/help-text';
import {useUID} from '@twilio-paste/core/uid-library';

const AlertDialogExample = () => {
const progressBarId = useUID();
const helpTextId = useUID();

return (
<Box>
<ProgressBarLabel htmlFor={progressBarId}>Downloading more RAM</ProgressBarLabel>
<ProgressBar id={progressBarId} aria-describedby={helpTextId} isIndeterminate />
<HelpText id={helpTextId}>Increasing your RAM helps your computer run faster.</HelpText>
</Box>
);
};
```

## Props

<PropsTable componentApi={props.componentApi} />


Loading
Loading