@ilo-org/styles 0.8.3 → 0.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.8.3",
+  "version": "0.9.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.1",
-    "@ilo-org/themes": "0.2.0"
+    "@ilo-org/themes": "0.2.0",
+    "@ilo-org/icons": "0.2.1"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/components/_cardgroup.scss

@@ -4,6 +4,7 @@
 
 .ilo--cardgroup {
   $c: &;
+  $gap-size: px-to-rem(32px);
 
   &__collapsed {
     #{$c}--inner {
@@ -11,74 +12,40 @@
     }
   }
 
-  &__justify {
-    &__start {
-      #{$c}--inner {
-        justify-content: flex-start;
-      }
-    }
-
-    &__between {
-      #{$c}--inner {
-        justify-content: space-between;
-      }
-    }
-
-    &__center {
-      #{$c}--inner {
-        justify-content: center;
-      }
-    }
-  }
-
   &__count {
     @include breakpoint("large") {
       &__one {
         #{$c}--inner {
-          gap: 0;
-        }
-
-        #{$c}--card {
-          flex: 1 1 100%;
+          grid-template-columns: 1fr;
         }
       }
 
       &__two {
         #{$c}--inner {
-          gap: 16px;
-        }
-
-        #{$c}--card {
-          flex: 0 1 calc(50% - 16px);
+          grid-template-columns: repeat(2, 1fr);
         }
       }
 
       &__three {
         #{$c}--inner {
-          gap: 21px;
-        }
-
-        #{$c}--card {
-          flex: 0 1 calc(33.3333% - 21px);
+          grid-template-columns: repeat(3, 1fr);
         }
       }
 
       &__four {
         #{$c}--inner {
-          gap: 24px;
-        }
-
-        #{$c}--card {
-          flex: 0 1 calc(25% - 24px);
+          grid-template-columns: repeat(4, 1fr);
         }
       }
     }
   }
 
   &--inner {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    column-gap: $gap-size;
+    row-gap: $gap-size;
     margin: auto;
     width: 100%;
 
@@ -90,6 +57,8 @@
   .ilo--card,
   .ilo--card--wrapper {
     height: 100%;
+    width: 100%;
+    max-width: 100%;
   }
 
   &--button-wrap {

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",
@@ -81,9 +78,11 @@
 
   &--list {
     order: 4;
+    grid-area: uploads;
   }
 
   &--list-item {
+    display: inline-block;
     background-color: $color-formelements-uploadedfile-default-background;
     @include bordervalues("uploadedfile", "formelements", "default");
     box-sizing: border-box;
@@ -96,35 +95,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,137 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "sass:math";
+@import "../mixins";
+
+.ilo--form-control {
+  $c: &;
+
+  display: inline-grid;
+  grid-area: input;
+
+  &__label-placement {
+    // Label is to the flex start of form element
+    &__start {
+      grid-template-rows: auto;
+      grid-template-columns: auto;
+      grid-template-areas:
+        "label input"
+        "helper ."
+        "uploads uploads";
+      column-gap: px-to-rem($spacing-padding-1);
+
+      #{$c}--helper {
+        text-align: right;
+      }
+    }
+
+    // Label is at the end of the form element
+    &__end {
+      grid-template-rows: auto;
+      grid-template-columns: auto;
+      grid-template-areas:
+        "input    label"
+        ".        helper"
+        "uploads uploads";
+      column-gap: px-to-rem($spacing-padding-1);
+    }
+
+    // Label is above form element
+    &__top {
+      grid-template-rows: auto auto auto;
+      grid-template-columns: auto;
+      grid-template-areas:
+        "label"
+        "input"
+        "downloads"
+        "helper";
+      row-gap: px-to-rem($spacing-padding-1);
+    }
+
+    // Label is below form element
+    &__bottom {
+      grid-template-rows: auto auto auto;
+      grid-template-columns: auto;
+      grid-template-areas:
+        "helper"
+        "input"
+        "downloads"
+        "label";
+      row-gap: px-to-rem($spacing-padding-1);
+    }
+  }
+
+  &__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");
+  }
+}