From 1a6eb7e2ff0bf551e1560c67170e90fa8ec2a8ea Mon Sep 17 00:00:00 2001
From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Date: Thu, 25 Jan 2024 16:59:42 +0000
Subject: 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
---
 scss/base/_address.scss                 |  5 +++++
 scss/base/_details.scss                 |  4 ++++
 scss/base/_index.scss                   |  5 +++++
 scss/base/_paypal-product-buttons.scss  |  4 ++++
 scss/base/_table.scss                   | 23 +++++++++++++++++++++++
 scss/modules/_index.scss                |  1 +
 scss/modules/_payment-methods-list.scss |  8 ++++++++
 scss/values/spacing/_constants.scss     |  2 +-
 8 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 scss/base/_address.scss
 create mode 100644 scss/base/_details.scss
 create mode 100644 scss/base/_paypal-product-buttons.scss
 create mode 100644 scss/base/_table.scss
 create mode 100644 scss/modules/_payment-methods-list.scss

(limited to 'scss')

diff --git a/scss/base/_address.scss b/scss/base/_address.scss
new file mode 100644
index 0000000..0206b83
--- /dev/null
+++ b/scss/base/_address.scss
@@ -0,0 +1,5 @@
+address {
+  margin-block: var(--spacing-block-md);
+  font-style: normal;
+  margin-inline-start: var(--spacing-inline-lg);
+}
diff --git a/scss/base/_details.scss b/scss/base/_details.scss
new file mode 100644
index 0000000..6d0b1d4
--- /dev/null
+++ b/scss/base/_details.scss
@@ -0,0 +1,4 @@
+details summary {
+  cursor: pointer;
+}
+
diff --git a/scss/base/_index.scss b/scss/base/_index.scss
index f338772..527b4c7 100644
--- a/scss/base/_index.scss
+++ b/scss/base/_index.scss
@@ -1,4 +1,9 @@
+@use 'address';
+@use 'details';
 @use 'dl';
 @use 'list';
+@use 'paypal-product-buttons';
+@use 'table';
 @use 'theme';
 @use 'typography';
+
diff --git a/scss/base/_paypal-product-buttons.scss b/scss/base/_paypal-product-buttons.scss
new file mode 100644
index 0000000..7339ede
--- /dev/null
+++ b/scss/base/_paypal-product-buttons.scss
@@ -0,0 +1,4 @@
+paypal-product-buttons div {
+  margin-block-start: var(--spacing-block-md);
+}
+
diff --git a/scss/base/_table.scss b/scss/base/_table.scss
new file mode 100644
index 0000000..ca4f957
--- /dev/null
+++ b/scss/base/_table.scss
@@ -0,0 +1,23 @@
+table {
+  border-collapse: collapse;
+  background-color: var(--background-color); // side-scrolling may be needed on narrow screens
+
+  caption {
+    font-style: italic;
+    font-size: var(--font-size-0);
+  }
+}
+
+thead, th {
+  border-block-end: var(--border-width) solid var(--text-color);
+}
+
+:is(th, td) {
+  padding-inline: var(--spacing-inline-sm);
+  padding-block: var(--spacing-block-sm);
+
+  + :is(th, td) {
+    border-inline-start: calc(var(--border-width) / 2) solid var(--text-color);
+  }
+}
+
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/_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/values/spacing/_constants.scss b/scss/values/spacing/_constants.scss
index 9a990b8..c89fdc8 100644
--- a/scss/values/spacing/_constants.scss
+++ b/scss/values/spacing/_constants.scss
@@ -42,7 +42,7 @@ $grid-padding-er: (
 );
 
 $spacing-factor: (
-  'inline': (lg: 4, md: 2, sm: 1),
+  'inline': (lg: 12, md: 6, sm: 3),
   'block': (lg: 16, md: 10, sm: 5)
 );
 
-- 
cgit v1.2.3


From fab184fe597c1c833cd0afee66387160f3029bdf Mon Sep 17 00:00:00 2001
From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:01:13 +0000
Subject: Replaces a few straggler --margins with --spacing (#67)

---
 scss/modules/_link-gallery.xs.scss | 2 +-
 scss/modules/_nav.scss             | 2 +-
 scss/modules/_nav.sm.scss          | 2 +-
 scss/modules/_product.scss         | 2 +-
 scss/modules/_schedule.scss        | 4 ++--
 scss/modules/_skip-to-content.scss | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'scss')

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/_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
+}
-- 
cgit v1.2.3


From 1f9d3bce4de8a3a89105862304ea1544106a18ee Mon Sep 17 00:00:00 2001
From: Joe Carstairs <jcarstairs@scottlogic.com>
Date: Fri, 26 Jan 2024 14:13:45 +0000
Subject: Improves link gallery styling

---
 scss/modules/_index.sm.scss        | 1 +
 scss/modules/_link-gallery.scss    | 3 ++-
 scss/modules/_link-gallery.sm.scss | 4 ++++
 scss/modules/_link-gallery.xs.scss | 4 ++++
 4 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 scss/modules/_link-gallery.sm.scss

(limited to 'scss')

diff --git a/scss/modules/_index.sm.scss b/scss/modules/_index.sm.scss
index a4fb988..ab51eb2 100644
--- a/scss/modules/_index.sm.scss
+++ b/scss/modules/_index.sm.scss
@@ -1,3 +1,4 @@
 @use 'committee.sm' as *;
+@use 'link-gallery.sm' as *;
 @use 'nav.sm' as *;
 
