@beterdichtbij/component-library 0.22.1 → 0.23.0

package/dist/components/atoms/BDToast/BDToast.vue.d.ts

@@ -4,11 +4,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<string | undefined>;
         required: false;
     };
-    show: {
-        type: __PropType<boolean | undefined>;
-        required: false;
-        default: boolean;
-    };
     variant: {
         type: __PropType<import('../../../types/ToastVariants').toastVariants | undefined>;
         required: false;
@@ -29,11 +24,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<string | undefined>;
         required: false;
     };
-    show: {
-        type: __PropType<boolean | undefined>;
-        required: false;
-        default: boolean;
-    };
     variant: {
         type: __PropType<import('../../../types/ToastVariants').toastVariants | undefined>;
         required: false;
@@ -53,6 +43,5 @@ declare const _sfc_main: import("vue").DefineComponent<{
     variant: import('../../../types/ToastVariants').toastVariants | undefined;
     text: string | undefined;
     title: string | undefined;
-    show: boolean | undefined;
 }, {}>;
 export default _sfc_main;

package/dist/components/atoms/icons/IconTriangleExclamation.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/components/atoms/icons/IconTriangleExclamation.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTriangleExclamation.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icons/IconTriangleExclamation.vue"],"names":[],"mappings":";AAwBA,wBAA4E"}

package/dist/components/atoms/icons/index.d.ts

@@ -25,4 +25,5 @@ import IconMenu from "./IconMenu.vue";
 import IconOrderedList from "./IconOrderedList.vue";
 import IconRemove from "./IconRemove.vue";
 import IconUnderline from "./IconUnderline.vue";
-export { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, };
+import IconTriangleExclamation from "./IconTriangleExclamation.vue";
+export { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, IconTriangleExclamation };

package/dist/components/molecules/BDImageAttachmentPreviewList/BDImageAttachmentPreviewList.vue.d.ts

@@ -21,7 +21,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "delete")[], "show" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "show")[], "delete" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     fastDownload: {
         type: __PropType<boolean>;
         required: true;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import BDCol from "./layout/BDCol.vue";
 import BDContainer from "./layout/BDContainer.vue";
 import BDRow from "./layout/BDRow.vue";
-import { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu, IconEdit, IconCardView, IconListView, IconEyeShow, IconEyeSlash } from "./components/atoms/icons/index";
+import { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu, IconEdit, IconCardView, IconListView, IconEyeShow, IconEyeSlash, IconTriangleExclamation } from "./components/atoms/icons/index";
 import BDButton from "./components/atoms/BDButton/BDButton.vue";
 import BDLogo from "./components/atoms/BDLogo/BDLogo.vue";
 import BDLink from "./components/atoms/BDLink/BDLink.vue";
@@ -34,4 +34,4 @@ import BDModal from "./components/organisms/BDModal/BDModal.vue";
 import { useModal } from "./composables/useModal";
 import { useToaster } from "./composables/useToaster";
 import { vBdTooltip } from "./directives/BDTooltip";
-export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, useModal, useToaster, vBdTooltip, };
+export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, IconTriangleExclamation, useModal, useToaster, vBdTooltip, };

package/dist/interfaces/BDToastProps.d.ts

@@ -1,7 +1,6 @@
 import { toastVariants } from '../types/ToastVariants';
 export interface BDToastProps {
     id?: string;
-    show?: boolean;
     variant?: toastVariants;
     title?: string;
     text?: string;

package/dist/scss/_button.scss

@@ -7,21 +7,21 @@
     transition: all 0.5s cubic-bezier(0.36, 0.03, 0.28, 0.99);
 }
 
-// $variant, $color, $bg-color, $hover-color, $hover-bg-color, $border $solid $border-color
+// $variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color
 $btn-variants:
-    "primary" $white $primary $primary $color-lightblue none,
-    "secondary" $primary $color-lightblue $color-lightblue $primary none,
+    "primary" $white $blue-text $white $blue-dark none,
+    "secondary" $font-color-primary $white $font-color-primary $gray-7 $gray 1px solid $gray,
     "danger" $white $danger $danger $white none,
-    "colleague" $white $color-colleague $color-colleague #ccf2e2 none,
-    "outline-primary" $color-blue $white $white $color-blue 1px solid $color-blue,
-    "outline-primary-dark" $color-blue transparent $white $color-blue 1px solid $color-blue,
-    "outline-tertiary" $black $white $black $white 1px solid #abb0be,
+    "colleague" $white $green-text $white $green-dark none,
+    "outline-primary" $font-color-primary $white $white $font-color-primary $gray-primary 1px solid $gray-primary,
+    "outline-primary-dark" $font-color-primary transparent $white $font-color-primary $gray-primary 1px solid $gray-primary,
+    "outline-tertiary" $black $white $black $gray-7 $gray-primary 1px solid $gray-primary,
     "link" $primary transparent $primary transparent none,
     "white" $white transparent $white transparent none;
 
