chore(docs): number-field page restructure (VIV-2118) (#2037)

apps/docs/content/_data/components.json

@@ -153,8 +153,13 @@
 	},
 	{
 		"title": "Number Field",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/number-field/README.md"
+		"description": "Allows users to enter a number in a text field or use buttons to increment or decrement the value.",
+		"variations": "./libs/components/src/lib/number-field/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/number-field/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/number-field/README.md",
+		"accessibility": "./libs/components/src/lib/number-field/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/number-field/USE-CASES.md"
 	},
 	{
 		"title": "Fab",

libs/components/src/lib/number-field/ACCESSIBILITY.md

@@ -0,0 +1,14 @@
+- If no label is set - it is highly recommended that `aria-label` will be added.
+- The add / subtract buttons are automatically given a localized version of the words "Increment" and "Decrement" respectively. These can be overriden using `increment-button-aria-label` and `decrement-button-aria-label`.
+
+```html
+<vwc-number-field
+	aria-label="choose a number"
+	increment-button-aria-label="Add"
+	decrement-button-aria-label="Subtract"
+></vwc-number-field>
+```
+
+## Resources
+
+- [Vivid Number Field: Manual accessibility test](https://docs.google.com/spreadsheets/d/1HJuAWaADRbZqnvWJRArhBYP2G2aWSKWfWuAVovwsFjs/edit?gid=1175911860#gid=1175911860)

libs/components/src/lib/number-field/GUIDELINES.md

@@ -0,0 +1,103 @@
+## Labelling
+
+### Label
+
+<docs-do-dont>
+<docs-do slot="description" headline="Use the label attribute whenever possible" caption="It provides a description of the purpose of the Number Field to all users and it is accessibly linked to the input element.">
+
+```html preview example
+<vwc-number-field label="Wanted quantity"></vwc-number-field>
+```
+
+</docs-do>
+<docs-do dont headline="Don't use the placeholder attribute as a label">
+
+```html preview example
+<vwc-number-field placeholder="Wanted quantity"></vwc-number-field>
+```
+
+It's bad for UX and accessibility.<br />[The problem with placeholders](https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/)
+
+</docs-do>
+</docs-do-dont>
+
+### Helper Text
+
+<docs-do-dont>
+<docs-do slot="description" headline="Use helper text to provide extra information about the field" caption="It is visible to the user at all times and it is read out by screen readers when the user focuses on the input element.">
+
+```html preview example
+<vwc-number-field
+	label="Wanted quantity"
+	helper-text="set a number higher than 1 less than 10"
+></vwc-number-field>
+```
+
+</docs-do>
+</docs-do-dont>
+
+## Scale
+
+<docs-do-dont headline="Use condensed Number Fields when space is limited" reverse>
+
+<div slot="description">
+
+The `condensed` Text Field is useful when used inside other components (inside [data-grid-cell](/components/data-grid/#cell) or [action-group](/components/action-group/) for a [toolbar](/components/button/use-cases/#toolbars)) as they take up less space.
+
+</div>
+<docs-do>
+
+```html preview example
+<div class="container">
+	<vwc-data-grid>
+		<vwc-data-grid-row row-type="header">
+			<vwc-data-grid-cell cell-type="columnheader">User</vwc-data-grid-cell>
+			<vwc-data-grid-cell
+				class="controls"
+				cell-type="columnheader"
+			></vwc-data-grid-cell>
+		</vwc-data-grid-row>
+		<vwc-data-grid-row>
+			<vwc-data-grid-cell>
+				<vwc-number-field label="Wanted quantity"></vwc-number-field>
+			</vwc-data-grid-cell>
+			<vwc-data-grid-cell class="controls">
+				<vwc-button
+					appearance="outlined"
+					size="condensed"
+					icon="edit-line"
+					aria-label="Edit"
+				></vwc-button>
+				<vwc-button
+					appearance="outlined"
+					size="condensed"
+					icon="delete-line"
+					aria-label="Delete"
+					connotation="alert"
+				></vwc-button>
+			</vwc-data-grid-cell>
+		</vwc-data-grid-row>
+	</vwc-data-grid>
+</div>
+
+<style>
+	.conainer {
+		display: block;
+		padding: 8px 0;
+	}
+
+	.controls {
+		width: 5.75rem;
+	}
+</style>
+```
+
+</docs-do>
+</docs-do-dont>
+
+## Related Components
+
+- [Text Area](/components/text-area/)
+- [Text Field](/components/text-field)
+- [Combobox](/components/combobox/)
+- [Searchable Select](/components/searchable-select/)