From aa72ced6704af8b0fff292cae3d8afcb643efe70 Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 4 Nov 2022 16:47:26 +0300 Subject: [PATCH 1/5] Fix #3577: Add jest unit testing to the Divider component --- components/lib/divider/Divider.spec.js | 85 ++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 components/lib/divider/Divider.spec.js diff --git a/components/lib/divider/Divider.spec.js b/components/lib/divider/Divider.spec.js new file mode 100644 index 0000000000..0c35c741a5 --- /dev/null +++ b/components/lib/divider/Divider.spec.js @@ -0,0 +1,85 @@ +import '@testing-library/jest-dom'; +import { render } from '@testing-library/react'; +import { Divider } from './Divider'; + +describe('Divider', () => { + test('when tpe has not any property it returns with default class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal').length).toBe(1); + }); + test('when layout and align as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-left').length).toBe(1); + }); + test('when layout and align as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-right').length).toBe(1); + }); + test('when layout and align as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-center').length).toBe(1); + }); + + test('when tpe has not any property it returns with default class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-solid').length).toBe(1); + }); + test('when layout and align as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-center').length).toBe(1); + }); + test('when layout and align as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-top').length).toBe(1); + }); + test('when layout and align as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-bottom').length).toBe(1); + }); + + test('when type has not any property it returns with default class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-solid').length).toBe(1); + }); + test('when type as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-dashed').length).toBe(1); + }); + test('when type as property it returns with class', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-dotted').length).toBe(1); + }); +}); From ae6f25e36159299f88a6a13b5de2bc5c5fa8daac Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 4 Nov 2022 17:01:23 +0300 Subject: [PATCH 2/5] Improve Divider component tests --- components/lib/divider/Divider.spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/lib/divider/Divider.spec.js b/components/lib/divider/Divider.spec.js index 0c35c741a5..58e3c8a316 100644 --- a/components/lib/divider/Divider.spec.js +++ b/components/lib/divider/Divider.spec.js @@ -3,12 +3,12 @@ import { render } from '@testing-library/react'; import { Divider } from './Divider'; describe('Divider', () => { - test('when tpe has not any property it returns with default class', () => { + test('when component has no properties it returns with default class', () => { // Arrange const { container } = render(); // Act + Assert - expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal').length).toBe(1); + expect(container).toHaveClass('p-divider p-component p-divider-horizontal'); }); test('when layout and align as property it returns with class', () => { // Arrange @@ -61,21 +61,21 @@ describe('Divider', () => { expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-bottom').length).toBe(1); }); - test('when type has not any property it returns with default class', () => { + test('when type has no property it returns with the default class', () => { // Arrange const { container } = render(); // Act + Assert expect(container.getElementsByClassName('p-divider p-component p-divider-solid').length).toBe(1); }); - test('when type as property it returns with class', () => { + test('when type is dashed it is styled as a dashed line', () => { // Arrange const { container } = render(); // Act + Assert expect(container.getElementsByClassName('p-divider p-component p-divider-dashed').length).toBe(1); }); - test('when type as property it returns with class', () => { + test('when type is dotted is is styled as a dotted line', () => { // Arrange const { container } = render(); From 3fe089b5a935dbd362489cd2fed19fb6a4a21bb1 Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 4 Nov 2022 18:19:22 +0300 Subject: [PATCH 3/5] Rating and ToggleButton components new Docs --- components/doc/common/docsectiontext.js | 2 +- components/doc/rating/apidoc.js | 234 +++++++++++++++++++ components/doc/rating/basicdoc.js | 52 +++++ components/doc/rating/disableddoc.js | 45 ++++ components/doc/rating/importdoc.js | 17 ++ components/doc/rating/numberofstarsdoc.js | 52 +++++ components/doc/rating/readonlydoc.js | 45 ++++ components/doc/rating/templatedoc.js | 110 +++++++++ components/doc/rating/withoutcanceldoc.js | 52 +++++ components/doc/togglebutton/apidoc.js | 207 ++++++++++++++++ components/doc/togglebutton/basicdoc.js | 54 +++++ components/doc/togglebutton/customizeddoc.js | 53 +++++ components/doc/togglebutton/importdoc.js | 17 ++ pages/rating/index.js | 99 ++++---- pages/togglebutton/index.js | 47 ++-- 15 files changed, 1028 insertions(+), 58 deletions(-) create mode 100644 components/doc/rating/apidoc.js create mode 100644 components/doc/rating/basicdoc.js create mode 100644 components/doc/rating/disableddoc.js create mode 100644 components/doc/rating/importdoc.js create mode 100644 components/doc/rating/numberofstarsdoc.js create mode 100644 components/doc/rating/readonlydoc.js create mode 100644 components/doc/rating/templatedoc.js create mode 100644 components/doc/rating/withoutcanceldoc.js create mode 100644 components/doc/togglebutton/apidoc.js create mode 100644 components/doc/togglebutton/basicdoc.js create mode 100644 components/doc/togglebutton/customizeddoc.js create mode 100644 components/doc/togglebutton/importdoc.js diff --git a/components/doc/common/docsectiontext.js b/components/doc/common/docsectiontext.js index fa88acf86b..1000377e5d 100644 --- a/components/doc/common/docsectiontext.js +++ b/components/doc/common/docsectiontext.js @@ -12,7 +12,7 @@ export function DocSectionText(props) { # - {props.children &&

