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/components/lib/divider/Divider.spec.js b/components/lib/divider/Divider.spec.js new file mode 100644 index 0000000000..574e374f3f --- /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 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 p-divider-solid 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-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 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 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 is dotted is is styled as a dotted line', () => { + // Arrange + const { container } = render(); + + // Act + Assert + expect(container.getElementsByClassName('p-divider p-component p-divider-dotted').length).toBe(1); + }); +}); 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 (
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" /> -
+
+ +
- -
); };