@ilo-org/styles 0.7.0 → 0.7.2

package/package.json

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

package/scss/_mixins.scss

@@ -334,7 +334,11 @@
 // Cornercut
 // ======================================
 
-@mixin cornercut($width: $spacing-padding-8, $height: $spacing-padding-5) {
+@mixin cornercut(
+  $width: $spacing-padding-8,
+  $height: $spacing-padding-5,
+  $dir: "right"
+) {
   clip-path: polygon(
     0 0,
     calc(100% - $width) 0,
@@ -342,6 +346,10 @@
     100% 100%,
     0 100%
   );
+
+  @if ($dir == "left") {
+    clip-path: polygon($width 0, 100% 0, 100% 100%, 0 100%, 0 $height);
+  }
 }
 
 // ======================================
@@ -354,3 +362,44 @@
     drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
     drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
 }
+
+// ======================================
+// Background box for a caption icon tooltip (see Hero)
+// ======================================
+
+@mixin caption-icon-wrapper($dir: "right", $width, $height) {
+  background: map-get($color, "tooltip", "dark", "background");
+  height: $height;
+  width: $width;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: #{$height} solid transparent;
+
+    @if ($dir == "right") {
+      left: 100%;
+      border-right: none;
+      border-left: calc(#{$height} - 4px)
+        solid
+        map-get($color, "tooltip", "dark", "background");
+    }
+
+    @if ($dir == "left") {
+      left: auto;
+      right: 100%;
+      border-left: none;
+      border-right: calc(#{$height} - 4px)
+        solid
+        map-get($color, "tooltip", "dark", "background");
+    }
+  }
+}

package/scss/components/_cardgroup.scss

@@ -4,11 +4,10 @@
 
 .ilo--cardgroup {
   $c: &;
-  $card: ".ilo--card";
 
   &__collapsed {
     #{$c}--inner {
-      gap: 0;
+      gap: 0 !important;
     }
   }
 
@@ -32,12 +31,55 @@
     }
   }
 
