chore: support Policy Briefs pages (footnotes + table layout) (#178)

* chore: create footnotes component

* Keep policy tables as tables on mobile with min-width and horizontal scroll

* shorten footnotes divider width to 30%

* change file name and bump style version

Author: Anca2022

web/themes/interledger/css/components/footer-notes.css

@@ -0,0 +1,24 @@
+.footer-notes {
+  padding-inline: 5%;
+  font-size: var(--step--1);
+}
+
+.footer-notes .content-wrapper::before {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 30%;
+  top: 0;
+  left: 0;
+  margin-bottom: var(--space-2xs);
+  background-color: black;
+}
+
+.footer-notes ol {
+  list-style: none;
+  padding: 0;
+}
+
+.footnote-backlink {
+  font-size: var(--step--2);
+}

web/themes/interledger/css/components/table.css

@@ -68,24 +68,25 @@
 }
 
 /* Responsive card layout for medium screens and below */
+/* except for tables on Policy pages  */
 @media (max-width: 1024px) {
-  .table-wrapper table thead {
+  .table-wrapper table:not(.policy-table) thead {
     display: none;
   }
 
-  .table-wrapper table,
-  .table-wrapper table tbody {
+  .table-wrapper table:not(.policy-table),
+  .table-wrapper table:not(.policy-table) tbody {
     display: block;
   }
 
   .table-wrapper table tbody {
-    border: 1px solid var(---table-border-color-sm);
+    border: 1px solid var(--table-border-color-sm);
     border-radius: var(--border-radius);
     overflow: hidden;
     background: var(--table-bg-sm);
   }
 
-  .table-wrapper table tr {
+  .table-wrapper table:not(.policy-table) tr {
     display: block;
   }
 
@@ -101,8 +102,11 @@
     color: var(--table-fg-sm);
   }
 
-  .table-wrapper table td {
+  .table-wrapper table:not(.policy-table) td {
     display: block;
+  }
+
+  .table-wrapper table td {
     padding: var(--space-2xs) var(--space-xs);
     position: relative;
     color: var(--table-fg-sm);
@@ -144,3 +148,17 @@
     padding-bottom: var(--space-2xs);
   }
 }
+
+/* Policy Briefs page table styling  */
+.table-wrapper table.policy-table {
+  min-width: 600px;
+  max-width: none;
+}
+
+.table-wrapper table.policy-table td:first-child {
+  white-space: normal;
+}
+
+.table-wrapper:has(table.policy-table) {
+  overflow-x: auto;
+}

web/themes/interledger/interledger.libraries.yml

@@ -1,5 +1,5 @@
 global-styling:
-  version: 1.7.3
+  version: 1.7.4
   css:
     theme:
       css/fonts.css: {}
@@ -31,6 +31,7 @@ global-styling:
       css/components/cta-button.css: {}
       css/components/event-card.css: {}
       css/components/faq.css: {}
+      css/components/footer-notes.css: {}
       css/components/hero.css: {}
       css/components/highlight-text.css: {}
       css/components/podcast.css: {}

web/themes/interledger/templates/field--node--field-footer-notes.html.twig

@@ -0,0 +1,13 @@
+<ol>
+	{% for item in items %}
+		<li id="footnote-{{ loop.index }}">
+			<span class="visually-hidden">Footnote
+				{{loop.index}}
+			</span>
+			<sup aria-hidden="true">{{ loop.index }}
+			</sup>
+			{{ item.content }}
+			<a href="#ref-{{ loop.index }}" aria-label="Return to footnote {{ loop.index }} reference in article" class="footnote-backlink">↩</a>
+		</li>
+	{% endfor %}
+</ol>

web/themes/interledger/templates/node--footer-notes.html.twig

@@ -0,0 +1,6 @@
+<aside class="footer-notes node--{{ node.id }}">
+	<h2 class="visually-hidden">Footnotes</h2>
+	<div class="content-wrapper">
+		{{ content }}
+	</div>
+</aside>