@ilo-org/styles 0.10.1 → 0.10.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.5.1"
+    "@ilo-org/themes": "0.6.0"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/components/_hero.scss

@@ -2,29 +2,28 @@
 @use "../functions" as *;
 @import "../mixins";
 
-// @TODO: The grid layout is fairly clean until you get to the placement of the caption which breaks out of it
-// and uses a lot of absolute positioning. This should be cleaned up to use the grid layout more effectively.
-
 .hero {
   $c: &;
 
-  // SASS vars are all constants
-  $tooltip-width: 30px;
-  $tooltip-height: 27px;
-  $image-max-height: 216px;
-  $corner-cut-sm: 39px;
-  $corner-cut-lg: 64px;
+  // Offset from the edge of the window to keep content in the main content area
+  $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});
+
+  // Added offset for justified offset
+  $card-offset-justified: minmax(108px, #{$card-offset});
 
-  // CSS vars can be changed
-  --corner-cut-height: #{$corner-cut-sm};
+  // The height of the corner cut
+  --corner-cut-height: #{$spacing-hero-card-corner-cut-height-sm};
 
   width: 100%;
   display: grid;
   position: relative;
   grid-template-rows:
-    minmax($image-max-height, 1fr)
-    $tooltip-height
-    $corner-cut-sm
+    minmax($spacing-hero-image-max-height, 1fr)
+    $spacing-hero-tooltip-height
+    $spacing-hero-card-corner-cut-height-sm
     auto;
   grid-template-columns: 1fr;
 
@@ -53,27 +52,30 @@
     grid-area: 2 / 1 / 3 / 2;
 
     &--wrapper {
-      @include caption-icon-wrapper("right", $tooltip-width, $tooltip-height);
+      @include caption-icon-wrapper(
+        "right",
+        $spacing-hero-tooltip-width,
+        $spacing-hero-tooltip-height
+      );
     }
   }
 
   @include breakpoint("large") {
-    --card-width: minmax(200px, 625px);
-    --corner-cut-height: #{$corner-cut-lg};
+    --card-width: 625px;
+    --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
     --breadcrumbs-height: 48px;
-    --card-offset: 109px;
     --image-gap: 240px;
 
     // Defaults to baseline
     --row-1-lg: var(--breadcrumbs-height);
     --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
     --row-3-lg: auto;
-    --row-4-lg: #{$tooltip-height};
+    --row-4-lg: #{$spacing-hero-tooltip-height};
     --row-5-lg: 72px;
 
     --col-1-lg: 0;
     --col-2-lg: var(--card-width);
-    --col-3-lg: #{$tooltip-width};
+    --col-3-lg: #{$spacing-hero-tooltip-width};
     --col-4-lg: 1fr;
 
     grid-template-rows:
@@ -109,45 +111,47 @@
 
     &__card-size {
       &__small {
-        --card-width: minmax(200px, 625px);
+        --card-width: 625px;
       }
 
       &__medium {
-        --card-width: minmax(200px, 721px);
+        --card-width: 721px;
       }
 
       &__large {
-        --card-width: minmax(200px, 856px);
+        --card-width: 856px;
       }
 
       &__xlarge {
-        --card-width: minmax(200px, 920px);
+        --card-width: 920px;
       }
 
       &__xxlarge {
-        --card-width: minmax(200px, 998px);
+        --card-width: 998px;
       }
     }
 
     &__card-justify {
       &__start {
-        --col-1-lg: 0;
+        --col-1-lg: #{$card-offset};
       }
 
       &__offset {
-        --col-1-lg: var(--card-offset);
+        --col-1-lg: #{$card-offset-justified};
       }
 
       &__center {
-        --col-1-lg: 1fr;
-        --col-4-lg: 1fr;
+        --col-1-lg: calc((100% - var(--card-width)) / 2);
+        --col-4-lg: calc(
+          ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+        );
       }
     }
 
     &__card-align {
       &__center {
-        --row-4-lg: calc(72px - #{$tooltip-height});
-        --row-5-lg: #{$tooltip-height};
+        --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
+        --row-5-lg: #{$spacing-hero-tooltip-height};
       }
 
       &__bottom {
@@ -157,6 +161,46 @@
       }
     }
 
+    &__card-background {
+      &__transparent {
+        #{$c}--card-offset {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    &__card-theme {
+      &__dark {
+        #{$c}--card-offset {
+          background-color: map-get($color, "base", "blue", "dark");
+        }
+
+        &[class*="semi-transparent"] {
+          #{$c}--card-offset {
+            background: rgba(
+              map-get($color, "hero", "card", "dark", "background"),
+              $opacity-semi-transparent
+            );
+          }
+        }
+      }
+
+      &__light {
+        #{$c}--card-offset {
+          background: map-get($color, "hero", "card", "light", "background");
+        }
+
+        &[class*="semi-transparent"] {
+          #{$c}--card-offset {
+            background: rgba(
+              map-get($color, "hero", "card", "light", "background"),
+              $opacity-semi-transparent
+            );
+          }
+        }
+      }
+    }
+
     &--breadcrumbs {
       grid-area: 1 / 1 / 2 / 5;
       z-index: 1;
@@ -164,7 +208,15 @@
       flex-flow: row nowrap;
 
       &--wrapper {
-        max-width: 500px;
+        width: 100%;
+      }
+
+      &:before {
+        content: "";
+        background-color: $color-base-neutrals-white;
+        position: relative;
+        height: 100%;
+        width: max($spacing-hero-card-padding-x-lg, $base-offset);
       }
     }
 
