@ilo-org/styles 0.12.0 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -32,7 +32,7 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.0.0",
     "sass": "^1.62.1"
   },

package/scss/components/_accordion.scss

@@ -5,6 +5,7 @@
 .ilo--accordion {
   $transition-timing: 500ms;
   $scroll-max-height: 300px;
+  margin-right: spacing(1);
 
   &--button {
     display: flex;
@@ -72,6 +73,10 @@
     &[aria-expanded="false"] {
       @include dataurlicon("add", $color-ux-labels-actionable);
     }
+
+    [dir="rtl"] & {
+      background-position: calc(0% + px-to-rem(6px)) center;
+    }
   }
 
   &--panel {
@@ -82,7 +87,7 @@
     overflow: hidden;
 
     .ilo--accordion--innerpanel {
-      padding-bottom: spacing(3);
+      padding-bottom: spacing(9);
       padding-top: spacing(2);
     }
 

package/scss/components/_breadcrumb.scss

@@ -14,7 +14,7 @@
     justify-content: flex-start;
     padding-block: spacing(4);
     padding-inline-end: 0;
-    padding-inline-start: var(--card-padding-start);
+    padding-inline-start: var(--breadcrumb-padding);
     position: relative;
     &.context--menu {
       padding: 0;
@@ -23,19 +23,20 @@
 
   &--link {
     align-items: center;
-    background-position: right 52%;
+    background-position: right;
     background-repeat: no-repeat;
     color: map-get($color, "link", "text", "default");
     display: inline-flex;
     height: px-to-rem(16px);
-    padding: 0 spacing(6) 0 px-to-rem(10px);
+    padding-block: 0;
+    padding-inline-start: spacing(4);
+    padding-inline-end: spacing(6);
     text-decoration: none;
     text-decoration-thickness: px-to-rem($borders-base);
     @include dataurlicon("breadcrumbdivider", $color-link-text-default);
 
     [dir="rtl"] & {
-      background-position: 0 52%;
-      padding: 0 px-to-rem(10px) 0 spacing(6);
+      background-position: left;
       @include dataurlicon("breadcrumbdividerrtl", $color-link-text-default);
     }
 
@@ -89,6 +90,13 @@
           width: px-to-rem(16px);
           @include dataurlicon("home", $color-link-text-default);
         }
+
+        [dir="rtl"] & {
+          &:before {
+            left: initial;
+            right: 0;
+          }
+        }
       }
 
       &:hover,
@@ -178,7 +186,7 @@
           content: "";
           height: px-to-rem(12px);
           position: absolute;
-          left: 50%;
+          // left: 50%;
           top: -#{px-to-rem(6px)};
           transform: translateX(-50%) rotate(135deg);
           width: px-to-rem(12px);
@@ -250,46 +258,37 @@
             text-decoration: underline;
             text-decoration-thickness: px-to-rem($borders-base);
           }
-
-          [dir="rtl"] & {
-            text-align: center;
-          }
         }
       }
     }
   }
 
