Refactored Ripple Doc

goltsevnet · Feb 7, 2023 · 011f8a5 · 011f8a5
1 parent ab6dd73
commit 011f8a5
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 317 deletions.
diff --git a/components/doc/ripple/basicdoc.js b/components/doc/ripple/basicdoc.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Ripple } from '../../lib/ripple/Ripple';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+    Click Me
+    <Ripple />
+</div>
+        `,
+        javascript: `
+import React from 'react';
+import PrimeReact from 'primereact/api';
+import { Ripple } from 'primereact/ripple';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+                Click Me
+                <Ripple />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import PrimeReact from 'primereact/api';
+import { Ripple } from 'primereact/ripple';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+                Click Me
+                <Ripple />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Ripple is enabled by adding the component as a child and applying <i>p-ripple</i> class to the element.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center">
+                <div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+                    Click Me
+                    <Ripple />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/ripple/configurationdoc.js b/components/doc/ripple/configurationdoc.js
@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ConfigurationDoc(props) {
+    const code = {
+        basic: `
+PrimeReact.ripple = true;
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    To start with, Ripple needs to be enabled globally. See the <Link href="/ripple">Configuration API</Link> for details.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/ripple/customdoc.js b/components/doc/ripple/customdoc.js
diff --git a/components/doc/ripple/defaultdoc.js b/components/doc/ripple/defaultdoc.js
diff --git a/components/doc/ripple/importdoc.js b/components/doc/ripple/importdoc.js
@@ -1,10 +1,9 @@
-import { DocSectionText } from '../common/docsectiontext';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function ImportDoc(props) {
     const code = {
         basic: `
-import PrimeReact from 'primereact/api';
 import { Ripple } from 'primereact/ripple';
         `
     };

diff --git a/pages/ripple/index.js b/pages/ripple/index.js
@@ -1,12 +1,13 @@
 import Head from 'next/head';
-import React from 'react';
+import React, { useContext } from 'react';
 import { DocSectionNav } from '../../components/doc/common/docsectionnav';
 import { DocSections } from '../../components/doc/common/docsections';
 import { AccessibilityDoc } from '../../components/doc/ripple/accessibilitydoc';
-import { CustomDoc } from '../../components/doc/ripple/customdoc';
-import { DefaultDoc } from '../../components/doc/ripple/defaultdoc';
+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 AppContentContext from '../../components/layout/appcontentcontext';
 
 const RippleDemo = () => {
     const docs = [
@@ -16,14 +17,14 @@ const RippleDemo = () => {
             component: ImportDoc
         },
         {
-            id: 'default',
-            label: 'Default',
-            component: DefaultDoc
+            id: 'configuration',
+            label: 'ConfigurationDoc',
+            component: ConfigurationDoc
         },
         {
-            id: 'custom',
-            label: 'Custom',
-            component: CustomDoc
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
         },
         {
             id: 'style',
@@ -41,6 +42,9 @@ const RippleDemo = () => {
             doc: [{ name: 'Ripple', pathname: '/modules/ripple.html' }]
         }
     ];
+    const appContentContext = useContext(AppContentContext);
+
+    appContentContext.onRippleChange(true);
 
     return (
         <div>

diff --git a/styles/demo/_ripple.scss b/styles/demo/_ripple.scss