feat: add Utrecht Data Badge component for React and CSS

.changeset/bright-files-perform.md

@@ -0,0 +1,9 @@
+---
+"@utrecht/web-component-library-stencil": major
+---
+
+Rename `<utrecht-badge-data>` to `<utrecht-data-badge>`.
+
+The name of the class name is now in sync with the [NL Design System "Data Badge" component](https://nldesignsystem.nl/data-badge).
+
+Migration: replace any `<utrecht-badge-data>` elements you might have, with `<utrecht-data-badge>`.

.changeset/great-singers-run.md

@@ -0,0 +1,9 @@
+---
+"@utrecht/data-badge-css": major
+---
+
+Create new Data Badge CSS component with `utrecht-data-badge` class name. This is a replacement for the `utrecht-badge-data` component.
+
+The name of the component is now in sync with the [NL Design System "Data Badge" component](https://nldesignsystem.nl/data-badge).
+
+Migration: replace all your `utrecht-badge-data` class names with `utrecht-data-badge`.

.changeset/moody-jeans-battle.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/data-badge-react": major
+---
+
+Create new Data Badge npm package for the React component.

.changeset/stupid-eyes-cough.md

@@ -0,0 +1,9 @@
+---
+"@utrecht/component-library-react": major
+---
+
+The `DataBadge` component now renders the `utrecht-data-badge` class name instead of the `utrecht-badge-data` class name.
+
+The name of the class name is now in sync with the [NL Design System "Data Badge" component](https://nldesignsystem.nl/data-badge).
+
+Migration: replace any `.utrecht-badge-data` selectors you might have, with `.utrecht-data-badge`.

components/badge-data/README.md → components/data-badge/README.md

@@ -1,5 +1,5 @@
 <!-- @license CC0-1.0 -->
 
-# Data badge
+# Data Badge
 
 Label met extra informatie, zoals een categorie of een eigenschap.

components/badge-data/docs/technology-css.nl.md → components/data-badge/docs/technology-css.nl.md

@@ -5,14 +5,14 @@
 Als je de data badge verschillende designs wilt geven, dan kan dat met eigen CSS. De data badge component heeft standaard maar design tokens voor een soort kleur. Je kunt een class name maken om de kleur aan te passen:
 
 ```css
-.utrecht-badge-data--myprefix-numeric {
-  --utrecht-badge-background-color: var(--myprefix-color-blue);
-  --utrecht-badge-color: var(--myprefix-color-offwhite);
+.utrecht-data-badge--myprefix-numeric {
+  --utrecht-data-badge-background-color: var(--myprefix-color-blue);
+  --utrecht-data-badge-color: var(--myprefix-color-offwhite);
 }
 
-.utrecht-badge-data--myprefix-date {
-  --utrecht-badge-background-color: var(--myprefix-color-red);
-  --utrecht-badge-color: var(--myprefix-color-offwhite);
+.utrecht-data-badge--myprefix-date {
+  --utrecht-data-badge-background-color: var(--myprefix-color-red);
+  --utrecht-data-badge-color: var(--myprefix-color-offwhite);
 }
 ```
 

components/badge-data/docs/technology-html.nl.md → components/data-badge/docs/technology-html.nl.md

@@ -6,8 +6,8 @@ Gebruik een inline HTML-element voor de _badge component_, zodat de badge binnen
 
 ```html
 <p>
-  Belangrijke gegevens: <span class="utrecht-badge-data">≥ 250㎡</span>
-  <span class="utrecht-badge-data">Energielabel A</span>
+  Belangrijke gegevens: <span class="utrecht-data-badge">≥ 250㎡</span>
+  <span class="utrecht-data-badge">Energielabel A</span>
 </p>
 ```
 
@@ -31,13 +31,13 @@ Een `div` in een `p` element wordt door de parser gezien als het einde van een `
 Gebruik een `time` element wanneer je een datum of een datum en tijd hebt:
 
 ```html
-<time class="utrecht-badge-data" datetime="2038-01-19T03:14:08Z">19 januari 2038 om 03:14:08</time>
+<time class="utrecht-data-badge" datetime="2038-01-19T03:14:08Z">19 januari 2038 om 03:14:08</time>
 ```
 
 Gebruik een `time` element wanneer je een een tijdsduur hebt, in het `datetime` attribuut moet periode in [ISO 8601 notatie](https://en.wikipedia.org/wiki/ISO_8601#Durations).
 
 ```html
-<time class="utrecht-badge-data" datetime="PT1H39M">1 uur en 39 minuten</time>
+<time class="utrecht-data-badge" datetime="PT1H39M">1 uur en 39 minuten</time>
 ```
 
 ## Overige computer-leesbare data
@@ -48,7 +48,7 @@ Gebruik een `data` element wanneer je een `value` hebt met een waarde die voor d
 <tr>
   <th>Koningsweg 13</th>
   <td>
-    <data class="utrecht-badge-data" value="259">≥ 250㎡</data>
+    <data class="utrecht-data-badge" value="259">≥ 250㎡</data>
   </td>
 </tr>
 ```

components/badge-data/package.json → components/data-badge/package.json

@@ -1,9 +1,9 @@
 {
-  "version": "1.4.0",
+  "version": "0.0.0",
   "author": "Community for NL Design System",
-  "description": "Badge data component for the Municipality of Utrecht based on the NL Design System architecture",
+  "description": "Data Badge component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@utrecht/badge-data-css",
+  "name": "@utrecht/data-badge-css",
   "files": [
     "dist/",
     "docs/",
@@ -16,7 +16,6 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@utrecht/badge-css": "workspace:*",
     "@utrecht/build-utils-css": "workspace:*"
   },
   "keywords": [
@@ -28,6 +27,6 @@
   "repository": {
     "type": "git+ssh",
     "url": "[email protected]:nl-design-system/utrecht.git",
-    "directory": "components/badge-data"
+    "directory": "components/data-badge"
   }
 }

components/data-badge/src/_mixin.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+@mixin utrecht-data-badge {
+  background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0 0% 0%)));
+  border-radius: var(--utrecht-data-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  border-width: var(--utrecht-data-badge-border-width, 0);
+  color: var(--utrecht-data-badge-color, var(--utrecht-badge-color, hsl(0 0% 100%)));
+  display: inline-block;
+  font-family: var(--utrecht-data-badge-font-family, var(--utrecht-document-font-family, sans-serif));
+  font-size: var(--utrecht-data-badge-font-size, var(--utrecht-badge-font-size, inherit));
+  font-weight: var(--utrecht-data-badge-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */
+  line-height: var(--utrecht-data-badge-line-height, var(--utrecht-badge-line-height, 1em));
+  max-block-size: max-content;
+  max-inline-size: max-content;
+  min-block-size: var(--utrecht-data-badge-min-block-size, 1em);
+  min-inline-size: var(--utrecht-data-badge-min-inline-size, 1em);
+  padding-block-end: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-block-start: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-inline-end: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  padding-inline-start: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  text-decoration: none; /* no inheritance */
+}
+
+@mixin utrecht-data-badge--media-query-forced-colors {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border-color: currentColor;
+    border-style: solid;
+
+    /* Warning: there layout difference because of the added 1px border */
+    border-width: 1px;
+  }
+}

components/data-badge/src/index.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+@import "./mixin";
+
+/* `.utrecht-badge-data` is deprecated, but we'll keep supporting it for a while before we remove it */
+.utrecht-badge-data,
+.utrecht-data-badge {
+  @include utrecht-data-badge;
+}