Merge pull request #2589 from coveo/feat-UITOOL-574-sync-feedback

refactor(website, sync feedback): update demo layout
coveo · Mar 23, 2022 · 1d86bfe · 1d86bfe
2 parents 8930e97 + ccf5c00
commit 1d86bfe
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 44 deletions.
diff --git a/packages/react/src/components/syncFeedback/SyncFeedback.tsx b/packages/react/src/components/syncFeedback/SyncFeedback.tsx
@@ -2,7 +2,16 @@ import * as React from 'react';
 import {Svg} from '../svg/Svg';
 
 export interface ISyncFeedbackProps {
+    /**
+     * The label of the current state
+     *
+     * @default 'Saving changes...' for 'SYNCING', 'Changes saved' for 'SUCCESS', and 'Changes could not be saved.' for 'ERROR'.
+     */
     feedback?: string;
+    /**
+     * The current state of the sync feedback component
+     * Either 'SYNCING', 'SUCCESS', 'ERROR' or 'NONE'
+     */
     state: string;
 }
 
@@ -17,7 +26,7 @@ export const DEFAULT_SYNC_FEEDBACK_SYNCING_LABEL: string = 'Saving changes...';
 export const DEFAULT_SYNC_FEEDBACK_SUCCESS_LABEL: string = 'Changes saved';
 export const DEFAULT_SYNC_FEEDBACK_ERROR_LABEL: string = 'Changes could not be saved.';
 
-export class SyncFeedback extends React.Component<ISyncFeedbackProps, any> {
+export class SyncFeedback extends React.PureComponent<ISyncFeedbackProps> {
     render() {
         const classes = ['sync-feedback'];
         if (this.props.state === SyncFeedbackState.ERROR) {

diff --git a/packages/website/src/examples/SyncFeedback/SyncFeedback.example.tsx b/packages/website/src/examples/SyncFeedback/SyncFeedback.example.tsx
@@ -0,0 +1,33 @@
+import {SyncFeedback, SyncFeedbackState} from '@coveord/plasma-react';
+import * as React from 'react';
+
+export default () => (
+    <table className="table">
+        <tr>
+            <td>NONE</td>
+            <td>
+                <SyncFeedback state={SyncFeedbackState.NONE} />
+            </td>
+        </tr>
+        <tr>
+            <td>SYNCING</td>
+            <td>
+                <SyncFeedback state={SyncFeedbackState.SYNCING} />
+            </td>
+        </tr>
+
+        <tr>
+            <td>SUCCESS</td>
+            <td>
+                <SyncFeedback state={SyncFeedbackState.SUCCESS} />
+            </td>
+        </tr>
+
+        <tr>
+            <td>ERROR</td>
+            <td>
+                <SyncFeedback state={SyncFeedbackState.ERROR} />
+            </td>
+        </tr>
+    </table>
+);
diff --git a/packages/website/src/examples/SyncFeedback/SyncFeedbackLabel.example.tsx b/packages/website/src/examples/SyncFeedback/SyncFeedbackLabel.example.tsx
@@ -0,0 +1,10 @@
+import {SyncFeedback, SyncFeedbackState} from '@coveord/plasma-react';
+import * as React from 'react';
+
+export default () => (
+    <>
+        <SyncFeedback state={SyncFeedbackState.SYNCING} feedback="There is something happening" />
+        <SyncFeedback state={SyncFeedbackState.SUCCESS} feedback="There was a success" />
+        <SyncFeedback state={SyncFeedbackState.ERROR} feedback="There was an error" />
+    </>
+);
diff --git a/packages/website/src/pages/feedback/SyncFeedback.tsx b/packages/website/src/pages/feedback/SyncFeedback.tsx
@@ -1,45 +1,16 @@
+import code from '@examples/SyncFeedback/SyncFeedback.example.tsx';
+import label from '@examples/SyncFeedback/SyncFeedbackLabel.example.tsx';
 import * as React from 'react';
-import {SyncFeedback, SyncFeedbackState} from '@coveord/plasma-react';
+import {PageLayout} from '../../building-blocs/PageLayout';
 
-import PlasmaComponent from '../../building-blocs/PlasmaComponent';
-
-// start-print
-export class SyncFeedbackExample extends React.Component<any, any> {
-    render() {
-        return (
-            <PlasmaComponent id="SyncFeedback" title="Sync Feedback" withSource>
-                <div className="mt2">
-                    <label className="form-control-label">SyncFeedback</label>
-                    <div className="form-control">
-                        <div className="mb2">
-                            A SyncFeedback component on state NONE is invisible.
-                            <SyncFeedback state={SyncFeedbackState.NONE} />
-                        </div>
-                        <div className="mb2">
-                            There is a default feedback message for each state
-                            <SyncFeedback state={SyncFeedbackState.SYNCING} />
-                            <SyncFeedback state={SyncFeedbackState.SUCCESS} />
-                            <SyncFeedback state={SyncFeedbackState.ERROR} />
-                        </div>
-                        <div className="mb2">
-                            You can pass a custom feedback message
-                            <SyncFeedback
-                                state={SyncFeedbackState.SYNCING}
-                                feedback="This message is a SyncFeedback component on state SYNCING"
-                            />
-                            <SyncFeedback
-                                state={SyncFeedbackState.SUCCESS}
-                                feedback="This message is a SyncFeedback component on state SUCCESS"
-                            />
-                            <SyncFeedback
-                                state={SyncFeedbackState.ERROR}
-                                feedback="This message is a SyncFeedback component on state ERROR"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </PlasmaComponent>
-        );
-    }
-}
-export default SyncFeedbackExample;
+export default () => (
+    <PageLayout
+        id="SyncFeedback"
+        title="Sync Feedback"
+        section="Feedback"
+        description="A sync feedback indicates the status of an operation to the user."
+        componentSourcePath="/numericInput/NumericInputConnected.tsx"
+        code={code}
+        examples={{label: {code: label, title: 'Custom Labels'}}}
+    />
+);