@ilo-org/styles 1.9.0 → 1.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "2.0.0",
-    "@ilo-org/icons": "2.2.0",
+    "@ilo-org/icons": "2.3.0",
     "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {

package/scss/_animations.scss

@@ -2,7 +2,6 @@
 //    $ANIMATIONS
 //*------------------------------------*/
 @use "tokens" as *;
-@import "mixins";
 
 // ======================================
 // Global transition
@@ -39,3 +38,28 @@
     transform: rotate(360deg);
   }
 }
+
+// ======================================
+// Animation for loading skeletons
+// ======================================
+@mixin pulse-animation() {
+  animation-name: pulse;
+  animation-delay: 0.5s;
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/scss/_mixins.scss

@@ -3,6 +3,7 @@
 //*------------------------------------*/
 @use "tokens" as *;
 @use "functions" as *;
+@use "animations" as *;
 @use "theme/breakpoints" as *;
 
 // ======================================
@@ -544,3 +545,11 @@
     @error "Typography variant '#{$variant}' not recognized";
   }
 }
+
+@mixin skeleton-element($height, $width) {
+  height: px-to-rem($height);
+  width: $width;
+  background: var(--ilo-skeleton-element-background-color);
+
+  @include pulse-animation();
+}

package/scss/components/_card.scss

@@ -133,6 +133,7 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
     &__light {
       background: var(--ilo-color-white);
       border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+      --ilo-skeleton-element-background-color: var(--ilo-color-gray-light);
     }
 
     &__soft {

package/scss/components/_datacard.scss

@@ -18,6 +18,29 @@
       position: relative;
       width: 100%;
 
+      &#{$self}__loading {
+        --ilo-skeleton-element-background-color: var(--ilo-color-gray-base);
+        background-color: var(--ilo-color-gray-light);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--image {
+        @include skeleton-element(279px, 200px);
+        margin-top: spacing(8);
+      }
+
+      #{$self}--skeleton--label {
+        @include skeleton-element(14px, 20%);
+      }
+
+      #{$self}--skeleton--copy {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
       &--content {
         &-links-list {
           display: flex;

package/scss/components/_detailcard.scss

@@ -16,6 +16,48 @@
       padding: spacing(8) spacing(4);
       position: relative;
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(64px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 80%);
+        margin-top: spacing(4);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 85%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-4 {
+        @include skeleton-element(14px, 75%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-5 {
+        @include skeleton-element(14px, 35%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--wrap {
         display: flex;
         flex-flow: column;
@@ -103,6 +145,41 @@
 
         &__wide,
         &__fluid {
+          #{$self}--content {
+            flex: 1;
+          }
+
+          #{$self}--skeleton--image {
+            @include skeleton-element(130px, 100%);
+          }
+
+          #{$self}--skeleton--title-1 {
+            @include skeleton-element(14px, 80%);
+          }
+
+          #{$self}--skeleton--title-2 {
+            display: none;
+          }
+
+          #{$self}--skeleton--intro-1 {
+            @include skeleton-element(14px, 90%);
+          }
+          #{$self}--skeleton--intro-2 {
+            @include skeleton-element(14px, 85%);
+          }
+
+          #{$self}--skeleton--intro-3 {
+            @include skeleton-element(14px, 86%);
+          }
+
+          #{$self}--skeleton--intro-4 {
+            @include skeleton-element(14px, 50%);
+          }
+
+          #{$self}--skeleton--intro-5 {
+            display: none;
+          }
+
           @include breakpoint("md") {
             padding: spacing(8) spacing(4) spacing(8) spacing(0);
 

package/scss/components/_factlistcard.scss

@@ -56,6 +56,16 @@
         }
       }
 
+      #{$self}--skeleton--title {
+        @include skeleton-element(20px, 60%);
+        margin-bottom: spacing(4);
+      }
+
+      #{$self}--skeleton--list-item {
+        @include skeleton-element(16px, 95%);
+        display: table-cell;
+      }
+
       #{$self}--title {
         color: $brand-ilo-black;
         font-size: var(--ilo-font-size-xlg);

package/scss/components/_featurecard.scss

