@funidata/fudis-core 0.0.2 → 0.0.4

package/_index.scss

@@ -1,7 +1,10 @@
-/*
+/**
 * Export all Core SCSS files here
 */
-@forward './src/assets/fonts/fonts';
+
+/**
+* Assets and Foundations
+*/
 @forward './src/foundations/borders/tokens';
 @forward './src/foundations/breakpoints/tokens';
 @forward './src/foundations/colors/tokens';
@@ -22,4 +25,28 @@
 @forward './src/foundations/z-index/mixins';
 @forward './src/foundations/spacing/classes';
 @forward './src/foundations/utilities/classes';
+
+/**
+* Component styles
+*/
+@forward './src/components/alert/alert';
 @forward './src/components/button/button';
+@forward './src/components/badge/badge';
+@forward './src/components/checkbox/checkbox';
+@forward './src/components/checkbox-group/checkbox-group';
+@forward './src/components/error-summary/error-summary';
+@forward './src/components/fieldset/fieldset';
+@forward './src/components/guidance/guidance';
+@forward './src/components/horizontal-rule/horizontal-rule';
+@forward './src/components/icon/icon';
+@forward './src/components/label/label';
+@forward './src/components/link/link';
+@forward './src/components/loading-spinner/loading-spinner';
+@forward './src/components/notification/notification';
+@forward './src/components/popover/popover';
+@forward './src/components/radio-button/radio-button';
+@forward './src/components/radio-button-group/radio-button-group';
+@forward './src/components/tab-navigation/tab-navigation';
+@forward './src/components/text-area/text-area';
+@forward './src/components/text-input/text-input';
+@forward './src/components/validator-error-message/validator-error-message';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funidata/fudis-core",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Core styles and foundations for Fudis Design System",
   "files": [
     "src",
@@ -10,6 +10,7 @@
     "start": "storybook dev -p 6007",
     "build:storybook": "storybook build",
     "build:dist": "scripts/copy-files.sh",
+    "build:dist:watch": "nodemon --watch src --watch _index.scss --ext scss --exec \"npm run build:dist\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -36,6 +37,7 @@
     "@storybook/html": "^8.6.12",
     "@storybook/html-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
+    "nodemon": "^3.1.10",
     "sass-embedded": "^1.86.3",
     "storybook": "^8.6.12"
   }

package/src/components/alert/alert.scss

@@ -0,0 +1,75 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/colors/tokens.scss' as color;
+@use '../../foundations/focus/mixins.scss' as focus;
+@use '../../foundations/borders/mixins.scss' as border;
+
+.fudis-alert {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: spacing.$spacing-lg;
+  text-align: center;
+
+  &__link {
+    margin-left: spacing.$spacing-xxs;
+  }
+
+  &__text {
+    flex-grow: 1;
+  }
+
+  &__close {
+    @include border.border-none;
+    @include colorMixin.bg-color('transparent');
+    @include border.outline('1px', 'solid', 'white');
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: spacing.$spacing-xxs;
+    margin-left: auto;
+    box-shadow: none;
+    width: spacing.$spacing-md;
+    height: spacing.$spacing-md;
+
+    &:focus {
+      @include focus.focus-generic;
+    }
+
+    &__warning {
+      @include border.outline('1px', 'solid', 'gray-dark');
+    }
+  }
+
+  &__info {
+    @include colorMixin.bg-color('primary');
+
+    p {
+      /* stylelint-disable-next-line property-disallowed-list, declaration-no-important */
+      color: color.$color-white !important;
+    }
+  }
+
+  &__success {
+    @include colorMixin.bg-color('green');
+
+    p {
+      /* stylelint-disable-next-line property-disallowed-list, declaration-no-important */
+      color: color.$color-white !important;
+    }
+  }
+
+  &__danger {
+    @include colorMixin.bg-color('red');
+
+    p {
+      /* stylelint-disable-next-line property-disallowed-list, declaration-no-important */
+      color: color.$color-white !important;
+    }
+  }
+
+  &__warning {
+    @include colorMixin.bg-color('yellow');
+  }
+}