diff --git a/scss/modules/_link-gallery.scss b/scss/modules/_link-gallery.scss
index d321419..a7b7090 100644
--- a/scss/modules/_link-gallery.scss
+++ b/scss/modules/_link-gallery.scss
@@ -14,8 +14,9 @@
   }
 
   img {
-    max-width: 100%;
+    max-width: 50%;
     max-height: 100%;
+    height: fit-content;
     margin: auto;
     object-fit: contain;
   }
diff --git a/scss/modules/_link-gallery.sm.scss b/scss/modules/_link-gallery.sm.scss
new file mode 100644
index 0000000..723dffc
--- /dev/null
+++ b/scss/modules/_link-gallery.sm.scss
@@ -0,0 +1,4 @@
+.link-gallery {
+  --gallery-item-column-span: 3;
+}
+
diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss
index 805073d..9bfc8d6 100644
--- a/scss/modules/_link-gallery.xs.scss
+++ b/scss/modules/_link-gallery.xs.scss
@@ -7,6 +7,10 @@
   --gallery-item-column-span: 2;
   --gallery-row-title-height: 11ex;
   text-align: center;
+
+  img {
+    max-width: 100%;
+  }
 }
 
 .link-gallery__title {
-- 
cgit v1.2.3


From 85ee3a64d521a85a7aa2e655bb3a6d3368502372 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <jcarstairs@scottlogic.com>
Date: Fri, 26 Jan 2024 15:46:10 +0000
Subject: Adds .link-gallery--splash-first variant

---
 scss/modules/_link-gallery.scss    | 67 +++++++++++++++++++++++++++-----------
 scss/modules/_link-gallery.xs.scss | 51 ++++++++++++++++++++---------
 2 files changed, 84 insertions(+), 34 deletions(-)

(limited to 'scss')

diff --git a/scss/modules/_link-gallery.scss b/scss/modules/_link-gallery.scss
index a7b7090..0f0c187 100644
--- a/scss/modules/_link-gallery.scss
+++ b/scss/modules/_link-gallery.scss
@@ -1,19 +1,37 @@
 .link-gallery {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  gap: var(--grid-gutter-width);
   padding-block: var(--spacing-block-md);
+
   --gallery-item-column-span: 1;
   --gallery-row-image-height: 12rem;
   --gallery-row-title-height: fit-content;
-  text-align: center;
 
-  li {
-    list-style-type: none;
-    grid-column: span var(--gallery-item-column-span);
+  &:not(.link-gallery--splash-first) {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+    gap: var(--grid-gutter-width);
+
+    li {
+      list-style-type: none;
+      grid-column: span var(--gallery-item-column-span);
+
+      :is(&.link-gallery__container, & .link-gallery__container) {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
+        row-gap: var(--spacing-block-sm);
+      }
+
+      .link-gallery__title {
+        width: 100%;
+        height: min-content;
+        text-align: center;
+        margin-inline: var(--spacing-inline-xs);
+      }
+    }
   }
 
   img {
+    display: block;
     max-width: 50%;
     max-height: 100%;
     height: fit-content;
@@ -22,22 +40,33 @@
   }
 }
 
-.link-gallery__container {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
-  row-gap: var(--spacing-block-sm);
-}
-
 .link-gallery--furthsettins img {
   box-sizing: border-box;
   border-radius: 50%;
   border: solid var(--border-width) var(--text-color);
 }
 
-.link-gallery__title {
-  width: 100%;
-  height: min-content;
-  text-align: center;
-  margin-inline: var(--spacing-inline-xs);
+.link-gallery--splash-first {
+  .link-gallery__container {
+    display: block;
+    width: fit-content;
+  }
+
+  li:first-of-type {
+    list-style-type: none;
+
+    :is(&.link-gallery__container, & .link-gallery__container) {
+      width: 100%;
+    }
+
+    .link-gallery__title {
+      text-align: center;
+    }
+  }
+
+  li + li {
+    margin-block-start: var(--spacing-block-lg);
+    margin-inline-start: 1em;
+  }
 }
+
diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss
index 9bfc8d6..a8f48ac 100644
--- a/scss/modules/_link-gallery.xs.scss
+++ b/scss/modules/_link-gallery.xs.scss
@@ -1,25 +1,46 @@
 .link-gallery {
-  grid-auto-rows: calc(
-    var(--gallery-row-image-height) +
-    var(--spacing-block-sm) +
-    var(--gallery-row-title-height)
-  );
   --gallery-item-column-span: 2;
   --gallery-row-title-height: 11ex;
-  text-align: center;
+
+  &:not(.link-gallery--splash-first) {
+    grid-auto-rows: calc(
+      var(--gallery-row-image-height) +
+      var(--spacing-block-sm) +
+      var(--gallery-row-title-height)
+    );
+
+    .link-gallery__title {
+      width: 100%;
+      height: 9.9ex;
+      height: 3lh;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
 
   img {
     max-width: 100%;
   }
 }
 
-.link-gallery__title {
-  width: 100%;
-  height: 9.9ex;
-  height: 3lh;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.link-gallery--splash-first li:first-of-type {
+  :is(&.link-gallery__container, & .link-gallery__container) {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+    gap: var(--grid-gutter-width);
+  }
+
+  img {
+    grid-column: span 2;
+  }
+
+  .link-gallery__title {
+    grid-column: span calc(var(--grid-prose-column-count) - 2);
+    align-self: center;
+    text-align: start;
+  }
 }
+
-- 
cgit v1.2.3