@rijkshuisstijl-community/components-css 2.0.0 → 3.0.0

package/index.scss

@@ -13,9 +13,10 @@
 @use "src/blockquote/index" as blockquote;
 @use "src/breadcrumb-nav/index" as breadcrumb;
 @use "src/button/index" as button;
-@use "src/card/index" as card;
+@use "src/card-as-link/index" as cardAsLink;
 @use "src/code-input/index" as codeInput;
 @use "src/code-input-group/index" as codeInputGroup;
+@use "src/data-badge-button/index" as dataBadgeButton;
 @use "src/dot-badge/index" as dotBadge;
 @use "src/checkbox/index" as checkbox;
 @use "src/figure/index" as figure;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -19,6 +19,7 @@
     "directory": "packages/components-css"
   },
   "devDependencies": {
+    "@utrecht/focus-ring-css": "2.3.1",
     "scss": "0.2.4",
     "vite": "6.3.4"
   },

package/src/alert/index.scss

@@ -9,8 +9,14 @@
   --nl-heading-level-3-line-height: var(--utrecht-alert-heading-line-height);
   --nl-heading-level-4-line-height: var(--utrecht-alert-heading-line-height);
   --nl-heading-level-5-line-height: var(--utrecht-alert-heading-line-height);
+  --nl-heading-level-1-color: var(--utrecht-alert-color);
+  --nl-heading-level-2-color: var(--utrecht-alert-color);
+  --nl-heading-level-3-color: var(--utrecht-alert-color);
+  --nl-heading-level-4-color: var(--utrecht-alert-color);
+  --nl-heading-level-5-color: var(--utrecht-alert-color);
   --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
   --nl-paragraph-line-height: var(--utrecht-alert-message-line-height);