package/src/components/badge/badge.scss

@@ -0,0 +1,39 @@
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+
+.fudis-badge {
+  @include border.border-radius('2px');
+  @include typography.badge-typography;
+  @include colorMixin.text-color('gray-dark');
+
+  display: inline-block;
+  padding: spacing.$pixel-1 spacing.$pixel-3;
+  vertical-align: middle;
+
+  &__accent {
+    @include colorMixin.bg-color('yellow-light');
+    @include border.border('1px', 'solid', 'yellow');
+  }
+
+  &__danger {
+    @include colorMixin.bg-color('red-light');
+    @include border.border('1px', 'solid', 'red');
+  }
+
+  &__primary {
+    @include colorMixin.bg-color('primary-light');
+    @include border.border('1px', 'solid', 'primary');
+  }
+
+  &__secondary {
+    @include colorMixin.bg-color('gray-extra-light');
+    @include border.border('1px', 'solid', 'gray-middle');
+  }
+
+  &__success {
+    @include colorMixin.bg-color('green-light');
+    @include border.border('1px', 'solid', 'green');
+  }
+}

package/src/components/button/button.scss

@@ -1,16 +1,16 @@
-@use '../../foundations/colors/mixins.scss' as colors;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
 @use '../../foundations/focus/mixins.scss' as focus;
-@use '../../foundations/borders/mixins.scss' as borders;
+@use '../../foundations/borders/mixins.scss' as border;
 @use '../../foundations/typography/mixins.scss' as typography;
 @use '../../foundations/spacing/tokens.scss' as spacing;
 @use '../../foundations/utilities/mixins.scss' as utilities;
 
 .fudis-button {
   @include utilities.box-reset;
-  @include borders.border-radius('2px');
-  @include colors.bg-color('transparent');
+  @include border.border-radius('2px');
+  @include colorMixin.bg-color('transparent');
   @include typography.button-typography;
-  @include borders.border('2px', 'solid', 'primary');
+  @include border.border('2px', 'solid', 'primary');
 
   display: inline-flex;
   align-items: center;
@@ -24,26 +24,34 @@
     @include focus.focus-generic;
   }
 
