@ilo-org/styles 0.8.4 → 0.9.1

package/package.json

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

package/scss/components/_checkbox.scss

@@ -5,15 +5,16 @@
 .ilo--checkbox {
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   border: none;
   display: grid;
   height: px-to-rem(24px);
   margin: 0;
-  order: 1;
   position: relative;
   place-content: center;
   width: px-to-rem(24px);
   transform: none;
+  cursor: pointer;
 
   &:before {
     content: "";
@@ -74,10 +75,10 @@
   }
 
   &:invalid,
-  &.error,
-  .error & {
+  &__error,
+  &__error & {
     &:after {
-      background-color: $color-base-red-medium;
+      border-color: $color-base-red-medium;
     }
 
     &:checked {
@@ -87,35 +88,3 @@
     }
   }
 }
-
-.ilo--fieldset--input--checkbox {
-  align-items: center;
-  clear: both;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: px-to-rem(22px);
-
-  .ilo--fieldset--label {
-    color: $color-base-neutrals-black;
-    font-family: $fonts-copy;
-    font-size: 14.9px;
-    font-weight: 400;
-    line-height: 1;
-    margin-left: px-to-rem($spacing-padding-1);
-    margin-bottom: 0;
-    margin-top: 1px;
-    order: 2;
-
-    .right-to-left & {
-      margin-left: 0;
-      margin-right: px-to-rem($spacing-padding-1);
-    }
-  }
-
-  .ilo--fieldset--error,
-  .ilo--fieldset--helper {
-    order: 3;
-    width: 100%;
-  }
-}

package/scss/components/_datepicker.scss

@@ -3,29 +3,9 @@
 @import "../mixins";
 
 .ilo--datepicker {
-  &--range {
-    display: flex;
+  cursor: pointer;
 
-    & > .ilo--fieldset {
-      width: 50%;
-
-      &:nth-of-type(1) {
-        .ilo--input {
-          border-right: none;
-        }
-      }
-    }
-  }
-
-  .right-to-left & {
-    direction: rtl;
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
   }
 }
-
-.right-to-left
-  .ilo--datepicker--range
-  > .ilo--fieldset:nth-of-type(1)
-  .ilo--input {
-  border-left: none;
-  border-right: 0.1071811361rem solid rgb(184, 196, 204);
-}

package/scss/components/_fieldset.scss

@@ -3,36 +3,79 @@
 @import "../mixins";
 
 .ilo--fieldset {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  $gap: 24px;
+
+  @mixin flex($value) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: $value;
+    @include textmargin("gap", $gap, "label-medium", "display", 0, 0);
+  }
+
   appearance: none;
-  @include textmargin("margin-bottom", 34px, "label-medium", "display", 0, 0);
+  $c: &;
 
-  &--label {
-    display: inline-flex;
-    float: left;
+  &--legend-wrapper {
+    @include textmargin("margin-bottom", $gap, "label-medium", "display", 0, 0);
+  }
+
+  &--legend {
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "label");
     @include font-styles("label-medium");
-    @include textmargin("margin-bottom", 14px, "label-medium", "display", 0, 0);
   }
 
-  &--helper {
-    color: $color-base-neutrals-medium;
-    font-family: $fonts-copy;
-    @include font-styles("body-xxs");
-    @include textmargin(
-      "margin-top",
-      map-get($spacing, "padding-1-5"),
-      "body-xxs",
-      "copy",
-      0,
-      0
-    );
+  &--direction__column {
+    > #{$c}--elements {
+      @include flex(column);
+    }
   }
 
-  &--error {
-    color: $color-base-red-dark;
+  &--direction__row {
+    > #{$c}--elements {
+      @include flex(row);
+    }
+  }
+
+  &--direction__row-reverse {
+    > #{$c}--elements {
+      @include flex(row-reverse);
+    }
+  }
+
+  &--direction__column-reverse {
+    > #{$c}--elements {
+      @include flex(column-reverse);
+    }
+  }
+
+  &--wrap__nowrap {
+    > #{$c}--elements {
+      flex-wrap: nowrap;
+    }
+  }
+
+  &--wrap__wrap {
+    > #{$c}--elements {
+      flex-wrap: wrap;
+    }
+  }
+
+  &--wrap__wrap-reverse {
+    > #{$c}--elements {
+      flex-wrap: wrap-reverse;
+    }
+  }
+
+  &--wrap__reverse {
+    > #{$c}--elements {
+      flex-wrap: reverse;
+    }
+  }
+
+  &--helper,
+  &__error {
     font-family: $fonts-copy;
     @include font-styles("body-xxs");
     @include textmargin(
@@ -45,43 +88,21 @@
     );
   }
 
