Merge branch '281-notes' into dev

src/components/Concept.jsx

@@ -1,7 +1,7 @@
 import Markdown from "markdown-to-jsx"
 import { Link } from "gatsby"
 import JsonLink from "./JsonLink.jsx"
-import { getConceptSchemes } from "../hooks/getConceptSchemes"
+import { getConfigAndConceptSchemes } from "../hooks/configAndConceptSchemes.js"
 import { useSkoHubContext } from "../context/Context.jsx"
 import { i18n, getDomId, getFilePath } from "../common"
 import ConceptURI from "./ConceptURI.jsx"
@@ -10,7 +10,7 @@ import { useEffect, useState } from "react"
 const Concept = ({
   pageContext: { node: concept, collections, customDomain },
 }) => {
-  const conceptSchemes = getConceptSchemes()
+  const { config, conceptSchemes } = getConfigAndConceptSchemes()
   const { data } = useSkoHubContext()
   const [language, setLanguage] = useState("")
 
@@ -20,7 +20,9 @@ const Concept = ({
 
   return (
     <div className="content block main-block" id={getDomId(concept.id)}>
-      <h1 style={{ color: "red" }}>{concept.deprecated ? "Deprecated" : ""}</h1>
+      <h1 style={{ color: config.colors.skoHubAction }}>
+        {concept.deprecated ? "Deprecated" : ""}
+      </h1>
       <h1>
         {concept.notation && <span>{concept.notation.join(",")}&nbsp;</span>}
         {i18n(language)(concept.prefLabel)}
@@ -50,22 +52,55 @@ const Concept = ({
           </Markdown>
         </div>
       )}
-      {concept.scopeNote && (
+      {concept.note && i18n(language)(concept.note) !== "" && (
         <div className="markdown">
-          <h3>Scope Note</h3>
-          <Markdown>
-            {i18n(language)(concept.scopeNote) ||
-              `*No scope note in language "${language}" provided.*`}
-          </Markdown>
+          <h3 id="note">Note</h3>
+          <ul aria-labelledby="note">
+            {i18n(language)(concept.note).map((note, i) => (
+              <li key={i}>{note}</li>
+            ))}
+          </ul>
         </div>
       )}
-      {concept.note && (
+      {concept.changeNote && i18n(language)(concept.changeNote) !== "" && (
         <div className="markdown">
-          <h3>Note</h3>
-          <Markdown>
-            {i18n(language)(concept.note) ||
-              `*No note in language "${language}" provided.*`}
-          </Markdown>
+          <h3 id="changenote">ChangeNote</h3>
+          <ul aria-labelledby="changenote">
+            {i18n(language)(concept.changeNote).map((changeNote, i) => (
+              <li key={i}>{changeNote}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {concept.editorialNote &&
+        i18n(language)(concept.editorialNote) !== "" && (
+          <div className="markdown">
+            <h3 id="editorialnote">EditorialNote</h3>
+            <ul aria-labelledby="editorialnote">
+              {i18n(language)(concept.editorialNote).map((editorialNote, i) => (
+                <li key={i}>{editorialNote}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+      {concept.historyNote && i18n(language)(concept.historyNote) !== "" && (
+        <div className="markdown">
+          <h3 id="historynote">HistoryNote</h3>
+          <ul aria-labelledby="historynote">
+            {i18n(language)(concept.historyNote).map((historyNote, i) => (
+              <li key={i}>{historyNote}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {concept.scopeNote && i18n(language)(concept.scopeNote) !== "" && (
+        <div className="markdown">
+          <h3 id="scopenote">ScopeNote</h3>
+          <ul aria-labelledby="scopenote">
+            {i18n(language)(concept.scopeNote).map((scopeNote, i) => (
+              <li key={i}>{scopeNote}</li>
+            ))}
+          </ul>
         </div>
       )}
       {concept.altLabel && i18n(language)(concept.altLabel) !== "" && (

src/components/nestedList.jsx

@@ -192,7 +192,7 @@ const NestedList = ({
       // Function for handling highlighting
       function handleHighlight(text, highlight) {
         text = item.deprecated
-          ? `<span style="color: red">(DEPRECATED)</span> ${text}`
+          ? `<span style="color: ${config.colors.skoHubAction} ">(DEPRECATED)</span> ${text}`
           : text
         if (highlight) {
           return text.replace(highlight, (str) => `<strong>${str}</strong>`)

src/context.js

@@ -48,11 +48,20 @@ const jsonld = {
     definition: {
       "@container": "@language",
     },
-    scopeNote: {
-      "@container": "@language",
-    },
     note: {
-      "@container": "@language",
+      "@container": ["@language", "@set"],
+    },
+    changeNote: {
+      "@container": ["@language", "@set"],
+    },
+    editorialNote: {
+      "@container": ["@language", "@set"],
+    },
+    historyNote: {
+      "@container": ["@language", "@set"],
+    },
+    scopeNote: {
+      "@container": ["@language", "@set"],
     },
     notation: {
       "@container": "@set",

src/queries.js

@@ -49,10 +49,19 @@ module.exports.allConcept = (inScheme, languages) => `
           definition {
             ${[...languages].join(" ")}
           }
-          scopeNote {
+          note {
             ${[...languages].join(" ")}
           }
-          note {
+          changeNote {
+            ${[...languages].join(" ")}
+          }
+          editorialNote {
+            ${[...languages].join(" ")}
+          }
+          historyNote {
+            ${[...languages].join(" ")}
+          }
+          scopeNote {
             ${[...languages].join(" ")}
           }
           notation

src/types.js

@@ -20,8 +20,11 @@ module.exports = (languages) => `
     altLabel: LanguageMapArray,
     hiddenLabel: LanguageMapArray,
     definition: LanguageMap,
-    scopeNote: LanguageMap,
-    note: LanguageMap,
+    note: LanguageMapArray,
+    changeNote: LanguageMapArray,
+    editorialNote: LanguageMapArray,
+    historyNote: LanguageMapArray,
+    scopeNote: LanguageMapArray,
     notation: [String],
     example: LanguageMap,
     topConceptOf: [ConceptScheme] @link(from: "topConceptOf___NODE"),

test/concept.test.jsx

@@ -125,6 +125,71 @@ describe.concurrent("Concept", () => {
     ).toBeInTheDocument()
   })
 
+  it("renders notes", () => {
+    render(<Concept pageContext={ConceptPC} />)
+
+    expect(screen.getByText(/Meine Anmerkung/i)).toBeInTheDocument()
+
+    const list = screen.getByRole("list", {
+      name: "Note",
+    })
+    const { getAllByRole } = within(list)
+    const items = getAllByRole("listitem")
+    expect(items.length).toBe(2)
+  })
+
+  it("renders changeNotes", () => {
+    render(<Concept pageContext={ConceptPC} />)
+
+    expect(screen.getByText(/Meine Change Note/i)).toBeInTheDocument()
+
+    const list = screen.getByRole("list", {
+      name: /changenote/i,
+    })
+    const { getAllByRole } = within(list)
+    const items = getAllByRole("listitem")
+    expect(items.length).toBe(2)
+  })
+
+  it("renders editorialNotes", () => {
+    render(<Concept pageContext={ConceptPC} />)
+
+    expect(screen.getByText(/Meine Editorial Note/i)).toBeInTheDocument()
+
+    const list = screen.getByRole("list", {
+      name: /editorialnote/i,
+    })
+    const { getAllByRole } = within(list)
+    const items = getAllByRole("listitem")
+    expect(items.length).toBe(2)
+  })
+
+  it("renders historyNotes", () => {
+    render(<Concept pageContext={ConceptPC} />)
+
+    expect(screen.getByText(/Meine History Note/i)).toBeInTheDocument()
+
+    const list = screen.getByRole("list", {
+      name: /historynote/i,
+    })
+    const { getAllByRole } = within(list)
+    const items = getAllByRole("listitem")
+    expect(items.length).toBe(2)
+  })
+
+  it("renders scopeNotes", () => {
+    render(<Concept pageContext={ConceptPC} />)
+
+    expect(screen.getByText(/Meine Scope Note/i)).toBeInTheDocument()
+
+    const list = screen.getByRole("list", {
+      name: /scopenote/i,
+    })
+    const { getAllByRole } = within(list)
+    const items = getAllByRole("listitem")
+    expect(items.length).toBe(2)
+  })
+
   it("renders related Concepts", () => {
     render(<Concept pageContext={ConceptPC} />)
     expect(

test/data/pageContext.js

@@ -49,11 +49,20 @@ export const topConcept = {
   example: {
     de: "Ein Beispiel",
   },
-  scopeNote: {
-    de: "Meine Scope Note",
-  },
   note: {
-    de: "Meine Anmerkung",
+    de: ["Meine Anmerkung", "Noch eine Anmerkung"],
+  },
+  changeNote: {
+    de: ["Meine Change Note", "Noch eine Change Note"],
+  },
+  editorialNote: {
+    de: ["Meine Editorial Note", "Noch eine Editorial Note"],
+  },
+  historyNote: {
+    de: ["Meine History Note", "Noch eine History Note"],
+  },
+  scopeNote: {
+    de: ["Meine Scope Note", "Noch eine Scope Note"],
   },
   notation: ["1"],
   narrower: [concept2],