feat(Field): start implementing field api

[eirikbacker]

Fixes #1943
For now just testing creating a <Field> component, which uses a utility that works with the real DOM, making it possible to use in a future custom element <ds-field> as well. This also allows injecting any form element - not just made by us, but any native form element, any form associated custom element or third party components.

By using native DOM, there is no Context that needs to run on server, and all the wire-up is only for assistive technology - it does not effect the visual representation, meaning it can be done under the hood on the client without causing any layout shift or similar issues.

API:

<Field>
  <Label>Label text</Label>
  <Field.Description>Description</Field.Description> // Should be without Field.? :)
  <Input />
  <Validation>Validation message</Field.Validation>
</Field>

[changeset-bot]

⚠️ No Changeset found

Latest commit: f271f37

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Preview deployments for this pull request:

Storybook - 28. Sep 2024 - 13:39

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	59.57%	3886 / 6523
🔵	Statements	59.57%	3886 / 6523
🔵	Functions	84.1%	164 / 195
🔵	Branches	75.24%	535 / 711

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx	100%	100%	100%	100%
packages/react/src/components/form/Field/Field.tsx	35.71%	100%	0%	35.71%	9-14, 16-17, 19
packages/react/src/components/form/Field/FieldDescription.tsx	66.66%	100%	0%	66.66%	10-11
packages/react/src/components/form/Field/a11yField.ts	20.45%	100%	0%	20.45%	12-13, 15-17, 19-20, 22-27, 29-32, 34-39, 41-43, 45-50, 52-54

Generated in workflow #118