Add alternative forms list to entries

Closes #15
stscoundrel · Nov 19, 2022 · c8a0195 · c8a0195
1 parent 10844e6
commit c8a0195
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/src/components/WordDefinition/__snapshots__/WordDefinition.test.tsx.snap b/src/components/WordDefinition/__snapshots__/WordDefinition.test.tsx.snap
@@ -61,6 +61,16 @@ exports[`WordDefinition component -> full entry Matches snapshot 1`] = `
       v.
     </em>
   </p>
+  <strong>
+    Alternative forms or notes:
+  </strong>
+  <ul
+    className="list"
+  >
+    <li>
+      -bortdrifva
+    </li>
+  </ul>
   <p>
     Possible runic inscription in 
     <em>

diff --git a/src/components/WordDefinition/index.tsx b/src/components/WordDefinition/index.tsx
@@ -9,7 +9,7 @@ interface WordDefinitionProps{
 
 export default function WordDefinition({ entry }: WordDefinitionProps) {
   const {
-    headword, partOfSpeech, grammaticalAspect, definitions,
+    headword, partOfSpeech, grammaticalAspect, definitions, alternativeForms,
   } = entry
 
   return (
@@ -39,10 +39,20 @@ export default function WordDefinition({ entry }: WordDefinitionProps) {
         && <p><strong>Grammatical aspect:</strong> <em>{grammaticalAspect}</em></p>
       }
 
+      {alternativeForms.length > 0
+        && <>
+        <strong>Alternative forms or notes:</strong>
+        <ul className="list">
+          {alternativeForms.map((alternativeForm, index) => <li key={`alternativeForm-${index}`}>{alternativeForm}</li>)}
+        </ul>
+        </>
+      }
+
       <p>Possible runic inscription in <em>Medieval Futhork</em>:
         <span className={styles.rune}>{ lettersToRunes(headword) }</span><br />
       <small>Medieval Runes were used in Sweden from 12th to 17th centuries.</small>
       </p>
+
     </article>
   )
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -29,4 +29,10 @@ html {
 
 .blue {
   color: $color-blue;
+}
+
+.list {
+  list-style: disc;
+  padding-left: 20px;
+  margin-bottom: 20px;
 }
diff --git a/tests/unit/pages/word/__snapshots__/word.test.tsx.snap b/tests/unit/pages/word/__snapshots__/word.test.tsx.snap
@@ -487,6 +487,16 @@ exports[`Word page: render & usage Matches snapshot 1`] = `
           v.
         </em>
       </p>
+      <strong>
+        Alternative forms or notes:
+      </strong>
+      <ul
+        className="list"
+      >
+        <li>
+          -bortdrifva
+        </li>
+      </ul>
       <p>
         Possible runic inscription in 
         <em>