-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #443 from omnifed/440-feat-make-progressbar-recipe
440 feat make progressbar recipe
- Loading branch information
Showing
14 changed files
with
402 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
--- | ||
--- | ||
|
||
import { | ||
WhenToUseAdmonition | ||
} from '@/app/components/Admonition' | ||
import OverviewList from '@/app/components/OverviewList' | ||
|
||
## Use Cases | ||
|
||
<OverviewList intro="Users should be able to:" rules={[ | ||
'Navigate to the loading indicator with assistive technology', | ||
'Understand what progress the indicator is communicating', | ||
]} /> | ||
|
||
## Interaction & Style | ||
|
||
The active indicator, which displays progress, provides visual contrast of at least 3:1 against most background colors. |
55 changes: 55 additions & 0 deletions
55
docs/app/react/progress-bar/components/progress-bar-preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { Tag } from '@cerberus-design/react' | ||
import { hstack, vstack } from '@cerberus/styled-system/patterns' | ||
import { | ||
progressBar, | ||
type ProgressBarVariantProps, | ||
} from '@cerberus/styled-system/recipes' | ||
import type { HtmlHTMLAttributes } from 'react' | ||
|
||
type ProgressBarProps = HtmlHTMLAttributes<HTMLDivElement> & | ||
ProgressBarVariantProps & { | ||
value: number | ||
} | ||
|
||
function ProgressBar(props: ProgressBarProps) { | ||
const styles = progressBar({ size: props.size, usage: props.usage }) | ||
const width = { | ||
width: `${props.value}%`, | ||
} | ||
|
||
return ( | ||
<div className={styles.root}> | ||
<div className={styles.bar} style={width} /> | ||
</div> | ||
) | ||
} | ||
|
||
export function OverviewPreview() { | ||
return ( | ||
<div | ||
className={hstack({ | ||
gap: '10', | ||
w: '3/4', | ||
})} | ||
> | ||
<div | ||
className={vstack({ | ||
gap: '4', | ||
w: 'full', | ||
})} | ||
> | ||
<ProgressBar size="sm" value={75} /> | ||
<Tag shape="pill">Rounded</Tag> | ||
</div> | ||
<div | ||
className={vstack({ | ||
gap: '4', | ||
w: 'full', | ||
})} | ||
> | ||
<ProgressBar size="sm" usage="block" value={75} /> | ||
<Tag shape="pill">Block</Tag> | ||
</div> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
--- | ||
npm: '@cerberus-design/react' | ||
source: 'components/ProgressBar.tsx' | ||
recipe: 'slots/progressBar.ts' | ||
--- | ||
|
||
import CodePreview from '@/app/components/CodePreview' | ||
import { | ||
NoteAdmonition | ||
} from '@/app/components/Admonition' | ||
import { | ||
OverviewPreview | ||
} from '@/app/react/progress-bar/components/progress-bar-preview' | ||
|
||
```tsx | ||
import { ProgressBar } from '@cerberus-design/react' | ||
``` | ||
|
||
## Usage | ||
|
||
<CodePreview preview={<OverviewPreview />} /> | ||
|
||
## Customization | ||
|
||
You can customize the table by utilizing the `css` function. For full control, we recommend extending the recipes provided in your panda config. | ||
|
||
<CodePreview preview={<OverviewPreview />} /> | ||
|
||
## API | ||
|
||
```ts showLineNumbers=false | ||
export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> { | ||
size?: 'sm' | 'md' | ||
usage?: 'block' | 'rounded' | ||
} | ||
|
||
define function ProgressBar(props: ProgressBarProps): ReactNode | ||
```` | ||
|
||
| Name | Default | Description | | ||
| -------- | ------- | -------------------------------------------- | | ||
| size | `md` | The size of the progress bar. | | ||
| usage | `rounded` | The style of the progress bar. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
--- | ||
|
||
import CodePreview from '@/app/components/CodePreview' | ||
import OverviewList from '@/app/components/OverviewList' | ||
import { | ||
WhenToUseAdmonition, | ||
WhenNotToUseAdmonition, | ||
} from '@/app/components/Admonition' | ||
import { | ||
OverviewPreview | ||
} from '@/app/react/progress-bar/components/progress-bar-preview' | ||
|
||
## Usage | ||
|
||
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app's state and indicate available actions, such as whether users can navigate away from the current screen. | ||
|
||
Display overall progress of a group rather than the progress of each item in the group. | ||
|
||
<CodePreview preview={<OverviewPreview />} /> | ||
|
||
<WhenToUseAdmonition description="To communicate overall progress of a group." /> | ||
|
||
<WhenNotToUseAdmonition description="To communicate individual progress within a group." /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
heading: 'Progress Bar' | ||
description: 'Progress bars show the status of a process in real time.' | ||
a11y: 'forms' | ||
--- | ||
|
||
import CodePreview from '@/app/components/CodePreview' | ||
import OverviewList from '@/app/components/OverviewList' | ||
import { | ||
OverviewPreview | ||
} from '@/app/react/progress-bar/components/progress-bar-preview' | ||
|
||
<OverviewList rules={[ | ||
'Two styles: block and rounded', | ||
'Use the same configuration for all instances of a process (like loading)', | ||
'Never use them as decoration', | ||
'They capture attention through motion', | ||
]} /> | ||
|
||
## Example | ||
|
||
<CodePreview preview={<OverviewPreview />} /> | ||
|
||
## Resources | ||
|
||
| Name | Resource | Status | | ||
| -------- | -------- | ---------------------------------------------------- | | ||
| Figma | [Design Kit (Figma)](https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?m=auto&node-id=0-1) | Private | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import ApiLinks from '@/app/components/ApiLinks' | ||
import { | ||
TabPageContent, | ||
TabPageContentLayout, | ||
} from '../../components/PageLayout' | ||
import FeatureHeader from '@/app/components/FeatureHeader' | ||
import type { MatchFeatureKind } from '@/app/components/MatchFeatureImg' | ||
import PageTabs from '@/app/components/PageTabs' | ||
|
||
import Overview, { frontmatter } from './overview.mdx' | ||
import Guidelines from './guidelines.mdx' | ||
import Dev, { frontmatter as devFrontmatter } from './dev.mdx' | ||
import A11y from './a11y.mdx' | ||
|
||
export default function ProgressBarPage() { | ||
return ( | ||
<> | ||
<TabPageContent> | ||
<FeatureHeader | ||
heading={frontmatter.heading} | ||
description={frontmatter.description} | ||
a11y={frontmatter.a11y as MatchFeatureKind} | ||
/> | ||
|
||
<PageTabs | ||
description="Tabs component details" | ||
overview={ | ||
<TabPageContentLayout> | ||
<Overview /> | ||
</TabPageContentLayout> | ||
} | ||
guidelines={ | ||
<TabPageContentLayout> | ||
<Guidelines /> | ||
</TabPageContentLayout> | ||
} | ||
dev={ | ||
<TabPageContentLayout> | ||
<main> | ||
<ApiLinks {...devFrontmatter} /> | ||
<Dev /> | ||
</main> | ||
</TabPageContentLayout> | ||
} | ||
a11y={ | ||
<TabPageContentLayout> | ||
<A11y /> | ||
</TabPageContentLayout> | ||
} | ||
/> | ||
</TabPageContent> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import { defineSlotRecipe, type SlotRecipeConfig } from '@pandacss/dev' | ||
|
||
/** | ||
* This module contains the progressBar recipe. | ||
* @module | ||
*/ | ||
|
||
/** | ||
* Styles for the ProgressBar component | ||
* @definition [ProgressBar docs](https://cerberus.digitalu.design/react/progress-bar) | ||
*/ | ||
export const progressBar: Partial<SlotRecipeConfig> = defineSlotRecipe({ | ||
className: 'progressBar', | ||
slots: ['root', 'bar'], | ||
|
||
base: { | ||
root: { | ||
bgColor: 'page.bg.100', | ||
position: 'relative', | ||
w: 'full', | ||
}, | ||
bar: { | ||
cerbGradient: 'purple-100', | ||
h: 'full', | ||
left: 0, | ||
position: 'absolute', | ||
top: 0, | ||
willChange: 'width', | ||
zIndex: 'decorator', | ||
_motionSafe: { | ||
transitionProperty: 'width', | ||
transitionDuration: '150ms', | ||
transitionTimingFunction: 'ease', | ||
_indeterminate: {}, | ||
}, | ||
}, | ||
}, | ||
|
||
variants: { | ||
size: { | ||
sm: { | ||
root: { | ||
h: '0.75rem', | ||
}, | ||
}, | ||
md: { | ||
root: { | ||
h: '1.5rem', | ||
}, | ||
}, | ||
}, | ||
usage: { | ||
block: { | ||
root: { | ||
rounded: 'initial', | ||
}, | ||
bar: { | ||
rounded: 'initial', | ||
}, | ||
}, | ||
rounded: { | ||
root: { | ||
rounded: '1.5rem', | ||
}, | ||
bar: { | ||
rounded: '1.5rem', | ||
}, | ||
}, | ||
}, | ||
}, | ||
|
||
defaultVariants: { | ||
size: 'md', | ||
usage: 'rounded', | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.