+  &:has(&__icon):not(&__label--hidden) {
+    padding-left: 0;
+  }
+
+  &[aria-disabled='true'] &__icon__component {
+    @include colorMixin.text-color('gray-dark');
+  }
+
   &[aria-disabled='true'] {
-    @include colors.text-color('gray-dark');
-    @include colors.bg-color('gray-light');
-    @include borders.border('2px', 'solid', 'transparent');
-    @include borders.outline('1px', 'dashed', 'gray-middle');
+    @include colorMixin.text-color('gray-dark');
+    @include colorMixin.bg-color('gray-light');
+    @include border.border('2px', 'solid', 'transparent');
+    @include border.outline('1px', 'dashed', 'gray-middle');
   }
 
   &__primary {
-    @include colors.text-color('white');
-    @include colors.bg-color('primary');
+    @include colorMixin.text-color('white');
+    @include colorMixin.bg-color('primary');
   }
 
   &__secondary {
-    @include colors.text-color('primary');
-    @include colors.bg-color('white');
+    @include colorMixin.text-color('primary');
+    @include colorMixin.bg-color('white');
   }
 
   &__tertiary {
-    @include colors.text-color('primary');
-    @include borders.border('2px', 'solid', 'transparent');
+    @include colorMixin.text-color('primary');
+    @include border.border('2px', 'solid', 'transparent');
   }
 
   &__size {
@@ -54,5 +62,31 @@
     &__medium {
       min-height: spacing.$spacing-lg;
     }
+
+    &__icon-only {
+      padding: 0;
+      width: spacing.$spacing-lg;
+      min-width: initial;
+      min-height: spacing.$spacing-lg;
+    }
+  }
+
+  &__label {
+    &--hidden {
+      padding: 0 spacing.$spacing-xs;
+    }
+  }
+
+  &__icon {
+    position: relative;
+    width: spacing.$spacing-lg;
+    height: spacing.$spacing-sm;
+
+    &__component {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 }

package/src/components/checkbox/checkbox.scss

@@ -0,0 +1,85 @@
+@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/colors/tokens.scss' as colors;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/utilities/mixins.scss' as utilities;
+@use '../../foundations/focus/mixins.scss' as focus;
+@use '../../foundations/typography/mixins.scss' as typography;
+
+.fudis-checkbox {
+  @include typography.body-text-md-regular;
+  @include colorMixin.text-color('gray-dark');
+
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  cursor: pointer;
+  width: auto;
+  min-height: spacing.$spacing-lg;
+
+  &__content {
+    display: inline-flex;
+    align-items: center;
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: spacing.$spacing-lg;
+      min-height: spacing.$spacing-lg;
+    }
+
+    &__box {
+      @include border.border('1px', 'solid', 'gray-middle');
+
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0;
+      width: spacing.$checkbox-size;
+      height: spacing.$checkbox-size;
+
+      &--focused {
+        @include focus.focus-checkbox;
+      }
+
+      &--disabled {
+        @include border.border('1px', 'dashed', 'gray-middle');
+        @include colorMixin.bg-color('gray-extra-light');
+
+        cursor: default;
+      }
+
+      &--invalid {
+        @include border.border('1px', 'solid', 'red');
+
+        box-shadow: 0 0 0 spacing.$pixel-3 colors.$color-red-light;
+      }
+    }
+
+    &__label {
+      position: relative;
+      padding-right: spacing.$spacing-xs;
+      padding-left: spacing.$spacing-xs;
+    }
+  }
+
+  &__input {
+    @include utilities.box-reset;
+
+    display: grid;
+    place-content: center;
+    opacity: 0;
+    width: spacing.$pixel-1;
+    height: spacing.$pixel-1;
+  }
+
+  /*
+  * If CheckboxGroup is disabled through "disabled" Input, we need to set pointer-event to none for each checkbox.
+  * This is not necessary when disabling comes through formControl.
+  */
+  &--disabled {
+    pointer-events: none;
+  }
+}

package/src/components/checkbox-group/checkbox-group.scss

@@ -0,0 +1,7 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+
+.fudis-checkbox-group {
+  .fudis-fieldset-content {
+    margin-top: spacing.$spacing-none;
+  }
+}

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

