Experiment with icons for viewer tabs

package.json

@@ -72,6 +72,9 @@
   },
   "homepage": "https://github.com/samvera-labs/clover-iiif#readme",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@iiif/helpers": "^1.2.19",
     "@iiif/parser": "^2.1.4",
     "@nulib/use-markdown": "^0.2.2",
@@ -103,6 +106,8 @@
   "devDependencies": {
     "@iiif/presentation-3": "^1.1.3",
     "@napi-rs/simple-git": "^0.1.19",
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-icons": "^1.3.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

src/components/Viewer/InformationPanel/About/About.styled.ts

@@ -6,7 +6,6 @@ const AboutContent = styled("div", {
   display: "flex",
   flexDirection: "column",
   overflow: "auto",
-  position: "absolute",
   fontWeight: "400",
   fontSize: "1rem",
   zIndex: "0",
@@ -66,11 +65,4 @@ const AboutContent = styled("div", {
   },
 });
 
-const AboutStyled = styled("div", {
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  zIndex: "0",
-});
-
-export { AboutContent, AboutStyled };
+export { AboutContent };

src/components/Viewer/InformationPanel/About/About.tsx

@@ -1,7 +1,4 @@
-import {
-  AboutContent,
-  AboutStyled,
-} from "src/components/Viewer/InformationPanel/About/About.styled";
+import { AboutContent } from "src/components/Viewer/InformationPanel/About/About.styled";
 import {
   ContentResource,
   IIIFExternalWebResource,
@@ -69,19 +66,17 @@ const About: React.FC = () => {
   if (!manifest) return <></>;
 
   return (
-    <AboutStyled>
-      <AboutContent>
-        <Thumbnail thumbnail={thumbnail} label={manifest.label} />
-        <Summary summary={manifest.summary} />
-        <Metadata metadata={manifest.metadata} />
-        <RequiredStatement requiredStatement={manifest.requiredStatement} />
-        <Rights rights={manifest.rights} />
-        <Homepage homepage={homepage} />
-        <SeeAlso seeAlso={seeAlso} />
-        <Rendering rendering={rendering} />
-        <Id id={manifest.id} htmlLabel="IIIF Manifest" />
-      </AboutContent>
-    </AboutStyled>
+    <AboutContent>
+      <Thumbnail thumbnail={thumbnail} label={manifest.label} />
+      <Summary summary={manifest.summary} />
+      <Metadata metadata={manifest.metadata} />
+      <RequiredStatement requiredStatement={manifest.requiredStatement} />
+      <Rights rights={manifest.rights} />
+      <Homepage homepage={homepage} />
+      <SeeAlso seeAlso={seeAlso} />
+      <Rendering rendering={rendering} />
+      <Id id={manifest.id} htmlLabel="IIIF Manifest" />
+    </AboutContent>
   );
 };
 

src/components/Viewer/InformationPanel/Annotation/PlainText.tsx

@@ -9,8 +9,5 @@ type AnnotationItemPlainTextProps = {
 const AnnotationItemPlainText: React.FC<AnnotationItemPlainTextProps> = ({
   value,
   handleClick,
-}) => {
-  return <ButtonStyled onClick={handleClick}>{value}</ButtonStyled>;
-};
-
+}) => <ButtonStyled onClick={handleClick}>{value}</ButtonStyled>;
 export default AnnotationItemPlainText;

src/components/Viewer/InformationPanel/InformationPanel.styled.tsx

@@ -1,10 +1,10 @@
 import * as Tabs from "@radix-ui/react-tabs";
-
-import React, { ReactNode } from "react";
-
+import * as Accordion from "@radix-ui/react-accordion";
 import { styled } from "src/styles/stitches.config";
+import { keyframes } from "@stitches/react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 
-const Wrapper = styled(Tabs.Root, {
+export const Wrapper = styled(Tabs.Root, {
   display: "flex",
   flexDirection: "column",
   width: "100%",
@@ -13,107 +13,87 @@ const Wrapper = styled(Tabs.Root, {
   flexShrink: "0",
   position: "relative",
   zIndex: "1",
-  maskImage: `linear-gradient(180deg, rgba(0, 0, 0, 1) calc(100% - 2rem), transparent 100%)`,
 
   "@sm": {
     marginTop: "0.5rem",
     boxShadow: "none",
   },
 });
 
-const List = styled(Tabs.List, {
-  display: "flex",
-  flexGrow: "0",
-  margin: "0 1.618rem",
-  borderBottom: "4px solid #6663",
-
-  "@sm": {
-    margin: "0 1rem",
-  },
+export const AccordionRoot = styled(Accordion.Root, {
+  borderRadius: "6px",
+  boxShadow: "0 2px 10px var(--black-a4)",
+  width: "300px",
+  overflow: "auto",
+  scrollbarWidth: "thin",
 });
 
-const Trigger = styled(Tabs.Trigger, {
-  display: "flex",
-  position: "relative",
-  padding: "0.5rem 1rem",
-  background: "none",
-  backgroundColor: "transparent",
-  fontFamily: "inherit",
-  border: "none",
-  opacity: "0.7",
-  fontSize: "1rem",
-  marginRight: "1rem",
-  lineHeight: "1rem",
-  whiteSpace: "nowrap",
-  cursor: "pointer",
-  fontWeight: 400,
-  transition: "$all",
-
-  "&[data-value='manifest-back']": {
-    display: "none;",
-
-    "@sm": {
-      display: "block",
-    },
+export const AccordionItem = styled(Accordion.Item, {
+  overflow: "hidden",
+  marginTop: "1px",
+  "&::first-child": {
+    marginTop: "0",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px",
   },
-
-  "&::after": {
-    width: "0",
-    height: "4px",
-    content: "",
-    position: "absolute",
-    bottom: "-4px",
-    left: "0",
-    transition: "$all",
+  "&::last-child": {
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px",
   },
-
-  "&[data-state='active']": {
-    opacity: "1",
-    fontWeight: 700,
-
-    "&::after": {
-      width: "100%",
-      backgroundColor: "$accent",
-    },
+  "&::focus-within": {
+    position: "relative",
+    zIndex: "1",
+    boxShadow: "0 0 0 2px var(--mauve-12)",
   },
 });
 
-const Content = styled(Tabs.Content, {
+export const AccordionChevron = styled(ChevronDownIcon, {
+  color: "var(--violet-10)",
+  transition: "transform 300ms ease-in-out",
+});
+
+export const AccordionHeader = styled(Accordion.Header, {
   display: "flex",
-  flexGrow: "1",
-  flexShrink: "0",
-  position: "absolute",
-  top: "0",
-  left: "0",
+});
 
-  "&[data-state='active']": {
-    width: "100%",
-    height: "calc(100% - 2rem)",
-    padding: "1.618rem 0",
+export const AccordionTrigger = styled(Accordion.Trigger, {
+  fontFamily: "inherit",
+  padding: "0 20px",
+  height: "45px",
+  flex: "1",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontSize: "15px",
+  lineHeight: "1",
+  color: "var(--violet-11)",
+  boxShadow: "0 1px 0 var(--mauve-6)",
+  backgroundColor: "var(--mauve-1)",
+  "&:hover": {
+    backgroundColor: "var(--mauve-2)",
+  },
+  '&[data-state="open"] > .AccordionChevron': {
+    transform: "rotate(180deg)",
   },
 });
 
-interface Scrollable {
-  handleScroll?: (e) => void;
-  children?: ReactNode;
-  className?: string;
-}
-
-const ScrollableComponent: React.FC<Scrollable> = ({
-  handleScroll,
-  children,
-  className,
-}) => (
-  <div className={className} onScroll={handleScroll}>
-    {children}
-  </div>
-);
+const slideDown = keyframes({
+  from: { height: "0" },
+  to: { height: "var(--radix-accordion-content-height)" },
+});
 
-const Scroll = styled(ScrollableComponent, {
-  position: "relative",
-  height: "100%",
-  width: "100%",
-  overflowY: "scroll",
+const slideUp = keyframes({
+  from: { height: "var(--radix-accordion-content-height)" },
+  to: { height: "0" },
 });
 
-export { Content, List, Scroll, Trigger, Wrapper };
+export const AccordionContent = styled(Accordion.Content, {
+  color: "var(--mauve-11)",
+  backgroundColor: "var(--mauve-2)",
+  '&[data-state="open"]': {
+    animation: `${slideDown} 300ms ease-in-out`,
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideUp} 300ms ease-in-out`,
+  },
+});