Skip to content

Commit

Permalink
Add new Docs: Button Component
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed Nov 10, 2022
1 parent 467f226 commit 141708e
Show file tree
Hide file tree
Showing 19 changed files with 1,400 additions and 179 deletions.
176 changes: 176 additions & 0 deletions components/doc/button/apidoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import Link from 'next/link';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
import { DocSectionText } from '../common/docsectiontext';

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>label</td>
<td>string</td>
<td>null</td>
<td>Text of the button.</td>
</tr>
<tr>
<td>icon</td>
<td>any</td>
<td>null</td>
<td>Name of the icon or JSX.Element for icon.</td>
</tr>
<tr>
<td>iconPos</td>
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left", "right", "top" and "bottom".</td>
</tr>
<tr>
<td>badge</td>
<td>string</td>
<td>null</td>
<td>Value of the badge.</td>
</tr>
<tr>
<td>badgeClassName</td>
<td>string</td>
<td>null</td>
<td>Style class of the badge.</td>
</tr>
<tr>
<td>tooltip</td>
<td>any</td>
<td>null</td>
<td>Content of the tooltip.</td>
</tr>
<tr>
<td>tooltipOptions</td>
<td>object</td>
<td>null</td>
<td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>visible</td>
<td>boolean</td>
<td>true</td>
<td>When present, it specifies that the element should be visible.</td>
</tr>
<tr>
<td>loading</td>
<td>boolean</td>
<td>false</td>
<td>Display loading icon of the button</td>
</tr>
<tr>
<td>loadingIcon</td>
<td>any</td>
<td>null</td>
<td>Name of the loading icon or JSX.Element for loading icon.</td>
</tr>
</tbody>
</table>
</div>

<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-button</td>
<td>Button element</td>
</tr>
<tr>
<td>p-button-icon</td>
<td>Icon element</td>
</tr>
<tr>
<td>p-button-text</td>
<td>Label element of the button</td>
</tr>
</tbody>
</table>
</div>

<h3>Accessibility</h3>
<DevelopmentSection>
<h4>Screen Reader</h4>
<p>
Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the
button is icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
</p>
<CodeHighlight>
{`
<Button icon="pi pi-check" aria-label="Submit" />
<Button icon="pi pi-check" label="Submit" />
<Button className="youtube p-0" aria-label="Youtube">
<i className="pi pi-youtube px-2"></i>
<span className="px-3">Youtube</span>
</Button>
`}
</CodeHighlight>
<h4>Keyboard Support</h4>
<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 to the button.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the button.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the button.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h3>Dependencies</h3>
<p>None.</p>
</>
);
}
45 changes: 45 additions & 0 deletions components/doc/button/badgesdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Button } from '../../lib/button/Button';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function BadgesDoc(props) {
const code = {
basic: `
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning" badge="8" badgeClassName="p-badge-danger" />
`,
javascript: `
import { Button } from 'primereact/button';
export default function BadgesDoc() {
return (
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning" badge="8" badgeClassName="p-badge-danger" />
)
}
`,
typescript: `
import { Button } from 'primereact/button';
export default function BadgesDoc() {
return (
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning" badge="8" badgeClassName="p-badge-danger" />
)
}
`
};

return (
<>
<DocSectionText {...props}>Badges</DocSectionText>
<div className="card flex flex-column lg:flex-row align-items-center justify-content-center">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning" badge="8" badgeClassName="p-badge-danger" />
</div>
<DocSectionCode code={code} />
</>
);
}
49 changes: 49 additions & 0 deletions components/doc/button/basicdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Button } from '../../lib/button/Button';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function BasicDoc(props) {
const code = {
basic: `
<Button label="Submit" aria-label="Submit" />
<Button label="Disabled" disabled />
<Button label="Link" className="p-button-link" />
`,
javascript: `
import { Button } from 'primereact/button';
export default function BasicDoc() {
return (
<Button label="Submit" aria-label="Submit" />
<Button label="Disabled" disabled />
<Button label="Link" className="p-button-link" />
)
}
`,
typescript: `
import { Button } from 'primereact/button';
export default function BasicDoc() {
return (
<Button label="Submit" aria-label="Submit" />
<Button label="Disabled" disabled />
<Button label="Link" className="p-button-link" />
)
}
`
};

return (
<>
<DocSectionText {...props}>Button is created using the Button element. </DocSectionText>
<div className="card flex flex-column lg:flex-row align-items-center justify-content-center">
<Button label="Submit" aria-label="Submit" />
<Button label="Disabled" disabled />
<Button label="Link" className="p-button-link" />
</div>
<DocSectionCode code={code} />
</>
);
}
49 changes: 49 additions & 0 deletions components/doc/button/buttonsetdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Button } from '../../lib/button/Button';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function ButtonSetDoc(props) {
const code = {
basic: `
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
`,
javascript: `
import { Button } from 'primereact/button';
export default function ButtonSetDoc() {
return (
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
)
}
`,
typescript: `
import { Button } from 'primereact/button';
export default function ButtonSetDoc() {
return (
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
)
}
`
};

return (
<>
<DocSectionText {...props}>Button Set</DocSectionText>
<div className="card flex flex-column lg:flex-row align-items-center justify-content-center p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</div>
<DocSectionCode code={code} />
</>
);
}
51 changes: 51 additions & 0 deletions components/doc/button/iconsdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Button } from '../../lib/button/Button';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function IconsDoc(props) {
const code = {
basic: `
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
`,
javascript: `
import { Button } from 'primereact/button';
export default function IconsDoc() {
return (
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
)
}
`,
typescript: `
import { Button } from 'primereact/button';
export default function IconsDoc() {
return (
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
)
}
`
};

return (
<>
<DocSectionText {...props}>
Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.
</DocSectionText>
<div className="card flex flex-column lg:flex-row align-items-center justify-content-center">
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
</div>
<DocSectionCode code={code} />
</>
);
}
17 changes: 17 additions & 0 deletions components/doc/button/importdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function ImportDoc(props) {
const code = {
basic: `
import { Button } from 'primereact/button';
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<DocSectionCode code={code} hideToggleCode hideCodeSandbox />
</>
);
}
Loading

0 comments on commit 141708e

Please sign in to comment.