@funidata/fudis-core 1.0.1 → 2.0.0

package/_index.scss

@@ -1,9 +1,5 @@
 /**
-* Export all Core SCSS files here
-*/
-
-/**
-* Assets and Foundations
+* Foundations
 */
 @forward './src/foundations/borders/tokens';
 @forward './src/foundations/breakpoints/tokens';
@@ -20,33 +16,5 @@
 @forward './src/foundations/grid/mixins';
 @forward './src/foundations/spacing/mixins';
 @forward './src/foundations/typography/mixins';
-@forward './src/foundations/typography/classes';
 @forward './src/foundations/utilities/mixins';
 @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/_styles.scss

@@ -0,0 +1,31 @@
+/**
+* Foundation styles
+*/
+@forward './src/foundations/spacing/classes';
+@forward './src/foundations/utilities/classes';
+@forward './src/foundations/typography/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,10 +1,11 @@
 {
   "name": "@funidata/fudis-core",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Core styles and foundations for Fudis Design System",
   "files": [
     "src",
-    "./_index.scss"
+    "./_index.scss",
+    "./_styles.scss"
   ],
   "scripts": {
     "start": "storybook dev -p 6007",

package/src/components/checkbox/checkbox.scss

@@ -1,25 +1,46 @@
-@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/borders/mixins.scss' as borders;
 @use '../../foundations/spacing/tokens.scss' as spacing;
 @use '../../foundations/colors/tokens.scss' as colors;
-@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/colors/mixins.scss' as colorMixins;
 @use '../../foundations/utilities/mixins.scss' as utilities;
 @use '../../foundations/focus/mixins.scss' as focus;
 @use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/typography/tokens.scss' as typographyTokens;
 
 .fudis-checkbox {
   @include typography.body-text-md-regular;
-  @include colorMixin.text-color('gray-dark');
+  @include colorMixins.text-color('gray-dark');
 
   display: inline-flex;
   position: relative;
   align-items: center;
-  cursor: pointer;
   width: auto;
   min-height: spacing.$spacing-lg;
 
+  &__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+
+    &__text {
+      position: relative;
+      padding-right: spacing.$spacing-xs;
+      padding-left: spacing.$spacing-xs;
+    }
+
+    &--disabled {
+      pointer-events: none;
+    }
+  }
+
   &__content {
     display: inline-flex;
     align-items: center;
+    cursor: pointer;
+
+    &--disabled {
+      cursor: default;
+    }
 
     &-wrapper {
       display: flex;
@@ -30,7 +51,7 @@
     }
 
     &__box {
-      @include border.border('1px', 'solid', 'gray-middle');
+      @include borders.border('1px', 'solid', 'gray-middle');
 
       display: flex;
       position: absolute;
@@ -40,19 +61,21 @@
       width: spacing.$checkbox-size;
       height: spacing.$checkbox-size;
 
+      &__icon .fudis-icon {
+        fill: colors.$color-gray-middle;
+      }
+
       &--focused {
         @include focus.focus-checkbox;
       }
 
       &--disabled {
-        @include border.border('1px', 'dashed', 'gray-middle');
-        @include colorMixin.bg-color('gray-extra-light');
-
-        cursor: default;
+        @include borders.border('1px', 'dashed', 'gray-middle');
+        @include colorMixins.bg-color('gray-extra-light');
       }
 
       &--invalid {
-        @include border.border('1px', 'solid', 'red');
+        @include borders.border('1px', 'solid', 'red');
 
         box-shadow: 0 0 0 spacing.$pixel-3 colors.$color-red-light;
       }
@@ -65,6 +88,19 @@
     }
   }
 
+  &__required {
+    @include typography.text-field-label;
+    @include colorMixins.text-color('gray-middle');
+
+    display: inline-block;
+    vertical-align: baseline;
+    text-transform: initial;
+    /* stylelint-disable-next-line property-disallowed-list */
+    line-height: typographyTokens.$text-input-line-height;
+    /* stylelint-disable-next-line property-disallowed-list */
+    font-size: typographyTokens.$body-text-sm-font-size;
+  }
+
   &__input {
     @include utilities.box-reset;
 
@@ -83,3 +119,7 @@
     pointer-events: none;
   }
 }
+/* stylelint-disable selector-class-pattern */
+.fudis-checkbox.fudis-checkbox__label {
+  cursor: pointer;
+}