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

New component stepper stepperpanel #6244

Merged
merged 10 commits into from
Mar 28, 2024
Merged

New component stepper stepperpanel #6244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
09e3844
New Component - Stepper
gucal Mar 26, 2024
a287cd8
Update imperativeHandle
gucal Mar 28, 2024
708bebb
Update stepper docs
gucal Mar 28, 2024
71dd667
Add accessibility doc
gucal Mar 28, 2024
aa1397f
update theming docs
gucal Mar 28, 2024
d94f661
update pt doc
gucal Mar 28, 2024
57ebe7f
Add stepper dts
gucal Mar 28, 2024
2dcd3ca
update vertical doc
gucal Mar 28, 2024
365e44d
Add transition
gucal Mar 28, 2024
2af0f31
Code refactor and lint fixes
gucal Mar 28, 2024
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
439 changes: 439 additions & 0 deletions components/doc/common/apidoc/index.json
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 46 additions & 0 deletions components/doc/stepper/accessibilitydoc.js
View file
Open in desktop
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>
);
}
167 changes: 167 additions & 0 deletions components/doc/stepper/basicdoc.js
View file
Open in desktop
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} />
</>
);
}
18 changes: 18 additions & 0 deletions components/doc/stepper/importdoc.js
View file
Open in desktop
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 />
</>
);
}
Loading
Loading