+  &__count {
+    @include breakpoint("large") {
+      &__one {
+        #{$c}--inner {
+          gap: 0;
+        }
+
+        #{$c}--card {
+          flex: 1 1 100%;
+        }
+      }
+
+      &__two {
+        #{$c}--inner {
+          gap: 16px;
+        }
+
+        #{$c}--card {
+          flex: 0 1 calc(50% - 16px);
+        }
+      }
+
+      &__three {
+        #{$c}--inner {
+          gap: 21px;
+        }
+
+        #{$c}--card {
+          flex: 0 1 calc(33.3333% - 21px);
+        }
+      }
+
+      &__four {
+        #{$c}--inner {
+          gap: 24px;
+        }
+
+        #{$c}--card {
+          flex: 0 1 calc(25% - 24px);
+        }
+      }
+    }
+  }
+
   &--inner {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin: auto;
-    gap: px-to-rem(32px);
     width: 100%;
 
     .right-to-left & {

package/scss/components/_hero.scss

@@ -2,21 +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: &;
 
-  --tooltip-width: 30px;
-  --tooltip-height: 27px;
-  --corner-cut-height: 39px;
-  --image-max-height: 216px;
+  // SASS vars are all constants
+  $tooltip-width: 30px;
+  $tooltip-height: 27px;
+  $image-max-height: 216px;
+  $corner-cut-sm: 39px;
+  $corner-cut-lg: 64px;
+
+  // CSS vars can be changed
+  --corner-cut-height: #{$corner-cut-sm};
 
   display: grid;
   position: relative;
-
   grid-template-rows:
-    minmax(var(--image-max-height), 1fr)
-    var(--tooltip-height)
-    39px
+    minmax($image-max-height, 1fr)
+    $tooltip-height
+    $corner-cut-sm
     auto;
   grid-template-columns: 1fr;
 
@@ -27,7 +34,6 @@
   &--figure {
     background-color: map-get($color, "base", "blue", "light");
     position: relative;
-
     grid-area: 1 / 1 / 4 / 2;
 
     img {
@@ -46,40 +52,13 @@
     grid-area: 2 / 1 / 3 / 2;
 
     &--wrapper {
-      background: map-get($color, "tooltip", "dark", "background");
-      height: var(--tooltip-height);
-      width: var(--tooltip-width);
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 100%;
-        width: 0;
-        height: 0;
-        border-top: var(--tooltip-height) solid transparent;
-        border-left: calc(var(--tooltip-height) - 4px) solid
-          map-get($color, "tooltip", "dark", "background");
-
-        .right-to-left & {
-          left: auto;
-          right: 100%;
-          border-left: none;
-          border-right: calc(var(--tooltip-height) - 4px) solid
-            map-get($color, "tooltip", "dark", "background");
-        }
-      }
+      @include caption-icon-wrapper("right", $tooltip-width, $tooltip-height);
     }
   }
 
   @include breakpoint("large") {
     --card-width: minmax(200px, 625px);
-    --corner-cut-height: 64px;
+    --corner-cut-height: #{$corner-cut-lg};
     --breadcrumbs-height: 48px;
     --card-offset: 109px;
     --image-gap: 240px;
@@ -88,12 +67,12 @@
     --row-1-lg: var(--breadcrumbs-height);
     --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
     --row-3-lg: auto;
-    --row-4-lg: var(--tooltip-height);
+    --row-4-lg: #{$tooltip-height};
     --row-5-lg: 72px;
 
     --col-1-lg: 0;
     --col-2-lg: var(--card-width);
-    --col-3-lg: var(--tooltip-width);
+    --col-3-lg: #{$tooltip-width};
     --col-4-lg: 1fr;
 
     grid-template-rows:
@@ -152,41 +131,22 @@
     &__card-justify {
       &__start {
         --col-1-lg: 0;
-
-        .right-to-left & {
-          --col-1-lg: 1fr;
-          --col-2-lg: var(--tooltip-width);
-          --col-3-lg: var(--card-width);
-          --col-4-lg: 0;
-        }
       }
 
       &__offset {
         --col-1-lg: var(--card-offset);
-
-        .right-to-left & {
-          --col-1-lg: 1fr;
-          --col-2-lg: var(--tooltip-width);
-          --col-3-lg: var(--card-width);
-          --col-4-lg: var(--card-offset);
-        }
       }
 
       &__center {
         --col-1-lg: 1fr;
         --col-4-lg: 1fr;
-
-        .right-to-left & {
-          --col-2-lg: var(--tooltip-width);
-          --col-3-lg: var(--card-width);
-        }
       }
     }
 
     &__card-align {
       &__center {
-        --row-4-lg: calc(72px - var(--tooltip-height));
-        --row-5-lg: var(--tooltip-height);
+        --row-4-lg: calc(72px - #{$tooltip-height});
+        --row-5-lg: #{$tooltip-height};
       }
 
       &__bottom {
@@ -202,10 +162,6 @@
       display: flex;
       flex-flow: row nowrap;
 
-      .right-to-left & {
-        flex-direction: row-reverse;
-      }
-
       &--wrapper {
         max-width: 500px;
       }
@@ -226,10 +182,6 @@
     &--card {
       grid-area: 3 / 2 / 6 / 3;
 
-      .right-to-left & {
-        grid-area: 3 / 3 / 6 / 4;
-      }
-
       #{$c}__card-align__center & {
         grid-area: 3 / 2 / 4 / 3;
       }
@@ -243,10 +195,6 @@
       grid-area: 4 / 3 / 5 / 4;
       position: relative;
 
-      .right-to-left & {
-        grid-area: 4 / 2 / 5 / 3;
-      }
-
       #{$c}__card-align__center & {
         grid-area: 5 / 1 / 6 / 3;
       }
@@ -255,21 +203,143 @@
         grid-area: 4 / 1 / 5 / 2;
       }
 
-      &--wrapper {
-        left: 2px;
-
-        .right-to-left & {
-          left: auto;
-          right: 2px;
+      #{$c}__card-align__center &,
+      #{$c}__card-align__bottom & {
+        &--wrapper {
+          position: absolute;
+          left: 0;
+          bottom: 0;
         }
+      }
+
+      #{$c}__card-align__bottom#{$c}__card-justify__start & {
+        grid-area: 1 / 1 / 3 / 3;
+
+        #{$c}--caption--wrapper {
+          @include caption-icon-wrapper(
+            "right",
+            $tooltip-width,
+            $tooltip-height
+          );
 
-        #{$c}__card-align__center &,
-        #{$c}__card-align__bottom & {
           position: absolute;
           left: 0;
+          right: initial;
           bottom: 0;
         }
       }
+
+      &--wrapper {
+        left: 2px;
+      }
+    }
+  }
+
+  // Layout for RTL languages
+  .right-to-left & {
+    &--caption {
+      &--wrapper {
+        @include caption-icon-wrapper("left", $tooltip-width, $tooltip-height);
+        position: absolute;
+        right: 0;
+      }
+    }
+
+    @include breakpoint("large") {
+      &__card-justify {
+        &__start {
+          --col-1-lg: 1fr;
+          --col-2-lg: #{$tooltip-width};
+          --col-3-lg: var(--card-width);
+          --col-4-lg: 0;
+        }
+
+        &__offset {
+          --col-1-lg: 1fr;
+          --col-2-lg: #{$tooltip-width};
+          --col-3-lg: var(--card-width);
+          --col-4-lg: var(--card-offset);
+        }
+
+        &__center {
+          --col-1-lg: 1fr;
+          --col-2-lg: #{$tooltip-width};
+          --col-3-lg: var(--card-width);
+          --col-4-lg: 1fr;
+        }
+      }
+
+      &__card-align {
+        &__center {
+          #{$c}--card {
+            grid-area: 3 / 3 / 4 / 4;
+          }
+
+          #{$c}--caption {
+            grid-area: 5 / 4 / 6 / 5;
+
+            &--wrapper {
+              right: 0;
+              left: initial;
+              position: absolute;
+            }
+          }
+        }
+
+        &__bottom {
+          #{$c}--caption {
+            grid-area: 4 / 4 / 5 / 5;
+
+            &--wrapper {
+              position: absolute;
+              right: 0;
+              bottom: 0;
+              left: initial;
+            }
+          }
+        }
+
+        &__bottom#{$c}__card-justify__start {
+          #{$c}--caption {
+            grid-area: 2 / 3 / 3 / 4;
+
+            &--wrapper {
+              @include caption-icon-wrapper(
+                "left",
+                $tooltip-width,
+                $tooltip-height
+              );
+
+              position: absolute;
+              left: initial;
+              right: 0;
+            }
+          }
+        }
+      }
+
+      &--card {
+        grid-area: 3 / 3 / 6 / 4;
+      }
+
+      &--breadcrumbs {
+        flex-direction: row-reverse;
+      }
+
+      &--caption {
+        grid-area: 4 / 2 / 5 / 3;
+
+        &--wrapper {
+          right: 2px;
+          left: initial;
+
+          @include caption-icon-wrapper(
+            "left",
+            $tooltip-width,
+            $tooltip-height
+          );
+        }
+      }
     }
   }
 }

package/scss/components/_herocard.scss

@@ -74,7 +74,19 @@
   }
 
   &__cornercut {
-    @include cornercut(116px, 64px);
+    @include cornercut(72px, 40px);
+
+    .right-to-left & {
+      @include cornercut(72px, 40px, "left");
+    }
+
+    @include breakpoint("large") {
+      @include cornercut(116px, 64px);
+
+      .right-to-left & {
+        @include cornercut(116px, 64px, "left");
+      }
+    }
   }
 
   &--datecopy {