{props.children}

} + {props.children &&

{props.children}

} ); } diff --git a/components/doc/rating/apidoc.js b/components/doc/rating/apidoc.js new file mode 100644 index 0000000000..c2cdae49c0 --- /dev/null +++ b/components/doc/rating/apidoc.js @@ -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 ( + <> + +

Properties

+

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuenumbernullValue of the rating.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
readOnlybooleanfalseWhen present, changing the value is not possible.
styleobjectnullInline style of the component.
classNamestringnullClassName of the component.
starsnumber5Number of stars.
cancelbooleantrueWhen specified a cancel icon is displayed to allow removing the value.
cancelIconstringpi pi-banClassName of the cancel icon component.
cancelIconPropsobjectnullProperties of the cancel icon.
onIconstringpi pi-star-fillClassName of the on icon component.
offIconstringpi pi-starClassName of the off icon component.
onIconPropsobjectnullProperties of the on icon.
offIconPropsobjectnullProperties of the off icon.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
+
+ +

Events

+
+ + + + + + + + + + + + + + + +
NameParametersDescription
onChange + event.originalEvent: Browser event
+ event.value: selected value + 		Callback to invoke on value change.
+
+ +

Styling

+

Following is the list of structural style classes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-ratingContainer element
p-rating-itemEach item element
p-rating-item-activeSelected item elements.
p-rating-cancel-itemCancel item element.
+
+ +

Accessibility

+ +
Screen Reader
+

+ Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria{' '} + property. +

+ +
Keyboard Support
+

Keyboard interaction is derived from the native browser handling of radio buttons in a group.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the star representing the value, if there is none then first star receives the focus.
+ + left arrow + up arrow + + Moves focus to the previous star, if there is none then last radio button receives the focus.
+ + right arrow + down arrow + + Moves focus to the next star, if there is none then first star receives the focus.
+ space + If the focused star does not represent the value, changes the value to the star value.
+
+ +
Dependencies
+

None.

+ + ); +} diff --git a/components/doc/rating/basicdoc.js b/components/doc/rating/basicdoc.js new file mode 100644 index 0000000000..16361b874b --- /dev/null +++ b/components/doc/rating/basicdoc.js @@ -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: ` + setVal(e.value)} /> + `, + javascript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function BasicDemo() { + const [val, setVal] = useState(false); + + return ( + setVal(e.value)} /> + + ); +} + `, + typescript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function BasicDemo() { + const [val, setVal] = useState(false); + + return ( + setVal1(e.value)} /> + + ); +} + ` + }; + + return ( + <> + + Rating is used a controlled input component with value and onChange properties. + +
+ setVal(e.value)} /> +
+ + + ); +} diff --git a/components/doc/rating/disableddoc.js b/components/doc/rating/disableddoc.js new file mode 100644 index 0000000000..d201ec82f4 --- /dev/null +++ b/components/doc/rating/disableddoc.js @@ -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: ` + + `, + javascript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function DisabledDoc() { + + return ( + + ); +} + `, + typescript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function DisabledDoc() { + + return ( + + ); +} + ` + }; + + return ( + <> + + When present, it specifies that the element should be disabled. + +
+ +
+ + + ); +} diff --git a/components/doc/rating/importdoc.js b/components/doc/rating/importdoc.js new file mode 100644 index 0000000000..0c4a5b856f --- /dev/null +++ b/components/doc/rating/importdoc.js @@ -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 ( + <> + + + + ); +} diff --git a/components/doc/rating/numberofstarsdoc.js b/components/doc/rating/numberofstarsdoc.js new file mode 100644 index 0000000000..3948c06f1f --- /dev/null +++ b/components/doc/rating/numberofstarsdoc.js @@ -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 NumberOfStarsDoc(props) { + const [val, setVal] = useState(true); + + const code = { + basic: ` + setValue(e.val)} stars={5} /> + + `, + javascript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function NumberOfStarsDoc() { + const [val, setVal] = useState(true); + + return ( + setValue(e.val)} stars={5} /> + + ); +} + `, + typescript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function NumberOfStarsDoc() { + const [val, setVal] = useState(true); + + return ( + setValue(e.val)} stars={5} /> + ); +} + ` + }; + + return ( + <> + + Number of stars to display is defined with stars property, default is 5. + +
+ setVal(e.val)} stars={5} /> +
+ + + ); +} diff --git a/components/doc/rating/readonlydoc.js b/components/doc/rating/readonlydoc.js new file mode 100644 index 0000000000..5fa57ac31f --- /dev/null +++ b/components/doc/rating/readonlydoc.js @@ -0,0 +1,45 @@ +import { Rating } from '../../lib/rating/Rating'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ReadOnlyDoc(props) { + const code = { + basic: ` + + + + `, + javascript: ` +import { Rating } from "primereact/rating"; + +export default function ReadOnlyDoc() { + + return ( + + ); +} + `, + typescript: ` +import { Rating } from "primereact/rating"; + +export default function ReadOnlyDoc() { + + return ( + + ); +} + ` + }; + + return ( + <> + + Changing the value is not possible with readonly property. + +
+ +
+ + + ); +} diff --git a/components/doc/rating/templatedoc.js b/components/doc/rating/templatedoc.js new file mode 100644 index 0000000000..aa0707f9cb --- /dev/null +++ b/components/doc/rating/templatedoc.js @@ -0,0 +1,110 @@ +import getConfig from 'next/config'; +import { useState } from 'react'; +import { Rating } from '../../lib/rating/Rating'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function TemplateDoc(props) { + const [val, setVal] = useState(null); + const contextPath = getConfig().publicRuntimeConfig.contextPath; + + const code = { + basic: ` + setVal(e.val)} +cancelIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" /> +} +onIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} +alt="custom-image-active" +width="25px" +height="25px" + /> +} +offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} + /> +`, + javascript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +const [val, setVal] = useState(null); + +export default function TemplateDoc() { + + return ( + setVal(e.val)} +cancelIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" /> +} +onIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} +alt="custom-image-active" +width="25px" +height="25px" + /> +} +offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} + /> + ); +} + `, + typescript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +const [val, setVal] = useState(null); + +export default function TemplateDoc() { + + return ( + setVal(e.val)} +cancelIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" /> +} +onIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} +alt="custom-image-active" +width="25px" +height="25px" + /> +} +offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} + /> + ); +} + ` + }; + + return ( + <> + + Custom icons are used to override the default icons with onIcon, offIcon and cancelIcon properties. + +
+ setVal(e.value)} + cancelIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />} + onIcon={ + (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" /> + } + offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} + /> +
+ + + ); +} diff --git a/components/doc/rating/withoutcanceldoc.js b/components/doc/rating/withoutcanceldoc.js new file mode 100644 index 0000000000..968aa01ab8 --- /dev/null +++ b/components/doc/rating/withoutcanceldoc.js @@ -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 WithoutCancelDoc(props) { + const [val, setVal] = useState(true); + + const code = { + basic: ` + setVal(e.value)} /> + + `, + javascript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function WithoutCancelDoc() { + const [val, setVal] = useState(true); + + return ( + setVal(e.value)} /> + + ); +} + `, + typescript: ` +import { useState } from "react"; +import { Rating } from "primereact/rating"; + +export default function WithoutCancelDoc() { + const [val, setVal] = useState(true); + + return ( + setVal(e.value)} /> + ); +} + ` + }; + + return ( + <> + + A cancel icon is displayed to reset the value by default, set cancel as false to remove this option. + +
+ setVal(e.value)} /> +
+ + + ); +} diff --git a/components/doc/togglebutton/apidoc.js b/components/doc/togglebutton/apidoc.js new file mode 100644 index 0000000000..6b421a6238 --- /dev/null +++ b/components/doc/togglebutton/apidoc.js @@ -0,0 +1,207 @@ +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 ( + <> + +
Properties
+

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
onIconstringnullIcon for the on state.
offIconstringnullIcon for the off state.
onLabelstringyesLabel for the on state.
offLabelstringnoLabel for the off state.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
checkedbooleanfalseSpecifies the on/off state of the button.
tabIndexnumber0Index of the element in tabbing order.
iconPosstringleftPosition of the icon, valid values are "left" and "right".
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
+
+ +
Events
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
onChange + event.originalEvent: Browser event
+ event.value: Value as the checked state. + 		Callback to invoke on value change.
onFocusevent: Browser eventCallback to invoke when autocomplete gets focus.
onBlurevent: Browser eventCallback to invoke when autocomplete loses focus.
+
+ +
Styling
+

+ Following is the list of structural style classes, for theming classes visit theming page. +

+
+ + + + + + + + + + + + + + + + + + + + + +
NameElement
p-togglebuttonContainer element
p-button-icon-leftIcon element.
p-button-textLabel element.
+
+ +
Accessibility
+ +
Screen Reader
+

+ ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with aria-labelledby or aria-label props, it is + highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria + label that does not change related to state. +

+ + {` +Remember Me + + + +`} + +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the button.
+ space + Toggles the checked state.
+
+ +
Dependencies
+

None.

+ + ); +} diff --git a/components/doc/togglebutton/basicdoc.js b/components/doc/togglebutton/basicdoc.js new file mode 100644 index 0000000000..56375cb710 --- /dev/null +++ b/components/doc/togglebutton/basicdoc.js @@ -0,0 +1,54 @@ +import { useState } from 'react'; +import { ToggleButton } from '../../lib/togglebutton/ToggleButton'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function BasicDemo(props) { + const [checked, setChecked] = useState(false); + + const code = { + basic: ` + setChecked(e.value)} /> + + `, + javascript: ` +import { useState } from "react"; +import { ToggleButton } from 'primereact/togglebutton'; + +export default function BasicDemo() { + const [checked, setChecked] = useState(false); + + return ( + setChecked(e.value)} /> + + ); +} + `, + typescript: ` +import { useState } from "react"; +import { ToggleButton } from 'primereact/togglebutton'; + +export default function BasicDemo() { + const [checked, setChecked] = useState(false); + + return ( + setChecked(e.value)} /> + + + ); +} + ` + }; + + return ( + <> + + Rating is used a controlled input component with value and onChange properties. + +
+ setChecked(e.value)} /> +
+ + + ); +} diff --git a/components/doc/togglebutton/customizeddoc.js b/components/doc/togglebutton/customizeddoc.js new file mode 100644 index 0000000000..82a569570e --- /dev/null +++ b/components/doc/togglebutton/customizeddoc.js @@ -0,0 +1,53 @@ +import { useState } from 'react'; +import { ToggleButton } from '../../lib/togglebutton/ToggleButton'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function CustomizedDoc(props) { + const [checked, setChecked] = useState(false); + + const code = { + basic: ` + setChecked(e.value)} /> + + + `, + javascript: ` +import { useState } from "react"; +import { ToggleButton } from 'primereact/togglebutton'; + +export default function BasicDemo() { + const [checked, setChecked] = useState(false); + + return ( + setChecked(e.value)} /> + + + ); +} + `, + typescript: ` +import { useState } from "react"; +import { ToggleButton } from 'primereact/togglebutton'; + +export default function BasicDemo() { + const [checked, setChecked] = useState(false); + + return ( + setChecked(e.value)} /> + ); + ` + }; + + return ( + <> + + Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties. + +
+ setChecked(e.value)} /> +
+ + + ); +} diff --git a/components/doc/togglebutton/importdoc.js b/components/doc/togglebutton/importdoc.js new file mode 100644 index 0000000000..564c2b6011 --- /dev/null +++ b/components/doc/togglebutton/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { ToggleButton } from 'primereact/togglebutton'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/pages/rating/index.js b/pages/rating/index.js index 4bfc62c773..01cf4d5538 100644 --- a/pages/rating/index.js +++ b/pages/rating/index.js @@ -1,16 +1,61 @@ -import getConfig from 'next/config'; import Head from 'next/head'; import React, { useState } from 'react'; import { DocActions } from '../../components/doc/common/docactions'; -import RatingDoc from '../../components/doc/rating'; -import { Rating } from '../../components/lib/rating/Rating'; +import { DocSections } from '../../components/doc/common/docsections'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { ImportDoc } from '../../components/doc/rating/importdoc'; +import { BasicDoc } from '../../components/doc/rating/basicdoc'; +import { WithoutCancelDoc } from '../../components/doc/rating/withoutcanceldoc'; +import { ReadOnlyDoc } from '../../components/doc/rating/readonlydoc'; +import { DisabledDoc } from '../../components/doc/rating/disableddoc'; +import { TemplateDoc } from '../../components/doc/rating/templatedoc'; +import { ApiDoc } from '../../components/doc/rating/apidoc'; +import { NumberOfStarsDoc } from '../../components/doc/rating/numberofstarsdoc'; const RatingDemo = () => { - const [val1, setVal1] = useState(null); - const [val2, setVal2] = useState(null); - const [val3, setVal3] = useState(null); - - const contextPath = getConfig().publicRuntimeConfig.contextPath; + const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'withoutcancel', + label: 'Without Cancel', + component: WithoutCancelDoc + }, + { + id: 'readonly', + label: 'Read Only', + component: ReadOnlyDoc + }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'numberofstars', + label: 'Number of Stars', + component: NumberOfStarsDoc + }, + { + id: 'api', + label: 'API', + type: 'api', + component: ApiDoc + } + ]; return (
@@ -27,42 +72,10 @@ const RatingDemo = () => {
-
-
-
Basic {val1}
- setVal1(e.value)} /> - -
Without Cancel
- setVal2(e.value)} /> - -
ReadOnly
- - -
Disabled
- - -
Template
- setVal3(e.value)} - cancelIcon={ - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" /> - } - onIcon={ - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - alt="custom-image-active" - width="25px" - height="25px" - /> - } - offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} - /> -
+
+ +
- -
); }; diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js index 64a51b9801..0bdd0e32a6 100644 --- a/pages/togglebutton/index.js +++ b/pages/togglebutton/index.js @@ -1,12 +1,38 @@ -import React, { useState } from 'react'; -import { ToggleButton } from '../../components/lib/togglebutton/ToggleButton'; import ToggleButtonDoc from '../../components/doc/togglebutton'; import { DocActions } from '../../components/doc/common/docactions'; import Head from 'next/head'; +import { DocSections } from '../../components/doc/common/docsections'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { BasicDemo } from '../../components/doc/togglebutton/basicdoc'; +import { CustomizedDoc } from '../../components/doc/togglebutton/customizeddoc'; +import { ApiDoc } from '../../components/doc/togglebutton/apidoc'; +import { ImportDoc } from '../../components/doc/togglebutton/importdoc'; + const ToggleButtonDemo = () => { - const [checked1, setChecked1] = useState(false); - const [checked2, setChecked2] = useState(false); + const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDemo + }, + { + id: 'customized', + label: 'Customized', + component: CustomizedDoc + }, + { + id: 'api', + label: 'API', + type: 'api', + component: ApiDoc + } + ]; return (
@@ -23,17 +49,10 @@ const ToggleButtonDemo = () => {
-
-
-
Basic
- setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" /> - -
Customized
- setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" /> -
+
+ +
- -
); }; From cdb7872615bc71ffdae39e0210f714787c798161 Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 4 Nov 2022 18:22:35 +0300 Subject: [PATCH 4/5] Prettier format --- pages/editor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/editor/index.js b/pages/editor/index.js index 6b0e7d5333..607b1cccbc 100644 --- a/pages/editor/index.js +++ b/pages/editor/index.js @@ -36,7 +36,7 @@ const EditorDemo = () => { component: ApiDoc } ]; - + return (
From 5d34a0f2839223280fef1aad49e93516f6da47f7 Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 4 Nov 2022 18:32:58 +0300 Subject: [PATCH 5/5] Fix divider test --- components/lib/divider/Divider.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/divider/Divider.spec.js b/components/lib/divider/Divider.spec.js index 58e3c8a316..574e374f3f 100644 --- a/components/lib/divider/Divider.spec.js +++ b/components/lib/divider/Divider.spec.js @@ -8,7 +8,7 @@ describe('Divider', () => { const { container } = render(); // Act + Assert - expect(container).toHaveClass('p-divider p-component p-divider-horizontal'); + expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-solid p-divider-left').length).toBe(1); }); test('when layout and align as property it returns with class', () => { // Arrange