Cleaning up tag component

...and change datastructure of facet line components to make it easier
to extend the functionality in the future

Author: spaceo

src/stories/Library/Modals/modal-facet-browser/FacetBrowser.tsx

@@ -40,7 +40,7 @@ const FacetBrowser: React.FC<FacetBrowserProps> = ({
           >
             <div className="facet-browser__facet-group">
               {facet.tags.map((tag) => (
-                <Tag facet key={tag} label={tag} />
+                <Tag key={tag}>{tag}</Tag>
               ))}
             </div>
             <button className="link-tag cursor-pointer facet-browser__more-btn">

src/stories/Library/search-result-page/FacetLine.tsx

@@ -1,21 +1,17 @@
 import * as React from "react";
 import { FC } from "react";
 import { Dropdown } from "../dropdown/Dropdown";
+import { Tag } from "../tag/Tag";
 
-export type FacetLineTermItem = {
+export type FacetLineItem<TType extends "facet" | "term"> = {
   title: string;
-  type: "term";
-  score: number;
-  terms: never;
-};
-export type FacetLineFacetItem = {
-  title: string;
-  type: "facet";
-  terms: FacetLineTermItem[];
-  score: never;
+  type: TType;
+  score: TType extends "term" ? number : never;
+  facet: TType extends "term" ? string : never;
+  terms: TType extends "facet" ? FacetLineItem<"term">[] : never;
 };
 export interface FacetLineProps {
-  items: (FacetLineTermItem | FacetLineFacetItem)[];
+  items: (FacetLineItem<"term"> | FacetLineItem<"facet">)[];
 }
 
 const FacetLine: FC<FacetLineProps> = ({ items }) => {
@@ -24,17 +20,19 @@ const FacetLine: FC<FacetLineProps> = ({ items }) => {
       {items.map(({ type, title, terms, score }, index) => {
         if (type === "term") {
           return (
-            <li key={index} className="tag tag--outlined facet-line__item">
-              {title} ({score})
+            <li key={index} className="facet-line__item">
+              <Tag isClickable={false}>
+                {title} ({score})
+              </Tag>
             </li>
           );
         }
         if (type === "facet") {
           return (
             <li className="facet-line__item">
               <Dropdown
-                ariaLabel="Choose periodical year"
-                list={[{ title, disabled: true }, ...terms]}
+                ariaLabel={title}
+                list={[{ title }, ...terms]}
                 arrowIcon="chevron"
                 classNames="dropdown--grey-borders"
               />
@@ -44,7 +42,9 @@ const FacetLine: FC<FacetLineProps> = ({ items }) => {
 
         return null;
       })}
-      <li className="tag tag--outlined facet-line__item">+ Flere filtre</li>
+      <li className="facet-line__item">
+        <Tag isClickable={false}>+ Flere filtre</Tag>
+      </li>
     </ul>
   );
 };

src/stories/Library/search-result-page/FacetLineSelected.tsx

@@ -1,23 +1,20 @@
 import * as React from "react";
 import { FC } from "react";
+import { Tag } from "../tag/Tag";
+import { FacetLineItem } from "./FacetLine";
 
 export interface FacetLineSelectedProps {
-  items: string[];
+  items: FacetLineItem<"term">[];
 }
 
 const FacetLineSelected: FC<FacetLineSelectedProps> = ({ items }) => {
   return (
     <ul className="facet-line-selected">
-      {items.map((item) => (
+      {items.map(({ title }) => (
         <li className="facet-line-selected__item">
-          <span className="tag tag--small cursor-pointer">
-            {item}
-            <img
-              className="tag-icon"
-              src="icons/basic/icon-cross.svg"
-              alt="close icon"
-            />
-          </span>
+          <Tag showCloseIcon hasBackground>
+            {title}
+          </Tag>
         </li>
       ))}
     </ul>

src/stories/Library/search-result-page/SearchResultPage.tsx

@@ -3,7 +3,7 @@ import { SearchResultInfo } from "./SearchResultInfo";
 import ResultPager from "./ResultPager";
 import { SearchResultTitle } from "./SearchResultTitle";
 import { SearchResultZero } from "./SearchResultZero";
-import FacetLine, { FacetLineFacetItem, FacetLineTermItem } from "./FacetLine";
+import FacetLine, { FacetLineItem } from "./FacetLine";
 import FacetLineSelected from "./FacetLineSelected";
 
 export type SearchResultPageProps = {
@@ -91,28 +91,32 @@ const SearchResult = [
 ];
 
 const facetLineItems = [
-  { title: "Skønlitteratur", type: "term", score: 96 },
-  { title: "Faglitteratur", type: "term", score: 302 },
-  { title: "Film", type: "term", score: 28 },
-  { title: "Spil", type: "term", score: 21 },
+  { title: "fantasy", facet: "genreAndForm", type: "term", score: 96 },
   {
-    title: "Emne",
+    title: "Faglitteratur",
+    facet: "fictionNonfiction",
+    type: "term",
+    score: 302,
+  },
+  { title: "bog", facet: "materialType", type: "term", score: 28 },
+  { title: "Spil", facet: "workTypes", type: "term", score: 21 },
+  {
+    title: "emner",
     type: "facet",
     terms: [
-      { title: "Efterår", type: "term", score: 96 },
-      { title: "Børn og Unge", type: "term", score: 302 },
-      { title: "Sundhed", type: "term", score: 28 },
+      { title: "Børnebøger", facet: "emner", type: "term", score: 96 },
+      { title: "magi", facet: "emner", type: "term", score: 302 },
+      { title: "troldmænd", facet: "emner", type: "term", score: 28 },
     ],
   },
   { title: "Musik", type: "term", score: 12 },
-] as (FacetLineTermItem | FacetLineFacetItem)[];
+] as (FacetLineItem<"term"> | FacetLineItem<"facet">)[];
 
 const selectedTerms = [
-  "Eventyr",
-  "J. K. Rowling",
-  "Harry Potter",
-  "Skønlitteratur",
-];
+  { title: "magi", facet: "subjects", type: "term", score: 302 },
+  { title: "bog", facet: "materialType", type: "term", score: 28 },
+  { title: "Spil", facet: "workTypes", type: "term", score: 21 },
+] as FacetLineItem<"term">[];
 
 const SearchResultList = SearchResult.map((item) => {
   return <SearchResultItem {...item} />;

src/stories/Library/search-result-page/search-result-page.scss

@@ -22,7 +22,7 @@
       @extend %text-tags;
       height: 100%;
       padding: 8px 16px;
-      min-width: 100px;
+      min-width: 200px;
     }
     .dropdown__arrows {
       height: 100%;

src/stories/Library/tag/Tag.tsx

@@ -2,42 +2,44 @@ import { useState } from "react";
 import clsx from "clsx";
 
 type TagProps = {
-  label: string;
-  removable?: boolean;
-  facet?: boolean;
+  children: React.ReactNode;
+  size?: "small" | "large";
+  usesCursor?: boolean;
+  hasBackground?: boolean;
+  showCloseIcon?: boolean;
+  isClickable?: boolean;
 };
 
-const Icon = () => (
-  <img className="tag-icon" src="icons/basic/icon-cross.svg" alt="close icon" />
-);
-
-export const Tag = ({ label, removable = false, facet }: TagProps) => {
+export const Tag = ({
+  children,
+  hasBackground = false,
+  size = "small",
+  usesCursor = true,
+  showCloseIcon = false,
+  isClickable = true,
+}: TagProps) => {
   const [selected, setSelected] = useState(false);
 
-  if (facet) {
-    return (
-      <button
-        onClick={() => setSelected(!selected)}
-        className={clsx(
-          "tag tag--outlined",
-          selected && "tag--outlined-selected"
-        )}
-      >
-        {label}
-      </button>
-    );
-  }
-
   return (
-    <span
+    <button
+      aria-pressed={selected}
+      onClick={() => isClickable && setSelected(!selected)}
       className={clsx(
-        "tag tag--small",
-        removable ? "cursor-pointer" : "tag--large"
+        "tag tag--outlined",
+        (hasBackground || selected) && "tag--outlined-selected",
+        usesCursor && "cursor-pointer",
+        `tag--${size}`
       )}
     >
-      {label}
-      {removable && <Icon />}
-    </span>
+      {children}
+      {showCloseIcon && (
+        <img
+          className="tag-icon"
+          src="icons/basic/icon-cross.svg"
+          alt="close icon"
+        />
+      )}
+    </button>
   );
 };