INTR-219 Various styling fixes (#684)

Co-authored-by: Cameron Lamb <[email protected]>
uktrade · Aug 2, 2024 · b2ac201 · b2ac201
1 parent 362e01d
commit b2ac201
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 66 deletions.
diff --git a/assets/stylesheets/components/_home_new.scss b/assets/stylesheets/components/_home_new.scss
@@ -1,5 +1,4 @@
 .new-home {
-
   article,
   section {
     display: inline;
@@ -12,27 +11,4 @@
       color: var(--color-link);
     }
   }
-  // TODO: hacked to get around .stack margin top
-  .with-sidebar-right {
-    margin-top: 0 !important;
-  }
-
-  .dwds-homepage-welcome-text {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin: 0 0 var(--s0);
-
-    h1 {
-      margin: 0;
-    }
-
-}
-  // TODO: had issues with <hr> tag not being full width
-  .h-line { 
-    width:100%; 
-    height:1px; 
-    background: var(--color-horizontal-line-homepage);
-    margin: 0;
-  }
 }
diff --git a/assets/stylesheets/components/_search_field.scss b/assets/stylesheets/components/_search_field.scss
@@ -13,7 +13,7 @@ $input-size: 40px;
     position: relative;
     display: flex;
     flex: 0 $input-size;
-    margin: 7px 0;
+    margin: 4px 0 7px 0;
 
     input {
         // overly specific to prevent some overrides from outside

diff --git a/assets/stylesheets/govuk-overrides/header.scss b/assets/stylesheets/govuk-overrides/header.scss
@@ -259,7 +259,6 @@
         .site-search {
             display: block;
             padding: 0 15px;
-            background-color: govuk-colour("light-grey");
         }
     }
 }

diff --git a/src/dw_design_system/dwds/components/banner_card.scss b/src/dw_design_system/dwds/components/banner_card.scss
@@ -10,6 +10,7 @@
 
     p {
         color: var(--color-text-highlight);
+        margin: 0;
     }
 
     a,
@@ -18,7 +19,6 @@
         color: var(--color-text-highlight);
 
         p {
-            margin: 0;
             color: var(--color-text-highlight);
         }
     }

diff --git a/src/dw_design_system/dwds/components/cta_card.html b/src/dw_design_system/dwds/components/cta_card.html
@@ -1,6 +1,6 @@
 {% extends "dwds/elements/extendable/card.html" %}
 
-{% block card_container_classes %}dwds-cta-card{% endblock %}
+{% block card_container_classes %}dwds-cta-card dwds-card-blue{% endblock %}
 
 {% block card_header %}
 {% endblock card_header %}

