feat: Show how to implement visual previews for facets (#28)

Co-authored-by: Anand Gorantala <anand.gorantala@bloomreach.com>

examples/facets/src/components/applied-facet-multi-select.jsx

@@ -1,4 +1,5 @@
 import { AssetTag } from "@bloomreach/react-banana-ui";
+import {capitalize} from "lodash";
 
 export const AppliedFacetMultiSelect = ({ value, onClear }) => {
   return (
@@ -10,7 +11,7 @@ export const AppliedFacetMultiSelect = ({ value, onClear }) => {
           key={val}
           onDismiss={() => onClear(val)}
         >
-          {val}
+          {capitalize(val)}
         </AssetTag>
       ))}
     </div>

examples/facets/src/components/facet-color.jsx

@@ -1,15 +1,39 @@
 import { CheckboxGroup } from "./checkbox-group";
+import RustImg from "../assets/rust.png";
+import NaturalImg from "../assets/natural.png";
+import {capitalize} from "lodash";
 
-export const FacetColor = ({ facet, value, onChange }) => {
+const colorMapping = {
+  acorn: 'brown',
+  cream: '#f7f5ca',
+};
+
+const componentMapping = {
+  metallic: <div
+    className="w-5 h-5 rounded-full border border-gray-100 bg-gradient-to-r from-slate-400 to-gray-50"></div>,
+  rust: <img src={RustImg} alt="Rust preview" className="w-5 h-5 rounded-full border border-gray-100"/>,
+  natural: <img src={NaturalImg} alt="Rust preview" className="w-5 h-5 rounded-full border border-gray-100"/>,
+}
+
+function getPreview(value) {
+  if (componentMapping[value]) {
+    return componentMapping[value];
+  }
+
+  const color = colorMapping[value] || value;
+  return <div
+    className="w-5 h-5 rounded-full border border-gray-100"
+    style={{backgroundColor: color}}
+  ></div>
+}
+
+export const FacetColor = ({facet, value, onChange}) => {
   const options = facet.value.map((val) => ({
     label: (
       <div className="flex gap-2 items-center">
-        <div
-          className="w-5 h-5 rounded-full border border-gray-100"
-          style={{ backgroundColor: val.name }}
-        ></div>
+        {getPreview(val.name)}
         {" "}
-        {val.name}
+        {capitalize(val.name)}
       </div>
     ),
     value: val.name,

examples/facets/src/components/facet-multi-select.jsx

@@ -1,8 +1,9 @@
 import { CheckboxGroup } from "./checkbox-group";
+import {capitalize} from "lodash";
 
 export const FacetMultiSelect = ({ facet, value, onChange }) => {
   const options = facet.value.map((val) => ({
-    label: val.name,
+    label: capitalize(val.name),
     value: val.name,
     count: val.count,
   }));

examples/facets/src/components/facet.jsx

@@ -14,7 +14,7 @@ export const Facet = ({ facet, value, onChange }) => {
     return (
       <Accordion value={facet.name}>
         <AccordionHeader>
-          <span className="grow text-sm uppercase">{facet.name}</span>
+          <span className="uppercase">{facet.name}</span>
         </AccordionHeader>
         <AccordionContent>
           <FacetInner facet={facet} value={value} onChange={onChange} />