@ilo-org/styles 1.10.0 → 1.10.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "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.3.0",
+    "@ilo-org/icons": "2.4.0",
     "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {

package/scss/_animations.scss

@@ -63,3 +63,25 @@
     opacity: 1;
   }
 }
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/scss/components/_audioplayer.scss

@@ -0,0 +1,206 @@
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--audio-player {
+  &--progress-bar {
+    height: px-to-rem(8px);
+    background-color: var(--ilo-color-gray-accessible);
+    position: relative;
+    cursor: pointer;
+  }
+  &--progress-complete {
+    --progress: 0%;
+    width: var(--progress);
+    height: 100%;
+    background-color: var(--ilo-color-yellow-500);
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: width 0.5s;
+  }
+  &--body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "left left"
+      "center right";
+    align-items: center;
+    color: var(--ilo-color-white);
+    background-color: var(--ilo-color-gray-charcoal);
+    padding: spacing(3) 0;
+    row-gap: spacing(3);
+  }
+  &--left {
+    grid-area: left;
+    border-bottom: 1px solid var(--ilo-color-gray-accessible);
+    padding-inline: spacing(3);
+    padding-block-end: spacing(3);
+  }
+  &--track-name {
+    font-size: var(--ilo-font-size-sm);
+    font-weight: var(--ilo-font-weight-medium);
+    line-height: var(--ilo-line-height-lg);
+  }
+  &--track-details {
+    display: flex;
+    font-size: var(--ilo-font-size-xsm);
+    line-height: var(--ilo-line-height-xlg);
+    color: var(--ilo-color-gray-light);
+  }
+  &--track-creator::before {
+    content: "•";
+    margin-right: spacing(2);
+  }
+  &--track-programme {
+    text-wrap: nowrap;
+  }
+  &--track-creator {
+    margin-left: spacing(2);
+    text-wrap: nowrap;
+  }
+  &--center {
+    grid-area: center;
+    display: flex;
+    align-items: center;
+    gap: spacing(1);
+    padding-inline-start: spacing(3);
+  }
+  &--skip-button {
+    border: none;
+    display: flex;
+    cursor: pointer;
+    padding: spacing(2);
+  }
+  &--skip-button:hover {
+    background-color: var(--ilo-color-brand-100);
+    color: var(--ilo-color-brand-600);
+  }
+  &--play-button {
+    display: flex;
+    align-items: center;
+    background-color: var(--ilo-color-yellow-500);
+    color: var(--ilo-color-brand-800);
+    border-radius: 50%;
+    cursor: pointer;
+    padding: spacing(1);
+    border: none;
+  }
+  &--play-button:hover {
+    background-color: var(--ilo-color-brand-100);
+  }
+  [aria-label="Play"] &--play-icon {
+    display: block;
+  }
+  [aria-label="Play"] &--pause-icon {
+    display: none;
+  }
+  [aria-label="Pause"] &--play-icon {
+    display: none;
+  }
+  [aria-label="Pause"] &--pause-icon {
+    display: block;
+  }
+  &--right {
+    grid-area: right;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-inline-end: spacing(3);
+  }
+  &--duration {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  &--duration-played {
+    font-size: var(--ilo-font-size-sm);
+    font-weight: var(--ilo-font-weight-bold);
+    line-height: var(--ilo-line-height-lg);
+  }
+  &--duration-total {
+    color: var(--ilo-color-gray-light);
+    font-size: var(--ilo-font-size-2xsm);
+    line-height: var(--ilo-line-height-2xlg);
+  }
+  &--separator {
+    height: 32px;
+    border-left: 1px solid var(--ilo-color-gray-accessible);
+    margin: spacing(1) spacing(3);
+  }
+  &--volume-icon {
+    border: none;
+    background: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+  [aria-label="Mute"] &--sound-on-icon {
+    display: block;
+  }
+  [aria-label="Mute"] &--sound-off-icon {
+    display: none;
+  }
+  [aria-label="Unmute"] &--sound-on-icon {
+    display: none;
+  }
+  [aria-label="Unmute"] &--sound-off-icon {
+    display: block;
+  }
+  &--volume-slider {
+    --progress: 100%;
+    margin-left: spacing(1);
+    background: var(--ilo-color-yellow-500);
+    border-radius: 4px;
+    height: 4px;
+    width: 50%;
+    background: linear-gradient(
+      to right,
+      var(--ilo-color-yellow-500) 0%,
+      var(--ilo-color-yellow-500) var(--progress, 50%),
+      var(--ilo-color-gray-accessible) var(--progress, 50%),
+      var(--ilo-color-gray-accessible) 100%
+    );
+    [dir="rtl"] & {
+      background: linear-gradient(
+        to left,
+        var(--ilo-color-yellow-500) 0%,
+        var(--ilo-color-yellow-500) var(--progress, 50%),
+        var(--ilo-color-gray-accessible) var(--progress, 50%),
+        var(--ilo-color-gray-accessible) 100%
+      );
+    }
+  }
+  &--volume-slider::-webkit-slider-thumb {
+    // Reset default styles
+    border: none;
+    -webkit-appearance: none;
+
+    width: 16px;
+    height: 16px;
+    background: var(--ilo-color-gray-light);
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: -2px; // Center thumb on track
+  }
+
+  @include breakpoint("md") {
+    &--body {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: auto;
+      grid-template-areas: "left center right";
+    }
+    &--left {
+      border-bottom: none;
+      padding-inline: spacing(3) 0;
+      padding-block: 0;
+    }
+    &--center {
+      justify-content: center;
+      padding: 0;
+    }
+    &--volume-slider {
+      width: 40%;
+    }
+  }
+}

package/scss/components/_video.scss

@@ -175,7 +175,7 @@
     // Fullscreen control
     .vjs-fullscreen-control {
       order: 5;
-      @include videobutton("fullscreen", "standard");
+      @include videobutton("fullscreen");
     }
 
     // Duration Bar
@@ -332,4 +332,10 @@
       }
     }
   }
