@ilo-org/styles 0.8.2 → 0.8.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/scss/components/_cardgroup.scss

@@ -4,6 +4,7 @@
 
 .ilo--cardgroup {
   $c: &;
+  $gap-size: px-to-rem(32px);
 
   &__collapsed {
     #{$c}--inner {
@@ -11,74 +12,40 @@
     }
   }
 
-  &__justify {
-    &__start {
-      #{$c}--inner {
-        justify-content: flex-start;
-      }
-    }
-
-    &__between {
-      #{$c}--inner {
-        justify-content: space-between;
-      }
-    }
-
-    &__center {
-      #{$c}--inner {
-        justify-content: center;
-      }
-    }
-  }
-
   &__count {
     @include breakpoint("large") {
       &__one {
         #{$c}--inner {
-          gap: 0;
-        }
-
-        #{$c}--card {
-          flex: 1 1 100%;
+          grid-template-columns: 1fr;
         }
       }
 
       &__two {
         #{$c}--inner {
-          gap: 16px;
-        }
-
-        #{$c}--card {
-          flex: 0 1 calc(50% - 16px);
+          grid-template-columns: repeat(2, 1fr);
         }
       }
 
       &__three {
         #{$c}--inner {
-          gap: 21px;
-        }
-
-        #{$c}--card {
-          flex: 0 1 calc(33.3333% - 21px);
+          grid-template-columns: repeat(3, 1fr);
         }
       }
 
       &__four {
         #{$c}--inner {
-          gap: 24px;
-        }
-
-        #{$c}--card {
-          flex: 0 1 calc(25% - 24px);
+          grid-template-columns: repeat(4, 1fr);
         }
       }
     }
   }
 
   &--inner {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    column-gap: $gap-size;
+    row-gap: $gap-size;
     margin: auto;
     width: 100%;
 
@@ -90,6 +57,8 @@
   .ilo--card,
   .ilo--card--wrapper {
     height: 100%;
+    width: 100%;
+    max-width: 100%;
   }
 
   &--button-wrap {

package/scss/components/_hero.scss

@@ -18,6 +18,7 @@
   // CSS vars can be changed
   --corner-cut-height: #{$corner-cut-sm};
 
+  width: 100%;
   display: grid;
   position: relative;
   grid-template-rows:

package/scss/components/_promocard.scss

@@ -6,9 +6,31 @@
 .ilo--card {
   $self: &;
 
+  &--wrapper__type__promo {
+    --max-width: #{px-to-rem(634px)};
+
+    &__size {
+      &__narrow {
+        --max-width: #{px-to-rem(343px)};
+      }
+
+      &__standard {
+        --max-width: #{px-to-rem(634px)};
+      }
+
+      &__wide {
+        --max-width: #{px-to-rem(920px)};
+      }
+
+      &__fluid {
+        --max-width: 100%;
+      }
+    }
+  }
+
   &__type {
     &__promo {
-      --max-width: #{px-to-rem(343px)};
+      // --max-width: #{px-to-rem(343px)};
 
       padding: px-to-rem(40px) px-to-rem(24px);
       width: 100%;
@@ -23,8 +45,6 @@
 
       &#{$self}__size {
         &__standard {
-          --max-width: #{px-to-rem(634px)};
-
           padding: px-to-rem(48px);
 
           @include breakpoint("medium") {
@@ -42,8 +62,6 @@
 
         &__wide,
         &__fluid {
-          --max-width: #{px-to-rem(920px)};
-
           padding: px-to-rem(64px) px-to-rem(72px);
 
           @include breakpoint("medium") {
@@ -60,8 +78,6 @@
         }
 
         &__narrow {
-          --max-width: #{px-to-rem(343px)};
-
           padding: px-to-rem(40px) px-to-rem(24px);
 
           @include breakpoint("medium") {