@@ -9,12 +9,30 @@
   &__type {
     &__feature {
       --max-width: #{px-to-rem(412px)};
-
       display: flex;
       flex-flow: column;
       margin-top: 0;
       position: relative;
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(232px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(24px, 60%);
+        margin-top: spacing(4);
+        margin-bottom: spacing(8);
+      }
+
       #{$self}--image--wrapper {
         height: 0;
         overflow: hidden;
@@ -82,6 +100,10 @@
               flex-direction: row;
             }
 
+            #{$self}--skeleton--image {
+              width: 50%;
+            }
+
             #{$self}--content {
               display: flex;
               flex-wrap: wrap;

package/scss/components/_footer.scss

@@ -1,13 +1,10 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
 
 .ilo--footer {
-  $c: &;
-
-  border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;
-  background-color: $color-base-blue-dark;
+  border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-accessible);
+  background-color: var(--ilo-color-blue-dark);
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -18,7 +15,7 @@
 
     &:after {
       content: "";
-      border-bottom: px-to-rem(6px) solid $color-base-red-medium;
+      border-bottom: px-to-rem(6px) solid var(--ilo-color-red);
       width: 200vw;
       position: absolute;
       bottom: 0;
@@ -41,36 +38,22 @@
       padding: 0;
     }
 
-    background-color: $color-base-neutrals-lighter;
+    background-color: var(--ilo-color-gray-light);
     padding: spacing(8) spacing(4) 0;
     min-height: px-to-rem(56px);
   }
 
   &--headline {
-    color: $color-base-neutrals-white;
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
+    color: var(--ilo-color-white);
     @include typography("highlight-medium-bold");
-    line-height: px-to-rem(21.6px);
-    @include textmargin(
-      "margin-bottom",
-      10px,
-      "body-small",
-      "display",
-      "body-xxs",
-      "display"
-    );
     margin-top: spacing(5);
   }
 
   &--subhead {
-    color: #bedcfa;
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "section");
+    color: var(--ilo-color-blue-light);
     margin-top: spacing(1);
-    @include typography("body-xsmall");
-    line-height: px-to-rem(18.56px);
     margin-bottom: spacing(12);
+    @include typography("body-xsmall");
   }
 
   .address {
@@ -78,16 +61,8 @@
   }
 
   .address--line {
-    color: $color-base-neutrals-white;
+    color: var(--ilo-color-white);
     @include typography("body-xsmall");
-    @include textmargin(
-      "margin-bottom",
-      8px,
-      "body-xxs",
-      "display",
-      "body-xxs",
-      "display"
-    );
   }
 
   .connect {
@@ -100,9 +75,8 @@
 
   .legal,
   .secondarylinks {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     display: inline;
-    font-family: var(--ilo-fonts-copy);
     @include typography("body-xsmall");
   }
 
@@ -120,29 +94,25 @@
   }
 
   .secondarylinks--list--item a {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     @include globaltransition("color, border-color");
 
     &:visited {
-      color: map-get($color, "link", "text-footer", "visited");
-      @include globaltransition("color, border-color");
+      color: var(--ilo-color-purple);
     }
 
     &:hover {
-      color: map-get($color, "link", "text-footer", "hover");
-      @include globaltransition("color, border-color");
+      color: var(--ilo-color-blue);
     }
 
     &:active {
-      color: map-get($color, "link", "text-footer", "active");
+      color: var(--ilo-color-blue-dark);
       outline: none;
-      @include globaltransition("color, border-color");
     }
 
     &:focus {
-      color: map-get($color, "link", "text-footer", "focus");
+      color: var(--ilo-color-blue-dark);
       outline: none;
-      @include globaltransition("color, border-color");
     }
   }
 
@@ -150,8 +120,7 @@
     // General Styles
     display: flex;
     flex-flow: row nowrap;
-    color: $color-ux-labels-actionable;
-    font-family: var(--ilo-fonts-display);
+    color: var(--ilo-color-blue-dark);
     @include typography("highlight-medium");
     position: relative;
     text-decoration: none;
@@ -159,32 +128,30 @@
 
     // Mobile styles
     justify-content: center;
-    border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
     margin: spacing(3) auto 0 auto;
     padding: spacing(4);
 
