Merge branch 'dbux-3' into feat-dbswc-323-link

Author: mfranzke

docs/migrationGuide.adoc

@@ -36,14 +36,20 @@ We've remove the deprecated previous HTML implementation of the label by an `out
 - The `id`-attributes value on that `label` element needs to match the following attributes values that needs to get added onto the `progress` HTML tag itself:
 `aria-describedby="{{ id }}-label"`
 
+=== `input`
+
+- The input background style variations `semitransparent`, `solid`, `white` and `outline` have been removed. Input fields have only one background style left. 
+- Introducing 3 different sizes of input fields according to our `tonality` introduction: `functional`, `regular`, `expressive
+- Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
+- Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system
+
 === `link`
 
 - Removed the ability for custom icons according to guidelines 3.0
 - Added `primary` as variant for highlighting links
 - Changed use of `data-variant` to use with `primary` and used `data-content` attribute for differentiation between `internal` and `external`
 - Font-size definition has moved to DB UI Base due to our `tonality` introduction (default and for `data-size=small`)
 
-
 == DB UI Core 2.2.0 Migration Guide
 
 === progress element

helpers/unique-id.js

@@ -0,0 +1,18 @@
+/* eslint unicorn/prefer-module: 0, eqeqeq: 0 */
+module.exports = function (Handlebars) {
+	Handlebars.registerHelper('unique-id', function () {
+		// Adapted from https://www.codingdeft.com/posts/generate-uuid-javascript/
+		const crypto = require('node:crypto');
+
+		const buf = crypto.randomBytes(16);
+
+		// Convert the buffer to a hexadecimal string
+		const hex = buf.toString('hex');
+
+		// Return the hexadecimal string as a UUID
+		return `id-${hex.slice(
+			0,
+			7
+		)}-${hex.slice(8, 15)}-${hex.slice(16, 23)}-${hex.slice(24, 31)}`;
+	});
+};

package-lock.json

@@ -56,7 +56,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@csstools/normalize.css": "^12.0.0",
-    "@db-ui/base": "2.0.0-17-7e98291"
+    "@db-ui/base": "2.0.0-18-812537f"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",

package.json

@@ -0,0 +1 @@
+// TODO common styles for formfields adopted from input

source/_patterns/01-elements/_form-element.scss

@@ -0,0 +1,6 @@
+<dl>
+{{#each sizes}}
+	<dt>{{size}}:</dt>
+	<dd class="db-ui-{{size}}">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
+{{/each }}
+</dl>

source/_patterns/01-elements/_form-elements.scss

@@ -0,0 +1,19 @@
+{
+	"sizes": [
+		{
+			"size": "functional",
+			"label": "Functional"
+		},
+		{
+			"size": "regular",
+			"label": "Regular (default, data-size attribute is optional)"
+		},
+		{
+			"size": "expressive",
+			"label": "Expressive"
+		}
+	],
+	"type": "text",
+	"placeholder": "e.g. DB User",
+	"label": "Textlabel"
+}