Docs number text date component (#1892)

* Docs for Date, Number and Text component

* Added images and examples for the components

* Added documentation for properties on componentes

* Fix feedback from PR

* Fix feedback from PR

* Fix feedback from PR

* Fix feedback from PR

* Update content/altinn-studio/reference/ux/components/Date/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Text/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

---------

Co-authored-by: Camilla Marie Dalan <[email protected]>

content/altinn-studio/reference/ux/components/Date/_index.en.md

@@ -0,0 +1,128 @@
+---
+title: Date
+linktitle: Date
+description: A component that allows you to display a formatted date with or without label.
+schemaname: Date # Component schema name used to autogenerate list of properties from json schema (replace with appropriate component name)
+weight: 10 # Do not change, the components will be sorted alphabetically
+toc: true
+---
+
+## Usage
+
+The `Date` component allows users to add structured formatted date, with or without label.
+
+### Anatomy
+
+1. **Horizontal**: A date with a label structured horizontally
+    ![Date horizontal anatomy](date-horizontal.png "Date Horizontal")
+2. **Vertical**: A date with a label structured vertically 
+    ![Date vertical anatomy](date-vertical.png "Date vertical")
+
+
+<!-- 
+Add the following sections if relevant:
+
+### Behavior
+
+(How the component behaves in different contexts)
+
+### Style
+
+(Visual styling (e.g. alignment, padding, dos and don'ts))
+
+### Best Practices
+
+(Industry standards, dos and don'ts)
+
+### Content guidelines
+
+(E.g. punctuation rules, standard labels, etc.)
+
+### Accessibility
+
+(Component-specific best practices for accessibility.)
+
+### Mobile
+
+(How to apply component in mobile environments.)
+
+-->
+### Related
+
+- [`Number`](../number/)
+- [`Text`](../text/)
+
+## Properties
+
+{{% notice warning %}}
+We are currently updating how we implement components, and the list of properties may not be entirely accurate.
+{{% /notice %}}
+
+| **Property**                 | **Type** | **Description**                                                                          |
+|------------------------------|----------|------------------------------------------------------------------------------------------|
+| `id`                         | string   | The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>. |
+| `value`                      | string   |  A hardcoded string or expression for resolving the date you want to display. Must resolve to a ISO6801 string. |
+| `textResourceBindings.title` | string   | A label for the date you want to display.                                                   |
+| `format`                     | string   | A formatting string based on [Unicode Technical standard](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).                             |
+| `direction`                  | string   | Sets the structured direction of label and value. <br/><br/>**Enum:** [horizontal, vertical] . <br/><br/>**Default:** horizontal. |
+
+## Configuration
+
+### Add component
+
+```json{hl_lines="6-"}
+{
+  "id": "date",
+  "type": "Date",
+  "textResourceBindings": {
+    "title": "Date"
+  },
+  "value": "2022-09-27 18:00:00.000",
+  "format": "dd.MM.yyyy",
+  "direction": "horizontal",
+},
+```
+
+### Add title and elements
+
+<br>
+
+#### `textResourceBindings.title`
+
+Label for the date. This can be added as a hardcoded string or as a reference to a [text resource](/nb/altinn-studio/reference/ux/texts/#legge-til-og-endre-tekster-i-en-app).
+
+#### `value`
+
+The value of the date to be displayed. Can be added as a string or an expression.
+
+#### `format`
+
+Sets the formatting of the date provided in the value field. This is based on [Unicode Technical standard](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
+
+#### `direction`
+
+Decides if the date should be shown under or next to the label. `horizontal` for showing it next to the label and `vertical` for under. 
+
+
+<br>
+
+#### Example
+
+Date with label.
+
+```json{hl_lines=["9-12"]}
+...
+{
+  "id": "date",
+  "type": "Date",
+  "textResourceBindings": {
+    "title": "Date"
+  },
+  "value": "2022-09-27 18:00:00.000",
+  "format": "dd.MM.yyyy",
+  "direction": "horizontal",
+},
+```
+<!-- 
+![Date example](date-example-with-icon.png "Date with icon and label")
+-->

content/altinn-studio/reference/ux/components/Date/_index.nb.md

@@ -0,0 +1,127 @@
+---
+title: Date
+linktitle: Date
+description: En komponent som viser formatert dato med eller uten ledetekst.
+schemaname: Date # Component schema name used to autogenerate list of properties from json schema (replace with appropriate component name)
+weight: 10 # Do not change, the components will be sorted alphabetically
+toc: true
+---
+
+## Bruk
+
+`Date`-komponenten lar brukeren legge til strukturert formatert dato med eller uten ledetekst.
+
+### Anatomi
+
+1. **Horisontal**: Dato med ledetekst strukturert horisontalt
+![Dato horisontal anatomi](date-horizontal.png "Dato Horisontal")
+2. **Vertikal**: Dato med ledetekst strukturert vertikalt
+![Dato vertikal anatomi](date-vertical.png "Dato vertikal")
+
+
+<!-- 
+Add the following sections if relevant:
+
+### Behavior
+
+(How the component behaves in different contexts)
+
+### Style
+
+(Visual styling (e.g. alignment, padding, dos and don'ts))
+
+### Best Practices
+
+(Industry standards, dos and don'ts)
+
+### Content guidelines
+
+(E.g. punctuation rules, standard labels, etc.)
+
+### Accessibility
+
+(Component-specific best practices for accessibility.)
+
+### Mobile
+
+(How to apply component in mobile environments.)
+
+-->
+### Relatert
+
+- [`Number`](../number/)
+- [`Text`](../text/)
+
+## Egenskaper
+
+{{% notice warning %}}
+We are currently updating how we implement components, and the list of properties may not be entirely accurate.
+{{% /notice %}}
+
+| **Property**                 | **Type** | **Description**                                                                                                                            |
+|------------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| `id`                         | string   | Unik Id streng for komponenten.                                                                                                             |
+| `value`                      | string   | Datoen du vil vise frem. Må være en ISO6801 string.                                                                                        |
+| `textResourceBindings.title` | string   | Ledeteksten til datoen du vil vise.                                                                                                         |
+| `format`                     | string   | En formateringsstreng basert på [Unicode Teknisk standard](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).   |
+| `direction`                  | string   | Setter den strukturerte retningen for ledetekst og verdi. <br/><br/>**Enum:** [horizontal, vertical] . <br/> <br/>**Default:** horizontal. |
+
+## Konfigurering
+
+### Legg til komponent
+
+```json{hl_lines="6-"}
+{
+  "id": "date",
+  "type": "Date",
+  "textResourceBindings": {
+    "title": "Date"
+  },
+  "value": "2022-09-27 18:00:00.000",
+  "format": "dd.MM.yyyy",
+  "direction": "horizontal",
+},
+```
+
+### Legg til tittel og elementer
+
+<br>
+
+#### `textResourceBindings.title`
+
+Ledetekst for datoen. Denne kan legges til som en hardkodet streng eller som en referanse til en [tekstressurs](/nb/altinn-studio/reference/ux/texts/#legge-til-og-endre-tekster-i-en-app).
+
+#### `value`
+
+Verdien av datoen som skal vises. Kan legges til som en streng eller et uttrykk.
+
+#### `format`
+
+Setter formateringen for datoen gitt i `value` feltet. Dette er basert på [Unicode Teknisk standard](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
+
+#### `direction`
+
+Bestemmer om teksten vises under eller ved siden av ledeteksten. `horizontal` for ved siden av og `vertical` for under. 
+
+<br>
+
+#### Eksempel
+
+Dato med ledetekst og ikon.
+
+```json{hl_lines=["9-12"]}
+...
+{
+  "id": "date",
+  "type": "Date",
+  "textResourceBindings": {
+    "title": "Date"
+  },
+  "value": "2022-09-27 18:00:00.000",
+  "format": "dd.MM.yyyy",
+  "direction": "horizontal",
+},
+```
+<!-- 
+![Dato eksempel](<date-example-with-icon.png> "Dato med ikon og ledetekst")
+-->