@dative-gpi/foundation-shared-components 0.0.4 → 0.0.5

package/defaults/FSButtons.ts

@@ -5,59 +5,89 @@ import FSButton from "@dative-gpi/foundation-shared-components/components/FSButt
 export const FSButtonsAliases = {
     FSButtonSearch: FSButton,
     FSButtonSearchMini: FSButton,
+    FSButtonSearchIcon: FSButton,
     FSButtonRemove: FSButton,
     FSButtonRemoveMini: FSButton,
+    FSButtonRemoveIcon: FSButton,
     FSButtonSave: FSButton,
-    FSButtonSaveMini: FSButton
+    FSButtonSaveMini: FSButton,
+    FSButtonSaveIcon: FSButton,
+    FSButtonCancel: FSButton,
+    FSButtonCancelMini: FSButton,
+    FSButtonCancelIcon: FSButton
 }
 
 export const FSButtonsProps = {
     FSButtonSearch: {
-        icon: "mdi-magnify",
+        prependIcon: "mdi-magnify",
         label: "Search",
-        full: false,
+        variant: "standard",
         color: ColorBase.Primary
     },
     FSButtonSearchMini: {
+        prependIcon: "mdi-magnify",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Primary
+    },
+    FSButtonSearchIcon: {
         icon: "mdi-magnify",
         label: undefined,
-        full: false,
+        variant: "icon",
         color: ColorBase.Primary
     },
     FSButtonRemove: {
-        icon: "mdi-delete-outline",
+        prependIcon: "mdi-delete-outline",
         label: "Remove",
-        full: false,
+        variant: "standard",
         color: ColorBase.Error
     },
     FSButtonRemoveMini: {
+        prependIcon: "mdi-delete-outline",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Error
+    },
+    FSButtonRemoveIcon: {
         icon: "mdi-delete-outline",
         label: undefined,
-        full: false,
+        variant: "icon",
         color: ColorBase.Error
     },
     FSButtonSave: {
-        icon: "mdi-content-save-outline",
+        prependIcon: "mdi-content-save-outline",
         label: "Save",
-        full: false,
+        variant: "standard",
         color: ColorBase.Success
     },
     FSButtonSaveMini: {
+        prependIcon: "mdi-content-save-outline",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Success
+    },
+    FSButtonSaveIcon: {
         icon: "mdi-content-save-outline",
         label: undefined,
-        full: false,
+        variant: "icon",
         color: ColorBase.Success
     },
     FSButtonCancel: {
-        icon: "mdi-cancel",
+        prependIcon: "mdi-cancel",
         label: "Cancel",
-        full: false,
-        color: ColorBase.Light
+        variant: "standard",
+        color: ColorBase.Dark
     },
     FSButtonCancelMini: {
+        prependIcon: "mdi-cancel",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Dark
+    },
+    FSButtonCancelIcon: {
         icon: "mdi-cancel",
         label: undefined,
-        full: false,
-        color: ColorBase.Light
+        variant: "icon",
+        color: ColorBase.Dark
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,8 +9,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.4",
-    "@dative-gpi/foundation-shared-services": "0.0.4",
+    "@dative-gpi/foundation-shared-domain": "0.0.5",
+    "@dative-gpi/foundation-shared-services": "0.0.5",
     "color": "^4.2.3",
     "vue": "^3.2.0"
   },
@@ -19,5 +19,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "71c09afc7831594e6cc4529c01f1ed761f856929"
+  "gitHead": "609abe1b97549b28ff83dffe858030604df27a2e"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,3 +1,20 @@
+.fs-breadcrumbs-label {
+    cursor: pointer;
+    color: var(--fs-breadcrumbs-base-text) !important;
+
+    &--disabled {
+        color: var(--fs-breadcrumbs-light-text) !important;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.fs-breadcrumbs-divider {
+    margin-bottom: 2px !important;
+}
+
 .v-breadcrumbs {
     padding: 0 !important;
     gap: 8px !important;
@@ -6,23 +23,19 @@
 .v-breadcrumbs-item {
     padding: 0 !important;
 
+    &--disabled {
+        opacity: 1 !important;
+        color: var(--fs-breadcrumbs-light-text) !important;
+    }
+
     &:last-child > .fs-breadcrumbs-label--disabled {
         @extend .text-button;
 
-        color: var(--fs-breadcrumbs-light-text) !important;
+        color: var(--fs-breadcrumbs-base-text) !important;
     }
 }
 
 .v-breadcrumbs-divider {
     padding: 0 !important;
     color: var(--fs-breadcrumbs-base-text) !important;
-}
-
-.fs-breadcrumbs-label {
-    cursor: pointer;
-    color: var(--fs-breadcrumbs-base-text) !important;
-
-    &:hover {
-        color: var(--fs-breadcrumbs-dark-text) !important;
-    }
 }

package/styles/components/fs_button.scss

@@ -25,4 +25,30 @@
         min-width: 36px !important;
         height: 36px !important;
     }
+}
+
+.fs-button-icon {
+    & .v-icon {
+        transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        color: var(--fs-button-light-text) !important;
+        cursor: pointer !important;
+
+        &:hover {
+            color: var(--fs-button-base-text) !important;
+        }
+
+        &:active {
+            color: var(--fs-button-light-text) !important;
+        }
+    }
+
+    @include web {
+        width: 24px !important;
+        height: 24px !important;
+    }
+
+    @include mobile {
+        width: 18px !important;
+        height: 18px !important;
+    }
 }

package/styles/components/fs_col.scss

@@ -1,6 +1,91 @@
 .fs-col {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    gap: var(--fs-col-gap)
+    gap: var(--fs-col-gap);
+
+    &-top-left {
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    &-top-center {
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    &-top-right {
+        justify-content: flex-start;
+        align-items: flex-end;
+    }
+
+    &-center-left {
+        justify-content: center;
+        align-items: flex-start;
+    }
+
+    &-center-center {
+        justify-content: center;
+        align-items: center;
+    }
+
+    &-center-right {
+        justify-content: center;
+        align-items: flex-end;
+    }
+
+    &-bottom-left {
+        justify-content: flex-end;
+        align-items: flex-start;
+    }
+
+    &-bottom-center {
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    &-bottom-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+    }
+}
+
+.fs-col > .fs-col-width {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        width: var(--fs-col-width);
+    }
+}
+
+:not(.fs-col) > .fs-col-width {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        width: var(--fs-col-width);
+    }
+}
+
+.fs-col > .fs-col-height {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        height: var(--fs-col-height);
+    }
+
+}
+
+:not(.fs-col) > .fs-col-height {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        height: var(--fs-col-height);
+    }
 }

