@ilo-org/styles 0.10.5 → 0.11.0

package/package.json

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

package/scss/components/_breadcrumb.scss

@@ -12,7 +12,9 @@
     background-color: $color-base-neutrals-white;
     display: inline-flex;
     justify-content: flex-start;
-    padding: px-to-rem(16px) 0 px-to-rem(16px) px-to-rem($spacing-padding-1-5);
+    padding-block: px-to-rem(16px);
+    padding-inline-end: 0;
+    padding-inline-start: var(--card-padding-start);
     position: relative;
 
     &.context--menu {
@@ -66,7 +68,7 @@
       align-items: center;
       display: flex;
       position: relative;
-      width: px-to-rem($spacing-padding-4);
+      width: 17px;
 
       .ilo--breadcrumb--link {
         padding-left: 0;

package/scss/components/_datacard.scss

@@ -8,6 +8,8 @@
 
   &__type {
     &__data {
+      $c: &;
+
       --max-width: #{px-to-rem(600px)};
 
       background: $brand-ilo-light-blue;
@@ -20,13 +22,12 @@
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: auto;
+        row-gap: px-to-rem(26px);
       }
 
       @include breakpoint("medium") {
-        padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(48px)
-          px-to-rem(110px);
+        padding: px-to-rem(48px);
 
-        // 629
         &__columns {
           &__two {
             #{$self}--content {
@@ -46,9 +47,15 @@
                   &--content {
                     grid-column: 2 / 3;
                   }
+
                   &--files {
                     grid-column: 2 / 3;
                   }
+
+                  &--cta {
+                    grid-column: 2 / 3;
+                  }
+
                   &--links {
                     grid-column: 2 / 3;
                   }
@@ -60,9 +67,15 @@
                   &--content {
                     grid-column: 1 / 2;
                   }
+
                   &--files {
                     grid-column: 1 / 2;
                   }
+
+                  &--cta {
+                    grid-column: 1 / 2 / 3 / 3;
+                  }
+
                   &--links {
                     grid-area: 1 / 2 / 3 / 3;
                   }
@@ -75,13 +88,21 @@
 
       &#{$self}__size {
         &__narrow {
-          --max-width: #{px-to-rem(600px)};
-
-          @include cornercut(72px, 48px);
+          --max-width: #{px-to-rem(301px)};
+          @include cornercut(72px, 40px);
+          padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(53px);
         }
 
         &__wide {
           --max-width: #{px-to-rem(778px)};
+
+          &#{$c}__columns__one {
+            padding: px-to-rem(48px) px-to-rem(52px);
+          }
+
+          &#{$c}__columns__two {
+            padding: px-to-rem(48px) max(px-to-rem(52px), px-to-rem(109px));
+          }
         }
 
         &__wide,
@@ -93,7 +114,6 @@
       #{$self}--image {
         width: 100%;
         max-width: 200px;
-        margin: 0 0 #{px-to-rem(31px)};
       }
 
       &--content-label {
@@ -115,23 +135,11 @@
 
       &--content-copy {
         @include font-styles("headline-5");
-        @include textmargin(
-          "margin-bottom",
-          37px,
-          "headline-5",
-          "display",
-          "body-xs",
-          "copy"
-        );
         color: $brand-ilo-grey-charcoal;
         font-family: $fonts-display;
         font-weight: 500;
       }
 
-      &--content-files {
-        margin-bottom: px-to-rem(35px);
-      }
-
       [class*="ilo--link"] {
         @include font-styles("headline-6");
         line-height: 1.8;

package/scss/components/_hero.scss

@@ -5,14 +5,24 @@
 .hero {
   $c: &;
 
-  // Offset from the edge of the window to keep content in the main content area
+  // Total offset from the edge of the window
   $base-offset: calc((100vw - #{$layout-max-width}) / 2);
 
-  // Card offset from the edge of the window minus the card's padding
-  $card-offset: calc(#{$base-offset} - #{$spacing-hero-card-padding-x-lg});
+  // Card padding defaults to a fixed value. But it's a CSS variable
+  // so that we can make it squeezy when the card is justified `start`
+  // or `offset`
+  --card-padding-start: #{$spacing-hero-card-padding-x-lg};
+
+  // Squishy padding makes it so we can have a flexible padding value
+  // that will be somewhere between 16px and the card's fixed padding
+  // depending on how far the card is from the edge of the screen
+  $squeezy-padding-start: max(
+    16px,
+    min(#{$base-offset}, #{$spacing-hero-card-padding-x-lg})
+  );
 
-  // Added offset for justified offset
-  $card-offset-justified: minmax(108px, #{$card-offset});
+  // Card offset from the edge of the window minus the card's fixed padding
+  $card-offset: calc(#{$base-offset} - #{$spacing-hero-card-padding-x-lg});
 
   // The height of the corner cut
   --corner-cut-height: #{$spacing-hero-card-corner-cut-height-sm};
@@ -26,6 +36,7 @@
     $spacing-hero-card-corner-cut-height-sm
     auto;
   grid-template-columns: 1fr;
+  overflow: hidden;
 
   &--breadcrumbs {
     display: none;
@@ -82,8 +93,7 @@
       var(--row-1-lg)
       var(--row-2-lg)
       var(--row-3-lg)
-      var(--row-4-lg)
-      var(--row-5-lg);
+      var(--row-4-lg);
 
     grid-template-columns:
       var(--col-1-lg)
@@ -132,12 +142,10 @@
     }
 
     &__card-justify {
-      &__start {
-        --col-1-lg: #{$card-offset};
-      }
-
+      &__start,
       &__offset {
-        --col-1-lg: #{$card-offset-justified};
+        --card-padding-start: #{$squeezy-padding-start};
+        --col-1-lg: #{$card-offset};
       }
 
       &__center {
@@ -173,6 +181,7 @@
       &__dark {
         #{$c}--card-offset {
           background-color: map-get($color, "base", "blue", "dark");
+          position: relative;
         }
 
         &[class*="semi-transparent"] {
@@ -201,8 +210,14 @@
       }
     }
 
+    &--breadcrumbs-offset {
+      grid-area: 1 / 1 / 2 / 2;
+      background-color: $color-base-neutrals-white;
+      z-index: 1;
+    }
+
     &--breadcrumbs {
-      grid-area: 1 / 1 / 2 / 5;
+      grid-area: 1 / 2 / 2 / 5;
       z-index: 1;
       display: flex;
       flex-flow: row nowrap;
@@ -210,14 +225,6 @@
       &--wrapper {
         width: 100%;
       }
-
-      &:before {
-        content: "";
-        background-color: $color-base-neutrals-white;
-        position: relative;
-        height: 100%;
-        width: max($spacing-hero-card-padding-x-lg, $base-offset);
-      }
     }
 
     &--figure {
@@ -235,7 +242,19 @@
     &--card-offset {
       grid-area: 3 / 1 / 6 / 2;
       z-index: 0;
-      background-color: transparent;
+      position: relative;
+
+      // A band-aid that prevents artifacts from appearing
+      // between the card and the card offset in Chrome
+      &::after {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 3px;
+        right: -1px;
+        background-color: inherit;
+        z-index: 1;
+      }
 
       #{$c}__card-justify__offset &,
       #{$c}__card-justify__center & {
@@ -334,7 +353,7 @@
           --col-1-lg: 1fr;
           --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: #{$card-offset-justified};
+          --col-4-lg: #{$card-offset};
         }
 
         &__center {
@@ -398,13 +417,23 @@
 
       &--card-offset {
         grid-area: 3 / 4 / 6 / 5;
+
+        &:after {
+          right: initial;
+          left: -1px;
+        }
       }
 
       &--card {
         grid-area: 3 / 3 / 6 / 4;
       }
 
+      &--breadcrumbs-offset {
+        grid-area: 1 / 4 / 2 / 5;
+      }
+
       &--breadcrumbs {
+        grid-area: 1 / 4 / 2 / 1;
         flex-direction: row-reverse;
       }
 

package/scss/components/_herocard.scss

@@ -10,7 +10,9 @@
   padding: $spacing-hero-card-padding-y-sm $spacing-hero-card-padding-x-sm;
 
   @include breakpoint("large") {
-    padding: $spacing-hero-card-padding-y-lg $spacing-hero-card-padding-x-lg;
+    padding-block: $spacing-hero-card-padding-y-lg;
+    padding-inline-end: $spacing-hero-card-padding-x-lg;
+    padding-inline-start: var(--card-padding-start);
   }
 
   .right-to-left & {