@funidata/fudis-core 2.0.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.0.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;