@ilo-org/styles 0.4.0 → 0.6.0

package/package.json

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

package/scss/components/_accordion.scss

@@ -5,6 +5,7 @@
 .ilo--accordion {
   $transition-timing: 150ms;
   $transition-timing-long: 225ms;
+  $scroll-max-height: 500px;
 
   &--button {
     align-items: center;
@@ -79,6 +80,7 @@
     --height: auto;
     color: $color-ux-labels-default;
     font-family: $fonts-copy;
+    position: relative;
     height: 0px;
     overflow: hidden;
     transition: height $transition-timing-long ease-out,
@@ -97,6 +99,12 @@
         padding $transition-timing-long ease-out;
     }
 
+    &__scroll {
+      max-height: $scroll-max-height;
+      overflow-y: auto;
+      padding-right: px-to-rem($spacing-ui-padding-xl);
+    }
+
     &.collapsing,
     &.expanding {
       height: 0;

package/scss/components/_footer.scss

@@ -94,104 +94,10 @@
     margin: px-to-rem(55px) 0;
   }
 
-  .social--headline {
-    color: $color-base-neutrals-white;
-    font-family: $fonts-display;
-    font-weight: map-get($type, "weights", "label");
-    @include font-styles("body-small");
-    @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);
-  }
-
   .social--links {
-    display: flex;
     margin-bottom: px-to-rem(45px);
   }
 
-  .social--links--link {
-    background-repeat: no-repeat;
-    background-size: contain;
-    border: 0;
-    display: inline-block;
-    height: px-to-rem(16px);
-    margin: -1px;
-    padding: 0;
-    position: absolute;
-    overflow: hidden;
-    text-indent: -999rem;
-    width: px-to-rem(16px);
-
-    &.facebook {
-      @include dataurlicon("facebook", $color-base-neutrals-lighter);
-    }
-
-    &.instagram {
-      @include dataurlicon("instagram", $color-base-neutrals-lighter);
-    }
-
-    &.twitter {
-      @include dataurlicon("twitter", $color-base-neutrals-lighter);
-    }
-
-    &.youtube {
-      @include dataurlicon("youtube", $color-base-neutrals-lighter);
-    }
-
-    &.tiktok {
-      @include dataurlicon("tiktok", $color-base-neutrals-lighter);
-    }
-
-    &.flickr {
-      @include dataurlicon("flickr", $color-base-neutrals-lighter);
-    }
-  }
-
-  .social--links--item {
-    align-items: center;
-    background-color: transparent;
-    border-radius: px-to-rem(3px);
-    display: flex;
-    height: px-to-rem(24px);
-    justify-content: center;
-    margin-right: px-to-rem(20px);
-    position: relative;
-    width: px-to-rem(24px);
-
-    &:last-of-type {
-      margin-right: none;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $color-base-blue-light;
-
-      .social--links--link {
-        &.facebook {
-          @include dataurlicon("facebook", $color-base-blue-medium);
-        }
-
-        &.instagram {
-          @include dataurlicon("instagram", $color-base-blue-medium);
-        }
-
-        &.twitter {
-          @include dataurlicon("twitter", $color-base-blue-medium);
-        }
-
-        &.youtube {
-          @include dataurlicon("youtube", $color-base-blue-medium);
-        }
-
-        &.tiktok {
-          @include dataurlicon("tiktok", $color-base-blue-medium);
-        }
-
-        &.flickr {
-          @include dataurlicon("flickr", $color-base-blue-medium);
-        }
-      }
-    }
-  }
-
   .legal,
   .secondarylinks {
     color: $color-base-neutrals-medium;
@@ -364,10 +270,6 @@
       margin: 0 0 0 calc(18.9% + 64px);
     }
 
-    .social--headline {
-      text-align: left;
-    }
-
     .ilo--button {
       align-self: start;
       justify-self: start;
@@ -396,18 +298,6 @@
       text-align: right;
     }
 
-    .social--links {
-      flex-direction: row-reverse;
-    }
-
-    .social--links--item:first-of-type {
-      margin-right: 0;
-    }
-
-    .social--links--link {
-      text-indent: 999em;
-    }
-
     .legal,
     .secondarylinks {
       display: block;

package/scss/components/_herocard.scss

@@ -157,148 +157,4 @@
       @include font-styles("headline-2");
     }
   }
