IGUK-514 International styles refactor to help with design system int…

…egration (#3514) * IGUK-514 International styles refactor to help with design system integration
uktrade · Oct 14, 2024 · c945b21 · c945b21
1 parent 6ef6adc
commit c945b21
Show file tree

Hide file tree

Showing 37 changed files with 397 additions and 445 deletions.
diff --git a/international/sass/core-class-overrides.scss b/international/sass/core-class-overrides.scss
@@ -7,10 +7,6 @@
     background-repeat: no-repeat;
 }
 
-.full-width {
-    width: 100%;
-}
-
 .autocomplete__input {
     font-family: $govuk-font-family;
 }
@@ -50,3 +46,11 @@
         color: white;
     }
 }
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Euclid Flex B", Arial, Helvetica, Verdana;
+    margin: 0;
+    color: $great-dark-blue;
+    font-style: normal;
+    font-weight: 700;
+}
diff --git a/international/sass/main.scss b/international/sass/main.scss
@@ -35,50 +35,11 @@ $fa-font-path: '/static/fonts';
 @import 'core-class-overrides';
 @import 'header.scss';
 @import 'footer.scss';
-@import 'hero.scss';
 @import 'reset.scss';
+@import 'utils.scss';
 
+// Great International pages
+@import 'pages/index.scss';
 