package/styles/components/fs_icon.scss

@@ -3,12 +3,12 @@
 }
 
 .fs-icon-m {
-    @include mobile {
-        font-size: 18px !important;
+    @include web {
+        font-size: 20px !important;
     }
 
-    @include web {
-        font-size: 24px !important;
+    @include mobile {
+        font-size: 16px !important;
     }
 }
 

package/styles/components/fs_password_field.scss

@@ -0,0 +1,5 @@
+.fs-password-field-icon {
+    cursor: var(--fs-password-field-cursor) !important;
+    color: var(--fs-password-field-base-text) !important;
+    opacity: 1 !important;
+}

package/styles/components/fs_row.scss

@@ -1,6 +1,91 @@
 .fs-row {
     display: flex;
-    align-items: flex-start;
     flex-wrap: var(--fs-row-flex-wrap);
     gap: var(--fs-row-gap);
+
+    &-top-left {
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    &-top-center {
+        align-items: flex-start;
+        justify-content: center;
+    }
+
+    &-top-right {
+        align-items: flex-start;
+        justify-content: flex-end;
+    }
+
+    &-center-left {
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    &-center-center {
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-center-right {
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    &-bottom-left {
+        align-items: flex-end;
+        justify-content: flex-start;
+    }
+
+    &-bottom-center {
+        align-items: flex-end;
+        justify-content: center;
+    }
+
+    &-bottom-right {
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+}
+
+:not(.fs-col) > .fs-row-width {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        width: var(--fs-row-width);
+    }
+}
+
+.fs-col > .fs-row-width {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        width: var(--fs-row-width);
+    }
+}
+
+:not(.fs-col) > .fs-row-height  {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        height: var(--fs-row-height);
+    }
+
+}
+
+.fs-col > .fs-row-height {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        width: var(--fs-row-height);
+    }
 }

package/styles/components/fs_span.scss

@@ -1,5 +1,5 @@
 .fs-span {
-    height: 100%;
+    padding-inline-end: 2px;
     display: flex;
     align-items: center;
     overflow: hidden;

package/styles/components/fs_tabs.scss

@@ -12,7 +12,6 @@
 }
 
 .fs-tab {
-    display: flex;
     padding: 0 16px;
     border-bottom: 1px solid var(--fs-group-light-text) !important;
     color: var(--fs-group-light-text) !important;

package/styles/components/fs_text_field.scss

@@ -1,24 +1,42 @@
-.fs-text-field > .v-input__control > .v-field {
-    border: 1.3px solid #000000 !important;
+.fs-text-field {
+    border: 1px solid var(--fs-text-field-base-color) !important;
     border-radius: 4px !important;
+    padding: 0 16px !important;
+    width: 100%;
 
-    & > .v-field__outline {
-        display: none;
+    &:focus-within {
+        border-color: var(--fs-text-field-dark-color) !important;
     }
-}
-
-.fs-text-field > .v-input__control > .v-field > .v-field__field > input {
-    @extend .text-body;
 
-    padding: 12px 16px !important;
+    & > .v-input__control > .v-field {
+        & > .v-field__outline {
+            display: none;
+        }
 
-    @include web {
-        min-height: 44px !important;
-        height: 44px !important;
+        & > .v-field__field > input {
+            @extend .text-body;
+        
+            padding-inline: 0 !important;
+            cursor: var(--fs-text-field-cursor) !important;
+            color: var(--fs-text-field-base-text);
+        
+            @include web {
+                min-height: 48px !important;
+                height: 48px !important;
+            }
+        
+            @include mobile {
+                min-height: 36px !important;
+                height: 36px !important;
+            }
+        }
     }
+}
 
-    @include mobile {
-        min-height: 40px !important;
-        height: 40px !important;
-    }
+.fs-text-field-label {
+    color: var(--fs-text-field-base-text);
+}
+
+.fs-text-field-description {
+    color: var(--fs-text-field-base-text);
 }

package/styles/components/index.scss

@@ -1,14 +1,15 @@
-@import 'fs_breadcrumbs.scss';
-@import 'fs_button.scss';
-@import 'fs_checkbox.scss';
-@import 'fs_col.scss';
-@import 'fs_fade_out.scss';
-@import 'fs_icon.scss';
-@import 'fs_radio.scss';
-@import 'fs_row.scss';
-@import 'fs_span.scss';
-@import 'fs_switch.scss';
-@import 'fs_tag.scss';
-@import 'fs_tabs.scss';
-@import 'fs_text_field.scss';
-@import 'fs_wrap_group.scss';
+@import "fs_breadcrumbs.scss";
+@import "fs_button.scss";
+@import "fs_checkbox.scss";
+@import "fs_col.scss";
+@import "fs_fade_out.scss";
+@import "fs_icon.scss";
+@import "fs_password_field.scss";
+@import "fs_radio.scss";
+@import "fs_row.scss";
+@import "fs_span.scss";
+@import "fs_switch.scss";
+@import "fs_tag.scss";
+@import "fs_tabs.scss";
+@import "fs_text_field.scss";
+@import "fs_wrap_group.scss";

package/styles/globals/fixes.scss

@@ -0,0 +1,5 @@
+.fs-tab > .v-btn__content > .fs-row > .text-button {
+    @include web {
+        padding-top: 2px !important;
+    }
+}

package/styles/globals/index.scss

@@ -3,4 +3,7 @@
 @import 'text_fonts.scss';
 @import 'touchscreen.scss';
 @import 'scrollbars.scss';
-@import 'overrides.scss';
+@import 'overrides.scss';
+
+// Find a better way to fix this
+@import 'fixes.scss';

package/styles/globals/overrides.scss

@@ -8,6 +8,19 @@
     display: none;
 }
 
+// No up / down buttons in input field of type number
+input[type=number] { 
+    -moz-appearance: textfield;
+    appearance: textfield;
+    margin: 0; 
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none; 
+    margin: 0; 
+}
+
 /***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
 
 // On touchscreen, hide arrows

package/styles/globals/text_fonts.scss

@@ -1,54 +1,54 @@
 .text-h1 {
     font-family: 'Montserrat', sans-serif !important;
-    font-style: normal;
-    font-weight: 700;
+    font-style: normal !important;
+    font-weight: 700 !important;
 
     @include web {
-        font-size: 36px;
-        line-height: 40px;
-        letter-spacing: -0.72px;
+        font-size: 36px !important;
+        line-height: 40px !important;
+        letter-spacing: -0.72px !important;
     }
 
     @include mobile {
-        font-size: 29px;
-        line-height: 32px;
-        letter-spacing: -1.45px;
+        font-size: 29px !important;
+        line-height: 32px !important;
+        letter-spacing: -1.45px !important;
     }
 }
 
 .text-h2 {
     font-family: 'Montserrat', sans-serif !important;
-    font-style: normal;
-    font-weight: 600;
+    font-style: normal !important;
+    font-weight: 600 !important;
 
     @include web {
-        font-size: 27px;
-        line-height: 32px;
-        letter-spacing: -0.81px;
+        font-size: 27px !important;
+        line-height: 32px !important;
+        letter-spacing: -0.81px !important;
     }
 
     @include mobile {
-        font-size: 22px;
-        line-height: 24px;
-        letter-spacing: -0.88px;
+        font-size: 22px !important;
+        line-height: 24px !important;
+        letter-spacing: -0.88px !important;
     }
 }
 
 .text-h3 {
     font-family: 'Montserrat', sans-serif !important;
-    font-style: normal;
-    font-weight: 600;
+    font-style: normal !important;
+    font-weight: 600 !important;
 
     @include web {
-        font-size: 21px;
-        line-height: 24px;
-        letter-spacing: -0.63px;
+        font-size: 21px !important;
+        line-height: 24px !important;
+        letter-spacing: -0.63px !important;
     }
 
     @include mobile {
-        font-size: 17px;
-        line-height: 20px;
-        letter-spacing: -0.51px;
+        font-size: 17px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.51px !important;
     }
 }
 
@@ -91,6 +91,26 @@
 }
 
 .text-overline {
+    font-family: 'Montserrat', sans-serif !important;
+    font-style: normal !important;
+    text-transform: none !important;
+
+    @include web {
+        font-weight: 600 !important;
+        font-size: 12px !important;
+        line-height: 16px !important;
+        letter-spacing: 0.08px !important;
+    }
+
+    @include mobile {
+        font-weight: 500 !important;
+        font-size: 10px !important;
+        line-height: 16px !important;
+        letter-spacing: 0.19px !important;
+    }
+}
+
+.text-underline {
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;
     font-weight: 500 !important;