diff --git a/components/doc/avatar/theming/styleddoc.js b/components/doc/avatar/theming/styleddoc.js new file mode 100644 index 0000000000..20a376f12f --- /dev/null +++ b/components/doc/avatar/theming/styleddoc.js @@ -0,0 +1,55 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-avatarContainer element.
p-avatar-imageContainer element in image mode.
p-avatar-circleContainer element with a circle shape.
p-avatar-textText of the Avatar.
p-avatar-iconIcon of the Avatar.
p-avatar-lgContainer element with a large size.
p-avatar-xlContainer element with an xlarge size.
p-avatar-groupContainer element of the group element.
+
+ + ); +} diff --git a/components/doc/avatar/theming/tailwinddoc.js b/components/doc/avatar/theming/tailwinddoc.js new file mode 100644 index 0000000000..b3044f6ddf --- /dev/null +++ b/components/doc/avatar/theming/tailwinddoc.js @@ -0,0 +1,83 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +avatar: { + root: ({ props, state }) => ({ + className: classNames( + 'flex items-center justify-center', + 'bg-gray-300 dark:bg-gray-800', + { + 'rounded-lg': props.shape == 'square', + 'rounded-full': props.shape == 'circle' + }, + { + 'text-base h-8 w-8': props.size == null || props.size == 'normal', + 'w-12 h-12 text-xl': props.size == 'large', + 'w-16 h-16 text-2xl': props.size == 'xlarge' + }, + { + '-ml-4 border-2 border-white dark:border-gray-900': state.isNestedInAvatarGroup + } + ) + }), + image: 'h-full w-full' +}, +avatargroup: { + root: 'flex items-center' +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Avatar } from 'primereact/avatar'; +import { Badge } from 'primereact/badge'; + +export default function UnstyledDemo() { + return ( +
+
+
+
Image
+ + + +
+ +
+
Badge
+ + + +
+ +
+
Gravatar
+ +
+
+
+ ) +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/badge/theming/styleddoc.js b/components/doc/badge/theming/styleddoc.js new file mode 100644 index 0000000000..b0678dbd75 --- /dev/null +++ b/components/doc/badge/theming/styleddoc.js @@ -0,0 +1,59 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-badgeBadge element
p-overlay-badgeWrapper of a badge and its target.
p-badge-dotBadge element with no value.
p-badge-successBadge element with success severity.
p-badge-infoBadge element with info severity.
p-badge-warningBadge element with warning severity.
p-badge-dangerBadge element with danger severity.
p-badge-lgLarge badge element
p-badge-xlExtra large badge element
+
+ + ); +} diff --git a/components/doc/badge/theming/tailwinddoc.js b/components/doc/badge/theming/tailwinddoc.js new file mode 100644 index 0000000000..7796868f61 --- /dev/null +++ b/components/doc/badge/theming/tailwinddoc.js @@ -0,0 +1,77 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +badge: { + root: ({ props }) => ({ + className: classNames( + 'rounded-full p-0 text-center inline-block', + 'bg-blue-500 text-white font-bold', + { + 'bg-gray-500 ': props.severity == 'secondary', + 'bg-green-500 ': props.severity == 'success', + 'bg-blue-500 ': props.severity == 'info', + 'bg-orange-500 ': props.severity == 'warning', + 'bg-purple-500 ': props.severity == 'help', + 'bg-red-500 ': props.severity == 'danger' + }, + { + 'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null, + 'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large', + 'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge' + } + ) + }) +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Badge } from 'primereact/badge'; + +export default function UnstyledDemo() { + return ( +
+
+ + + + + +
+
+ + + + + + + + + +
+
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/blockui/basicdoc.js b/components/doc/blockui/basicdoc.js index 28480808fc..e4946ce528 100644 --- a/components/doc/blockui/basicdoc.js +++ b/components/doc/blockui/basicdoc.js @@ -1,9 +1,9 @@ -import { DocSectionCode } from '../common/docsectioncode'; -import { DocSectionText } from '../common/docsectiontext'; +import { useState } from 'react'; import { BlockUI } from '../../../components/lib/blockui/BlockUI'; import { Panel } from '../../../components/lib/panel/Panel'; -import { useState } from 'react'; import { Button } from '../../lib/button/Button'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function BasicDoc(props) { const [blocked, setBlocked] = useState(false); @@ -25,9 +25,10 @@ export function BasicDoc(props) { `, javascript: ` -import React from 'react'; +import React, { useState } from 'react'; import { BlockUI } from 'primereact/blockui'; import { Panel } from 'primereact/panel'; +import { Button } from 'primereact/button'; export default function BasicDemo() { const [blocked, setBlocked] = useState(false); @@ -52,9 +53,10 @@ export default function BasicDemo() { } `, typescript: ` -import React from 'react'; +import React, { useState } from 'react'; import { BlockUI } from 'primereact/blockui'; import { Panel } from 'primereact/panel'; +import { Button } from 'primereact/button'; export default function BasicDemo() { const [blocked, setBlocked] = useState(false); diff --git a/components/doc/blockui/templatedoc.js b/components/doc/blockui/templatedoc.js index 439cdf3db3..568ba75771 100644 --- a/components/doc/blockui/templatedoc.js +++ b/components/doc/blockui/templatedoc.js @@ -1,9 +1,9 @@ -import { DocSectionCode } from '../common/docsectioncode'; -import { DocSectionText } from '../common/docsectiontext'; +import { useState } from 'react'; import { BlockUI } from '../../../components/lib/blockui/BlockUI'; import { Panel } from '../../../components/lib/panel/Panel'; -import { useState } from 'react'; import { Button } from '../../lib/button/Button'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function TemplateDoc(props) { const [blocked, setBlocked] = useState(false); @@ -25,9 +25,10 @@ export function TemplateDoc(props) { `, javascript: ` -import React from 'react'; +import React, { useState } from 'react'; import { BlockUI } from 'primereact/blockui'; import { Panel } from 'primereact/panel'; +import { Button } from 'primereact/button'; export default function TemplateDemo() { const [blocked, setBlocked] = useState(false); @@ -52,9 +53,10 @@ export default function TemplateDemo() { } `, typescript: ` -import React from 'react'; +import React, { useState } from 'react'; import { BlockUI } from 'primereact/blockui'; import { Panel } from 'primereact/panel'; +import { Button } from 'primereact/button'; export default function TemplateDemo() { const [blocked, setBlocked] = useState(false); diff --git a/components/doc/blockui/theming/styleddoc.js b/components/doc/blockui/theming/styleddoc.js new file mode 100644 index 0000000000..148736bcd7 --- /dev/null +++ b/components/doc/blockui/theming/styleddoc.js @@ -0,0 +1,31 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + +
NameElement
p-blockuiMask element.
p-blockui-documentMask element in full screen mode.
+
+ + ); +} diff --git a/components/doc/blockui/theming/tailwinddoc.js b/components/doc/blockui/theming/tailwinddoc.js new file mode 100644 index 0000000000..9ce7b2cb66 --- /dev/null +++ b/components/doc/blockui/theming/tailwinddoc.js @@ -0,0 +1,59 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +blockui: { + root: 'relative', + mask: 'bg-black/40' +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState } from 'react'; +import { BlockUI } from 'primereact/blockui'; +import { Panel } from 'primereact/panel'; +import { Button } from 'primereact/button'; + +export default function UnstyledDemo() { + const [blocked, setBlocked] = useState(false); + + return ( +
+
+ + +
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +

+ + +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/chip/theming/styleddoc.js b/components/doc/chip/theming/styleddoc.js new file mode 100644 index 0000000000..eb94d89173 --- /dev/null +++ b/components/doc/chip/theming/styleddoc.js @@ -0,0 +1,39 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-chipContainer element.
p-chip-imageContainer element in image mode.
p-chip-textText of the chip.
pi-chip-remove-iconRemove icon.
+
+ + ); +} diff --git a/components/doc/chip/theming/tailwinddoc.js b/components/doc/chip/theming/tailwinddoc.js new file mode 100644 index 0000000000..a99b5bd00e --- /dev/null +++ b/components/doc/chip/theming/tailwinddoc.js @@ -0,0 +1,55 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +chip: { + root: { + className: classNames('inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900') + }, + label: 'leading-6 mt-1.5 mb-1.5', + icon: 'leading-6 mr-2', + image: { + className: classNames('w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full') + }, + removeIcon: { + className: classNames('ml-2 rounded-md transition duration-200 ease-in-out', 'cursor-pointer leading-6') + } +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Chip } from 'primereact/chip'; + +export default function UnstyledDemo() { + return ( +
+ + + + +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/inplace/theming/styleddoc.js b/components/doc/inplace/theming/styleddoc.js new file mode 100644 index 0000000000..f5feb20aa3 --- /dev/null +++ b/components/doc/inplace/theming/styleddoc.js @@ -0,0 +1,35 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameElement
p-inplaceContainer element
p-inplace-displayDisplay container
p-inplace-contentContent container
+
+ + ); +} diff --git a/components/doc/inplace/theming/tailwinddoc.js b/components/doc/inplace/theming/tailwinddoc.js new file mode 100644 index 0000000000..b19e98a4e6 --- /dev/null +++ b/components/doc/inplace/theming/tailwinddoc.js @@ -0,0 +1,54 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +inplace: { + display: { + className: classNames('p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80') + } +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState } from 'react'; +import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace'; + +export default function UnstyledDemo() { + return ( +
+ + View Content + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ + +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/progressbar/theming/styleddoc.js b/components/doc/progressbar/theming/styleddoc.js new file mode 100644 index 0000000000..615b107f76 --- /dev/null +++ b/components/doc/progressbar/theming/styleddoc.js @@ -0,0 +1,43 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-progressbarContainer element.
p-progressbar-determinateContainer element of a determinate progressbar.
p-progressbar-indeterminateContainer element of an indeterminate progressbar.
p-progressbar-valueElement whose width changes according to value.
p-progressbar-labelLabel element that displays the current value.
+
+ + ); +} diff --git a/components/doc/progressbar/theming/tailwinddoc.js b/components/doc/progressbar/theming/tailwinddoc.js new file mode 100644 index 0000000000..8fa9cb9729 --- /dev/null +++ b/components/doc/progressbar/theming/tailwinddoc.js @@ -0,0 +1,114 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +global: { + css: \` + .progressbar-value-animate::after { + will-change: left, right; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + } + .progressbar-value-animate::before { + will-change: left, right; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } +\` +}, +progressbar: { + root: { + className: classNames('overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800') + }, + value: ({ props }) => ({ + className: classNames('border-0 m-0 bg-blue-500', { + 'transition-width duration-1000 ease-in-out absolute items-center border-0 flex h-full justify-center overflow-hidden w-0': props.mode !== 'indeterminate', + 'progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate' + }) + }), + label: { + className: classNames('inline-flex', 'text-white leading-6') + } +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState, useEffect, useRef } from 'react'; +import { ProgressBar } from 'primereact/progressbar'; +import { Toast } from 'primereact/toast'; + +export default function UnstyledDemo() { + const [value, setValue] = useState(0); + const toast = useRef(null); + const interval = useRef(null); + + useEffect(() => { + let _val = value; + + interval.current = setInterval(() => { + _val += Math.floor(Math.random() * 10) + 1; + + if (_val >= 100) { + _val = 100; + toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' }); + clearInterval(interval.current); + } + + setValue(_val); + }, 2000); + + return () => { + if (interval.current) { + clearInterval(interval.current); + interval.current = null; + } + }; + }, []); + + return ( +
+
+ + +
+ +
+ +
+
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/progressspinner/theming/styleddoc.js b/components/doc/progressspinner/theming/styleddoc.js new file mode 100644 index 0000000000..d7f8aa01b2 --- /dev/null +++ b/components/doc/progressspinner/theming/styleddoc.js @@ -0,0 +1,35 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameElement
p-progress-spinnerContainer element.
p-progress-circleSVG element.
p-progress-pathCircle element.
+
+ + ); +} diff --git a/components/doc/progressspinner/theming/tailwinddoc.js b/components/doc/progressspinner/theming/tailwinddoc.js new file mode 100644 index 0000000000..0d44339048 --- /dev/null +++ b/components/doc/progressspinner/theming/tailwinddoc.js @@ -0,0 +1,86 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +global: { + css: \` + .progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; + } + + @keyframes p-progress-spinner-dash{ + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } + } + @keyframes p-progress-spinner-color { + 100%, 0% { + stroke: #ff5757; + } + 40% { + stroke: #696cff; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } + } +\` +}, +progressspinner: { + root: { + className: classNames('relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full') + }, + spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin', + circle: 'text-red-500 progress-spinner-circle' +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { ProgressSpinner } from 'primereact/progressspinner'; + +export default function UnstyledDemo() { + return ( +
+ +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/ripple/theming/styleddoc.js b/components/doc/ripple/theming/styleddoc.js new file mode 100644 index 0000000000..969f7703f8 --- /dev/null +++ b/components/doc/ripple/theming/styleddoc.js @@ -0,0 +1,35 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameElement
p-rippleHost element.
p-inkRipple element.
p-ink-activeRipple element during animating.
+
+ + ); +} diff --git a/components/doc/ripple/theming/tailwinddoc.js b/components/doc/ripple/theming/tailwinddoc.js new file mode 100644 index 0000000000..4a7d0b5a57 --- /dev/null +++ b/components/doc/ripple/theming/tailwinddoc.js @@ -0,0 +1,57 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +global: { + css: \` + *[data-pd-ripple="true"]{ + overflow: hidden; + position: relative; + } + span[data-p-ink-active="true"]{ + animation: ripple 0.4s linear; + } + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } +\` +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Ripple } from 'primereact/ripple'; +import { Button } from 'primereact/button'; + +export default function UnstyledDemo() { + return ( +
+
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/scrolltop/elementdoc.js b/components/doc/scrolltop/elementdoc.js index 7b8d05647d..664602ec4e 100644 --- a/components/doc/scrolltop/elementdoc.js +++ b/components/doc/scrolltop/elementdoc.js @@ -1,7 +1,7 @@ import React from 'react'; +import { ScrollTop } from '../../lib/scrolltop/ScrollTop'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; -import { ScrollTop } from '../../lib/scrolltop/ScrollTop'; export function ElementDoc(props) { const code = { @@ -11,7 +11,6 @@ export function ElementDoc(props) { javascript: ` import React from 'react'; import { ScrollTop } from 'primereact/scrolltop'; -import { ScrollPanel } from 'primereact/scrollpanel'; export default function ElementDemo() { return ( @@ -33,7 +32,6 @@ export default function ElementDemo() { typescript: ` import React from 'react'; import { ScrollTop } from 'primereact/scrolltop'; -import { ScrollPanel } from 'primereact/scrollpanel'; export default function ElementDemo() { return ( diff --git a/components/doc/scrolltop/theming/styleddoc.js b/components/doc/scrolltop/theming/styleddoc.js new file mode 100644 index 0000000000..61c5a769dd --- /dev/null +++ b/components/doc/scrolltop/theming/styleddoc.js @@ -0,0 +1,31 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + +
NameElement
p-scrolltopContainer element.
p-scrolltop-stickyContainer element when attached to its parent.
+
+ + ); +} diff --git a/components/doc/scrolltop/theming/tailwinddoc.js b/components/doc/scrolltop/theming/tailwinddoc.js new file mode 100644 index 0000000000..4be1b9179f --- /dev/null +++ b/components/doc/scrolltop/theming/tailwinddoc.js @@ -0,0 +1,62 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +scrolltop: { + root: ({ props }) => ({ + className: classNames('fixed bottom-20 right-20 flex items-center justify-center', 'ml-auto', { + '!bg-blue-500 hover:bg-blue-600 text-white rounded-md h-8 w-8': props.target == 'parent', + '!bg-gray-700 hover:bg-gray-800 h-12 w-12 rounded-full text-white': props.target !== 'parent' + }) + }), + transition: { + enterFromClass: 'opacity-0', + enterActiveClass: 'transition-opacity duration-150', + leaveActiveClass: 'transition-opacity duration-150', + leaveToClass: 'opacity-0' + } +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { ScrollTop } from 'primereact/scrolltop'; + +export default function UnstyledDemo() { + return ( +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur + adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor + augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet + nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus + viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. +

+ +
+
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/skeleton/styledoc.js b/components/doc/skeleton/styledoc.js index 7a3128d4e5..6a8943a2e6 100644 --- a/components/doc/skeleton/styledoc.js +++ b/components/doc/skeleton/styledoc.js @@ -1,5 +1,5 @@ -import { DocSectionText } from '../common/docsectiontext'; import Link from 'next/link'; +import { DocSectionText } from '../common/docsectiontext'; export function StyleDoc() { return ( diff --git a/components/doc/skeleton/theming/styleddoc.js b/components/doc/skeleton/theming/styleddoc.js new file mode 100644 index 0000000000..8aff3b0519 --- /dev/null +++ b/components/doc/skeleton/theming/styleddoc.js @@ -0,0 +1,35 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameElement
p-skeletonContainer element.
p-skeleton-circleContainer element of a determinate progressbar.
p-skeleton-noneContainer element of an indeterminate progressbar.
+
+ + ); +} diff --git a/components/doc/skeleton/theming/tailwinddoc.js b/components/doc/skeleton/theming/tailwinddoc.js new file mode 100644 index 0000000000..0aa45e103c --- /dev/null +++ b/components/doc/skeleton/theming/tailwinddoc.js @@ -0,0 +1,88 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +skeleton: { + root: ({ props }) => ({ + className: classNames( + 'overflow-hidden', + '!mb-2', + 'bg-gray-300 dark:bg-gray-800', + 'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse', + { + 'rounded-md': props.shape !== 'circle', + 'rounded-full': props.shape == 'circle' + } + ) + }) +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Skeleton } from 'primereact/skeleton'; + +export default function UnstyledDemo() { + return ( +
+
+
+
Rectangle
+ + + + + +
+
+
Rounded
+ + + + + +
+
+
Square
+
+ + + + +
+
+
+
Circle
+
+ + + + +
+
+
+
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/tag/theming/styleddoc.js b/components/doc/tag/theming/styleddoc.js new file mode 100644 index 0000000000..5b8cea9f1f --- /dev/null +++ b/components/doc/tag/theming/styleddoc.js @@ -0,0 +1,39 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-tagTag element
p-tag-roundedRounded element
p-tag-iconIcon of the tag
p-tag-valueValue of the tag
+
+ + ); +} diff --git a/components/doc/tag/theming/tailwinddoc.js b/components/doc/tag/theming/tailwinddoc.js new file mode 100644 index 0000000000..792686714a --- /dev/null +++ b/components/doc/tag/theming/tailwinddoc.js @@ -0,0 +1,65 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +tag: { + root: ({ props }) => ({ + className: classNames( + 'inline-flex items-center justify-center', + 'bg-blue-500 text-white text-xs font-semibold px-2 py-1 ', + { + 'bg-gray-500 ': props.severity == 'secondary', + 'bg-green-500 ': props.severity == 'success', + 'bg-blue-500 ': props.severity == 'info', + 'bg-orange-500 ': props.severity == 'warning', + 'bg-purple-500 ': props.severity == 'help', + 'bg-red-500 ': props.severity == 'danger' + }, + { + 'rounded-md': !props.rounded, + 'rounded-full': props.rounded + } + ) + }), + value: 'leading-6', + icon: 'mr-1 text-sm' +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Tag } from 'primereact/tag'; + +export default function UnstyledDemo() { + return ( +
+ + + + + +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/terminal/theming/styleddoc.js b/components/doc/terminal/theming/styleddoc.js new file mode 100644 index 0000000000..a4c1b46a1d --- /dev/null +++ b/components/doc/terminal/theming/styleddoc.js @@ -0,0 +1,43 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-terminalContainer element.
p-terminal-contentContent of terminal.
p-terminal-promptPrompt text.
p-terminal-responseCommand response.
p-terminal-inputInput element to enter commands.
+
+ + ); +} diff --git a/components/doc/terminal/theming/tailwinddoc.js b/components/doc/terminal/theming/tailwinddoc.js new file mode 100644 index 0000000000..72d802fa8a --- /dev/null +++ b/components/doc/terminal/theming/tailwinddoc.js @@ -0,0 +1,92 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +terminal: { + root: { + className: classNames('border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto') + }, + container: 'flex items-center', + prompt: 'text-yellow-400', + commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none' +}, + ` + }; + + const code2 = { + javascript: ` +import React, { useEffect } from 'react'; +import { Terminal } from 'primereact/terminal'; +import { TerminalService } from 'primereact/terminalservice'; + +export default function UnstyledDemo() { + const commandHandler = (text) => { + let response; + let argsIndex = text.indexOf(' '); + let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text; + + switch (command) { + case 'date': + response = 'Today is ' + new Date().toDateString(); + break; + + case 'greet': + response = 'Hola ' + text.substring(argsIndex + 1) + '!'; + break; + + case 'random': + response = Math.floor(Math.random() * 100); + break; + + case 'clear': + response = null; + break; + + default: + response = 'Unknown command: ' + command; + break; + } + + if (response) + TerminalService.emit('response', response); + else + TerminalService.emit('clear'); + }; + + useEffect(() => { + TerminalService.on('command', commandHandler); + + return () => { + TerminalService.off('command', commandHandler); + }; + }, []); + + return ( +
+

+ Enter "date" to display the current date, "greet {'{0}'}" for a message, "random" to get a random number and "clear" to clear all commands. +

+ +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 576a73826d..f0b05ff36f 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -785,9 +785,13 @@ const Tailwind = { }) }), cancelitem: ({ context }) => ({ - className: classNames('inline-flex items-center cursor-pointer', { - 'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused - }) + className: classNames( + 'inline-flex items-center cursor-pointer' + + // { + // 'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused + // } + ) }), cancelicon: { className: classNames('text-red-500', 'w-5 h-5', 'transition duration-200 ease-in') @@ -916,9 +920,9 @@ const Tailwind = { 'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative', 'px-4 py-3 rounded-md text-base w-36', 'border transition duration-200 ease-in-out', - { - 'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused - }, + // { + // 'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused + // }, { 'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80': !props.checked, diff --git a/pages/avatar/index.js b/pages/avatar/index.js index 9c7155d423..a19927618e 100644 --- a/pages/avatar/index.js +++ b/pages/avatar/index.js @@ -5,11 +5,13 @@ import { IconDoc } from '../../components/doc/avatar/icondoc'; import { ImageDoc } from '../../components/doc/avatar/imagedoc'; import { ImportDoc } from '../../components/doc/avatar/importdoc'; import { LabelDoc } from '../../components/doc/avatar/labeldoc'; -import { StyleDoc } from '../../components/doc/avatar/styledoc'; -import { DocComponent } from '../../components/doc/common/doccomponent'; +import { PTDoc } from '../../components/doc/avatar/pt/ptdoc'; import { Wireframe } from '../../components/doc/avatar/pt/wireframe'; +import { StyleDoc } from '../../components/doc/avatar/styledoc'; +import { StyledDoc } from '../../components/doc/avatar/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/avatar/theming/tailwinddoc'; import DocApiTable from '../../components/doc/common/docapitable'; -import { PTDoc } from '../../components/doc/avatar/pt/ptdoc'; +import { DocComponent } from '../../components/doc/common/doccomponent'; const AvatarDemo = () => { const docs = [ @@ -73,7 +75,27 @@ const AvatarDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default AvatarDemo; diff --git a/pages/badge/index.js b/pages/badge/index.js index 19e63c0c04..914e9e5278 100644 --- a/pages/badge/index.js +++ b/pages/badge/index.js @@ -4,13 +4,15 @@ import { BasicDoc } from '../../components/doc/badge/basicdoc'; import { ButtonDoc } from '../../components/doc/badge/buttondoc'; import { ImportDoc } from '../../components/doc/badge/importdoc'; import { PositionDoc } from '../../components/doc/badge/positiondoc'; +import { PTDoc } from '../../components/doc/badge/pt/ptdoc'; +import { Wireframe } from '../../components/doc/badge/pt/wireframe'; import { SeverityDoc } from '../../components/doc/badge/severitydoc'; import { SizeDoc } from '../../components/doc/badge/sizedoc'; import { StyleDoc } from '../../components/doc/badge/styledoc'; -import { DocComponent } from '../../components/doc/common/doccomponent'; -import { Wireframe } from '../../components/doc/badge/pt/wireframe'; +import { StyledDoc } from '../../components/doc/badge/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/badge/theming/tailwinddoc'; import DocApiTable from '../../components/doc/common/docapitable'; -import { PTDoc } from '../../components/doc/badge/pt/ptdoc'; +import { DocComponent } from '../../components/doc/common/doccomponent'; const BadgeDemo = () => { const docs = [ @@ -74,7 +76,27 @@ const BadgeDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default BadgeDemo; diff --git a/pages/blockui/index.js b/pages/blockui/index.js index d414b796d0..369832820b 100644 --- a/pages/blockui/index.js +++ b/pages/blockui/index.js @@ -3,12 +3,14 @@ import { AccessibilityDoc } from '../../components/doc/blockui/accessibilitydoc' import { BasicDoc } from '../../components/doc/blockui/basicdoc'; import { DocumentDoc } from '../../components/doc/blockui/documentdoc'; import { ImportDoc } from '../../components/doc/blockui/importdoc'; +import { PTDoc } from '../../components/doc/blockui/pt/ptdoc'; +import { Wireframe } from '../../components/doc/blockui/pt/wireframe'; import { StyleDoc } from '../../components/doc/blockui/styledoc'; import { TemplateDoc } from '../../components/doc/blockui/templatedoc'; -import { DocComponent } from '../../components/doc/common/doccomponent'; +import { StyledDoc } from '../../components/doc/blockui/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/blockui/theming/tailwinddoc'; import DocApiTable from '../../components/doc/common/docapitable'; -import { PTDoc } from '../../components/doc/blockui/pt/ptdoc'; -import { Wireframe } from '../../components/doc/blockui/pt/wireframe'; +import { DocComponent } from '../../components/doc/common/doccomponent'; const BlockUIDemo = () => { const docs = [ @@ -62,7 +64,27 @@ const BlockUIDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default BlockUIDemo; diff --git a/pages/chip/index.js b/pages/chip/index.js index 8ccb0a67cb..479ed68950 100644 --- a/pages/chip/index.js +++ b/pages/chip/index.js @@ -4,12 +4,14 @@ import { BasicDoc } from '../../components/doc/chip/basicdoc'; import { IconDoc } from '../../components/doc/chip/icondoc'; import { ImageDoc } from '../../components/doc/chip/imagedoc'; import { ImportDoc } from '../../components/doc/chip/importdoc'; +import { PTDoc } from '../../components/doc/chip/pt/ptdoc'; +import { Wireframe } from '../../components/doc/chip/pt/wireframe'; import { StyleDoc } from '../../components/doc/chip/styledoc'; import { TemplateDoc } from '../../components/doc/chip/templatedoc'; -import { DocComponent } from '../../components/doc/common/doccomponent'; -import { Wireframe } from '../../components/doc/chip/pt/wireframe'; +import { StyledDoc } from '../../components/doc/chip/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/chip/theming/tailwinddoc'; import DocApiTable from '../../components/doc/common/docapitable'; -import { PTDoc } from '../../components/doc/chip/pt/ptdoc'; +import { DocComponent } from '../../components/doc/common/doccomponent'; const ChipDemo = () => { const docs = [ @@ -68,7 +70,27 @@ const ChipDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default ChipDemo; diff --git a/pages/inplace/index.js b/pages/inplace/index.js index 8016e63d0e..5a9374f3fd 100644 --- a/pages/inplace/index.js +++ b/pages/inplace/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/inplace/accessibilitydoc'; import { BasicDoc } from '../../components/doc/inplace/basicdoc'; @@ -6,10 +7,11 @@ import { ImageDoc } from '../../components/doc/inplace/imagedoc'; import { ImportDoc } from '../../components/doc/inplace/importdoc'; import { InputDoc } from '../../components/doc/inplace/inputdoc'; import { LazyDoc } from '../../components/doc/inplace/lazydoc'; -import { StyleDoc } from '../../components/doc/inplace/styledoc'; import { PTDoc } from '../../components/doc/inplace/pt/ptdoc'; -import DocApiTable from '../../components/doc/common/docapitable'; import { Wireframe } from '../../components/doc/inplace/pt/wireframe'; +import { StyleDoc } from '../../components/doc/inplace/styledoc'; +import { StyledDoc } from '../../components/doc/inplace/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/inplace/theming/tailwinddoc'; const ChipDemo = () => { const docs = [ @@ -68,6 +70,26 @@ const ChipDemo = () => { } ]; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + return ( { componentDocs={docs} apiDocs={['Inplace', 'InplaceDisplay', 'InplaceContent']} ptDocs={ptDocs} + themingDocs={themingDocs} /> ); }; diff --git a/pages/progressbar/index.js b/pages/progressbar/index.js index 4fd2467966..9d22a1d542 100644 --- a/pages/progressbar/index.js +++ b/pages/progressbar/index.js @@ -1,15 +1,17 @@ import React from 'react'; +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/progressbar/accessibilitydoc'; import { BasicDoc } from '../../components/doc/progressbar/basicdoc'; import { DynamicDoc } from '../../components/doc/progressbar/dynamicdoc'; import { ImportDoc } from '../../components/doc/progressbar/importdoc'; import { IndeterminateDoc } from '../../components/doc/progressbar/indeterminatedoc'; +import { PTDoc } from '../../components/doc/progressbar/pt/ptdoc'; +import { Wireframe } from '../../components/doc/progressbar/pt/wireframe'; import { StyleDoc } from '../../components/doc/progressbar/styledoc'; import { TemplateDoc } from '../../components/doc/progressbar/templatedoc'; -import DocApiTable from '../../components/doc/common/docapitable'; -import { Wireframe } from '../../components/doc/progressbar/pt/wireframe'; -import { PTDoc } from '../../components/doc/progressbar/pt/ptdoc'; +import { StyledDoc } from '../../components/doc/progressbar/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/progressbar/theming/tailwinddoc'; const ProgressBarDemo = () => { const docs = [ @@ -68,7 +70,27 @@ const ProgressBarDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default ProgressBarDemo; diff --git a/pages/progressspinner/index.js b/pages/progressspinner/index.js index e1442ae7e5..e1ebbcffb6 100644 --- a/pages/progressspinner/index.js +++ b/pages/progressspinner/index.js @@ -1,13 +1,15 @@ import React from 'react'; +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/progressspinner/accessibilitydoc'; import { BasicDoc } from '../../components/doc/progressspinner/basicdoc'; import { CustomDoc } from '../../components/doc/progressspinner/customdoc'; import { ImportDoc } from '../../components/doc/progressspinner/importdoc'; -import { StyleDoc } from '../../components/doc/progressspinner/styledoc'; -import { Wireframe } from '../../components/doc/progressspinner/pt/wireframe'; -import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/progressspinner/pt/ptdoc'; +import { Wireframe } from '../../components/doc/progressspinner/pt/wireframe'; +import { StyleDoc } from '../../components/doc/progressspinner/styledoc'; +import { StyledDoc } from '../../components/doc/progressspinner/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/progressspinner/theming/tailwinddoc'; const SkeletonDemo = () => { const docs = [ @@ -56,7 +58,27 @@ const SkeletonDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default SkeletonDemo; diff --git a/pages/ripple/index.js b/pages/ripple/index.js index 3365aaf417..5057b72cb9 100644 --- a/pages/ripple/index.js +++ b/pages/ripple/index.js @@ -5,6 +5,8 @@ import { BasicDoc } from '../../components/doc/ripple/basicdoc'; import { ConfigurationDoc } from '../../components/doc/ripple/configurationdoc'; import { ImportDoc } from '../../components/doc/ripple/importdoc'; import { StyleDoc } from '../../components/doc/ripple/styledoc'; +import { StyledDoc } from '../../components/doc/ripple/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/ripple/theming/tailwinddoc'; import AppContentContext from '../../components/layout/appcontentcontext'; const RippleDemo = () => { @@ -48,7 +50,27 @@ const RippleDemo = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default RippleDemo; diff --git a/pages/scrolltop/index.js b/pages/scrolltop/index.js index 85eb7bc13e..3edd83d4c5 100644 --- a/pages/scrolltop/index.js +++ b/pages/scrolltop/index.js @@ -1,13 +1,15 @@ import React from 'react'; +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/scrolltop/accessibilitydoc'; import { BasicDoc } from '../../components/doc/scrolltop/basicdoc'; import { ElementDoc } from '../../components/doc/scrolltop/elementdoc'; import { ImportDoc } from '../../components/doc/scrolltop/importdoc'; -import { StyleDoc } from '../../components/doc/scrolltop/styledoc'; -import { Wireframe } from '../../components/doc/scrolltop/pt/wireframe'; -import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/scrolltop/pt/ptdoc'; +import { Wireframe } from '../../components/doc/scrolltop/pt/wireframe'; +import { StyleDoc } from '../../components/doc/scrolltop/styledoc'; +import { StyledDoc } from '../../components/doc/scrolltop/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/scrolltop/theming/tailwinddoc'; const ScrollTopDemo = () => { const docs = [ @@ -56,6 +58,26 @@ const ScrollTopDemo = () => { } ]; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + return ( { componentDocs={docs} apiDocs={['ScrollTop']} ptDocs={ptDocs} + themingDocs={themingDocs} /> ); }; diff --git a/pages/skeleton/index.js b/pages/skeleton/index.js index 1b379aa3c4..f7b6c8680e 100644 --- a/pages/skeleton/index.js +++ b/pages/skeleton/index.js @@ -1,15 +1,17 @@ import React from 'react'; +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/skeleton/accessibilitydoc'; import { CardDoc } from '../../components/doc/skeleton/carddoc'; import { DataTableDoc } from '../../components/doc/skeleton/datatabledoc'; import { ImportDoc } from '../../components/doc/skeleton/importdoc'; import { ListDoc } from '../../components/doc/skeleton/listdoc'; +import { PTDoc } from '../../components/doc/skeleton/pt/ptdoc'; +import { Wireframe } from '../../components/doc/skeleton/pt/wireframe'; import { ShapesDoc } from '../../components/doc/skeleton/shapesdoc'; import { StyleDoc } from '../../components/doc/skeleton/styledoc'; -import DocApiTable from '../../components/doc/common/docapitable'; -import { Wireframe } from '../../components/doc/skeleton/pt/wireframe'; -import { PTDoc } from '../../components/doc/skeleton/pt/ptdoc'; +import { StyledDoc } from '../../components/doc/skeleton/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/skeleton/theming/tailwinddoc'; const SkeletonDemo = () => { const docs = [ @@ -68,7 +70,27 @@ const SkeletonDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default SkeletonDemo; diff --git a/pages/tag/index.js b/pages/tag/index.js index 6cb02bc166..1f74a457c7 100644 --- a/pages/tag/index.js +++ b/pages/tag/index.js @@ -1,16 +1,18 @@ import React from 'react'; +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/tag/accessibilitydoc'; import { BasicDoc } from '../../components/doc/tag/basicdoc'; import { IconDoc } from '../../components/doc/tag/icondoc'; import { ImportDoc } from '../../components/doc/tag/importdoc'; import { PillDoc } from '../../components/doc/tag/pilldoc'; +import { PTDoc } from '../../components/doc/tag/pt/ptdoc'; +import { Wireframe } from '../../components/doc/tag/pt/wireframe'; import { SeverityDoc } from '../../components/doc/tag/severitydoc'; import { StyleDoc } from '../../components/doc/tag/styledoc'; import { TemplateDoc } from '../../components/doc/tag/templatedoc'; -import DocApiTable from '../../components/doc/common/docapitable'; -import { Wireframe } from '../../components/doc/tag/pt/wireframe'; -import { PTDoc } from '../../components/doc/tag/pt/ptdoc'; +import { StyledDoc } from '../../components/doc/tag/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/tag/theming/tailwinddoc'; const TerminalDemo = () => { const docs = [ @@ -74,7 +76,27 @@ const TerminalDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default TerminalDemo; diff --git a/pages/terminal/index.js b/pages/terminal/index.js index c87acd9417..5f17f16abd 100644 --- a/pages/terminal/index.js +++ b/pages/terminal/index.js @@ -7,6 +7,8 @@ import { ImportDoc } from '../../components/doc/terminal/importdoc'; import { PTDoc } from '../../components/doc/terminal/pt/ptdoc'; import { Wireframe } from '../../components/doc/terminal/pt/wireframe'; import { StyleDoc } from '../../components/doc/terminal/styledoc'; +import { StyledDoc } from '../../components/doc/terminal/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/terminal/theming/tailwinddoc'; const TerminalDemo = () => { const docs = [ @@ -50,7 +52,27 @@ const TerminalDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default TerminalDemo;