+  --nl-paragraph-color: var(--utrecht-alert-color);
 }
 
 .utrecht-alert__message {

package/src/{card → card-as-link}/_mixin.scss

@@ -1,4 +1,4 @@
-@mixin rhc-card {
+@mixin rhc-card-as-link {
   @include rounded-border-corners;
 
   box-sizing: border-box;
@@ -13,7 +13,7 @@
   text-decoration: none;
 }
 
-@mixin rhc-card--default {
+@mixin rhc-card-as-link--default {
   background-color: var(--rhc-card-as-link-background-color, white);
   border-color: var(--rhc-card-as-link-border-color, #cbd5e1);
   border-style: solid;
@@ -21,7 +21,7 @@
   color: var(--rhc-card-as-link-color, #0f172a);
 }
 
-@mixin rhc-card--full-bleed {
+@mixin rhc-card-as-link--full-bleed {
   --rhc-card-as-link-heading-color: var(--rhc-card-as-link-full-bleed-color, white);
   --rhc-card-as-link-metadata-color: var(
     --rhc-card-as-link-full-bleed-metadata-color,
@@ -31,7 +31,7 @@
   color: var(--rhc-card-as-link-full-bleed-color, white);
 }
 
-@mixin rhc-card--horizontal {
+@mixin rhc-card-as-link--horizontal {
   --rhc-card-as-link-heading-color: var(--rhc-card-as-link-horizontal-color, white);
 
   color: var(--rhc-card-as-link-horizontal-color, white);
@@ -40,39 +40,39 @@
   max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
 }
 
-@mixin rhc-card--active {
+@mixin rhc-card-as-link--active {
   background-color: var(--rhc-card-as-link-active-background-color, #dce3ea);
 }
 
-@mixin rhc-card--default--focus {
+@mixin rhc-card-as-link--default--focus {
   background-color: var(--rhc-card-as-link-focus-background-color, #dce3ea);
 }
 
-@mixin rhc-card--default--hover {
+@mixin rhc-card-as-link--default--hover {
   background-color: var(--rhc-card-as-link-hover-background-color, #f8fafc);
 }
 
-@mixin rhc-card--full-bleed__footer {
+@mixin rhc-card-as-link--full-bleed__footer {
   padding-block-end: var(--rhc-card-as-link-full-bleed-padding-block-end, 16px);
   padding-block-start: var(--rhc-card-as-link-full-bleed-padding-block-start, 16px);
   padding-inline-end: var(--rhc-card-as-link-full-bleed-padding-inline-end, 0);
   padding-inline-start: var(--rhc-card-as-link-full-bleed-padding-inline-start, 0);
 }
 
-@mixin rhc-card__button {
+@mixin rhc-card-as-link__button {
   z-index: 1;
 }
 
-@mixin rhc-card__image-container {
+@mixin rhc-card-as-link__image-container {
   order: -1;
 }
 
-@mixin rhc-card__image {
+@mixin rhc-card-as-link__image {
   aspect-ratio: 16 / 9;
   block-size: 100%;
 }
 
-@mixin rhc-card__content {
+@mixin rhc-card-as-link__content {
   display: flex;
   flex-direction: column;
   padding-block-end: var(--rhc-card-as-link-padding-block-end, 16px);
@@ -82,7 +82,7 @@
   row-gap: var(--rhc-card-as-link-row-gap, 12px);
 }
 
-@mixin rhc-card--horizontal__content {
+@mixin rhc-card-as-link--horizontal__content {
   @include rounded-border-corners;
 
   background-color: var(--rhc-card-as-link-horizontal-background-color, #154273);
@@ -98,16 +98,16 @@
   row-gap: var(--rhc-card-as-link-row-gap, 12px);
 }
 
-@mixin rhc-card--horizontal__heading {
+@mixin rhc-card-as-link--horizontal__heading {
   inline-size: var(--rhc-card-as-link-horizontal-heading-inline-size);
 }
 
-@mixin rhc-card--full-bleed__image-container {
+@mixin rhc-card-as-link--full-bleed__image-container {
   block-size: 100%;
   inline-size: 100%;
 }
 
-@mixin rhc-card--full-bleed__image {
+@mixin rhc-card-as-link--full-bleed__image {
   @include rounded-border-corners;
 
   block-size: 100%;
@@ -117,7 +117,7 @@
   z-index: -1;
 }
 
-@mixin rhc-card--horizontal__image {
+@mixin rhc-card-as-link--horizontal__image {
   @include rounded-border-corners;
 
   aspect-ratio: 1 / 1;
@@ -126,7 +126,7 @@
   max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
 }
 
-@mixin rhc-card__heading {
+@mixin rhc-card-as-link__heading {
   align-items: center;
   color: var(--rhc-card-as-link-heading-color, #154273);
   display: flex;
@@ -134,29 +134,29 @@
   font-weight: var(--rhc-card-as-link-heading-font-weight, 700);
 }
 
-@mixin rhc-card__heading--active {
+@mixin rhc-card-as-link__heading--active {
   text-decoration: var(--rhc-card-as-link-active-text-decoration, underline);
 }
 
-@mixin rhc-card__heading--hover {
+@mixin rhc-card-as-link__heading--hover {
   text-decoration: var(--rhc-card-as-link-hover-text-decoration, underline);
 }
 
-@mixin rhc-card__heading--focus {
+@mixin rhc-card-as-link__heading--focus {
   text-decoration: var(--rhc-card-as-link-focus-text-decoration, underline);
 }
 
-@mixin rhc-card__icon {
+@mixin rhc-card-as-link__icon {
   color: var(--rhc-card-as-link-icon-color, #154273);
   size: var(--rhc-card-as-link-icon-size, 24px);
 }
 
-@mixin rhc-card__link {
+@mixin rhc-card-as-link__link {
   color: var(--rhc-card-as-link-link-color, #01689b);
   text-decoration: var(--rhc-card-as-link-link-text-decoration, underline);
 }
 
-@mixin rhc-card__anchor {
+@mixin rhc-card-as-link__anchor {
   a::after {
     content: "";
     inset: 0;
@@ -164,22 +164,22 @@
   }
 }
 
-@mixin rhc-card__link--active {
+@mixin rhc-card-as-link__link--active {
   --utrecht-link-color: var(--rhc-card-as-link-link-active-color, #42145f);
 
   color: var(--rhc-card-as-link-link-active-color, #42145f);
   text-decoration: var(--rhc-card-as-link-link-active-text-decoration, none);
 }
 
-@mixin rhc-card__link--hover {
+@mixin rhc-card-as-link__link--hover {
   text-decoration: var(--rhc-card-as-link-link-hover-text-decoration, none);
 }
 
-@mixin rhc-card__link--focus {
+@mixin rhc-card-as-link__link--focus {
   text-decoration: var(--rhc-card-as-link-link-focus-text-decoration, none);
 }
 
-@mixin rhc-card__metadata {
+@mixin rhc-card-as-link__metadata {
   color: var(--rhc-card-as-link-metadata-color, #154273);
 }
 
@@ -193,6 +193,6 @@
   );
 }
 
-@mixin rhc-card__empty-element {
+@mixin rhc-card-as-link__empty-element {
   display: none;
 }

package/src/card-as-link/index.scss

@@ -0,0 +1,121 @@
+@use "mixin";
+
+.rhc-card-as-link {
+  @include mixin.rhc-card-as-link;
+  .utrecht-img:not(img[width]) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+}
+
+.rhc-card-as-link__button {
+  @include mixin.rhc-card-as-link__button;
+}
+
+.rhc-card-as-link div:empty {
+  @include mixin.rhc-card-as-link__empty-element;
+}
+
+.rhc-card-as-link--default {
+  @include mixin.rhc-card-as-link--default;
+}
+
+.rhc-card-as-link--full-bleed {
+  @include mixin.rhc-card-as-link--full-bleed;
+}
+
+.rhc-card-as-link--horizontal {
+  @include mixin.rhc-card-as-link--horizontal;
+}
+
+.rhc-card-as-link__footer {
+  @include mixin.rhc-card-as-link__content;
+}
+
+.rhc-card-as-link__image-container {
+  @include mixin.rhc-card-as-link__image-container;
+}
+
+.rhc-card-as-link__image {
+  @include mixin.rhc-card-as-link__image;
+}
+
+.rhc-card-as-link__heading {
+  @include mixin.rhc-card-as-link__heading;
+}
+
+.rhc-card-as-link__icon {
+  @include mixin.rhc-card-as-link__icon;
+}
+
+.rhc-card-as-link__metadata {
+  @include mixin.rhc-card-as-link__metadata;
+}
+
+.rhc-card-as-link__content {
+  @include mixin.rhc-card-as-link__content;
+}
+
+.rhc-card-as-link--horizontal .rhc-card-as-link__content {
+  @include mixin.rhc-card-as-link--horizontal__content;
+}
+
+.rhc-card-as-link--horizontal .rhc-card-as-link__heading {
+  @include mixin.rhc-card-as-link--horizontal__heading;
+}
+
+.rhc-card-as-link--horizontal .rhc-card-as-link__image {
+  @include mixin.rhc-card-as-link--horizontal__image;
+}
+
+.rhc-card-as-link--full-bleed .rhc-card-as-link__footer {
+  @include mixin.rhc-card-as-link--full-bleed__footer;
+}
+
+.rhc-card-as-link--full-bleed .rhc-card-as-link__image {
+  @include mixin.rhc-card-as-link--full-bleed__image;
+}
+
+.rhc-card-as-link__link {
+  @include mixin.rhc-card-as-link__link;
+}
+
+.rhc-card-as-link__anchor {
+  @include mixin.rhc-card-as-link__anchor;
+}
+
+.rhc-card-as-link:active {
+  @include mixin.rhc-card-as-link--active;
+}
+
+.rhc-card-as-link:active .rhc-card-as-link__heading {
+  @include mixin.rhc-card-as-link__heading--active;
+}
+
+.rhc-card-as-link:active .rhc-card-as-link__link {
+  @include mixin.rhc-card-as-link__link--active;
+}
+
+.rhc-card-as-link--default:focus {
+  @include mixin.rhc-card-as-link--default--focus;
+}
+
+.rhc-card-as-link:focus .rhc-card-as-link__heading {
+  @include mixin.rhc-card-as-link__heading--active;
+}
+
+.rhc-card-as-link:focus .rhc-card-as-link__link {
+  @include mixin.rhc-card-as-link__link--focus;
+}
+
+.rhc-card-as-link--default:hover {
+  @include mixin.rhc-card-as-link--default--hover;
+}
+
+.rhc-card-as-link:hover .rhc-card-as-link__heading {
+  @include mixin.rhc-card-as-link__heading--active;
+}
+
+.rhc-card-as-link:hover .rhc-card-as-link__link {
+  @include mixin.rhc-card-as-link__link--hover;
+}

package/src/data-badge-button/_mixin.scss

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "../button/mixin" as button-mixin;
+@use "@utrecht/focus-ring-css/src/mixin" as utrecht-focus-mixin;
+
+@mixin rhc-data-badge-button {
+  align-items: center;
+  column-gap: var(--rhc-data-badge-button-column-gap);
+  cursor: pointer;
+  display: inline-flex;
+  position: relative;
+}
+
+@mixin rhc-data-badge-button--hover {
+  --utrecht-data-badge-background-color: var(--rhc-data-badge-button-hover-background-color);
+  --utrecht-data-badge-color: var(--rhc-data-badge-button-hover-color);
+}
+
+@mixin rhc-data-badge-button__sr-only {
+  @include button-mixin.invisible-but-accessible;
+}
+
+@mixin rhc-data-badge-button--focus-visible {
+  @include utrecht-focus-mixin.utrecht-focus-visible;
+}

package/src/data-badge-button/index.scss

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.rhc-data-badge-button {
+  @include mixin.rhc-data-badge-button;
+
+  &:hover {
+    @include mixin.rhc-data-badge-button--hover;
+  }
+}
+
+.rhc-data-badge-button .rhc-data-badge-button__sr-only {
+  @include mixin.rhc-data-badge-button__sr-only;
+}
+
+.rhc-data-badge-button:focus-visible,
+.rhc-data-badge-button--focus-visible {
+  @include mixin.rhc-data-badge-button--focus-visible;
+}

package/src/data-summary/_mixin.scss

@@ -32,6 +32,8 @@
 
   @media (width > 768px) {
     flex-basis: 20%;
+    flex-grow: 0;
+    flex-shrink: 0;
   }
 }
 
@@ -40,6 +42,8 @@
   --_rhc-data-summary-item-action-padding-block-start: var(--rhc-data-summary-item-action-padding-block-start);
   --_rhc-data-summary-item-action-padding-inline-end: var(--rhc-data-summary-item-action-padding-inline-end);
   --_rhc-data-summary-item-action-padding-inline-start: var(--rhc-data-summary-item-action-padding-inline-start);
+
+  margin-inline-start: 0;
 }
 
 @mixin rhc-data-summary--row__item-action {
@@ -81,6 +85,8 @@
     --_rhc-data-summary-item-key-padding-inline-start: var(--rhc-data-summary-item-key-row-padding-inline-start);
 
     flex-basis: 20%;
+    flex-grow: 0;
+    flex-shrink: 0;
   }
 }
 
@@ -109,5 +115,8 @@
     --_rhc-data-summary-item-value-padding-block-start: var(--rhc-data-summary-item-value-row-padding-block-start);
     --_rhc-data-summary-item-value-padding-inline-end: var(--rhc-data-summary-item-value-row-padding-inline-end);
     --_rhc-data-summary-item-value-padding-inline-start: var(--rhc-data-summary-item-value-row-padding-inline-start);
+
+    flex-basis: 60%;
+    flex-grow: 0;
   }
 }

package/src/card/index.scss

@@ -1,121 +0,0 @@
-@use "mixin";
-
-.rhc-card {
-  @include mixin.rhc-card;
-  .utrecht-img:not(img[width]) {
-    block-size: 100%;
-    inline-size: 100%;
-  }
-}
-
-.rhc-card__button {
-  @include mixin.rhc-card__button;
-}
-
-.rhc-card div:empty {
-  @include mixin.rhc-card__empty-element;
-}
-
-.rhc-card--default {
-  @include mixin.rhc-card--default;
-}
-
-.rhc-card--full-bleed {
-  @include mixin.rhc-card--full-bleed;
-}
-
-.rhc-card--horizontal {
-  @include mixin.rhc-card--horizontal;
-}
-
-.rhc-card__footer {
-  @include mixin.rhc-card__content;
-}
-
-.rhc-card__image-container {
-  @include mixin.rhc-card__image-container;
-}
-
-.rhc-card__image {
-  @include mixin.rhc-card__image;
-}
-
-.rhc-card__heading {
-  @include mixin.rhc-card__heading;
-}
-
-.rhc-card__icon {
-  @include mixin.rhc-card__icon;
-}
-
-.rhc-card__metadata {
-  @include mixin.rhc-card__metadata;
-}
-
-.rhc-card__content {
-  @include mixin.rhc-card__content;
-}
-
-.rhc-card--horizontal .rhc-card__content {
-  @include mixin.rhc-card--horizontal__content;
-}
-
-.rhc-card--horizontal .rhc-card__heading {
-  @include mixin.rhc-card--horizontal__heading;
-}
-
-.rhc-card--horizontal .rhc-card__image {
-  @include mixin.rhc-card--horizontal__image;
-}
-
-.rhc-card--full-bleed .rhc-card__footer {
-  @include mixin.rhc-card--full-bleed__footer;
-}
-
-.rhc-card--full-bleed .rhc-card__image {
-  @include mixin.rhc-card--full-bleed__image;
-}
-
-.rhc-card__link {
-  @include mixin.rhc-card__link;
-}
-
-.rhc-card__anchor {
-  @include mixin.rhc-card__anchor;
-}
-
-.rhc-card:active {
-  @include mixin.rhc-card--active;
-}
-
-.rhc-card:active .rhc-card__heading {
-  @include mixin.rhc-card__heading--active;
-}
-
-.rhc-card:active .rhc-card__link {
-  @include mixin.rhc-card__link--active;
-}
-
-.rhc-card--default:focus {
-  @include mixin.rhc-card--default--focus;
-}
-
-.rhc-card:focus .rhc-card__heading {
-  @include mixin.rhc-card__heading--active;
-}
-
-.rhc-card:focus .rhc-card__link {
-  @include mixin.rhc-card__link--focus;
-}
-
-.rhc-card--default:hover {
-  @include mixin.rhc-card--default--hover;
-}
-
-.rhc-card:hover .rhc-card__heading {
-  @include mixin.rhc-card__heading--active;
-}
-
-.rhc-card:hover .rhc-card__link {
-  @include mixin.rhc-card__link--hover;
-}