+
+  .vjs-fullscreen {
+    .vjs-fullscreen-control {
+      @include videobutton("reduce");
+    }
+  }
 }

package/scss/components/index.scss

@@ -57,3 +57,5 @@
 @use "socialmedia";
 @use "languagetoggle";
 @use "navigation/index.scss";
+@use "photogallery";
+@use "audioplayer";

package/scss/components/photogallery/_expandable-caption.scss

@@ -0,0 +1,92 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--photo-gallery-expandable-caption {
+  position: relative;
+  $self: &;
+  min-height: px-to-rem(56px);
+
+  &__preview {
+    padding: spacing(4);
+    min-height: px-to-rem(56px);
+    display: flex;
+    justify-content: space-between;
+    gap: spacing(1);
+    align-items: center;
+    color: var(--ilo-color-white);
+    animation: slideDown 0.2s ease-out;
+  }
+
+  &__text {
+    @include typography("body-xsmall");
+    line-height: normal;
+    position: relative;
+    padding-left: spacing(4);
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0;
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: spacing(4);
+      text-align: right;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: px-to-rem(3px);
+      height: 100%;
+      background-color: var(--ilo-color-gray-light);
+
+      [dir="rtl"] & {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+
+  &__toggle {
+    border: none;
+    outline: none;
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+    background: transparent;
+    color: var(--ilo-color-white);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &--expanded {
+    #{$self}__preview {
+      overflow: visible;
+      white-space: normal;
+      text-overflow: unset;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 0, 0, 0.8);
+      color: var(--ilo-color-white);
+      animation: slideUp 0.2s ease-out;
+      align-items: flex-start;
+    }
+
+    #{$self}__text {
+      overflow: visible;
+      white-space: normal;
+      text-overflow: unset;
+    }
+  }
+}

package/scss/components/photogallery/_lightbox.scss

@@ -0,0 +1,70 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: none;
+  opacity: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ilo-color-gray-charcoal);
+
+  &--open {
+    display: flex;
+    opacity: 1;
+  }
+
+  &__backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--ilo-color-gray-charcoal);
+  }
+
+  &__container {
+    position: relative;
+    width: 100svw;
+    height: 100%;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+  }
+
+  &__close {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 10000;
+    background: var(--ilo-color-white);
+    border: none;
+    width: px-to-rem(40px);
+    height: px-to-rem(40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ilo-color-gray-charcoal);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-blue);
+    }
+
+    &:focus {
+      outline: 2px solid var(--ilo-color-blue);
+      outline-offset: 2px;
+    }
+  }
+}

package/scss/components/photogallery/_lightboxgallery.scss

