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

Fix #3577: Add jest unit testing to the Divider component / Add Rating and ToggleButton components Docs #3578

Merged
merged 7 commits into from
Nov 4, 2022
Merged

Fix #3577: Add jest unit testing to the Divider component / Add Rating and ToggleButton components Docs #3578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aa72ced
Fix #3577: Add jest unit testing to the Divider component
habubey Nov 4, 2022
9559c21
Merge branch 'primefaces:master' into master
habubey Nov 4, 2022
ae6f25e
Improve Divider component tests
habubey Nov 4, 2022
3f3dcb6
Merge branch 'primefaces:master' into master
habubey Nov 4, 2022
3fe089b
Rating and ToggleButton components new Docs
habubey Nov 4, 2022
cdb7872
Prettier format
habubey Nov 4, 2022
5d34a0f
Fix divider test
habubey Nov 4, 2022
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
2 changes: 1 addition & 1 deletion components/doc/common/docsectiontext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function DocSectionText(props) {
<a id={props.id}>#</a>
</Link>
</h2>
{props.children && <p class="doc-section-description">{props.children}</p>}
{props.children && <p className="doc-section-description">{props.children}</p>}
</>
);
}
234 changes: 234 additions & 0 deletions components/doc/rating/apidoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
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>
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
<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>value</td>
<td>number</td>
<td>null</td>
<td>Value of the rating.</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>readOnly</td>
<td>boolean</td>
<td>false</td>
<td>When present, changing the value is not possible.</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>ClassName of the component.</td>
</tr>
<tr>
<td>stars</td>
<td>number</td>
<td>5</td>
<td>Number of stars.</td>
</tr>
<tr>
<td>cancel</td>
<td>boolean</td>
<td>true</td>
<td>When specified a cancel icon is displayed to allow removing the value.</td>
</tr>
<tr>
<td>cancelIcon</td>
<td>string</td>
<td>pi pi-ban</td>
<td>ClassName of the cancel icon component.</td>
</tr>
<tr>
<td>cancelIconProps</td>
<td>object</td>
<td>null</td>
<td>Properties of the cancel icon.</td>
</tr>
<tr>
<td>onIcon</td>
<td>string</td>
<td>pi pi-star-fill</td>
<td>ClassName of the on icon component.</td>
</tr>
<tr>
<td>offIcon</td>
<td>string</td>
<td>pi pi-star</td>
<td>ClassName of the off icon component.</td>
</tr>
<tr>
<td>onIconProps</td>
<td>object</td>
<td>null</td>
<td>Properties of the on icon.</td>
</tr>
<tr>
<td>offIconProps</td>
<td>object</td>
<td>null</td>
<td>Properties of the off icon.</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>
</tbody>
</table>
</div>

<h3>Events</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>
event.originalEvent: Browser event <br />
event.value: selected value
</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>

<h3>Styling</h3>
<p>Following is the list of structural style classes</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-rating</td>
<td>Container element</td>
</tr>
<tr>
<td>p-rating-item</td>
<td>Each item element</td>
</tr>
<tr>
<td>p-rating-item-active</td>
<td>Selected item elements.</td>
</tr>
<tr>
<td>p-rating-cancel-item</td>
<td>Cancel item element.</td>
</tr>
</tbody>
</table>
</div>

<h3>Accessibility</h3>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <Link href="/locale">locale</Link> API via <i>star</i> and <i>stars</i> of the <i>aria</i>{' '}
property.
</p>

<h6>Keyboard Support</h6>
<p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
<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 star representing the value, if there is none then first star receives the focus.</td>
</tr>
<tr>
<td>
<span className="inline-flex flex-column">
<i className="mb-1">left arrow</i>
<i>up arrow</i>
</span>
</td>
<td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
</tr>
<tr>
<td>
<span className="inline-flex flex-column">
<i className="mb-1">right arrow</i>
<i>down arrow</i>
</span>
</td>
<td>Moves focus to the next star, if there is none then first star receives the focus.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>If the focused star does not represent the value, changes the value to the star value.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>
</>
);
}
52 changes: 52 additions & 0 deletions components/doc/rating/basicdoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { useState } from 'react';
import { Rating } from '../../lib/rating/Rating';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function BasicDoc(props) {
const [val, setVal] = useState(false);

const code = {
basic: `
<Rating value={val} onChange={(e) => setVal(e.value)} />
`,
javascript: `
import { useState } from "react";
import { Rating } from "primereact/rating";

export default function BasicDemo() {
const [val, setVal] = useState(false);

return (
<Rating value={val} onChange={(e) => setVal(e.value)} />

);
}
`,
typescript: `
import { useState } from "react";
import { Rating } from "primereact/rating";

export default function BasicDemo() {
const [val, setVal] = useState<boolean>(false);

return (
<Rating value={val} onChange={(e : RatingChangeParams) => setVal1(e.value)} />

);
}
`
};

return (
<>
<DocSectionText {...props}>
Rating is used a controlled input component with <i>value</i> and <i>onChange</i> properties.
</DocSectionText>
<div className="card flex justify-content-center">
<Rating value={val} onChange={(e) => setVal(e.value)} />
</div>
<DocSectionCode code={code} />
</>
);
}
45 changes: 45 additions & 0 deletions components/doc/rating/disableddoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Rating } from '../../lib/rating/Rating';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function DisabledDoc(props) {
const code = {
basic: `
<Rating value={8} disabled stars={10} />
`,
javascript: `
import { useState } from "react";
import { Rating } from "primereact/rating";

export default function DisabledDoc() {

return (
<Rating value={8} disabled stars={10} />
);
}
`,
typescript: `
import { useState } from "react";
import { Rating } from "primereact/rating";

export default function DisabledDoc() {

return (
<Rating value={8} disabled stars={10} />
);
}
`
};

return (
<>
<DocSectionText {...props}>
When present, it specifies that the element should be <i>disabled</i>.
</DocSectionText>
<div className="card flex justify-content-center">
<Rating value={8} disabled stars={10} />
</div>
<DocSectionCode code={code} />
</>
);
}
17 changes: 17 additions & 0 deletions components/doc/rating/importdoc.js
View file
Open in desktop
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 { Rating } from 'primereact/rating';
`
};

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