feat: Add feedback link to the code samples

bloomreach · Oct 10, 2024 · 796d864 · 796d864
1 parent af59f29
commit 796d864
Show file tree

Hide file tree

Showing 20 changed files with 251 additions and 147 deletions.
diff --git a/examples/autosuggest/src/App.tsx b/examples/autosuggest/src/App.tsx
@@ -7,6 +7,7 @@ import {
   InputField,
   SearchIcon,
   LoaderIcon,
+  ExternalLinkIcon,
   TabPanel,
   Tab,
   Tabs,
@@ -85,17 +86,25 @@ export default function App() {
           <ToggleField
             className="text-slate-300 toggle-field"
             label="Show JSON"
-            inputProps={{ id: "show-json-toggle" }}
+            inputProps={{id: "show-json-toggle"}}
             checked={showJson}
             onChange={() => setShowJson(!showJson)}
           />
+          <a
+          href="https://github.com/bloomreach/web-code-samples/discussions/new"
+          target="_blank"
+          className="flex gap-2 items-center font-semibold bg-amber-300 text-slate-800 mx-2 px-2 rounded"
+          >
+            Feedback
+            <ExternalLinkIcon size={10}/>
+          </a>
         </div>
       </div>
       <div className="app p-2 max-w-5xl w-full mx-auto grow">
         <div className="flex gap-2 items-center mt-4 mb-8">
           <div className="flex gap-2 items-center grow">
             <a href="https://bloomreach.com" target="_blank">
-              <img src={BrLogo} width={150} />
+              <img src={BrLogo} width={150}/>
             </a>
             <span>✨</span>
             <div className="text-lg font-semibold text-[#002840]">Autosuggest</div>

diff --git a/examples/autosuggest/src/Footer.tsx b/examples/autosuggest/src/Footer.tsx
@@ -29,10 +29,10 @@ export const Footer = () => {
           <div className="my-2 text-sm">
             <a
               target="_blank"
-              className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+              className="text-slate-500 hover:underline"
               href="https://github.com/bloomreach/web-code-samples/tree/main/examples/autosuggest"
             >
-              See the source on Github <ExternalLinkIcon size={12}/>
+              See the source on Github <ExternalLinkIcon className="inline" size={12}/>
             </a>
           </div>
         </div>
@@ -42,23 +42,23 @@ export const Footer = () => {
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/autosuggest"
               >
                 Autosuggest
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/reference/autosuggest-api"
               >
                 Autosuggest API reference
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
           </ul>
@@ -71,49 +71,49 @@ export const Footer = () => {
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/discovery-sdks"
                 rel="noreferrer"
               >
                 Bloomreach SDK
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://bloomreach.github.io/limitless-ui-react"
                 rel="noreferrer"
               >
                 Limitless commerce UI kit
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/discovery-web-code-samples"
                 rel="noreferrer"
               >
                 Web code samples
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://github.com/bloomreach/sample-catalogs"
                 rel="noreferrer"
               >
                 Sample catalogs
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
           </ul>

diff --git a/examples/categories/src/App.jsx b/examples/categories/src/App.jsx
@@ -4,6 +4,7 @@ import JsonView from "@uiw/react-json-view";
 import {
   ToggleField,
   LoaderIcon,
+  ExternalLinkIcon,
 } from "@bloomreach/react-banana-ui";
 import "@bloomreach/react-banana-ui/style.css";
 
@@ -91,6 +92,14 @@ export default function App() {
             checked={showJson}
             onChange={() => setShowJson(!showJson)}
           />
+          <a
+            href="https://github.com/bloomreach/web-code-samples/discussions/new"
+            target="_blank"
+            className="flex gap-2 items-center font-semibold bg-amber-300 text-slate-800 mx-2 px-2 rounded"
+          >
+            Feedback
+            <ExternalLinkIcon size={10}/>
+          </a>
         </div>
       </div>
       <div className="app p-2 max-w-5xl w-full mx-auto grow">

diff --git a/examples/categories/src/Footer.jsx b/examples/categories/src/Footer.jsx
@@ -29,10 +29,12 @@ export const Footer = () => {
           <div className="my-2 text-sm">
             <a
               target="_blank"
-              className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+              className="text-slate-500 hover:underline"
               href="https://github.com/bloomreach/web-code-samples/tree/main/examples/categories"
             >
-              See the source on Github <ExternalLinkIcon size={12}/>
+              See the source on Github
+              {' '}
+              <ExternalLinkIcon className="inline" size={12}/>
             </a>
           </div>
         </div>
@@ -42,12 +44,12 @@ export const Footer = () => {
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/reference/search-category-trees"
               >
                 Search category trees
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
           </ul>
@@ -60,49 +62,49 @@ export const Footer = () => {
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/discovery-sdks"
                 rel="noreferrer"
               >
                 Bloomreach SDK
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://bloomreach.github.io/limitless-ui-react"
                 rel="noreferrer"
               >
                 Limitless commerce UI kit
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/discovery-web-code-samples"
                 rel="noreferrer"
               >
                 Web code samples
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://github.com/bloomreach/sample-catalogs"
                 rel="noreferrer"
               >
                 Sample catalogs
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
           </ul>

diff --git a/examples/dynamic-grouping/src/App.jsx b/examples/dynamic-grouping/src/App.jsx
@@ -6,6 +6,7 @@ import {
   SearchIcon,
   Pagination,
   LoaderIcon,
+  ExternalLinkIcon,
 } from "@bloomreach/react-banana-ui";
 import { useEffect, useMemo, useState } from "react";
 import _ from "lodash";
@@ -83,6 +84,14 @@ export default function App() {
             checked={showJson}
             onChange={() => setShowJson(!showJson)}
           />
+          <a
+            href="https://github.com/bloomreach/web-code-samples/discussions/new"
+            target="_blank"
+            className="flex gap-2 items-center font-semibold bg-amber-300 text-slate-800 mx-2 px-2 rounded"
+          >
+            Feedback
+            <ExternalLinkIcon size={10}/>
+          </a>
         </div>
       </div>
       <div className="app p-2 max-w-5xl w-full mx-auto grow">

diff --git a/examples/dynamic-grouping/src/Footer.jsx b/examples/dynamic-grouping/src/Footer.jsx
@@ -30,10 +30,12 @@ export const Footer = () => {
           <div className="my-2 text-sm">
             <a
               target="_blank"
-              className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+              className="text-slate-500 hover:underline"
               href="https://github.com/bloomreach/web-code-samples/tree/main/examples/dynamic-grouping"
             >
-              See the source on Github <ExternalLinkIcon size={12}/>
+              See the source on Github
+              {' '}
+              <ExternalLinkIcon className="inline" size={12}/>
             </a>
           </div>
         </div>
@@ -43,34 +45,34 @@ export const Footer = () => {
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/dynamic-grouping"
               >
                 Dynamic Grouping
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/reference/dynamic-grouping-api"
               >
                 Dynamic Grouping API
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/reference/dynamic-grouping-api"
               >
                 Group merchandising
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
           </ul>
@@ -83,49 +85,49 @@ export const Footer = () => {
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/discovery-sdks"
                 rel="noreferrer"
               >
                 Bloomreach SDK
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://bloomreach.github.io/limitless-ui-react"
                 rel="noreferrer"
               >
                 Limitless commerce UI kit
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://documentation.bloomreach.com/discovery/docs/discovery-web-code-samples"
                 rel="noreferrer"
               >
                 Web code samples
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
             <li>
               <a
                 target="_blank"
-                className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+                className="text-slate-500 hover:underline"
                 href="https://github.com/bloomreach/sample-catalogs"
                 rel="noreferrer"
               >
                 Sample catalogs
                 {' '}
-                <ExternalLinkIcon size={12}/>
+                <ExternalLinkIcon className="inline" size={12}/>
               </a>
             </li>
           </ul>