@funidata/fudis-core 2.1.0 → 2.2.0-rc.0

package/_styles.scss

@@ -11,8 +11,10 @@
 @forward './src/components/alert/alert';
 @forward './src/components/button/button';
 @forward './src/components/badge/badge';
+@forward './src/components/breadcrumbs/breadcrumbs';
 @forward './src/components/checkbox/checkbox';
 @forward './src/components/checkbox-group/checkbox-group';
+@forward './src/components/description-list/description-list';
 @forward './src/components/error-summary/error-summary';
 @forward './src/components/fieldset/fieldset';
 @forward './src/components/guidance/guidance';
@@ -25,6 +27,8 @@
 @forward './src/components/popover/popover';
 @forward './src/components/radio-button/radio-button';
 @forward './src/components/radio-button-group/radio-button-group';
+@forward './src/components/table/table';
+@forward './src/components/table/table-mixins';
 @forward './src/components/tab-navigation/tab-navigation';
 @forward './src/components/text-area/text-area';
 @forward './src/components/text-input/text-input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funidata/fudis-core",
-  "version": "2.1.0",
+  "version": "2.2.0-rc.0",
   "description": "Core styles and foundations for Fudis Design System",
   "files": [
     "src",

package/src/components/breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,24 @@
+@use '../../foundations/utilities/mixins.scss' as utilities;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+
+.fudis-breadcrumbs {
+  @include typography.body-text-md-regular;
+  @include utilities.box-reset;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: spacing.$spacing-md;
+  list-style: none;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    min-height: spacing.$spacing-lg;
+
+    &-link {
+      @include typography.link-inherit;
+    }
+  }
+}

package/src/components/button/button.scss

@@ -24,7 +24,7 @@
     @include focus.focus-generic;
   }
 
-  &:has(&__icon):not(&__label--hidden) {
+  &:has(&__icon) {
     padding-left: 0;
   }
 
@@ -63,7 +63,7 @@
       min-height: spacing.$spacing-lg;
     }
 
-    &__icon-only {
+    &__extra-small {
       padding: 0;
       width: spacing.$spacing-lg;
       min-width: initial;
@@ -71,12 +71,6 @@
     }
   }
 
-  &__label {
-    &--hidden {
-      padding: 0 spacing.$spacing-xs;
-    }
-  }
-
   &__icon {
     position: relative;
     width: spacing.$spacing-lg;

package/src/components/checkbox/checkbox.scss

@@ -52,6 +52,7 @@
 
     &__box {
       @include borders.border('1px', 'solid', 'gray-middle');
+      @include colorMixins.bg-color('white');
 
       display: flex;
       position: absolute;

package/src/components/description-list/description-list.scss

@@ -0,0 +1,95 @@
+@use '../../foundations/colors/mixins' as colorMixin;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/typography/mixins' as typography;
+@use '../../foundations/typography/tokens.scss' as typographyTokens;
+@use '../../foundations/utilities/mixins.scss' as utilities;
+
+.fudis-dl {
+  @include utilities.box-reset;
+
+  .fudis-dl-item {
+    @include utilities.box-reset;
+
+    display: block;
+    min-height: spacing.$spacing-md;
+  }
+
+  .fudis-dl-item-term {
+    &__regular {
+      @include typography.description-list-key-typography;
+      @include colorMixin.text-color('gray-dark');
+
+      display: flex;
+      align-items: flex-start;
+      margin: spacing.$spacing-xxs 0;
+      min-height: spacing.$spacing-md;
+    }
+
+    &__compact {
+      @include typography.description-list-compact-key-typography;
+      @include colorMixin.text-color('gray-dark');
+
+      display: inline-block;
+      position: relative;
+      padding-left: spacing.$spacing-xs;
+
+      &::before {
+        @include colorMixin.bg-color('gray-middle');
+
+        display: inline-block;
+        position: absolute;
+        top: spacing.$pixel-2;
+        left: 0;
+        width: spacing.$pixel-1;
+        height: 80%;
+        content: '';
+      }
+
+      &__colon {
+        font-weight: typographyTokens.$font-weight-light;
+      }
+    }
+  }
+
+  .fudis-dl-item-details {
+    &__regular {
+      @include typography.description-list-value-typography;
+      @include colorMixin.text-color('gray-dark');
+
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+      min-height: spacing.$spacing-sm;
+
+      &__parenthesis {
+        display: none;
+      }
+
+      &__sub-heading {
+        @include colorMixin.text-color('gray-dark');
+        @include typography.description-list-value-typography;
+
+        margin-top: 0;
+        margin-bottom: spacing.$spacing-xxs;
+        font-weight: typographyTokens.$font-weight-regular;
+      }
+    }
+
+    &__compact {
+      @include typography.description-list-compact-value-typography;
+      @include colorMixin.text-color('gray-dark');
+
+      display: inline-block;
+      margin-left: 0;
+      padding-left: spacing.$spacing-xxs;
+
+      &__parenthesis {
+        display: initial;
+      }
+
+      &__sub-heading {
+        @include utilities.box-reset;
+      }
+    }
+  }
+}

package/src/components/error-summary/error-summary.scss

@@ -21,6 +21,8 @@
     list-style: none;
 
     &__item {
+      @include typography.body-text-md-regular;
+
       position: relative;
       margin-left: spacing.$spacing-sm;
       padding-left: spacing.$spacing-xxs;

package/src/components/link/link.scss

@@ -15,4 +15,15 @@
       @include typography.link-lg;
     }
   }
+
+  &__external {
+    padding-right: spacing.$spacing-lg;
+
+    &__icon {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+    }
+  }
 }

