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

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;