-
-  &--list {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 24px;
-  }
-
-  // @TODO: This should really be moved out into its own component
-  &--link {
-    color: map-get($color, "hero", "card", "light", "link", "color");
-    display: inline-block;
-    overflow: hidden;
-    padding: 0 5px;
-    text-indent: -999px;
-    width: 100%;
-
-    &.icon {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: auto 16px;
-      border-radius: 2px;
-      display: inline-block;
-      color: map-get($color, "hero", "card", "light", "icon", "color");
-      height: 24px;
-      width: px-to-rem(24px);
-
-      &:hover {
-        background-color: map-get(
-          $color,
-          "hero",
-          "card",
-          "light",
-          "iconhover",
-          "background"
-        );
-        transition: all 0.1s ease-in-out;
-      }
-
-      #{$c}__theme__dark,
-      .ilo--hero-card__background__transparent & {
-        color: map-get($color, "hero", "card", "dark", "icon", "color");
-
-        &:hover {
-          background-color: map-get(
-            $color,
-            "hero",
-            "card",
-            "dark",
-            "iconhover",
-            "background"
-          );
-        }
-      }
-
-      &--facebook {
-        @include dataurlicon(
-          "facebook",
-          map-get($color, "hero", "card", "light", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "facebook",
-            map-get($color, "hero", "card", "light", "iconhover", "color")
-          );
-        }
-
-        #{$c}__theme__dark &,
-        .ilo--hero-card__background__transparent & {
-          @include dataurlicon(
-            "facebook",
-            map-get($color, "hero", "card", "dark", "icon", "color")
-          );
-
-          &:hover {
-            @include dataurlicon(
-              "facebook",
-              map-get($color, "hero", "card", "dark", "iconhover", "color")
-            );
-          }
-        }
-      }
-
-      &--twitter {
-        @include dataurlicon(
-          "twitter",
-          map-get($color, "hero", "card", "light", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "twitter",
-            map-get($color, "hero", "card", "light", "iconhover", "color")
-          );
-        }
-
-        #{$c}__theme__dark &,
-        .ilo--hero-card__background__transparent & {
-          @include dataurlicon(
-            "twitter",
-            map-get($color, "hero", "card", "dark", "icon", "color")
-          );
-
-          &:hover {
-            @include dataurlicon(
-              "twitter",
-              map-get($color, "hero", "card", "dark", "iconhover", "color")
-            );
-          }
-        }
-      }
-
-      &--linkedin {
-        @include dataurlicon(
-          "linkedin",
-          map-get($color, "hero", "card", "light", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "linkedin",
-            map-get($color, "hero", "card", "light", "iconhover", "color")
-          );
-        }
-
-        #{$c}__theme__dark &,
-        .ilo--hero-card__background__transparent & {
-          @include dataurlicon(
-            "linkedin",
-            map-get($color, "hero", "card", "dark", "icon", "color")
-          );
-
-          &:hover {
-            @include dataurlicon(
-              "linkedin",
-              map-get($color, "hero", "card", "dark", "iconhover", "color")
-            );
-          }
-        }
-      }
-    }
-  }
 }

package/scss/components/_logogrid.scss

@@ -0,0 +1,52 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--logo-grid {
+  $c: &;
+
+  &--logos {
+    display: flex;
+    flex-flow: row wrap;
+    grid-gap: px-to-rem(16px);
+  }
+
+  &--link {
+    text-decoration: none;
+    transition: background-color 0.2s ease-in-out;
+
+    #{$c}__theme__light &,
+    #{$c}__theme__dark & {
+      &:hover {
+        background-color: map-get($color, "ux", "background", "hover");
+      }
+    }
+  }
+
+  &--item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: px-to-rem(134px);
+    flex: 100%;
+
+    @include breakpoint("small") {
+      flex: 0 0 px-to-rem(238px);
+    }
+
+    #{$c}__theme__light & {
+      background-color: map-get($color, "ux", "background", "highlight");
+    }
+
+    #{$c}__theme__dark & {
+      background-color: map-get($color, "ux", "background", "default");
+    }
+
+    img {
+      width: auto;
+      height: auto;
+      max-width: px-to-rem(150px);
+      max-height: px-to-rem(50px);
+    }
+  }
+}

