INTR-324 Add event listing page styling (#769)

uktrade · Oct 9, 2024 · 1a78079 · 1a78079
1 parent ccd8372
commit 1a78079
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 151 deletions.
diff --git a/src/dw_design_system/dwds/components/content_list.html b/src/dw_design_system/dwds/components/content_list.html
@@ -3,9 +3,14 @@
 <div class="dwds-content-list {% if as_card_grid %}as-card-grid{% endif %} content-item">
     <div class="content-main {% if highlight %}highlight{% endif %}">
         <div class="content-body content-body-space-padding content-stack large">
-            <h2>{{ title }}</h2>
+            <div class="content-switcher">
+                <h2 style="margin: 0;">{{ title }}</h2>
+                {% if as_card_grid and link_url and link_text %}
+                    {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %}
+                {% endif %}
+            </div>
             {% if as_card_grid %}
-                <div class="content-grid grid-cards">
+                <div class="content-grid grid-cards-auto-fill">
                     {% for content_item in content_items %}
                         <div class="dwds-content-item-card">{% page_to_engagement content_item %}</div>
                     {% endfor %}
@@ -15,7 +20,7 @@ <h2>{{ title }}</h2>
                     {% page_to_engagement content_item %}
                 {% endfor %}
             {% endif %}
-            {% if link_url and link_text %}
+            {% if not as_card_grid and link_url and link_text %}
                 {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %}
             {% endif %}
         </div>

diff --git a/src/dw_design_system/dwds/components/link_navigate.html b/src/dw_design_system/dwds/components/link_navigate.html
@@ -1,5 +1,5 @@
 <div class="dwds-link-navigate">
     {% include "dwds/components/link_action.html" with link_url=previous_url link_text=previous_text|default:'Previous'|title left=True %}
-    {% if previous_url and next_url %}<span>|</span>{% endif %}
+    {% if previous_url and next_url %}<span></span>{% endif %}
     {% include "dwds/components/link_action.html" with link_url=next_url link_text=next_text|default:'Next'|title right=True %}
 </div>
diff --git a/src/dw_design_system/dwds/components/link_navigate.scss b/src/dw_design_system/dwds/components/link_navigate.scss
@@ -1,5 +1,6 @@
 .dwds-link-navigate {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--s0);
 
@@ -10,6 +11,12 @@
         }
     }
 
+    > span {
+        width: 2px;
+        height: var(--font-lineheight-body);
+        background: var(--color-border);
+    }
+
     a {
         display: flex;
         gap: var(--s0);

diff --git a/src/dw_design_system/dwds/elements/button.scss b/src/dw_design_system/dwds/elements/button.scss
@@ -1,9 +1,14 @@
+a.dwds-button,
 .dwds-button {
     box-sizing: border-box;
+    display: inline-block;
     color: var(--color-button-primary-text);
     font-weight: var(--font-weight-bold);
+    font-size: var(--text-medium);
+    font-family: var(--font-family-primary);
+    line-height: var(--font-lineheight-body);
     background-color: var(--color-button-primary);
-    padding: var(--padding-button);    
+    padding: var(--padding-button);
     text-decoration: none;
     border: none;
     border-bottom: solid var(--border-width) var(--color-button-bottom-border);
@@ -14,12 +19,14 @@
         background-color: var(--color-button-hover);
         border-bottom-color: var(--color-button-border-hover);
     }
+
     &:active {
         top: 2px;
         position: relative;
         background-color: var(--color-button-hover);
         border-bottom: solid var(--border-width);
     }
+
     &--warning {
         color: var(--color-button-warning-text);
         background-color: var(--color-button-warning);
@@ -33,6 +40,7 @@
             background-color: var(--color-button-warning-hover);
         }
     }
+
     &--transactional {
         color: var(--color-button-transactional-text);
         background-color: var(--color-button-transactional);
@@ -88,7 +96,7 @@
 
     &--inline {
         padding: var(--padding-button-inline);
-     }
+    }
 
     &:active:before {
         top: -4px;
@@ -98,9 +106,9 @@
         color: var(--color-button-text-focus);
         background-color: var(--color-button-background-focus);
         border-color: var(--color-button-border-focus);
-        
+
     }
-    
+
     &:focus-visible {
         color: var(--color-button-text-focus);
         background-color: var(--color-button-background-focus);
@@ -116,4 +124,12 @@ a.dwds-button:active,
 a.dwds-button:focus,
 a.dwds-button:focus-visible {
     text-decoration: none;
+}
+
+.dwds-button-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--s0);
 }
diff --git a/src/dw_design_system/dwds/elements/content_main.scss b/src/dw_design_system/dwds/elements/content_main.scss
@@ -9,10 +9,12 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--s0);
+    gap: var(--content-main-padding);
 
     background-color: var(--content-main-bg-color);
+    color: var(--content-main-text-color);
 