diff --git a/src/dw_design_system/dwds/components/cta_card.scss b/src/dw_design_system/dwds/components/cta_card.scss
@@ -1,12 +1,16 @@
 .dwds-card.dwds-cta-card {
-    // TODO: Cheryl to work out the colour for the CTA card background and the new body background.
-    --cta-background-color: #E6EBF0;
+    color: var(--color-text-highlight);
 
-    .card-main {
-        .card-content {
-            .card-body {
-                --body-background-colour: var(--cta-background-color);
-            }
+    box-shadow: none;
+
+    a,
+    a:visited,
+    a:link {
+        color: var(--color-text-highlight);
+        text-decoration-color: var(--color-text-highlight);
+
+        p {
+            color: var(--color-text-highlight);
         }
     }
 }
diff --git a/src/dw_design_system/dwds/components/engagement_card.py b/src/dw_design_system/dwds/components/engagement_card.py
@@ -34,9 +34,11 @@ def get_context(self, value, parent_context=None):
             date=page.published_date,
             url=page.url,
             is_highlighted=isinstance(page, NewsPage) or isinstance(page, BlogPost),
-            comment_count=page.get_comment_count(),
         )
 
+        if isinstance(page, NewsPage):
+            context.update(comment_count=page.get_comment_count())
+
         return context
 
     def get_searchable_heading(self, value):

diff --git a/src/dw_design_system/dwds/elements/extendable/card.scss b/src/dw_design_system/dwds/elements/extendable/card.scss
@@ -1,7 +1,7 @@
 .dwds-card {
     --card-white: #fff;
     --border-radius: var(--s-3);
-    --bottom-border-height: var(--s-5);
+    --bottom-border-height: 5px;
     --body-background-colour: var(--card-white);
 
     display: flex;
@@ -16,30 +16,18 @@
     container-type: inline-size;
 
     &.dwds-card-blue {
-        .card-main {
-            .card-content {
-                .card-body {
-                    --body-background-colour: var(--dbt-blue);
-                }
-            }
-        }
+        --body-background-colour: var(--dbt-blue);
     }
 
     &.dwds-card-red {
-        .card-main {
-            .card-content {
-                .card-body {
-                    --body-background-colour: var(--dbt-red);
-                }
-            }
-        }
+        --body-background-colour: var(--dbt-red);
     }
 
     .card-header {
         --header-background-colour: var(--dbt-blue);
         --header-text-colour: var(--card-white);
 
-        padding: var(--s2) var(--s1) var(--s0) var(--s0);
+        padding: var(--s0) var(--s1) var(--s0) var(--s0);
         align-items: flex-start;
         background: linear-gradient(180deg, rgba(0, 40, 95, 0.00) 53.55%, #00285F 99.65%), url("/assets/images/dwds/card-header-bg.png") center / cover no-repeat, #00285F;
         font-weight: var(--font-weight-bold);

diff --git a/src/dw_design_system/dwds/elements/navigational_link.scss b/src/dw_design_system/dwds/elements/navigational_link.scss
@@ -7,15 +7,12 @@
     font-weight: var(--font-weight-normal);
     line-height: var(--font-lineheight-headings);
     text-decoration: none;
-    align-items: baseline;
     gap: var(--space);
 
     svg {
         height: var(--font-lineheight-headings);
         width: var(--s1);
 
-        align-self: flex-end;
-
         path {
             fill: currentColor;
         }

diff --git a/src/dw_design_system/dwds/styles/temporary-base.scss b/src/dw_design_system/dwds/styles/temporary-base.scss
@@ -31,7 +31,8 @@ body {
     header,
     nav,
     main,
-    footer {
+    footer,
+    hr {
         max-inline-size: none;
     }
 
@@ -70,6 +71,15 @@ body {
     a:focus-visible {
         outline: none;
     }
+
+    hr {
+        width: 100%;
+        border-top: 1px solid;
+        border-bottom: 0;
+        border-right: 0;
+        border-left: 0;
+        color: var(--color-hr);
+    }
 }
 
 .dwds {
@@ -81,4 +91,15 @@ body {
             color: var(--color-text) !important;
         }
     }
+
+    .homepage-welcome-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-top: var(--s0);
+
+        h1 {
+            margin: 0;
+        }
+    }
 }
diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss
@@ -26,11 +26,11 @@
   --color-border-highlight: white;
   --color-button-primary: var(--dbt-light-blue);
   --color-button-primary-hover: #014C92;
-  --color-button-secondary: #F3F2F1;
+  --color-button-secondary: white;
   --color-button-secondary-hover: #dbdad9;
   --color-button-border: black;
   --color-icon: var(--dbt-blue);
-  --color-horizontal-line-homepage: #7D8E96;
+  --color-hr: #7D8E96;
 
   // Size
   --ratio: 1.25;
@@ -45,7 +45,7 @@
   --s3: calc(var(--s2) * var(--ratio));
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
-  --space: var(--s1);
+  --space: var(--s3);
   --button-padding-large: var(--s-1);
   --button-padding-medium: var(--s-3);
   --button-padding-small: var(--s-5);

diff --git a/src/dw_design_system/templates/dw_design_system/styles.html b/src/dw_design_system/templates/dw_design_system/styles.html
@@ -0,0 +1,39 @@
+{% extends "dwds_content.html" %}
+
+{% block title %}
+    DW Design System components
+{% endblock title %}
+
+{% block page_title %}
+    <br />
+    <h1>DW Design System styles</h1>
+{% endblock page_title %}
+
+{% block primary_content %}
+    <h1>Styles</h1>
+
+    <h2>Buttons</h2>
+
+    <button class="dwds-button">Primary button</button>
+    <br>
+    <button class="dwds-button dwds-button--secondary">Secondary button</button>
+    <br>
+    <button class="dwds-button dwds-button--small">Primary button (small)</button>
+    <br>
+    <button class="dwds-button dwds-button--secondary dwds-button--small">Secondary button (small)</button>
+
+    <h2>Headings (examples, these styles don't exist yet)</h2>
+
+    <span class="dwds-heading-xl">Heading XL</span>
+    <br>
+    <span class="dwds-heading-l">Heading L</span>
+    <br>
+    <span class="dwds-heading-m">Heading M</span>
+    <br>
+    <span class="dwds-heading-s">Heading S</span>
+    <br>
+    <span class="dwds-heading-xs">Heading XS</span>
+
+
+
+{% endblock primary_content %}
diff --git a/src/dw_design_system/urls.py b/src/dw_design_system/urls.py
@@ -4,6 +4,7 @@
 
 
 urlpatterns = [
+    path("styles/", views.styles, name="dwds-styles"),
     path("", views.components, name="dwds-components"),
     path("get/", views.get_component, name="dwds-component-get"),
 ]
diff --git a/src/dw_design_system/views.py b/src/dw_design_system/views.py
@@ -7,6 +7,14 @@
 from dw_design_system.utils import CustomJSONDecoder, get_components, to_json
 
 
+def styles(request: HttpRequest) -> HttpResponse:
+    return render(
+        request,
+        "dw_design_system/styles.html",
+        {},
+    )
+
+
 def components(request: HttpRequest) -> HttpResponse:
     components = []
     for component in get_components():

diff --git a/src/home/templates/home/home_page_new.html b/src/home/templates/home/home_page_new.html
@@ -18,19 +18,16 @@
 
 {% block pre_content %}
     {% include "home/includes/home_banner.html" with hide_hr=True %}
-    {% comment %}
-    TODO: Enable this when we switch to new header.
-    <div class="dwds-homepage-welcome-text">
+    <div class="homepage-welcome-bar">
         <h1>Intranet</h1>
         {% now "A" as current_time %}
         {% if current_time == "AM" %}
             <span>Good morning {{ peoplefinder_profile.get_first_name_display }}</span>
         {% else %}
-            <span>Good afteroon {{ peoplefinder_profile.get_first_name_display }}</span>
+            <span>Good afternoon {{ peoplefinder_profile.get_first_name_display }}</span>
         {% endif %}
     </div>
-    <div class="h-line"></div> 
-    {% endcomment %}
+    <hr style="margin-top: var(--s1);">
 {% endblock pre_content %}
 
 {% block page_title %}

diff --git a/src/interactions/static/interactions/interactions.scss b/src/interactions/static/interactions/interactions.scss
@@ -1,12 +1,16 @@
 .bookmark-list {
     display: flex;
     flex-direction: column;
-    gap: var(--s-2);
+    gap: var(--s0);
 
     padding-left: 0;
     margin: 0;
 
     list-style: none;
+
+    li > *:not(:last-child) {
+        margin-bottom: var(--s-4);
+    }
 }
 
 .empty-bookmark-list {