package/scss/components/_socialmedia.scss

@@ -0,0 +1,154 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../animations";
+@import "../mixins";
+
+.ilo--social-media {
+  $c: &;
+  $default-theme: "light";
+  $icon-size: map-get($spacing, "icons", "icon-height-lg");
+
+  @mixin get-icon($icon, $theme: $default-theme) {
+    @include dataurlicon(
+      $icon,
+      map-get($color, "socialmedia", $theme, "icon", "color")
+    );
+
+    &:hover {
+      @include dataurlicon(
+        $icon,
+        map-get($color, "socialmedia", $theme, "iconhover", "color")
+      );
+    }
+  }
+
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+
+  &__justify__center {
+    align-items: center;
+  }
+
+  .right-to-left & {
+    .social--links {
+      flex-direction: row-reverse;
+    }
+
+    * {
+      text-align: right;
+    }
+  }
+
+  &--headline {
+    color: map-get($color, "socialmedia", $default-theme, "headline", "color");
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    @include font-styles("body-small");
+    @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);
+
+    #{$c}__theme__dark & {
+      color: map-get($color, "socialmedia", "dark", "headline", "color");
+    }
+  }
+
+  &--list {
+    display: inline-flex;
+    flex-flow: row wrap;
+    gap: map-get($spacing, "icons", "icon-padding-lg");
+
+    &--item {
+      display: inline-block;
+      overflow: hidden;
+      position: relative;
+
+      &--icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: auto #{$icon-size};
+        text-indent: -999px;
+        border-radius: 2px;
+        display: inline-block;
+        height: px-to-rem($icon-size + 8px);
+        width: px-to-rem($icon-size + 8px);
+        transition: all 0.1s ease-in-out;
+
+        &:hover {
+          background-color: map-get(
+            $color,
+            "socialmedia",
+            $default-theme,
+            "iconhover",
+            "background"
+          );
+        }
+
+        #{$c}__theme__dark &:hover {
+          background-color: map-get(
+            $color,
+            "socialmedia",
+            "dark",
+            "iconhover",
+            "background"
+          );
+        }
+
+        &__facebook {
+          @include get-icon("facebook");
+
+          #{$c}__theme__dark & {
+            @include get-icon("facebook", "dark");
+          }
+        }
+
+        &__twitter {
+          @include get-icon("twitter");
+
+          #{$c}__theme__dark & {
+            @include get-icon("twitter", "dark");
+          }
+        }
+
+        &__instagram {
+          @include get-icon("instagram");
+
+          #{$c}__theme__dark & {
+            @include get-icon("instagram", "dark");
+          }
+        }
+
+        &__youtube {
+          @include get-icon("youtube");
+
+          #{$c}__theme__dark & {
+            @include get-icon("youtube", "dark");
+          }
+        }
+
+        &__linkedin {
+          @include get-icon("linkedin");
+
+          #{$c}__theme__dark & {
+            @include get-icon("linkedin", "dark");
+          }
+        }
+
+        &__flickr {
+          @include get-icon("flickr");
+
+          #{$c}__theme__dark & {
+            @include get-icon("flickr", "dark");
+          }
+        }
+
+        &__tiktok {
+          @include get-icon("tiktok");
+
+          #{$c}__theme__dark & {
+            @include get-icon("tiktok", "dark");
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_tabs.scss

@@ -134,6 +134,7 @@
     }
 
     .ilo--tabs--content {
+      background-color: $color-base-neutrals-white;
       padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-3)
         px-to-rem($spacing-padding-7) px-to-rem($spacing-padding-3);
 

package/scss/components/index.scss

@@ -25,6 +25,7 @@
 @use "list";
 @use "loading";
 @use "logo";
+@use "logogrid";
 @use "modal";
 @use "navigation";
 @use "notification";
@@ -41,3 +42,4 @@
 @use "tag";
 @use "tooltip";
 @use "video";
+@use "socialmedia";