+    h1,
     h2,
     h3 {
         color: var(--content-main-heading-color);
@@ -63,6 +65,10 @@
     }
 }
 
+.content-main.large {
+    --content-main-padding: var(--space);
+}
+
 .content-main.info {
     --content-main-bg-color: #EEF2F6;
 }

diff --git a/src/dw_design_system/dwds/form-items/radio.scss b/src/dw_design_system/dwds/form-items/radio.scss
@@ -0,0 +1,38 @@
+.dwds-radios {
+    --radio-diameter: 40px;
+    --radios-focus-width: 6px;
+
+    label {
+        display: flex;
+        align-items: center;
+        gap: var(--s-5);
+
+        input[type="radio"] {
+            margin: 0;
+            height: var(--radio-diameter);
+            width: var(--radio-diameter);
+        }
+
+        :before {
+            content: "";
+            box-sizing: border-box;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            border: 3px solid black;
+            border-radius: 50%;
+        }
+
+        input[type="radio"]:focus {
+            outline-color: var(--colour-focus);
+        }
+    }
+}
+
+.dwds-radios.content-switcher {
+    gap: var(--s0);
+
+    > div {
+        max-width: fit-content;
+    }
+}
diff --git a/src/dw_design_system/dwds/form-items/select.scss b/src/dw_design_system/dwds/form-items/select.scss
@@ -0,0 +1,58 @@
+select {
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    box-sizing: border-box;
+    min-width: 11.5em;
+    max-width: 100%;
+    height: 40px;
+    height: 2.5rem;
+    padding: 5px;
+    border: 2px solid #0b0c0c;
+    color: #0b0c0c;
+    background-color: #fff;
+    border-radius: var(--border-radius);
+}
+
+@media print {
+    select {
+        font-family: sans-serif
+    }
+}
+
+@media(min-width: 40.0625em) {
+    select {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    select {
+        font-size: 14pt;
+        line-height: 1.25
+    }
+}
+
+select:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px
+}
+
+select option:active,
+select option:checked,
+select:focus::-ms-value {
+    color: #fff;
+    background-color: #1d70b8
+}
+
+.select--error {
+    border-color: #d4351c
+}
+
+.select--error:focus {
+    border-color: #0b0c0c
+}
diff --git a/src/dw_design_system/dwds/layouts/content_grid.scss b/src/dw_design_system/dwds/layouts/content_grid.scss
@@ -57,6 +57,10 @@
 }
 
 @supports (width: min(250px, 100%)) {
+    .grid-cards-auto-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min-width), 100%), 1fr));
+    }
+
     .grid-cards {
         grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min-width), 100%), 1fr));
     }

diff --git a/src/dw_design_system/dwds/styles/temporary-base.scss b/src/dw_design_system/dwds/styles/temporary-base.scss
@@ -27,15 +27,16 @@ body {
     font-weight: var(--font-weight-normal);
     color: var(--color-text);
 
+    article,
     div,
-    header,
-    nav,
-    main,
-    img,
+    figure,
     footer,
+    form,
+    header,
     hr,
-    article,
-    figure {
+    img,
+    main,
+    nav {
         max-inline-size: none;
     }
 

diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss
@@ -9,16 +9,18 @@
 
   // GDS colours
   --gds-red: #d4351c;
+  --gds-yellow: #ffdd00;
 
   // Colour
+  --colour-focus: var(--gds-yellow);
   --color-heading: black;
   --color-text: black;
   --color-text-secondary: #505A5F;
   --color-text-highlight: #fff;
   --color-link: var(--dbt-light-blue);
   --color-link-hover: #fff;
   --color-link-active: #fff;
-  --color-link-background-active: #FFDD00; // GDS yellow
+  --color-link-background-active: var(--gds-yellow);
   --color-link-visited: #551a8b;
   --color-background: white;
   --color-background-highlight: white;
@@ -38,7 +40,7 @@
   --color-button-secondary-dark-text: #003078;
   --color-button-secondary-dark-border: #003078;
   --color-button-text-focus: #222222;
-  --color-button-background-focus: #FFDD00;
+  --color-button-background-focus: var(--colour-focus);
   --color-button-border-focus: #222222;
   --color-button-warning: var(--gds-red);
   --color-button-warning-hover: hsl(from var(--color-button-warning) h s calc(l - 20)); // GDS designs for hover #4D0A00

diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss
@@ -4,12 +4,16 @@
 @forward "styles/layout-primitives";
 @forward "styles/layout";
 @forward "styles/animations";
+
 // @forward "styles/base";  // Use once we migrate everything to the new approach
 @forward "styles/temporary-base"; // Remove this once we switch to the above base.scss
 
-// New
 @forward "utils";
 
+// Form items
+@forward "form-items/radio";
+@forward "form-items/select";
+
 // Components
 @forward "components/box";
 @forward "components/comment_section";