UHF-9132: Convert content cards gray version to use component--full-w…

…idth class
City-of-Helsinki · Nov 23, 2023 · 063e1f2 · 063e1f2
1 parent 4e8bfd3
commit 063e1f2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/06_components/layout/_component.scss b/src/scss/06_components/layout/_component.scss
@@ -11,6 +11,16 @@
   @include component-side-padding;
 }
 
+.component--full-width {
+  padding-bottom: $spacing-triple;
+  padding-top: $spacing-triple;
+
+  @include breakpoint($breakpoint-m) {
+    padding-bottom: $spacing-quadruple;
+    padding-top: $spacing-quadruple;
+  }
+}
+
 .component__container {
   margin-left: auto;
   margin-right: auto;

diff --git a/src/scss/06_components/paragraphs/_content-cards.scss b/src/scss/06_components/paragraphs/_content-cards.scss
@@ -125,6 +125,7 @@ $-card-spacing: $spacing-and-half;
   display: grid;
   grid-template-columns: [full-width-start] $spacing [content-start] 1fr [content-end] $spacing [full-width-end] ;
   grid-template-rows: [header-start] auto [header-end] auto;
+  padding-top: 0;
 
   @include breakpoint($breakpoint-m) {
     grid-template-columns: [full-width-start] $spacing-double [content-start] 1fr [content-end] $spacing-double [full-width-end] ;
@@ -143,12 +144,10 @@ $-card-spacing: $spacing-and-half;
 
   .component__container {
     grid-column: content;
-    padding-bottom: $spacing-quadruple;
-    padding-top: $spacing-triple;
+    padding-top: $spacing;
 
-    @include breakpoint($breakpoint-l) {
-      padding-bottom: $spacing-sextuple;
-      padding-top: $spacing-quadruple;
+    @include breakpoint($breakpoint-m) {
+      padding-top: $spacing-double;
     }
   }
 
@@ -158,6 +157,14 @@ $-card-spacing: $spacing-and-half;
   }
 }
 
+// The koro is not visible on these occasions so the padding needs to be removed as well.
+:not(.page-type--landing-page).wrapper .components--upper,
+:not(.page-type--landing-page).wrapper .components:not(.components--lower) {
+  .component--content-cards-grey .component__container {
+    padding-top: 0;
+  }
+}
+
 .component--content-cards-small {
   .content-card {
     &:nth-child(-n+2) {

diff --git a/templates/paragraphs/paragraph--content-cards.html.twig b/templates/paragraphs/paragraph--content-cards.html.twig
@@ -7,10 +7,10 @@
 {% elseif design == 'large-cards' %}
   {% set design_class = 'component--content-cards-large' %}
 {% elseif design == 'small-cards-grey' %}
-  {% set design_class = 'component--content-cards-small component--content-cards-grey' %}
+  {% set design_class = 'component--full-width component--content-cards-small component--content-cards-grey' %}
   {% set has_koro = true %}
 {% elseif design == 'large-cards-grey' %}
-  {% set design_class = 'component--content-cards-large component--content-cards-grey' %}
+  {% set design_class = 'component--full-width component--content-cards-large component--content-cards-grey' %}
   {% set has_koro = true %}
 {% else %}
   {% set design_class = null %} {# This should not happen #}