+    @include globaltransition("all");
+
     &:after {
       background-repeat: no-repeat;
       content: "";
       height: px-to-rem(24px);
       position: relative;
       margin-left: spacing(2);
-      bottom: px-to-rem(3px);
-      transform: rotateX(180deg);
-      transform-origin: center;
+      bottom: px-to-rem(2px);
       width: px-to-rem(24px);
-      @include dataurlicon("chevron_down", $color-ux-labels-actionable);
+      @include icon("chevron_up", var(--ilo-color-blue-dark));
     }
 
     &:hover {
-      background: map-get($color, "ux", "readmore", "hover", "background");
-      border-bottom: 0.1071811361rem solid $color-base-blue-medium;
-      color: $color-ux-labels-hover;
-      cursor: pointer;
-      @include globaltransition("color, background-color, border-color");
+      background: var(--ilo-color-blue-lighter);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
 
       &:after {
-        @include dataurlicon("chevron_down", $color-ux-labels-hover);
+        @include icon("chevron_up", var(--ilo-color-blue));
       }
     }
   }
@@ -233,7 +200,7 @@
     }
 
     .anchorlink {
-      bottom: 0;
+      top: px-to-rem(3px);
     }
   }
 
@@ -266,7 +233,7 @@
       align-items: flex-start;
       justify-content: flex-start;
       flex-flow: column;
-      top: 8px;
+      top: spacing(2);
     }
 
     .ilo--button {
@@ -306,12 +273,7 @@
 
     .anchorlink {
       margin: 0;
-      border: none;
       padding: spacing(1);
-
-      &:hover {
-        margin-bottom: -0.1071811361rem;
-      }
     }
   }
 

package/scss/components/_languagetoggle.scss

@@ -14,6 +14,12 @@
       --ilo--language-toggle-color: var(--ilo-color-blue-dark);
       --ilo--language-toggle-color-hover: var(--ilo-color-white);
     }
+
+    &__dark-blue {
+      --ilo--language-toggle-color: var(--ilo-color-white);
+      --ilo--language-toggle-color-hover: var(--ilo-color-blue);
+      --ilo--language-toggle-bg-hover: var(--ilo-color-white);
+    }
   }
 
   display: inline-block;
@@ -43,7 +49,7 @@
 
     &:hover,
     &:focus,
-    &__open {
+    &[aria-expanded="true"] {
       --ilo--language-toggle-color: var(--ilo--language-toggle-color-hover);
       --ilo--language-toggle-bg: var(--ilo--language-toggle-bg-hover);
     }

package/scss/components/_multilinkcard.scss

@@ -25,6 +25,44 @@
         filter: unset;
       }
 
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 10%);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(24px, 70%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(24px, 85%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--row-image,
+      #{$self}--skeleton--column-image {
+        display: none;
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 85%);
+        margin-top: spacing(6);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 60%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 55%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-4 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--image--wrapper {
         display: none;
         background-color: var(--ilo-color-blue-lighter);
@@ -78,6 +116,12 @@
         &__standard {
           --max-width: #{px-to-rem(536px)};
           padding: spacing(12) spacing(10);
+
+          #{$self}--skeleton--row-image {
+            @include skeleton-element(250px, 100%);
+            display: block;
+            margin-top: spacing(6);
+          }
         }
 
         &__narrow {
@@ -88,6 +132,12 @@
             display: none;
           }
 
+          #{$self}--skeleton--row-image {
+            @include skeleton-element(184px, 100%);
+            display: block;
+            margin-top: spacing(6);
+          }
+
           #{$self}--content {
             #{$self}--image--wrapper {
               display: block;
@@ -113,9 +163,15 @@
         &__wide,
         &__fluid {
           --max-width: #{px-to-rem(1104px)};
-
           padding: spacing(10) spacing(6) spacing(12);
 
+          #{$self}--skeleton--column-image {
+            @include skeleton-element(230px, 100%);
+            display: block;
+            // Margin for single column mobile layout
+            margin-bottom: spacing(6);
+          }
+
           #{$self}--title {
             margin-bottom: spacing(3);
           }

package/scss/components/_promocard.scss

@@ -35,6 +35,34 @@
       padding: spacing(10) spacing(6);
       width: 100%;
 
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 60px);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(24px, 90%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 78%);
+        margin-top: spacing(4);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 70%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 78%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--title {
         @include typography("heading-3");
         margin-bottom: spacing(2);

package/scss/components/_scorecard.scss

@@ -29,6 +29,25 @@
         width: 100%;
       }
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(232px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(24px, 60%);
+        margin-top: spacing(4);
+        margin-bottom: spacing(8);
+      }
+
       #{$self}--image--wrapper {
         height: 0;
         overflow: hidden;
@@ -108,6 +127,10 @@
               flex-direction: row;
             }
 
+            #{$self}--skeleton--image {
+              width: 50%;
+            }
+
             #{$self}--content {
               width: 50%;
             }