@ilo-org/styles 0.9.0 → 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.9.0",
+  "version": "0.9.1",
   "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/themes": "0.2.0",
-    "@ilo-org/icons": "0.2.1"
+    "@ilo-org/icons": "0.2.1",
+    "@ilo-org/themes": "0.3.0"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/components/_file-upload.scss

@@ -78,7 +78,6 @@
 
   &--list {
     order: 4;
-    grid-area: uploads;
   }
 
   &--list-item {

package/scss/components/_formcontrol.scss

@@ -6,58 +6,103 @@
 .ilo--form-control {
   $c: &;
 
-  display: inline-grid;
   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 {
-      grid-template-rows: auto;
-      grid-template-columns: auto;
-      grid-template-areas:
-        "label input"
-        "helper ."
-        "uploads uploads";
-      column-gap: px-to-rem($spacing-padding-1);
+      // 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;
+      }
 
-      #{$c}--helper {
-        text-align: right;
+      // Upload
+      :nth-child(4) {
+        grid-area: 3 / 1 / 4 / 3;
       }
     }
 
     // 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
+      :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 {
-      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
+      :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 {
-      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);
+      // 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;
+      }
     }
   }
 

package/scss/components/_navigation.scss

@@ -583,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%;
     }
 
@@ -896,12 +901,14 @@
     padding: 80px 20px;
   }
 
+  .ilo--form,
   .ilo--searchfield {
     max-width: 618px;
     width: 100%;
   }
 
-  .ilo--fieldset {
+  .ilo--fieldset,
+  .ilo--form-control {
     width: 100%;
   }
 }

package/css/components/formgroup.css

@@ -1 +0,0 @@
-.right-to-left .ilo--form{direction:rtl}

package/scss/components/_formgroup.scss

@@ -1,9 +0,0 @@
-@use "../tokens" as *;
-@use "../functions" as *;
-@import "../mixins";
-
-.ilo--form {
-  .right-to-left & {
-    direction: rtl;
-  }
-}