-@each $variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color in $btn-variants {
+@each $variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color in $btn-variants {
     .btn-#{$variant} {
-        @include button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color);
+        @include button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color);
     }
 }
 
@@ -45,7 +45,7 @@ $btn-variants:
     &:disabled {
         opacity: 1;
         color: $white;
-        background-color: #bdc2cc;
+        background-color: $blue-pastel;
     }
 }
 
@@ -62,8 +62,8 @@ button {
         right: -10px;
         margin-top: 0px !important;
         background-color: $primary;
-        color: #fff;
-        fill: #fff;
+        color: $white;
+        fill:  $white;
         width: 21px;
         height: 21px;
         border-radius: 50%;
@@ -72,7 +72,7 @@ button {
         text-align: center;
         &:hover {
             fill: $primary;
-            background-color: #ebf3f8;
+            background-color: $gray-7;
         }
     }
 }

package/dist/scss/_toast.scss

@@ -1,64 +1,70 @@
-.toast{
-  &.bd-toast{
-    margin: 0.5rem;
-    border: 0px;
-    margin-left: auto;
-    border-left: 4px solid $info;
+.bd-toast {
+  margin: 0.5rem;
+  border: 0px;
+  margin-left: auto;
+  border-left: 4px solid $info;
 
-    .toast-header{
-      border-bottom: 1px solid hsla(203, 62%, 51%, 0.4) ;
-      padding: 20px 14px;
-      display:flex;
-      justify-content: baseline;
+  .toast-header {
+    border-bottom: 1px solid hsla(203, 62%, 51%, 0.4) ;
+    padding: 20px 14px;
+    display: flex;
+    justify-content: baseline;
 
-      button{
-        margin-left:auto;
-        margin-right:0px;
-      }
-
-      svg{
-        fill: $info;
-        margin-right: 1rem;
-      }
+    button {
+      margin-left: auto;
+      margin-right: 0px;
+      background-color: transparent;
     }
 
-    .toast-body {
-      padding-left: 20px;
+    svg {
+      fill: $info;
+      margin-right: 1rem;
     }
+  }
+
+  .toast-body {
+    padding-left: 20px;
+  }
 
-    &-danger{
-      border-color: $danger;
+  &-danger {
+    border-color: $danger;
 
-      .toast-header{
-        border-color: hsla(8, 74%, 53%, 0.4);
+    .toast-header {
+      border-color: hsla(8, 74%, 53%, 0.4);
 
-        svg{
-          fill: $danger;
-        }
+      svg {
+        fill: $danger;
       }
     }
+  }
 
-    &-warning{
-      border-color: $warning;
+  &-warning {
+    border-color: $warning;
 
-      .toast-header{
-        border-color: hsla(48, 100%, 47%, 0.4);
+    .toast-header {
+      border-color: hsla(48, 100%, 47%, 0.4);
 
-        svg{
-          fill: $warning;
-        }
+      svg {
+        fill: $warning;
       }
     }
+  }
 
-    &-success{
-      border-color: $success;
+  &-success {
+    border-color: $success;
 
-      .toast-header{
-        border-color: hsla(155, 100%, 37%,0.4);
-        svg{
-          fill:  $success
-        }
+    .toast-header {
+      border-color: hsla(155, 100%, 37%,0.4);
+
+      svg {
+        fill:  $success
       }
     }
   }
+}
+
+.toast-container {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
 }

package/dist/scss/base/variables.scss

@@ -11,7 +11,7 @@ $gray-800: #343a40;
 $gray-900: #212529;
 $black:    #000;
 
-// colors
+// colors scheme doktr  - old color scheme
 $blue:    #3594CF; // BD-blue
 $indigo:  #6610f2;
 $purple:  #6f42c1;
@@ -23,6 +23,33 @@ $green:   #00BF6F; // BD-green
 $teal:    #20c997;
 $cyan:    #0dcaf0;
 
+$color-blue :#4D5875; // is een donkerdere kleur dan BD-blauw
+$color-red:#e0462e;
+$color-darkblue:#394156;  
+$color-lightblue: #EBF3F8;
+$color-bg:#F5F5F5;
+$color-white : #ffffff;
+$color-black : #000000;
+$color-colleague : $green;
+
+// new colorscheme 2024 conform figma designs Ever + de Gier
+$blue-pastel:#D9ECFF;         // blauw pastel
+$blue: #418FDE;               // blauw: header, BD-blauw
+$blue-text: #2272C4;          // blauw tekst: button variant primary
+$blue-dark: #1E66AE;          // blauw donker: hover button primary
+
+$green-pastel: #DBFFF0;       // groen pastel
+$green: #00A862;              // groen: header-collega, BD-groen
+$green-text: #00854D;         // groen tekst: button variant success
+$green-dark: #006B3E;         // groen donker: hover button success
+
+$gray: #D1D4DB;               // grijs : border button secondary,
+$gray-4: #BEC3CD;             // grijs 4: border inputfields
+$gray-6: #F2F3F5;             // grijs 6:
+$gray-7: #F7F8FA;             // grijs 7: button secondary bg-color hover /border
+$gray-secondary: #6B758A;     // grijs secondair: subtitles, date cardview
+$gray-primary: #394156;       // grijs primair: headings default tekst color
+
 // theme colors
 $danger:$red;
 $primary:$blue;
@@ -54,32 +81,14 @@ $theme-colors: (
   "warning":    $warning,
   "danger":     $danger,
   "success":    $success,
-  "light": $light,
-  "dark" : $dark
+  "light":      $light,
+  "dark" :      $dark
 );
 
-//variables
-$font-family-base: 'Work Sans',
-sans-serif;
-$headings-font-family: $font-family-base;
-
-//Old BD variables
-$color-blue :#4D5875; // is een donkerdere kleur dan BD-blauw
-$color-red:#e0462e;
-$color-darkblue:#394156;  
-$color-lightblue: #EBF3F8;
-$color-bg:#F5F5F5;
-
-$color-white : #ffffff;
-$color-black : #000000;
-
-$color-colleague : $green;
-
 //variables font
-$font-family-base: 'Work Sans',
-sans-serif;
-$font-secondary : 'Quicksand',
-sans-serif;
+$font-family-base: 'Work Sans', sans-serif;
+$font-secondary : 'Quicksand', sans-serif;
+$headings-font-family: $font-family-base;
 
 $font-light : 300;
 $font-normal : 400;
@@ -88,14 +97,15 @@ $font-semibold : 600;
 $font-bold : 700;
 $font-black : 900;
 
-$font-color-primary : $color-darkblue;
+$font-color-primary: $gray-primary;
+$font-color-secondary: $gray-secondary;
 
 //chatcloud
 $color-chatcloud:#E1EFF8;
 
 //dropdown item vars 
-$dropdown-bg: #fff;
-$dropdown-color: $color-blue;
+$dropdown-bg: $white;
+$dropdown-color: $font-color-primary;
 $dropdown-border-radius: 0px;
 $dropdown-border-width: 0px;
 $dropdown-box-shadow: 0 2px 5px 0 rgba(77,88,117,.2);
@@ -117,7 +127,7 @@ $form-label-margin-bottom: 0.25rem; //deze lijkt niet te werken
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-input-variables
-$input-color: $color-blue;                 
+$input-color: $font-color-primary;                 
 $input-border-color: #abb1bf;                    
 $input-border-width:1px;                 
 $input-disabled-color: $gray-300;
@@ -155,11 +165,11 @@ $btn-close-opacity:1;
 
 //toast
 $toast-background-color: $color-white;
-$toast-color: $color-darkblue;
+$toast-color: $font-color-primary;
 $toast-padding-x: 1.25rem;
 $toast-border-radius: $border-radius-default;
 $toast-header-background-color : $color-white;
-$toast-header-color:$color-darkblue;
+$toast-header-color:$font-color-primary;
 
 // pagination variables
 

package/dist/scss/mixins.scss

@@ -1,46 +1,59 @@
 @mixin alert($color, $bg-color) {  
-  border-radius: 8px;
-  padding: 15px;
-  font-size: 16px;
-  background-color: $bg-color;
-  color: $color;
-  border: 1px solid $color;
-  svg {
-    fill: $color;
-    &.icon{
-      margin-right:8px;
-      }
-  }  
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 16px;
+    background-color: $bg-color;
+    color: $color;
+    border: 1px solid $color;
+    svg {
+        fill: $color;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
 }
 
-@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color) {
-  color: $color;
-  background-color: $bg-color;  
-  border:$border $solid $border-color;
+@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
+    color: $color;
+    background-color: $bg-color;  
+    border:$border $solid $border-color;
 
-  svg {
-      fill: $color;
-      path{
-          fill:$color
-      }
-  }
+    svg {
+        fill: $color;
+        path{
+            fill:$color
+        }
+    }
 
-  &:hover, &:focus{
-      color: $hover-color;
-      background-color: $hover-bg-color;
-      border:$border $solid $border-color;   
-      
-      svg {
-          fill: $hover-color;
-          path{
-              fill:$hover-color;
-          }
-      }
-  }
+    &:hover, &:focus{
+        color: $hover-color;
+        background-color: $hover-bg-color;
+        border:$border $solid $hover-border-color;   
+        
+        svg {
+            fill: $hover-color;
+            path{
+                fill:$hover-color;
+            }
+        }
+    }
 
-  &.disabled{
-      opacity: 0.5;
-      color: $color;
-      background-color: $bg-color; 
-  }
+    &:active{
+        color: $color;
+        background-color: $bg-color;  
+        border:$border $solid $border-color;
+
+        svg {
+            fill: $color;
+            path{
+                fill:$color
+            }
+        }
+    }
+
+    &.disabled{
+        opacity: 0.5;
+        color: $color;
+        background-color: $bg-color; 
+    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.22.1",
+    "version": "0.23.0",
     "author": "Ralph van der Neut <rvanderneut@beterdichtbij.nl>",
     "type": "module",
     "files": [