package/src/components/radio-button/radio-button.scss

@@ -43,6 +43,7 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
 
     &__control {
       @include border.border('1px', 'solid', 'gray-middle');
+      @include colorMixin.bg-color('white');
 
       display: inline-flex;
       top: 0;

package/src/components/tab-navigation/tab-navigation.scss

@@ -9,6 +9,55 @@
 .fudis-tab-navigation-bar {
   position: relative;
 
+  &__button-container {
+    @include colorMixin.bg-color('white');
+
+    &--right {
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: 0;
+      align-items: flex-start;
+      justify-content: flex-end;
+      width: spacing.$spacing-xl;
+      height: spacing.$tab-navigation-button-height;
+    }
+
+    &--left {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: spacing.$spacing-xl;
+      height: spacing.$tab-navigation-button-height;
+    }
+
+    &__button {
+      @include colorMixin.bg-color('white');
+
+      position: absolute;
+      top: 50%;
+      transform: translate(0, -50%);
+      border-style: none;
+      cursor: pointer;
+      padding: 0;
+
+      &:focus {
+        @include focus.focus-generic;
+      }
+
+      &--right {
+        right: 0;
+      }
+
+      &--left {
+        left: 0;
+      }
+    }
+  }
+
   &__wrapper {
     &--primary {
       border-bottom: solid spacing.$pixel-1 color.$color-gray-dark;

package/src/components/table/table-mixins.scss

@@ -0,0 +1,153 @@
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/spacing/tokens' as spacing;
+@use '../../foundations/colors/tokens' as color;
+
+@mixin fudis-table-default {
+  width: 100%;
+  border-collapse: collapse;
+
+  &__caption {
+    @include typography.table-caption;
+
+    padding-bottom: spacing.$spacing-xs;
+    caption-side: top;
+    text-align: left;
+  }
+
+  &__header {
+    @include typography.table-header;
+
+    border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
+    padding: spacing.$spacing-sm;
+    vertical-align: bottom;
+
+    &__align {
+      &__left {
+        text-align: left;
+      }
+
+      &__center {
+        text-align: center;
+      }
+
+      &__right {
+        text-align: right;
+      }
+    }
+  }
+
+  &__cell {
+    @include typography.table-cell-default;
+
+    border-bottom: spacing.$pixel-1 solid color.$color-gray-light;
+    padding: spacing.$spacing-sm;
+
+    &__align {
+      &__left {
+        text-align: left;
+      }
+
+      &__center {
+        text-align: center;
+      }
+
+      &__right {
+        text-align: right;
+      }
+    }
+
+    &__vertical-align {
+      &__top {
+        align-content: start;
+      }
+
+      &__center {
+        align-content: center;
+      }
+
+      &__bottom {
+        align-content: end;
+      }
+    }
+
+    /* Checkbox needs different padding-top since its clickable area expands out of visible component outlines */
+    &__checkbox {
+      padding-top: calc(spacing.$spacing-xs + spacing.$spacing-xxs);
+    }
+  }
+}
+
+@mixin fudis-table-mobile {
+  width: 100%;
+  border-collapse: collapse;
+
+  &__caption {
+    @include typography.table-caption;
+
+    padding-bottom: spacing.$spacing-xs;
+    caption-side: top;
+    text-align: left;
+  }
+
+  &__header {
+    @include typography.table-header;
+
+    border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
+    padding: spacing.$spacing-xs;
+    vertical-align: bottom;
+
+    &__align {
+      &__left {
+        text-align: left;
+      }
+
+      &__center {
+        text-align: center;
+      }
+
+      &__right {
+        text-align: right;
+      }
+    }
+  }
+
+  &__cell {
+    @include typography.table-cell-mobile;
+
+    border-bottom: spacing.$pixel-1 solid color.$color-gray-light;
+    padding: spacing.$spacing-xs;
+
+    &__align {
+      &__left {
+        text-align: left;
+      }
+
+      &__center {
+        text-align: center;
+      }
+
+      &__right {
+        text-align: right;
+      }
+    }
+
+    &__vertical-align {
+      &__top {
+        align-content: start;
+      }
+
+      &__center {
+        align-content: center;
+      }
+
+      &__bottom {
+        align-content: end;
+      }
+    }
+
+    /* Checkbox needs different padding-top since its clickable area expands out of visible component outlines */
+    &__checkbox {
+      padding-top: spacing.$spacing-xxs;
+    }
+  }
+}

package/src/components/table/table.scss

@@ -0,0 +1,10 @@
+@use './table-mixins' as mixins;
+@use '../../foundations/breakpoints/mixins' as breakpoints;
+
+.fudis-table {
+  @include mixins.fudis-table-mobile;
+
+  @include breakpoints.breakpoint('md') {
+    @include mixins.fudis-table-default;
+  }
+}

package/src/foundations/typography/mixins.scss

@@ -127,18 +127,37 @@
   font-weight: tokens.$font-weight-bold;
 }
 
-// Table caption
+// Table styles
 
 @mixin table-caption {
   @include colorMixin.text-color('gray-dark');
 
+  line-height: tokens.$table-caption-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-sm-font-size;
+  font-weight: tokens.$font-weight-medium;
+}
+
+@mixin table-header {
+  @include colorMixin.text-color('gray-dark');
+
   text-transform: uppercase;
-  line-height: tokens.$text-input-line-height;
+  line-height: tokens.$table-header-line-height;
   font-family: tokens.$font-family;
   font-size: tokens.$body-text-md-font-size;
   font-weight: tokens.$font-weight-regular;
 }
 
+@mixin table-cell-default {
+  @include colorMixin.text-color('gray-dark');
+  @include body-text-lg-light;
+}
+
+@mixin table-cell-mobile {
+  @include colorMixin.text-color('gray-dark');
+  @include body-text-md-light;
+}
+
 // Other UI styles
 
 // Text-input, text-area, dropdown, legend components
@@ -247,7 +266,7 @@
 
   display: inline-block;
   position: relative;
-  text-decoration: underline solid;
+  text-decoration: underline;
   font-family: tokens.$font-family;
   overflow-wrap: anywhere;
 

package/src/foundations/typography/tokens.scss

@@ -30,6 +30,8 @@ $heading-sm-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
 $text-input-line-height: calc(1.25rem / var(--fudis-rem-multiplier));
 $form-label-line-height: calc(1.5rem / var(--fudis-rem-multiplier));
 $badge-line-height: calc(0.875rem / var(--fudis-rem-multiplier));
+$table-caption-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
+$table-header-line-height: calc(1.5rem / var(--fudis-rem-multiplier));
 
 // Font weight
 $font-weight-light: 300;