-  @include breakpoint("medium") {
-    &--items {
-      &:after {
-        background: linear-gradient(
-          to bottom right,
-          white 50%,
-          transparent 50%
-        );
-        content: "";
-        display: inline-block;
-        height: 47px;
-        position: absolute;
-        right: -47px;
-        top: 0;
-        width: 47px;
+  &--items {
+    &:after {
+      background: linear-gradient(to bottom right, white 50%, transparent 50%);
+      content: "";
+      display: inline-block;
+      height: 47px;
+      position: absolute;
+      right: -47px;
+      top: 0;
+      width: 47px;
 
-        [dir="rtl"] & {
-          right: auto;
-          left: -47px;
-          transform: scaleX(-1);
-        }
+      [dir="rtl"] & {
+        right: auto;
+        left: -47px;
+        transform: scaleX(-1);
       }
+    }
 
-      &.context--menu {
-        &:after {
-          content: none;
-        }
+    &.context--menu {
+      &:after {
+        content: none;
       }
     }
   }
 
+  // @TODO: This shouldn't be here, we should handle this through Storybook configuation
   &.storybook {
     background-color: $brand-ilo-grey-ui;
     height: 100vh;

package/scss/components/_card.scss

@@ -5,7 +5,7 @@
 
 .ilo--card {
   $self: &;
-  $transition-timing: 150ms;
+  $transition-timing: 250ms;
   box-sizing: border-box;
   position: relative;
   background-color: map-get($color, "base", "neutrals", "white");
@@ -86,6 +86,7 @@
 
   &--wrapper {
     max-width: var(--max-width);
+    transition: filter $transition-timing ease-out;
 
     &:hover,
     &:focus,
@@ -145,14 +146,7 @@
   &--eyebrow {
     color: $brand-ilo-purple;
     @include font-styles("body-small");
-    @include textmargin(
-      "margin-bottom",
-      16px,
-      "headline-5",
-      "display",
-      "body-small",
-      "copy"
-    );
+    margin-bottom: spacing(3);
     @include globaltransition("color");
 
     #{$self}--link:hover &,

package/scss/components/_hero.scss

@@ -11,6 +11,11 @@
   // Total offset from the edge of the window
   --base-offset: calc(((100vw - #{$layout-max-width}) / 2));
 
+  // Breadcrumb offset. This is used directly by the breadcrumb component
+  // Ensures the Breadcrumb aligns to the starting edge of a 1300px content
+  // container
+  --breadcrumb-padding: max(var(--base-offset), #{spacing(4)});
+
   // 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`
@@ -47,6 +52,24 @@
     @include hero-grid-rows();
   }
 
+  &__gap {
+    &__transparent {
+      background: transparent;
+    }
+
+    &__white {
+      background-color: $brand-ilo-white;
+    }
+
+    &__light {
+      background-color: $brand-ilo-light-blue;
+    }
+
+    &__dark {
+      background-color: $brand-ilo-dark-blue;
+    }
+  }
+
   &--breadcrumbs {
     display: none;
   }
@@ -196,6 +219,7 @@
         #{$c}--card-offset {
           background-color: map-get($color, "base", "blue", "dark");
           position: relative;
+          box-shadow: 0.3px 0 0 0 map-get($color, "base", "blue", "dark");
         }
 
         &[class*="semi-transparent"] {
@@ -204,6 +228,11 @@
               map-get($color, "hero", "card", "dark", "background"),
               $opacity-semi-transparent
             );
+            box-shadow: 0.3px 0 0 0
+              rgba(
+                map-get($color, "hero", "card", "dark", "background"),
+                $opacity-semi-transparent
+              );
           }
         }
       }
@@ -211,6 +240,8 @@
       &__light {
         #{$c}--card-offset {
           background: map-get($color, "hero", "card", "light", "background");
+          box-shadow: 0.3px 0 0 0
+            map-get($color, "hero", "card", "light", "background");
         }
 
         &[class*="semi-transparent"] {
@@ -219,19 +250,18 @@
               map-get($color, "hero", "card", "light", "background"),
               $opacity-semi-transparent
             );
+            box-shadow: 0.3px 0 0 0
+              rgba(
+                map-get($color, "hero", "card", "light", "background"),
+                $opacity-semi-transparent
+              );
           }
         }
       }
     }
 
-    &--breadcrumbs-offset {
-      grid-area: 1 / 1 / 2 / 2;
-      background-color: $color-base-neutrals-white;
-      z-index: 1;
-    }
-
     &--breadcrumbs {
-      grid-area: 1 / 2 / 2 / 5;
+      grid-area: 1 / 1 / 2 / 5;
       z-index: 1;
       display: flex;
       flex-flow: row nowrap;
@@ -258,21 +288,9 @@
       z-index: 0;
       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 & {
-        background-color: transparent;
+        background: transparent !important;
       }
 
       #{$c}__card-align__center & {

package/scss/components/_tooltip.scss

@@ -8,6 +8,8 @@
   $arrow-width: calc(spacing(2) - px-to-rem(1));
 
   @include font-styles("body-xs");
+  font-family: $fonts-copy;
+  font-weight: 400;
   background: map-get($color, "tooltip", "default", "background");
   border: none;
   border-radius: px-to-rem(2px);
@@ -21,12 +23,17 @@
   padding: spacing(2) spacing(4) spacing(3);
   position: absolute;
   visibility: hidden;
-  width: auto;
-  @include globaltransition("opacity");
+  width: max-content;
+  max-width: px-to-rem(180px);
+
+  &--long {
+    @include breakpoint("medium") {
+      max-width: px-to-rem(400px);
+    }
+  }
 
   &--fade {
     opacity: 1;
-    @include globaltransition("opacity");
   }
 
   &--visible {
@@ -35,6 +42,38 @@
     opacity: 1;
   }
 
+  // Tooltip arrow styles
+  &--arrow,
+  &--arrow::before {
+    position: absolute;
+    visibility: hidden;
+    width: 10px;
+    height: 10px;
+    background: inherit;
+  }
+
+  &--arrow::before {
+    visibility: visible;
+    content: "";
+    transform: rotate(45deg);
+  }
+
+  &[data-popper-placement^="top"] > &--arrow {
+    bottom: -4px;
+  }
+
+  &[data-popper-placement^="bottom"] > &--arrow {
+    top: -4px;
+  }
+
+  &[data-popper-placement^="left"] > &--arrow {
+    right: -4px;
+  }
+
+  &[data-popper-placement^="right"] > &--arrow {
+    left: -4px;
+  }
+
   &--wrapper {
     display: inline-block;
     position: relative;
@@ -53,143 +92,23 @@
     }
   }
 
-  &--arrow {
-    border-color: transparent;
-    border-right-color: transparent;
-    border-style: solid;
-    border-width: 0;
-    height: 0;
-    margin-top: -#{$arrow-width};
-    position: absolute;
-    width: 0;
-  }
-
-  &--alignment-top {
-    left: 0;
-    top: calc(-100% + 12px);
-
-    .ilo--tooltip--arrow {
-      border-top-color: map-get($color, "tooltip", "default", "background");
-      border-width: spacing(3) $arrow-width 0 $arrow-width;
-      bottom: -#{spacing(3)};
-      left: 50%;
-      margin-left: -#{$arrow-width};
-      top: auto;
-
-      &--placement-negative {
-        left: 10%;
-      }
-
-      &--placement-positive {
-        left: auto;
-        right: 10%;
-      }
-
-      &--placement-center {
-        left: 50%;
-      }
-    }
-  }
-
-  &--alignment-right {
-    left: calc(100% + 32px);
-    top: calc(50% - $arrow-width);
-
-    .ilo--tooltip--arrow {
-      border-right-color: map-get($color, "tooltip", "default", "background");
-      border-width: $arrow-width spacing(3) $arrow-width 0;
-      left: 0;
-      margin-left: -#{spacing(3)};
-      top: 50%;
-
-      &--placement-negative {
-        margin-top: 0;
-        top: 10%;
-      }
-
-      &--placement-positive {
-        top: auto;
-        bottom: 10%;
-      }
-
-      &--placement-center {
-        top: 50%;
-      }
-    }
-  }
-
-  &--alignment-left {
-    right: calc(100% + 32px);
-    top: calc(50% - $arrow-width);
-
-    .ilo--tooltip--arrow {
-      border-left-color: map-get($color, "tooltip", "default", "background");
-      border-width: $arrow-width 0 $arrow-width spacing(3);
-      left: auto;
-      margin-top: -#{$arrow-width};
-      right: -#{spacing(3)};
-      top: 50%;
-
-      &--placement-negative {
-        margin-top: 0;
-        top: 10%;
-      }
-
-      &--placement-positive {
-        top: auto;
-        bottom: 10%;
-      }
-
-      &--placement-center {
-        top: 50%;
-      }
-    }
-  }
-
-  &--alignment-bottom {
-    left: 0;
-    top: calc(100% + spacing(3));
-
-    .ilo--tooltip--arrow {
-      border-width: 0 $arrow-width spacing(3) $arrow-width;
-      left: 50%;
-      margin-left: -#{$arrow-width};
-      margin-top: -#{spacing(3)};
-      top: 0;
-      border-bottom-color: map-get($color, "tooltip", "default", "background");
-
-      &--placement-negative {
-        left: 10%;
-      }
-
-      &--placement-positive {
-        left: auto;
-        right: 10%;
-      }
-
-      &--placement-center {
-        left: 50%;
-      }
-    }
-  }
-
   &--dark {
     background: map-get($color, "tooltip", "dark", "background");
     color: map-get($color, "tooltip", "dark", "text");
 
-    &.ilo--tooltip--alignment-bottom .ilo--tooltip--arrow {
+    &.ilo--tooltip--arrow {
       border-bottom-color: map-get($color, "tooltip", "dark", "background");
     }
 
-    &.ilo--tooltip--alignment-top .ilo--tooltip--arrow {
+    &.ilo--tooltip--arrow {
       border-top-color: map-get($color, "tooltip", "dark", "background");
     }
 
-    &.ilo--tooltip--alignment-left .ilo--tooltip--arrow {
+    &.ilo--tooltip--arrow {
       border-left-color: map-get($color, "tooltip", "dark", "background");
     }
 
-    &.ilo--tooltip--alignment-right .ilo--tooltip--arrow {
+    &.ilo--tooltip--arrow {
       border-right-color: map-get($color, "tooltip", "dark", "background");
     }
   }