-  &.ilo--choice-group {
-    .ilo--fieldset--legend {
-      display: inline-flex;
-      float: left;
-      font-family: $fonts-display;
-      font-weight: map-get($type, "weights", "label");
-      @include font-styles("label-medium");
-      margin: 0;
-
-      & + .ilo--fieldset--helper,
-      & + .ilo--fieldset--error {
-        clear: both;
-        display: block;
-      }
-    }
+  &--helper {
+    color: $color-base-neutrals-medium;
+  }
 
-    div[class^="ilo--fieldset--input"]:first-of-type,
-    div[class*=" ilo--fieldset--input"]:first-of-type {
-      clear: both;
-      padding-top: px-to-rem($spacing-padding-3);
-    }
+  &__error {
+    color: $color-base-red-dark;
+  }
+
+  &__disabled {
+    opacity: 50%;
+    pointer-events: none;
   }
 
   .ilo--tooltip--wrapper {
     margin-left: 8px;
     margin-top: 3px;
   }
-
-  .right-to-left & {
-    direction: rtl;
-
-    .ilo--fieldset--label {
-      float: right;
-    }
-
-    &.ilo--choice-group .ilo--fieldset--legend {
-      float: right;
-    }
-  }
 }

package/scss/components/_file-upload.scss

@@ -3,14 +3,15 @@
 @import "../mixins";
 
 .ilo--file-upload {
-  color: transparent;
-  order: 3;
+  &--input {
+    order: 3;
 
-  &::-webkit-file-upload-button {
-    visibility: hidden;
-  }
+    input {
+      visibility: hidden;
+      color: transparent;
+      width: 0;
+    }
 
-  &:before {
     background-color: map-get($color, "ux", "background", "default");
     border: map-get($borders, "small")
       map-get($color, "ux", "borders", "default") solid;
@@ -23,10 +24,12 @@
     @include borderradius("button");
     @include boxpadding("button", "medium");
     @include font-styles("label-medium");
-  }
 
-  &:hover {
-    &:before {
+    .ilo--form__theme__dark & {
+      color: map-get($color, "ux", "labels", "actionable");
+    }
+
+    &:hover {
       background-color: map-get($color, "ux", "background", "hover");
       border: map-get($borders, "small")
         map-get($color, "ux", "borders", "hover") solid;
@@ -34,40 +37,34 @@
       color: map-get($color, "ux", "labels", "hover");
       outline: none;
     }
-  }
 
-  &:focus {
-    &:before {
+    &:focus {
       background-color: map-get($color, "ux", "background", "focus");
       border: map-get($borders, "small")
         map-get($color, "ux", "borders", "hover") solid;
       color: map-get($color, "ux", "labels", "focus");
       outline: none;
     }
-  }
 
-  &:focus-visible {
-    outline: none;
-  }
+    &:focus-visible {
+      outline: none;
+    }
 
-  &:active {
-    &:before {
+    &:active {
       background-color: map-get($color, "ux", "background", "active");
       border: map-get($borders, "base")
         map-get($color, "ux", "borders", "active") solid;
       color: map-get($color, "ux", "labels", "active");
     }
-  }
 
-  &:disabled {
-    opacity: 45%;
-    pointer-events: none;
-  }
+    &:disabled {
+      opacity: 45%;
+      pointer-events: none;
+    }
 
-  &:invalid,
-  &.error,
-  .error & {
-    &:before {
+    &:invalid,
+    &.error,
+    .error & {
       background-color: map-get(
         $color,
         "formelements",
@@ -84,6 +81,7 @@
   }
 
   &--list-item {
+    display: inline-block;
     background-color: $color-formelements-uploadedfile-default-background;
     @include bordervalues("uploadedfile", "formelements", "default");
     box-sizing: border-box;
@@ -96,35 +94,5 @@
     @include spacingvalues("margin", "uploadedfile", "formelements");
     outline: none;
     @include spacingvalues("padding", "uploadedfile", "formelements");
-    width: map-get(
-      $spacing,
-      "formelements",
-      "uploadedfile",
-      "default",
-      "width"
-    );
-  }
-}
-
-.file-upload div {
-  display: flex;
-  flex-direction: column;
-
-  .ilo--fieldset--label {
-    order: 1;
-  }
-
-  .ilo--fieldset--helper,
-  .ilo--fieldset--error {
-    margin-top: 0;
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-3"),
-      "label-small",
-      "display",
-      0,
-      0
-    );
-    order: 2;
   }
 }

package/scss/components/_form.scss

@@ -2,23 +2,44 @@
 @use "../functions" as *;
 @import "../mixins";
 
-.ilo--formgroup {
-  &--legend {
-    display: block;
-    font-family: $fonts-display;
-    font-weight: map-get($type, "weights", "label");
-    @include font-styles("legend");
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-5"),
-      "legend",
-      "display",
-      "label-small",
-      "display"
-    );
+.ilo--form {
+  $gap: 32px;
+  $c: &;
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  appearance: none;
+  gap: $gap;
+  color: $color-base-neutrals-black;
+
+  &__theme {
+    &__light {
+      color: $color-base-neutrals-black;
+
+      label,
+      p {
+        color: $color-base-neutrals-black;
+      }
+    }
+
+    &__dark {
+      color: $color-base-neutrals-lighter;
+
+      label,
+      p {
+        color: $color-base-neutrals-lighter;
+      }
+
+      legend {
+        color: $color-base-yellow;
+      }
+    }
   }
 
-  .right-to-left & {
-    direction: rtl;
+  &__disabled {
+    opacity: 50%;
+    pointer-events: none;
   }
 }

package/scss/components/_formcontrol.scss

@@ -0,0 +1,182 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "sass:math";
+@import "../mixins";
+
+.ilo--form-control {
+  $c: &;
+
+  grid-area: input;
+  display: inline-grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto;
+  gap: px-to-rem($spacing-padding-1);
+
+  &__label-placement {
+    // Label is to the flex start of form element
+    &__start {
+      // Label
+      :first-child {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      // Field
+      :nth-child(2) {
+        grid-area: 1 / 2 / 2 / 3;
+      }
+
+      // Helper
+      :nth-child(3) {
+        grid-area: 2 / 2 / 3 / 3;
+      }
+
+      // Upload
+      :nth-child(4) {
+        grid-area: 3 / 1 / 4 / 3;
+      }
+    }
+
+    // Label is at the end of the form element
+    &__end {
+      // Label
+      :first-child {
+        grid-area: 1 / 2 / 2 / 3;
+      }
+
+      // Field
+      :nth-child(2) {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      // Helper
+      :nth-child(3) {
+        grid-area: 2 / 1 / 3 / 3;
+      }
+
+      // Upload
+      :nth-child(4) {
+        grid-area: 3 / 1 / 4 / 3;
+      }
+    }
+
+    // Label is above form element
+    &__top {
+      // Label
+      :first-child {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      // Field
+      :nth-child(2) {
+        grid-area: 2 / 1 / 3 / 2;
+      }
+
+      // Helper
+      :nth-child(3) {
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      // Upload
+      :nth-child(4) {
+        grid-area: 4 / 1 / 5 / 2;
+      }
+    }
+
+    // Label is below form element
+    &__bottom {
+      // Label
+      :first-child {
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      // Field
+      :nth-child(2) {
+        grid-area: 2 / 1 / 3 / 2;
+      }
+
+      // Helper
+      :nth-child(3) {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      // Upload
+      :nth-child(4) {
+        grid-area: 4 / 1 / 5 / 2;
+      }
+    }
+  }
+
+  &__disabled {
+    #{$c}--label,
+    #{$c}--helper {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  &__error {
+    #{$c}--helper {
+      color: $color-base-red-dark;
+    }
+  }
+
+  &--label {
+    color: $color-base-neutrals-black;
+    grid-area: label;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    &__size {
+      &__small {
+        font-family: $fonts-copy;
+        font-size: px-to-rem(map-get($type, "label-small", "size"));
+        letter-spacing: px-to-rem(
+          map-get($type, "label-small", "letter-spacing")
+        );
+        line-height: px-to-rem(map-get($type, "label-small", "line-height"));
+        font-weight: 400;
+      }
+
+      &__medium {
+        font-family: $fonts-display;
+        font-size: px-to-rem(map-get($type, "label-medium", "size"));
+        letter-spacing: px-to-rem(
+          map-get($type, "label-medium", "letter-spacing")
+        );
+        line-height: px-to-rem(map-get($type, "label-medium", "line-height"));
+        font-weight: 700;
+      }
+
+      &__large {
+        font-family: $fonts-display;
+        font-size: px-to-rem(map-get($type, "label-large", "size"));
+        letter-spacing: px-to-rem(
+          map-get($type, "label-large", "letter-spacing")
+        );
+        line-height: px-to-rem(map-get($type, "label-large", "line-height"));
+        font-weight: 700;
+      }
+    }
+
+    label {
+      font-family: inherit;
+      font-size: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+      font-weight: inherit;
+    }
+
+    div[class*="tooltip"] {
+      margin-left: px-to-rem(math.div($spacing-padding-1, 2));
+    }
+  }
+
+  &--helper {
+    grid-area: helper;
+    color: $color-base-neutrals-medium;
+    font-family: $fonts-copy;
+    @include font-styles("body-xxs");
+  }
+}

package/scss/components/_navigation.scss

@@ -367,6 +367,7 @@
     background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
     background-size: 24px;
+    background-position-y: center;
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
@@ -374,6 +375,7 @@
     font-family: $fonts-display;
     font-weight: 500;
     padding: 16px 36px 16px 8px;
+    line-height: 24px;
     text-align: left;
     transition: all 150ms ease-out;
     width: 100%;
@@ -554,6 +556,7 @@
     background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
     background-size: 16px;
+    background-position-y: center;
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
@@ -561,6 +564,7 @@
     font-family: $fonts-display;
     font-weight: 500;
     padding: 16px 36px 16px 8px;
+    line-height: 16px;
     text-align: left;
     transition: all 150ms ease-out;
     width: 100%;
@@ -579,7 +583,12 @@
   }
 
   &--search {
-    .ilo--searchfield {
+    padding: px-to-rem(32px) 0 px-to-rem(24px);
+
+    .ilo--searchfield,
+    .ilo--form,
+    .ilo--fieldset,
+    .ilo--form-control {
       width: 100%;
     }
 
@@ -892,12 +901,14 @@
     padding: 80px 20px;
   }
 
+  .ilo--form,
   .ilo--searchfield {
     max-width: 618px;
     width: 100%;
   }
 
-  .ilo--fieldset {
+  .ilo--fieldset,
+  .ilo--form-control {
     width: 100%;
   }
 }