@@ -0,0 +1,254 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--lightbox-gallery {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+
+  &__core {
+    width: 100%;
+    height: 70svh;
+
+    @include breakpoint("md") {
+      height: 80svh;
+    }
+
+    &__viewport {
+      overflow: hidden;
+      width: 100%;
+    }
+
+    &__container {
+      display: flex;
+      touch-action: pan-y pinch-zoom;
+      margin-left: calc(spacing(5) * -1);
+    }
+
+    &__slide {
+      transform: translate3d(0, 0, 0);
+      flex: 0 0 100%;
+      padding-left: spacing(5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: visible;
+      height: 70svh;
+
+      @include breakpoint("md") {
+        height: 80svh;
+      }
+    }
+
+    &__image-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      @include breakpoint("md") {
+        display: block;
+        height: 100%;
+        width: auto;
+      }
+
+      &-credit {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        color: var(--ilo-color-white);
+        height: 25px;
+        display: flex;
+        @include typography("body-xsmall");
+        margin-bottom: -1px;
+
+        [dir="rtl"] & {
+          left: auto;
+          right: 0;
+        }
+
+        &-text {
+          padding: spacing(1) spacing(3);
+          display: flex;
+          align-items: center;
+          background-color: var(--ilo-color-gray-charcoal);
+        }
+
+        &-corner {
+          display: block;
+          width: px-to-rem(25px);
+          height: px-to-rem(25px);
+          background-color: var(--ilo-color-gray-charcoal);
+          clip-path: polygon(0 0, 0% 100%, 100% 100%);
+          margin-left: px-to-rem(-0.5px);
+
+          @include breakpoint("md") {
+            margin-left: 0;
+            margin-right: 0;
+          }
+
+          [dir="rtl"] & {
+            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+            margin-left: 0;
+            margin-right: px-to-rem(-0.5px);
+          }
+        }
+      }
+
+      img {
+        width: 100%;
+        object-fit: contain;
+
+        @include breakpoint("md") {
+          height: 70svh;
+
+          @include breakpoint("md") {
+            height: 80svh;
+          }
+          aspect-ratio: unset;
+        }
+      }
+    }
+  }
+
+  &__bar {
+    height: 30svh;
+
+    @include breakpoint("md") {
+      height: 20svh;
+    }
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @include breakpoint("md") {
+      justify-content: space-evenly;
+    }
+  }
+
+  &__caption {
+    display: block;
+
+    @include breakpoint("md") {
+      display: none;
+    }
+  }
+
+  &__extra {
+    display: none;
+    height: px-to-rem(80px);
+    padding: spacing(4) spacing(10);
+    align-items: center;
+    justify-content: space-between;
+
+    @include breakpoint("md") {
+      display: flex;
+    }
+
+    &-text {
+      color: var(--ilo-color-white);
+      @include typography("body-small");
+      position: relative;
+      padding-left: spacing(4);
+      text-align: left;
+      flex-basis: 70%;
+
+      [dir="rtl"] & {
+        padding-left: 0;
+        padding-right: spacing(4);
+        text-align: right;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: px-to-rem(3px);
+        height: 100%;
+        background-color: var(--ilo-color-gray-light);
+
+        [dir="rtl"] & {
+          left: auto;
+          right: 0;
+        }
+      }
+    }
+  }
+
+  &__thumbnails {
+    &__carousel {
+      overflow: hidden;
+      padding-inline: spacing(2);
+    }
+
+    &__container {
+      display: flex;
+      gap: spacing(2);
+    }
+
+    &__slide {
+      display: flex;
+    }
+
+    &__image {
+      position: relative;
+      width: px-to-rem(90px);
+      border: none;
+      outline: none;
+      background-color: var(--ilo-color-gray-light);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      &:focus {
+        outline: px-to-rem(2px) solid var(--ilo-color-blue);
+        outline-offset: px-to-rem(2px);
+      }
+
+      @include breakpoint("md") {
+        width: px-to-rem(160px);
+      }
+
+      img {
+        height: inherit;
+        width: inherit;
+        aspect-ratio: 16/9;
+        object-fit: contain;
+      }
+
+      &--selected,
+      &:hover {
+        z-index: 2;
+
+        &::after {
+          width: inherit;
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            0deg,
+            rgba(30, 45, 190, 0.4) 0%,
+            rgba(30, 45, 190, 0.4) 100%
+          );
+          pointer-events: none;
+          border-bottom: px-to-rem(4) solid var(--ilo-color-blue);
+        }
+      }
+    }
+  }
+
+  &__controls {
+    display: block;
+    padding: spacing(4);
+
+    @include breakpoint("md") {
+      display: none;
+    }
+  }
+}