feat: Add feedback link to the code samples (#45)

Co-authored-by: Anand Gorantala <anand.gorantala@bloomreach.com>
bloomreach · Oct 11, 2024 · 24b9d06 · 24b9d06
1 parent af59f29
commit 24b9d06
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>