-// International home page styles start
-.great-international-card--cta {
-
-    .great-card__link {
-        color: $great-dark-blue;
-        text-underline-offset: 0px;
-        text-decoration-thickness: 2px;
-    }
-}
-
-.great-international-home-uk-map {
-    background: url('/static/images/uk-map.svg');
-    display: block;
-    width: fixed;
-    height: 387px;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-// International home page styles end
-
-.great-interntional-centered-content {
-    text-align: center;
-}
-
-@media (min-width: 769px) {
-    .spend-currency-column {
-      padding-right: 0px;
-    }
-}
-
-.custom-select-button {
-    float: left;
-    padding: 2px 6px;
-    min-height: 38px;
-}
-
-.light-blue-background {
-    background-color: $great-light-blue;
-}
-
-.light-green-background {
-    background-color: #8CE2D0;
-}
+// Great International components
+@import 'hero.scss';
diff --git a/international/sass/pages/index.scss b/international/sass/pages/index.scss
@@ -0,0 +1,17 @@
+.great-international-card--cta {
+
+    .great-card__link {
+        color: $great-dark-blue;
+        text-underline-offset: 0px;
+        text-decoration-thickness: 2px;
+    }
+}
+
+.great-international-home-uk-map {
+    background: url('/static/images/uk-map.svg');
+    display: block;
+    width: fixed;
+    height: 387px;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
diff --git a/international/sass/utils.scss b/international/sass/utils.scss
@@ -0,0 +1,33 @@
+.great-interntional-centered-content {
+    text-align: center;
+}
+
+.light-blue-background {
+    background-color: $great-light-blue;
+}
+
+.light-green-background {
+    background-color: #8CE2D0;
+}
+
+.white-background {
+    background-color: #FFFFFF;
+}
+
+.fixed-height-scroll {
+    max-height: 300px;
+    overflow-x: scroll;
+}
+
+.fixed-height-scroll .govuk-checkboxes--small .govuk-checkboxes__item {
+    float: none;
+}
+
+.js-enabled .govuk-accordion__section-content {
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+.js-enabled .govuk-accordion__section-button {
+    border-bottom: 0px;
+}
diff --git a/international/templates/international/contact.html b/international/templates/international/contact.html
@@ -6,15 +6,17 @@
     {{ block.super }}
 {% endblock %}
 {% block page_title %}Get help using great.gov.uk/international {{ block.super }}{% endblock %}
-{% block breadcrumb_region %}
-    <div class="govuk-width-container great-container">
-        <div class="govuk-grid-row">
-            <div class="govuk-grid-column-two-thirds">
-                <a href="{{ back_url }}" class="govuk-back-link govuk-!-margin-bottom-4">Back</a>
+{% if not request.GET.success %}
+    {% block breadcrumb_region %}
+        <div class="govuk-width-container great-container">
+            <div class="govuk-grid-row">
+                <div class="govuk-grid-column-two-thirds">
+                    <a href="{{ back_url }}" class="govuk-back-link govuk-!-margin-bottom-4">Back</a>
+                </div>
             </div>
         </div>
-    </div>
-{% endblock %}
+    {% endblock %}
+{% endif %}
 {% block css_layout_class %}
     govuk-main-wrapper
     {{ block.super }}

diff --git a/international_buy_from_the_uk/sass/main.scss b/international_buy_from_the_uk/sass/main.scss
@@ -1,119 +1,7 @@
 @import '../../international/sass/main.scss';
-@import './hero.scss';
+@import 'utils.scss';
+@import 'hero.scss';
 
-$great-design-system-grey-border: #7d8e96;
-
-.buy-from-the-uk-home-download-section {
-  background-color: white;
-
-  .buy-from-the-uk-ebook-preview-image {
-      background-position: top, left;
-      background-repeat: no-repeat;
-      background-size: contain;
-      min-width: 200px;
-      width: 100%;
-      max-width: 300px;
-      height: 380px;
-      margin-right: auto;
-      margin-left: auto;
-      background-image: url('/static/images/buy_from_the_uk_ebook_preview.jpg')
-  }
-}
-
-.buy-from-the-uk-home-strapline-container {
-  background-color: rgba(26, 92, 164, .7);
-}
-
-#buy-from-the-uk-search-form {
-  height: 53px;
-  display: flex;
-  align-items: center;
-
-  button {
-    margin-top: 0;
-    margin-left: -2px;
-    flex-shrink: 0;
-    height: 50px;
-    width: 50px;
-    background-repeat: no-repeat;
-    background-position: 50%;
-    background-color: #006ccc;
-    background-image: url('/static/images/search.svg');
-    background-size: 20px;
-    border: 0;
-    color: #fff;
-    cursor: pointer;
-  }
-
-  #magna-header-search-box {
-    height: 50px;
-    width: 100%;
-  }
-}
-
-.fixed-height-scroll {
-  max-height: 300px;
-  overflow-x: scroll;
-}
-
-.fixed-height-scroll .govuk-checkboxes--small .govuk-checkboxes__item {
-  float: none;
-}
-
-.js-enabled .govuk-accordion__section-content {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-.js-enabled .govuk-accordion__section-button {
-  border-bottom: 0px;
-}
-
-.great-ds-border-bottom-grey {
-  border-bottom: 1px solid $great-design-system-grey-border;
-}
-
-.buy-from-the-uk-listitem-logo {
-  max-width: 120px;
-  min-width: 100px;
-  max-height: 120px;
-  min-height: 100px;
-  background-position: top;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.great-heading-link::after {
-  top: 2px;
-}
-
-.buy-from-the-uk-logo {
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.buy-from-the-uk-logo-container {
-  background-color: #fff;
-  border: 1px solid $great-design-system-grey-border;
-  width: 180px;
-  height: 180px;
-  padding: 15px;
-}
-
-.highlight-em em {
-
-    background: $great-light-yellow;
-    border-bottom: 3px solid black;
-    display: inline-block;
-    padding: 3px;
-    font-style: normal;
-    font-weight: bold;
-}
-
-.case-study-image {
-  max-width: 300px;
-  display: block;
-}
+// Great International Buy from the UK pages
+@import 'pages/index.scss';
+@import 'pages/search.scss';
diff --git a/international_buy_from_the_uk/sass/pages/index.scss b/international_buy_from_the_uk/sass/pages/index.scss
@@ -0,0 +1,20 @@
+.buy-from-the-uk-home-download-section {
+    background-color: white;
+
+    .buy-from-the-uk-ebook-preview-image {
+        background-position: top, left;
+        background-repeat: no-repeat;
+        background-size: contain;
+        min-width: 200px;
+        width: 100%;
+        max-width: 300px;
+        height: 380px;
+        margin-right: auto;
+        margin-left: auto;
+        background-image: url('/static/images/buy_from_the_uk_ebook_preview.jpg')
+    }
+  }
+
+  .buy-from-the-uk-home-strapline-container {
+    background-color: rgba(26, 92, 164, .7);
+  }
diff --git a/international_buy_from_the_uk/sass/pages/search.scss b/international_buy_from_the_uk/sass/pages/search.scss
@@ -0,0 +1,45 @@
+#buy-from-the-uk-search-form {
+    height: 53px;
+    display: flex;
+    align-items: center;
+
+    button {
+        margin-top: 0;
+        margin-left: -2px;
+        flex-shrink: 0;
+        height: 50px;
+        width: 50px;
+        background-repeat: no-repeat;
+        background-position: 50%;
+        background-color: #006ccc;
+        background-image: url('/static/images/search.svg');
+        background-size: 20px;
+        border: 0;
+        color: #fff;
+        cursor: pointer;
+    }
+
+    #magna-header-search-box {
+        height: 50px;
+        width: 100%;
+    }
+}
+
+.highlight-em em {
+    background: $great-light-yellow;
+    border-bottom: 3px solid black;
+    display: inline-block;
+    padding: 3px;
+    font-style: normal;
+    font-weight: bold;
+}
+
+.buy-from-the-uk-listitem-logo {
+    max-width: 120px;
+    min-width: 100px;
+    max-height: 120px;
+    min-height: 100px;
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
diff --git a/international_buy_from_the_uk/sass/utils.scss b/international_buy_from_the_uk/sass/utils.scss
@@ -0,0 +1,30 @@
+$great-design-system-grey-border: #7d8e96;
+
+.great-ds-border-bottom-grey {
+  border-bottom: 1px solid $great-design-system-grey-border;
+}
+
+.buy-from-the-uk-logo {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.buy-from-the-uk-logo-container {
+    background-color: #fff;
+    border: 1px solid $great-design-system-grey-border;
+    width: 180px;
+    height: 180px;
+    padding: 15px;
+}
+
+.case-study-image {
+    max-width: 300px;
+    display: block;
+}
+
+.great-heading-link::after {
+    top: 2px;
+}