@@ -0,0 +1,47 @@
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/utilities/mixins.scss' as utilities;
+@use '../../foundations/typography/mixins.scss' as typography;
+
+.fudis-error-summary {
+  &__title {
+    @include utilities.box-reset;
+    @include colorMixin.text-color('gray-dark');
+    @include typography.body-text-md-regular;
+
+    margin-top: spacing.$pixel-2;
+  }
+
+  &__error-list {
+    @include utilities.box-reset;
+
+    margin-top: spacing.$spacing-xs;
+    margin-bottom: spacing.$pixel-2;
+    padding-left: 0;
+    list-style: none;
+
+    &__item {
+      position: relative;
+      margin-left: spacing.$spacing-sm;
+      padding-left: spacing.$spacing-xxs;
+
+      &::before {
+        @include colorMixin.bg-color('gray-dark');
+
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate(calc(-1 * #{spacing.$spacing-xs}), -50%);
+        border-radius: spacing.$spacing-xxl;
+        width: spacing.$pixel-3;
+        height: spacing.$pixel-3;
+        vertical-align: middle;
+        content: '';
+      }
+
+      &:not(:last-of-type) {
+        margin-bottom: spacing.$spacing-xs;
+      }
+    }
+  }
+}

package/src/components/fieldset/fieldset.scss

@@ -0,0 +1,90 @@
+/* stylelint-disable selector-class-pattern */
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/typography/tokens.scss' as typographyTokens;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/focus/mixins.scss' as focus;
+@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/utilities/mixins.scss' as utilities;
+
+.fudis-fieldset {
+  @include utilities.box-reset;
+  @include border.border-none;
+
+  display: grid;
+  grid-template-columns: 1fr;
+
+  &__legend {
+    @include utilities.box-reset;
+
+    display: contents;
+
+    &__main {
+      display: flex;
+      align-items: flex-end;
+
+      &:focus-visible {
+        @include focus.focus-generic;
+      }
+
+      &__text-content {
+        margin: spacing.$spacing-xxs 0;
+        min-height: spacing.$spacing-md;
+      }
+
+      &__text {
+        @include colorMixin.text-color('gray-dark');
+
+        margin-right: spacing.$spacing-xs;
+      }
+
+      &__required {
+        @include typography.text-field-label;
+        @include colorMixin.text-color('gray-middle');
+
+        display: inline-block;
+        vertical-align: bottom;
+        text-transform: initial;
+        /* stylelint-disable-next-line property-disallowed-list */
+        font-size: typographyTokens.$body-text-sm-font-size;
+      }
+
+      &__tooltip-button {
+        margin-top: auto;
+      }
+    }
+
+    &__sm {
+      @include typography.text-field-label;
+    }
+
+    &__md {
+      @include typography.heading-xs;
+
+      .fudis-fieldset__legend__main__text,
+      .fudis-fieldset__legend__main__required {
+        vertical-align: sub;
+      }
+    }
+
+    &--focused {
+      @include focus.focus-generic;
+    }
+  }
+
+  &__help-text {
+    margin-bottom: spacing.$spacing-xs;
+  }
+
+  &-content {
+    @include utilities.box-reset;
+    @include border.border-none;
+
+    display: flex;
+    flex-direction: column;
+    grid-column: 1/-1;
+    order: 4;
+    margin-top: spacing.$spacing-xs;
+    width: 100%;
+  }
+}

package/src/components/guidance/guidance.scss

@@ -0,0 +1,80 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+
+.fudis-guidance {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  &:not(:has(&__errors)):has(&__help-text) {
+    margin-top: spacing.$spacing-xs;
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  &:not(:has(&__errors)) &__character-limit-indicator {
+    margin-top: 0;
+  }
+
+  &__help-text {
+    @include colorMixin.text-color('gray-dark');
+    @include typography.body-text-sm-regular;
+
+    margin-top: spacing.$spacing-none;
+    margin-bottom: spacing.$spacing-xs;
+  }
+
+  &__errors {
+    display: flex;
+    transform: translateX(
+      /* stylelint-disable unit-disallowed-list */
+        calc(-1 * calc(0.4rem / var(--fudis-rem-multiplier)))
+    );
+    opacity: 0;
+    height: spacing.$spacing-xs;
+    animation-name: delay-appearance;
+    animation-delay: 0.2s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+
+    &__list {
+      min-height: spacing.$spacing-xs;
+    }
+  }
+
+  &__character-limit-indicator {
+    @include colorMixin.text-color('gray-dark');
+    @include typography.body-text-sm-regular;
+
+    margin-top: spacing.$spacing-xs;
+    text-align: end;
+
+    &__sm {
+      min-width: spacing.$spacing-md;
+    }
+
+    &__md {
+      min-width: spacing.$spacing-xl;
+    }
+
+    &__lg {
+      min-width: spacing.$spacing-xxl;
+    }
+
+    &__float-right {
+      margin-left: auto;
+    }
+  }
+}
+
+@keyframes delay-appearance {
+  0% {
+    opacity: 0;
+    height: spacing.$spacing-xs;
+  }
+
+  100% {
+    opacity: 1;
+    height: auto;
+  }
+}

package/src/components/horizontal-rule/horizontal-rule.scss

@@ -0,0 +1,13 @@
+/* stylelint-disable property-disallowed-list */
+@use '../../foundations/colors/tokens.scss' as color;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/utilities/mixins.scss' as utilities;
+
+.fudis-hr {
+  @include utilities.box-reset;
+
+  border: 0;
+  border-top: spacing.$pixel-1 solid color.$color-gray-middle;
+  width: 100%;
+  height: spacing.$pixel-1;
+}