Skip to content

Commit

Permalink
Updated NewGen Docs: Accordion
Browse files Browse the repository at this point in the history 
Card, Deferred, Divider, Fieldset, Panel, Splitter, ScrollPanel, TabView, Toolbar
  • Loading branch information
@habubey
habubey committed Nov 18, 2022
1 parent b42ed2b commit 561bc71
Show file tree
Hide file tree
Showing 49 changed files with 1,834 additions and 1,574 deletions.
515 changes: 258 additions & 257 deletions components/doc/accordion/apidoc.js
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion components/doc/accordion/customheadersdoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,9 @@ export default function CustomHeaderDoc() {

return (
<>
<DocSectionText {...props}>Custom Header Doc</DocSectionText>
<DocSectionText {...props}>
<p>Custom Header Doc</p>
</DocSectionText>
<div className="card">
<Accordion className="accordion-custom" activeIndex={0}>
<AccordionTab
Expand Down
4 changes: 3 additions & 1 deletion components/doc/accordion/defaultdoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,9 @@ export default function DefaultDoc() {

return (
<>
<DocSectionText {...props}>Accordion element consists of one or more AccordionTab elements and can either be used as a Controlled or Uncontrolled component.</DocSectionText>
<DocSectionText {...props}>
<p>Accordion element consists of one or more AccordionTab elements and can either be used as a Controlled or Uncontrolled component.</p>
</DocSectionText>
<div className="card">
<Accordion activeIndex={0}>
<AccordionTab header="Header I">
Expand Down
4 changes: 3 additions & 1 deletion components/doc/accordion/multipledoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,9 @@ export default function MultipleDoc() {
return (
<>
<DocSectionText {...props}>
By default only one tab at a time can be active, enabling <i>multiple</i> property changes this behavior to allow multiple tabs be active at the same time.
<p>
By default only one tab at a time can be active, enabling <i>multiple</i> property changes this behavior to allow multiple tabs be active at the same time.
</p>
</DocSectionText>
<div className="card">
<Accordion multiple activeIndex={[0]}>
Expand Down
4 changes: 3 additions & 1 deletion components/doc/accordion/programmaticdoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,9 @@ export default function ProgrammaticDoc() {

return (
<>
<DocSectionText {...props}>Programmatic</DocSectionText>
<DocSectionText {...props}>
<p>Programmatic</p>
</DocSectionText>
<div className="card">
<div className="pt-2 pb-4">
<Button icon={activeIndex && activeIndex.some((index) => index === 0) ? 'pi pi-minus' : 'pi pi-plus'} label="Toggle 1st" onClick={() => onClick(0)} className="p-button-text" />
Expand Down
4 changes: 3 additions & 1 deletion components/doc/card/advanceddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ export default function AdvancedDoc() {

return (
<>
<DocSectionText {...props}>Title text of the card is provided using the title property whereas subTitle property is available for additional information about the card. Both of these properties accept JSX as well. </DocSectionText>
<DocSectionText {...props}>
<p>Title text of the card is provided using the title property whereas subTitle property is available for additional information about the card. Both of these properties accept JSX as well. </p>
</DocSectionText>
<div className="card flex justify-content-center">
<Card title="Advanced Card" subTitle="Subtitle" style={{ width: '25em' }} footer={footer} header={header}>
<p className="m-0 line-height-3">
Expand Down
224 changes: 113 additions & 111 deletions components/doc/card/apidoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,131 +2,133 @@ import Link from 'next/link';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
import { DocSectionText } from '../common/docsectiontext';
import { DocSubSection } from '../common/docsubsection';

export function ApiDoc(props) {
return (
<>
<DocSectionText {...props}></DocSectionText>
<h3>Properties</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>header</td>
<td>any</td>
<td>null</td>
<td>Header of the card.</td>
</tr>
<tr>
<td>footer</td>
<td>any</td>
<td>null</td>
<td>Footer of the card.</td>
</tr>
<tr>
<td>title</td>
<td>any</td>
<td>null</td>
<td>Title of the card.</td>
</tr>
<tr>
<td>subTitle</td>
<td>any</td>
<td>null</td>
<td>Secondary title of the card.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the component.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
</tbody>
</table>
</div>
<DocSubSection id="properties" label="Properties">
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>header</td>
<td>any</td>
<td>null</td>
<td>Header of the card.</td>
</tr>
<tr>
<td>footer</td>
<td>any</td>
<td>null</td>
<td>Footer of the card.</td>
</tr>
<tr>
<td>title</td>
<td>any</td>
<td>null</td>
<td>Title of the card.</td>
</tr>
<tr>
<td>subTitle</td>
<td>any</td>
<td>null</td>
<td>Secondary title of the card.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the component.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
</tbody>
</table>
</div>
</DocSubSection>

<h3>Styling</h3>
<p>
Following is the list of structural style classes, for theming classes visit <Link href="/theming">theming</Link> page.
</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-card</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-card-title</td>
<td>Title element.</td>
</tr>
<tr>
<td>p-card-subtitle</td>
<td>Subtitle element.</td>
</tr>
<tr>
<td>p-card-content</td>
<td>Content of the card.</td>
</tr>
<tr>
<td>p-card-footer</td>
<td>Footer of the card.</td>
</tr>
</tbody>
</table>
</div>

<h3>Accessibility</h3>
<DevelopmentSection>
<h4>Screen Reader</h4>
<DocSubSection id="styling" label="Styling">
<p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
require to use one of the{' '}
<a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
landmark
</a>
roles like <i>region</i>, you may use the <i>role</i> property.
Following is the list of structural style classes, for theming classes visit <Link href="/theming">theming</Link> page.
</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-card</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-card-title</td>
<td>Title element.</td>
</tr>
<tr>
<td>p-card-subtitle</td>
<td>Subtitle element.</td>
</tr>
<tr>
<td>p-card-content</td>
<td>Content of the card.</td>
</tr>
<tr>
<td>p-card-footer</td>
<td>Footer of the card.</td>
</tr>
</tbody>
</table>
</div>
</DocSubSection>

<DocSubSection id="accessibility" label="Accessibility">
<DevelopmentSection>
<h4>Screen Reader</h4>
<p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if
you require to use one of the{' '}
<a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
landmark
</a>
roles like <i>region</i>, you may use the <i>role</i> property.
</p>

<CodeHighlight>
{`
<CodeHighlight>
{`
<Card role="region">
Content
</Card>
`}
</CodeHighlight>
</CodeHighlight>

<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
<h3>Dependencies</h3>
<p>None.</p>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
</DocSubSection>
</>
);
}
4 changes: 3 additions & 1 deletion components/doc/card/simpledoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ export default function SimpleDoc() {

return (
<>
<DocSectionText {...props}>Card is used as a container. </DocSectionText>
<DocSectionText {...props}>
<p>Card is used as a container.</p>
</DocSectionText>
<div className="card flex justify-content-center">
<Card title="Simple Card" style={{ width: '25rem', marginBottom: '2em' }}>
<p className="m-0 line-height-3">
Expand Down
Loading

0 comments on commit 561bc71

Please sign in to comment.