Update from staging (#70)

* 33 / Pay annual subscription by PayPal (#68)

* Refactors paypal-buttons -> paypal-product-buttons WebComponent

* Pulls out address to data file

* Defines annual subscription prices data hash

* Styles paypal-product-buttons

* Styles <address>

* Details have cursor:pointer on the summary

* Moves Jyne section to separate page

* Rewrites payment options using details components

* Reworks translation typing

* Defines MembershipType enum

* Adds translations for MembershipType enum

* Can pay annual subs by PayPal

* Styles tables better

* Replaces a few straggler --margins with --spacing (#67)

---------

Co-authored-by: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>

8 files changed, 17 insertions, 8 deletions

diff --git a/scss/modules/_index.scss b/scss/modules/_index.scss
index 6e67241..822295f 100644
--- a/scss/modules/_index.scss
+++ b/scss/modules/_index.scss
@@ -5,6 +5,7 @@
 @use 'link-gallery' as *;
 @use 'nav' as *;
 @use 'news-index' as *;
+@use 'payment-methods-list' as *;
 @use 'product' as *;
 @use 'schedule' as *;
 @use 'skip-to-content' as *;
diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss
index b2bf86c..805073d 100644
--- a/scss/modules/_link-gallery.xs.scss
+++ b/scss/modules/_link-gallery.xs.scss
@@ -1,7 +1,7 @@
 .link-gallery {
   grid-auto-rows: calc(
     var(--gallery-row-image-height) +
-    var(--margin-block-sm) +
+    var(--spacing-block-sm) +
     var(--gallery-row-title-height)
   );
   --gallery-item-column-span: 2;
diff --git a/scss/modules/_nav.scss b/scss/modules/_nav.scss
index f2f32a9..e2c984e 100644
--- a/scss/modules/_nav.scss
+++ b/scss/modules/_nav.scss
@@ -1,6 +1,6 @@
 .nav {
   & > :not(:last-child) {
-    margin-block: 0 var(--margin-block-sm);
+    margin-block: 0 var(--spacing-block-sm);
   }
 
   li {
diff --git a/scss/modules/_nav.sm.scss b/scss/modules/_nav.sm.scss
index db540bd..688f947 100644
--- a/scss/modules/_nav.sm.scss
+++ b/scss/modules/_nav.sm.scss
@@ -9,7 +9,7 @@
 
     + li::before {
       content: '/';
-      margin-inline: var(--margin-inline-md);
+      margin-inline: var(--spacing-inline-md);
     }
   }
 }
diff --git a/scss/modules/_payment-methods-list.scss b/scss/modules/_payment-methods-list.scss
new file mode 100644
index 0000000..a59831a
--- /dev/null
+++ b/scss/modules/_payment-methods-list.scss
@@ -0,0 +1,8 @@
+.payment-methods-list {
+  list-style: none;
+
+  details[open] :last-child {
+    margin-block-end: var(--spacing-block-sm);
+  }
+}
+
diff --git a/scss/modules/_product.scss b/scss/modules/_product.scss
index bc05dfd..cb74573 100644
--- a/scss/modules/_product.scss
+++ b/scss/modules/_product.scss
@@ -10,7 +10,7 @@
   flex-direction: column;
   margin-inline: auto;
   width: fit-content;
-  gap: var(--margin-block-sm);
+  gap: var(--spacing-block-sm);
 }
 
 .product__action-block img {
diff --git a/scss/modules/_schedule.scss b/scss/modules/_schedule.scss
index 40a9fee..fcb1304 100644
--- a/scss/modules/_schedule.scss
+++ b/scss/modules/_schedule.scss
@@ -1,10 +1,10 @@
 .schedule:not(:first-child) {
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
 }
 
 .schedule dt {
   font-weight: 700;
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
   text-align: center;
   text-decoration: none;
 }
diff --git a/scss/modules/_skip-to-content.scss b/scss/modules/_skip-to-content.scss
index a752b29..0a5f365 100644
--- a/scss/modules/_skip-to-content.scss
+++ b/scss/modules/_skip-to-content.scss
@@ -7,7 +7,7 @@
 }
 
 .skip-to-content:is(:focus, :focus-visible, :focus-within) {
-  top: var(--margin-block-md);
+  top: var(--spacing-block-md);
   opacity: 1;
   transition: top 100ms;
-}
\ No newline at end of file
+}