@ilo-org/styles 1.0.1 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,9 +38,9 @@
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
-    "@ilo-org/fonts": "0.2.1",
+    "@ilo-org/fonts": "0.2.2",
     "@ilo-org/icons": "0.3.1",
-    "@ilo-org/themes": "0.8.1"
+    "@ilo-org/themes": "0.9.0"
   },
   "devDependencies": {
     "del": "^7.0.0",

package/scss/_mixins.scss

@@ -339,18 +339,33 @@
 @mixin cornercut(
   $width: $spacing-padding-8,
   $height: $spacing-padding-5,
-  $dir: "right"
+  $dir: "right",
+  $side: "top"
 ) {
-  clip-path: polygon(
-    0 0,
-    calc(100% - $width) 0,
-    100% $height,
-    100% 100%,
-    0 100%
-  );
-
-  @if ($dir == "left") {
-    clip-path: polygon($width 0, 100% 0, 100% 100%, 0 100%, 0 $height);
+  @if ($side == "top") {
+    @if ($dir == "right") {
+      clip-path: polygon(
+        0 0,
+        calc(100% - $width) 0,
+        100% $height,
+        100% 100%,
+        0 100%
+      );
+    }
+
+    @if ($dir == "left") {
+      clip-path: polygon($width 0, 100% 0, 100% 100%, 0 100%, 0 $height);
+    }
+  }
+
+  @if ($side == "bottom") {
+    @if ($dir == "right") {
+      clip-path: polygon(0 0, 100% 0, calc(100% - $width) $height, 0 100%);
+    }
+
+    @if ($dir == "left") {
+      clip-path: polygon(0 0, 100% 0, 100% $height, $width 100%);
+    }
   }
 }
 

package/scss/components/_accordion.scss

@@ -1,43 +1,44 @@
 @use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
+@import "../config";
 
-.ilo--accordion {
+.#{$prefix}--accordion {
+  // This provides a reference to the outerclass within nested declarations
+  $accordion: &;
+
+  // Accordion contents can add lots of height so the transition timing can't
+  // be too fast which is why we're using a custom value here.
   $transition-timing: 500ms;
+
+  // If the accordion item is scrollable, then this is its max-height
   $scroll-max-height: 300px;
-  margin-right: spacing(1);
 
   &--button {
     display: flex;
-    align-items: center;
     flex-direction: row;
     justify-content: space-between;
-    text-align: start;
     width: 100%;
     margin: 0;
-    padding: spacing(4) 0;
+    padding-block: spacing(4);
     padding-inline-end: spacing(11);
-
     background-color: $color-ux-background-default;
     background-position: calc(100% - px-to-rem(6px)) center;
     background-repeat: no-repeat;
     background-size: px-to-rem(24px) px-to-rem(24px);
-
     border: none;
-    border-top: 2px solid map-get($color, "accordion", "border");
-
+    border-top: 2px solid $color-base-neutrals-lighter;
     fill: $color-ux-labels-actionable;
     font-family: $fonts-display;
     color: $color-ux-labels-actionable;
-    font-weight: map-get($type, "weights", "section");
-    @include font-styles("label-medium");
-
+    font-weight: $type-weights-section;
     transition: all $transition-timing ease-in-out;
+    @include font-styles("label-medium");
     @include dataurlicon("add", $color-ux-labels-actionable);
 
-    &--large {
+    &__large {
       @include font-styles("headline-6");
-      padding: spacing(5) 0;
+      padding-block: spacing(5);
       padding-inline-end: spacing(11);
     }
 
@@ -46,8 +47,8 @@
       background-color: $color-ux-background-hover;
       border-top-color: $color-ux-borders-hover;
       color: $color-ux-labels-hover;
-      cursor: pointer;
       fill: $color-ux-labels-hover;
+      cursor: pointer;
 
       &[aria-expanded="true"] {
         @include dataurlicon("minus", $color-ux-labels-hover);
@@ -60,8 +61,7 @@
 
     @include breakpoint("medium") {
       @include font-styles("label-medium");
-
-      &--large {
+      &__large {
         @include font-styles("headline-6");
         padding: spacing(5) 0;
         padding-inline-end: spacing(11);
@@ -88,12 +88,12 @@
     transition: all $transition-timing cubic-bezier(0, 1, 0, 1);
     overflow: hidden;
 
-    .ilo--accordion--innerpanel {
+    #{$accordion}--innerpanel {
       padding-bottom: spacing(9);
       padding-top: spacing(2);
     }
 
-    &--open {
+    &__open {
       max-height: 100vh;
       transition: all $transition-timing ease-in-out;
 

package/scss/components/_breadcrumb.scss

@@ -2,67 +2,94 @@
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";
+@import "../config";
+
+.#{$prefix}--breadcrumb {
+  $breadcrumb: &;
 
-.ilo--breadcrumb {
   position: relative;
+  display: inline-block;
   z-index: 10;
 
-  &--items {
-    align-items: center;
-    background-color: $color-base-neutrals-white;
+  &--inner {
     display: inline-flex;
-    justify-content: flex-start;
-    padding-block: spacing(4);
-    padding-inline-end: 0;
+    // Local variable set in the Hero for alignment
     padding-inline-start: var(--breadcrumb-padding);
-    position: relative;
-    &.context--menu {
-      padding: 0;
+    padding-inline-end: spacing(12);
+    padding-block: spacing(4);
+    background-color: $color-base-neutrals-white;
+    @include cornercut(spacing(12), 100%, "right", "bottom");
+
+    [dir="rtl"] & {
+      @include cornercut(spacing(12), 100%, "left", "bottom");
     }
   }
 
-  &--link {
+  &--items,
+  &--context {
     align-items: center;
-    background-position: right;
-    background-repeat: no-repeat;
-    color: map-get($color, "link", "text", "default");
     display: inline-flex;
-    height: px-to-rem(16px);
-    padding-block: 0;
-    padding-inline-start: spacing(4);
-    padding-inline-end: spacing(6);
-    text-decoration: none;
-    text-decoration-thickness: px-to-rem($borders-base);
+    justify-content: flex-start;
+    list-style: none;
+  }
+
+  &--item,
+  &--context__collapse {
+    background-repeat: no-repeat;
     @include dataurlicon("breadcrumbdivider", $color-link-text-default);
+    background-position: left;
+    padding-inline: spacing(6) spacing(4);
 
     [dir="rtl"] & {
-      background-position: left;
+      background-position: right;
+      background-repeat: no-repeat;
       @include dataurlicon("breadcrumbdividerrtl", $color-link-text-default);
     }
+  }
 
-    &--label {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 40ch;
-      font-family: $fonts-copy;
-      font-weight: 400;
-      @include font-styles("body-xxs");
+  &--context {
+    $context: &;
+    position: relative;
+
+    &--button {
+      display: none;
+      padding: 0;
+      margin: 0;
+      border: none;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: 16px 4px;
+      position: relative;
+      width: px-to-rem(42px);
+      height: px-to-rem(16px);
+      @include dataurlicon("elipsis", $color-link-text-default);
+
+      &:hover {
+        cursor: pointer;
+        @include dataurlicon("elipsis", $color-base-blue-medium);
+      }
+    }
+
+    &--menu {
+      display: none;
+      position: fixed;
+      width: px-to-rem(120px);
+      z-index: 10;
 
-      &--dropdown {
-        font-family: $fonts-copy;
+      &__visible {
+        display: inline-block;
       }
     }
 
-    &:hover,
-    &:focus {
-      color: map-get($color, "link", "text", "hover");
-      text-decoration: underline;
-      text-decoration-thickness: px-to-rem($borders-base);
-      @include dataurlicon("breadcrumbdivider", $color-link-text-hover);
+    &__collapse {
+      padding-inline: spacing(3) spacing(1);
 
-      [dir="rtl"] & {
-        @include dataurlicon("breadcrumbdividerrtl", $color-link-text-hover);
+      #{$breadcrumb}--items {
+        display: none;
+      }
+
+      #{$context}--button {
+        display: inline-block;
       }
     }
   }
@@ -70,19 +97,32 @@
   &--item {
     align-items: center;
     display: flex;
-    height: px-to-rem(16px);
 
-    &.home {
+    &__first {
       align-items: center;
       display: flex;
       position: relative;
+      // Make sure arrow doesn't appear before house even in RTL
+      background: none !important;
+      // Make sure the outline is visible when focused
+      padding-inline-start: 2px;
 
-      .ilo--breadcrumb--link {
-        &--label {
-          @include isVisuallyHidden();
+      &:hover,
+      &:focus {
+        #{$breadcrumb}--link {
+          &:after {
+            @include dataurlicon("home", $color-link-text-hover);
+          }
         }
+      }
 
-        &:before {
+      #{$breadcrumb}--link {
+        background: none;
+        width: px-to-rem(16px);
+        height: px-to-rem(16px);
+        position: relative;
+
+        &:after {
           background-position: center center;
           background-repeat: no-repeat;
           content: "";
@@ -94,207 +134,34 @@
           width: px-to-rem(16px);
           @include dataurlicon("home", $color-link-text-default);
         }
-
-        [dir="rtl"] & {
-          &:before {
-            left: initial;
-            right: 0;
-          }
-        }
-      }
-
-      &:hover,
-      &:focus {
-        .ilo--breadcrumb--link {
-          &:before {
-            @include dataurlicon("home", $color-link-text-hover);
-          }
-        }
-      }
-    }
-
-    &.final {
-      .ilo--breadcrumb--link {
-        background-image: none;
       }
     }
   }
 
-  .ilo--breadcrumb--item--context {
-    align-items: flex-start;
-    display: flex;
+  &--link {
+    display: inline-flex;
+    align-items: center;
+    color: $color-link-text-default;
     height: px-to-rem(16px);
-  }
-
-  &.contextmenu {
-    .ilo--breadcrumb--item--context {
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: 16px 4px;
-      position: relative;
-      width: px-to-rem(42px);
-      @include dataurlicon("elipsis", $color-link-text-default);
-
-      &:hover {
-        cursor: pointer;
-        @include dataurlicon("elipsis", $color-base-blue-medium);
-      }
-
-      &:after {
-        background-position: center center;
-        background-repeat: no-repeat;
-        content: "";
-        display: block;
-        height: px-to-rem(16px);
-        right: -7px;
-        position: absolute;
-        top: 0;
-        width: px-to-rem(16px);
-        @include dataurlicon("breadcrumbdivider", $color-link-text-default);
-
-        [dir="rtl"] & {
-          right: auto;
-          left: -7px;
-          @include dataurlicon(
-            "breadcrumbdividerrtl",
-            $color-link-text-default
-          );
-        }
-      }
-
-      .context--menu {
-        border-radius: px-to-rem(2px);
-        background-color: $color-ux-background-highlight;
-        display: inline-block;
-        left: px-to-rem(-40px);
-        opacity: 0;
-        position: absolute;
-        top: calc(100% + 24px);
-        width: px-to-rem(120px);
-        z-index: 10;
-        @include globaltransition("opacity");
-
-        &.open {
-          opacity: 1;
-          @include globaltransition("opacity");
-        }
-
-        &:before {
-          background-position: top center;
-          background-repeat: no-repeat;
-          background-size: contain;
-          @include dataurlicon(
-            "halfsquaretriangle",
-            $color-ux-background-highlight
-          );
-          content: "";
-          height: px-to-rem(12px);
-          position: absolute;
-          left: 50%;
-          top: -#{px-to-rem(6px)};
-          transform: translateX(-50%) rotate(135deg);
-          width: px-to-rem(12px);
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        .ilo--breadcrumb--item {
-          display: inline-block;
-          height: auto;
-          padding: 0 spacing(2);
-          position: relative;
-          width: 100%;
-
-          &:last-of-type a {
-            border-bottom: none;
-          }
-
-          &:hover,
-          &:focus {
-            background-color: $color-base-blue-light;
-            text-decoration: none;
-
-            .ilo--breadcrumb--link {
-              text-decoration: underline;
-              text-decoration-thickness: px-to-rem($borders-base);
-            }
-          }
-
-          &.endsection {
-            border-bottom: px-to-rem($borders-base) solid
-              $color-base-neutrals-white;
-
-            .ilo--context-menu--link {
-              border-bottom: none;
-            }
-          }
-        }
-
-        .ilo--breadcrumb--link {
-          background: none;
-          border-bottom: px-to-rem($borders-base) solid
-            $color-base-neutrals-white;
-          color: map-get($color, "link", "text", "default");
-          display: inline-block;
-          font-family: $fonts-copy;
-          font-weight: map-get($type, "weights", "section");
-          height: auto;
-          padding: spacing(4) 0;
-          text-decoration: none;
-          width: 100%;
-          @include font-styles("body-xxs");
-
-          &:visited {
-            color: map-get($color, "link", "text", "default");
-          }
-
-          &:active {
-            color: map-get($color, "link", "text", "active");
-            outline: none;
-          }
-
-          &:hover,
-          &:focus {
-            color: map-get($color, "link", "text", "hover");
-            outline: none;
-            text-decoration: underline;
-            text-decoration-thickness: px-to-rem($borders-base);
-          }
-        }
-      }
-    }
-  }
-
-  &--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;
+    padding-block: 0;
+    text-decoration: none;
 
-      [dir="rtl"] & {
-        right: auto;
-        left: -47px;
-        transform: scaleX(-1);
-      }
-    }
+    &--label {
+      white-space: nowrap;
+      overflow-x: clip;
+      text-overflow: ellipsis;
+      max-width: 30ch;
+      font-family: $fonts-copy;
+      font-weight: 400;
+      @include font-styles("body-xxs");
 
-    &.context--menu {
-      &:after {
-        content: none;
+      &:hover,
+      &:focus {
+        color: $color-link-text-hover;
+        text-decoration: underline;
+        text-underline-offset: px-to-rem(4px);
+        text-decoration-thickness: px-to-rem(2px);
       }
     }
   }
-
-  // @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/_contextmenu.scss

@@ -8,6 +8,7 @@
   display: inline-block;
   position: relative;
   width: auto;
+  list-style: none;
 
   &:before {
     background-position: top center;

package/scss/components/_navigation.scss

@@ -595,7 +595,7 @@
 
   &::before {
     background: $brand-ilo-dark-blue;
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
+    clip-path: polygon(0 0, 100% 0, 97% 100%);
     content: "";
     display: block;
     height: 100%;
@@ -605,7 +605,7 @@
     width: 32px;
 
     [dir="rtl"] & {
-      clip-path: polygon(0 0, 0 100%, 100% 0);
+      clip-path: polygon(0 0, 0 100%, 97% 0);
       left: auto;
       right: -31px;
     }

package/scss/components/_tabs.scss

@@ -71,6 +71,7 @@
         font-family: $fonts-display;
         font-weight: 600;
         display: flex;
+        gap: spacing(1);
         height: px-to-rem(60px);
         justify-content: flex-start;
         padding-left: spacing(2);
@@ -88,13 +89,13 @@
         &.icon {
           .ilo--icon {
             height: px-to-rem(16px);
-            margin-right: px-to-rem(5px);
             order: 1;
             width: px-to-rem(16px);
           }
 
           .ilo--tabs--selection--label {
             order: 2;
+            flex: 1 1;
           }
         }
 
@@ -115,14 +116,14 @@
       }
 
       &--label {
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
         overflow: hidden;
         padding-top: spacing(1);
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
       &--item {
+        overflow: hidden;
         display: block;
         width: 100%;