@@ -180,6 +232,25 @@
       }
     }
 
+    &--card-offset {
+      grid-area: 3 / 1 / 6 / 2;
+      z-index: 0;
+      background-color: transparent;
+
+      #{$c}__card-justify__offset &,
+      #{$c}__card-justify__center & {
+        background-color: transparent;
+      }
+
+      #{$c}__card-align__center & {
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 1 / 6 / 2;
+      }
+    }
+
     &--card {
       grid-area: 3 / 2 / 6 / 3;
 
@@ -219,8 +290,8 @@
         #{$c}--caption--wrapper {
           @include caption-icon-wrapper(
             "right",
-            $tooltip-width,
-            $tooltip-height
+            $spacing-hero-tooltip-width,
+            $spacing-hero-tooltip-height
           );
 
           position: absolute;
@@ -240,7 +311,11 @@
   .right-to-left & {
     &--caption {
       &--wrapper {
-        @include caption-icon-wrapper("left", $tooltip-width, $tooltip-height);
+        @include caption-icon-wrapper(
+          "left",
+          $spacing-hero-tooltip-width,
+          $spacing-hero-tooltip-height
+        );
         position: absolute;
         right: 0;
       }
@@ -250,23 +325,25 @@
       &__card-justify {
         &__start {
           --col-1-lg: 1fr;
-          --col-2-lg: #{$tooltip-width};
+          --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: 0;
+          --col-4-lg: #{$card-offset};
         }
 
         &__offset {
           --col-1-lg: 1fr;
-          --col-2-lg: #{$tooltip-width};
+          --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: var(--card-offset);
+          --col-4-lg: #{$card-offset-justified};
         }
 
         &__center {
-          --col-1-lg: 1fr;
-          --col-2-lg: #{$tooltip-width};
+          --col-1-lg: calc(
+            ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+          );
+          --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: 1fr;
+          --col-4-lg: calc((100% - var(--card-width)) / 2);
         }
       }
 
@@ -307,8 +384,8 @@
             &--wrapper {
               @include caption-icon-wrapper(
                 "left",
-                $tooltip-width,
-                $tooltip-height
+                $spacing-hero-tooltip-width,
+                $spacing-hero-tooltip-height
               );
 
               position: absolute;
@@ -319,6 +396,10 @@
         }
       }
 
+      &--card-offset {
+        grid-area: 3 / 4 / 6 / 5;
+      }
+
       &--card {
         grid-area: 3 / 3 / 6 / 4;
       }
@@ -336,8 +417,8 @@
 
           @include caption-icon-wrapper(
             "left",
-            $tooltip-width,
-            $tooltip-height
+            $spacing-hero-tooltip-width,
+            $spacing-hero-tooltip-height
           );
         }
       }

package/scss/components/_herocard.scss

@@ -4,21 +4,13 @@
 
 .ilo--hero-card {
   $c: &;
-  $semi-transparent: 0.6;
-
-  // Replace with this
-  $padding-y-lg: $spacing-padding-7;
-  $padding-x-lg: $spacing-padding-9;
-
-  $padding-y-sm: $spacing-padding-5;
-  $padding-x-sm: $spacing-padding-2;
 
   height: 100%;
   position: relative;
-  padding: $padding-y-sm $padding-x-sm;
+  padding: $spacing-hero-card-padding-y-sm $spacing-hero-card-padding-x-sm;
 
   @include breakpoint("large") {
-    padding: $padding-y-lg $padding-x-lg;
+    padding: $spacing-hero-card-padding-y-lg $spacing-hero-card-padding-x-lg;
   }
 
   .right-to-left & {
@@ -43,7 +35,7 @@
         &.ilo--hero-card__background__semi-transparent {
           background: rgba(
             map-get($color, "hero", "card", "light", "background"),
-            $semi-transparent
+            $opacity-semi-transparent
           );
         }
       }
@@ -57,7 +49,7 @@
         &.ilo--hero-card__background__semi-transparent {
           background: rgba(
             map-get($color, "hero", "card", "dark", "background"),
-            $semi-transparent
+            $opacity-semi-transparent
           );
         }
       }
@@ -79,17 +71,31 @@
   }
 
   &__cornercut {
-    @include cornercut(70px, 40px);
+    @include cornercut(
+      $spacing-hero-card-corner-cut-width-sm,
+      $spacing-hero-card-corner-cut-height-sm
+    );
 
     .right-to-left & {
-      @include cornercut(720px, 40px, "left");
+      @include cornercut(
+        $spacing-hero-card-corner-cut-width-sm,
+        $spacing-hero-card-corner-cut-height-sm,
+        "left"
+      );
     }
 
     @include breakpoint("large") {
-      @include cornercut(116px, 64px);
+      @include cornercut(
+        $spacing-hero-card-corner-cut-width-lg,
+        $spacing-hero-card-corner-cut-height-lg
+      );
 
       .right-to-left & {
-        @include cornercut(116px, 64px, "left");
+        @include cornercut(
+          $spacing-hero-card-corner-cut-width-lg,
+          $spacing-hero-card-corner-cut-height-lg,
+          "left"
+        );
       }
     }
   }

package/scss/components/_pagination.scss

@@ -5,6 +5,9 @@
 .ilo--pagination {
   display: flex;
   justify-content: space-between;
+  margin-bottom: px-to-rem(
+    map-get($spacing, "ux", "pagination", "padding", "top")
+  );
   margin-top: px-to-rem(
     map-get($spacing, "ux", "pagination", "padding", "top")
   );