@beterdichtbij/component-library 0.70.0 → 0.71.0-alpha.0

package/dist/scss/_alert.scss

@@ -3,8 +3,4 @@
   .alert-#{$variant} {
     @include alert($color, $bg-color);
   }
-}
-
-.alert {
-  color: $color-darkblue;
 }

package/dist/scss/_article.scss

@@ -17,10 +17,5 @@ article {
       display:flex;
       justify-content: space-between;
     }
-
-    a {
-      color: #1e66ae;
-      text-decoration: underline;
-    }
   }
 }

package/dist/scss/_button.scss

@@ -29,9 +29,6 @@ $btn-variants:
 .btn-link {
     text-decoration: none;
 
-    // Ensure WCAG AA contrast for the reset link button on white background.
-    color: #1e66ae;
-
     &:hover {
         text-decoration: underline;
     }

package/dist/scss/_card.scss

@@ -3,7 +3,7 @@
     border-radius: $border-radius-default;
 
     .card-header {
-        background-color: #1f6cae;
+        background-color: $primary;
         display: flex;
         align-items: center;
         justify-content: space-between;

package/dist/scss/_pagination.scss

@@ -32,11 +32,26 @@
         text-align: center;
         margin-bottom: 0px;
 
+        &.colleague {
+            .page-item:not(.active) .page-link {
+                color: $color-colleague;
+            }
+        }
+
         .page-item {
             background-color: $white;
             display: inline-block;
             margin: 4px;
             vertical-align: top;
+
+            .page-link {
+                color: $blue;
+
+                svg {
+                    color: $color-darkblue;
+                    margin: 0;
+                }
+            }
         }
     }
 }

package/dist/scss/_templates.scss

@@ -1,6 +1,7 @@
 @import "templates/change-password-template";
 @import "templates/content-library-template";
 @import "templates/not-found-template";
+@import "templates/video-call-template";
 // TODO split up per template component
 
 .template {
@@ -233,10 +234,10 @@
         }
 
         .bd-article.is-unread {
-            border-right: 4px solid #1e66ae;
+            border-right: 4px solid $primary;
 
             .bd-date {
-                color: #1e66ae;
+                color: $primary;
                 font-weight: 500;
             }
 
@@ -245,7 +246,7 @@
                 width: 20px;
                 height: 20px;
                 border-radius: 12px;
-                background-color: #1e66ae;
+                background-color: $primary;
                 margin-top:6px;
             }
         }

package/dist/scss/templates/_video-call-template.scss

@@ -0,0 +1,207 @@
+.video-call-template {
+	$small-text: 14px;
+
+	.bd-conversation-card {
+		margin-bottom: 20px;
+	}
+
+	.incoming,
+	.outgoing {
+		.card {
+			padding: 20px;
+			row-gap: 20px;
+		}
+
+		&__video {
+			display: block;
+		}
+
+		&__screenshare {
+			display: none;
+		}
+
+		&__video,
+		&__screenshare {
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			border-radius: 4px;
+			background-color: $color-bg;
+			overflow: hidden;
+			font-size: 0;
+
+			div {
+				width: 100%;
+				height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+				video {
+					width: 100%;
+					object-fit: contain !important;
+				}
+			}
+		}
+
+		&__available-cameras-count {
+			font-size: $small-text;
+			margin: 0;
+		}
+	}
+
+	.incoming {
+		&--loading,
+		&--declined,
+		&--hangup {
+			.card {
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		.card {
+			height: 680px;
+
+			@include media-breakpoint-down(sm) {
+				height: unset;
+			}
+
+			button {
+				width: fit-content;
+			}
+
+			.permissions-denied__audio,
+			.permissions-denied__video {
+				display: flex;
+				gap: 16px;
+				align-items: baseline;
+				justify-content: center;
+			}
+		}
+
+		&__video,
+		&__screenshare {
+			height: 580px;
+
+			@include media-breakpoint-down(sm) {
+				height: 200px;
+			}
+		}
+
+		&__settings {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.side {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+		gap: 20px;
+	}
+
+	.outgoing {
+		margin-bottom: 20px;
+
+		&__video {
+			height: 200px;
+		}
+
+		.permissions-denied__video {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+		}
+	}
+
+	.settings {
+		border: 1px solid $color-border-light;
+		padding: 20px;
+		border-radius: 8px;
+
+		p {
+			color: $color-gray-secondary;
+		}
+
+		&__signal {
+			display: flex;
+			align-items: center;
+			padding-bottom: 20px;
+			gap: 12px;
+			border-bottom: 1px solid $color-border-light;
+
+			&.weak {
+				.indicator li:nth-child(1) {
+					background-color: $brand-danger;
+				}
+			}
+
+			&.steady {
+				.indicator li:nth-child(1),
+				.indicator li:nth-child(2) {
+					background-color: $brand-warning;
+				}
+			}
+
+			&.strong {
+				.indicator li {
+					background-color: $brand-success;
+				}
+			}
+
+			.indicator {
+				list-style: none;
+				display: flex;
+				align-items: flex-end;
+				margin: 0;
+				padding: 0;
+				gap: 2px;
+
+				li {
+					width: 6px;
+					border-radius: 1.6px;
+					background-color: $color-border-light;
+
+					&:nth-child(1) {
+						height: 7px;
+					}
+
+					&:nth-child(2) {
+						height: 13px;
+					}
+
+					&:nth-child(3) {
+						height: 20px;
+					}
+				}
+			}
+
+			p {
+				margin-bottom: 0;
+				line-height: 20px;
+			}
+		}
+
+		&__help {
+			padding-top: 20px;
+
+			p {
+				font-size: $small-text;
+				line-height: 21px;
+
+				&:last-of-type {
+					margin-bottom: 0;
+				}
+
+				b {
+					font-weight: 600;
+				}
+			}
+		}
+	}
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@beterdichtbij/component-library",
   "description": "Component library voor BeterDichtbij design system",
   "private": false,
-  "version": "0.70.0",
+  "version": "0.71.0-alpha.0",
   "engines": {
     "node": "24.x",
     "npm": "11.x"