Skip to content

Commit

Permalink
Merge branch 'main' into chore/component-types-t-z
Browse files Browse the repository at this point in the history
  • Loading branch information
@SiTaggart
SiTaggart authored Oct 19, 2023
2 parents 217c90c + a6c1ea4 commit e0a8bf4
Show file tree
Hide file tree
Showing 7 changed files with 492 additions and 116 deletions.
3 changes: 3 additions & 0 deletions cypress/integration/sitemap-vrt/constants.ts
View file
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
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
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
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
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

0 comments on commit e0a8bf4

Please sign in to comment.