feat(samples/docusaurus): showcase github-like feedback

giuseppelt · Jul 13, 2023 · 263b8b4 · 263b8b4
1 parent f47b7c0
commit 263b8b4
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/samples/docusaurus/src/components/FeelbackShowcase.tsx b/samples/docusaurus/src/components/FeelbackShowcase.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FeelbackPulse, PRESET_PULSE_HEART, FeelbackReaction, PRESET_GITHUB_EMOJI, FeelbackMessage, FeelbackTaggedMessage, PRESET_FEEDBACK } from "@feelback/react";
+import { FeelbackPulse, PRESET_PULSE_HEART, FeelbackReaction, PRESET_GITHUB_EMOJI, FeelbackMessage, FeelbackTaggedMessage, PRESET_FEEDBACK, PRESET_LIKE_DISLIKE } from "@feelback/react";
 
 export function FeelbackShowcase() {
   return (
@@ -25,6 +25,31 @@ export function FeelbackShowcase() {
         <h4>Tagged message</h4>
         <FeelbackTaggedMessage layout="button-dialog" preset={PRESET_FEEDBACK} contentSetId="51ed5897-9a89-4570-ae41-e6610ba2fbe1" />
       </div>
+
+      <div className="github-like">
+        <h4>Github-like feedback</h4>
+        <FeelbackTaggedMessage contentSetId="51ed5897-9a89-4570-ae41-e6610ba2fbe1"
+          title="Was this page useful?"
+          layout="reveal-message"
+          preset={PRESET_LIKE_DISLIKE}
+          withEmail
+          placeholder={false}
+          placeholderEmail={false}
+          slots={{
+            BeforeMessage:
+              <div className="small-text mt-2">
+                <b>Let us know the details</b>
+                <span className="float-right">optional</span>
+              </div>,
+            BeforeEmail:
+              <div className="small-text mt-2">
+                <b>If we can contact you with more questions, please enter your email address</b>
+                <span className="float-right">optional</span>
+              </div>,
+            BeforeFormButtons: <div className="small-text mt-2">If you need a reply, please contact support instead.</div>
+          }}
+        />
+      </div>
     </div>
   );
 }
diff --git a/samples/docusaurus/src/css/custom.css b/samples/docusaurus/src/css/custom.css
@@ -57,3 +57,54 @@ article .feelback-container textarea {
   border-radius: 4px;
   padding: 0.5rem;
 }
+
+
+.small-text {
+  font-size: 0.8rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.float-right {
+  float: right;
+}
+
+
+.github-like {
+  .feelback-container {
+    --max-width: 300px;
+    text-align: left;
+
+    .feelback-q {
+      padding: 0;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.25rem;
+      margin-bottom: 0.5rem;
+
+      .feelback-text {
+        font-size: 1.2rem;
+        font-weight: bold;
+      }
+
+      .feelback-btn {
+        padding: 1.1rem 1.15rem;
+        font-size: 1.2em;
+        border-radius: 0.5rem;
+        border: 1px solid rgba(125, 125, 125, .4);
+
+        &.active:nth-child(1) {
+          background-color: blue;
+          color: white;
+        }
+
+        &.active:nth-child(2) {
+          background-color: red;
+          color: white;
+        }
+      }
+    }
+  }
+}