-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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 #6244 from gucal/new-component-stepper-stepperpanel
New component stepper stepperpanel
- Loading branch information
Showing
67 changed files
with
6,864 additions
and
0 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,46 @@ | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
|
|
||
| export function AccessibilityDoc() { | ||
| return ( | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Stepper container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Stepper. Each stepper header has a | ||
| <i>tab</i> role and <i>aria-controls</i> to refer to the corresponding stepper content element. The content element of each stepper has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of the header and | ||
| <i>aria-labelledby</i> reference to the header as the accessible name. | ||
| </p> | ||
|
|
||
| <h3>Tab Header Keyboard Support</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>tab</i> | ||
| </td> | ||
| <td>Moves focus through the header.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>enter</i> | ||
| </td> | ||
| <td>Activates the focused stepper header.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>space</i> | ||
| </td> | ||
| <td>Activates the focused stepper header.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSectionText> | ||
| ); | ||
| } |
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,167 @@ | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import { Button } from '@/components/lib/button/Button'; | ||
| import { Stepper } from '@/components/lib/stepper/Stepper'; | ||
| import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; | ||
| import { useRef } from 'react'; | ||
|
|
||
| export function BasicDoc(props) { | ||
| const stepperRef = useRef(null); | ||
|
|
||
| const code = { | ||
| basic: ` | ||
| <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}> | ||
| <StepperPanel header="Header I"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-end"> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header II"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-between"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header III"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-start"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| </Stepper> | ||
| `, | ||
| javascript: ` | ||
| import React, { useRef } from "react"; | ||
| import { Stepper } from '@/components/lib/stepper/Stepper'; | ||
| import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; | ||
| import { Button } from '@/components/lib/button/Button'; | ||
| export default function BasicDemo() { | ||
| const stepperRef = useRef(null); | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}> | ||
| <StepperPanel header="Header I"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-end"> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header II"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-between"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header III"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-start"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| </Stepper> | ||
| </div> | ||
| ) | ||
| } | ||
| `, | ||
| typescript: ` | ||
| import React, { useRef } from "react"; | ||
| import { Stepper } from '@/components/lib/stepper/Stepper'; | ||
| import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; | ||
| import { Button } from '@/components/lib/button/Button'; | ||
| export default function BasicDemo() { | ||
| const stepperRef = useRef(null); | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}> | ||
| <StepperPanel header="Header I"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-end"> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header II"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-between"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header III"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-start"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| </Stepper> | ||
| </div> | ||
| ) | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props}> | ||
| <p> | ||
| Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead <i>prevCallback</i> and{' '} | ||
| <i>nextCallback</i> events should be bound to your custom UI elements. | ||
| </p> | ||
| </DocSectionText> | ||
| <div className="card flex justify-content-center"> | ||
| <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}> | ||
| <StepperPanel header="Header I"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-end"> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header II"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-between"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| <StepperPanel header="Header III"> | ||
| <div className="flex flex-column h-12rem"> | ||
| <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div> | ||
| </div> | ||
| <div className="flex pt-4 justify-content-start"> | ||
| <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} /> | ||
| </div> | ||
| </StepperPanel> | ||
| </Stepper> | ||
| </div> | ||
| <DocSectionCode code={code} /> | ||
| </> | ||
| ); | ||
| } |
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 { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
|
|
||
| export function ImportDoc(props) { | ||
| const code = { | ||
| basic: ` | ||
| import { Stepper } from 'primereact/stepper'; | ||
| import { StepperPanel } from 'primereact/stepperpanel'; | ||
| ` | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props} /> | ||
| <DocSectionCode code={code} hideToggleCode import hideStackBlitz /> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.