Skip to content

Commit

Permalink
Fix feedback from PR
Browse files Browse the repository at this point in the history
  • Loading branch information
@paal2707
paal2707 committed Nov 29, 2024
1 parent 33dcefb commit 848463d
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 62 deletions.
30 changes: 16 additions & 14 deletions content/altinn-studio/reference/ux/components/Date/_index.en.md
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
title: Date
linktitle: Date
description: A component that allows you to display formatted date with or without label.
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
The `Date` component allows users to add structured formatted date, with or without label.

### Anatomy

1. **Horizontal**: A date with label structured horizontally
1. **Horizontal**: A date with a label structured horizontally
![Date horizontal anatomy](date-horizontal.png "Date Horizontal")
2. **Vertical**: A date with label structured vertically
2. **Vertical**: A date with a label structured vertically
![Date vertical anatomy](date-vertical.png "Date vertical")


Expand Down Expand Up @@ -60,12 +60,12 @@ We are currently updating how we implement components, and the list of propertie

| **Property** | **Type** | **Description** |
|------------------------------|----------|------------------------------------------------------------------------------------------|
| `id` | string | Unique Id string for the component |
| `value` | string | The date you want to display. Must be a ISO6801 string. |
| `textResourceBindings.title` | string | Label of 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. **Enum:** `"horizontal" \| "vertical"` |
| `icon` | string | An URL path to the image/icon |
| `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. |
| `icon` | string | A URL path to the image/icon. |

## Configuration

Expand All @@ -91,23 +91,25 @@ We are currently updating how we implement components, and the list of propertie

#### `textResourceBindings.title`

The title for the date is shown as a label and can be added as text directly or referenced via a text key to a [text resource](/nb/altinn-studio/reference/ux/texts/#legge-til-og-endre-tekster-i-en-app).
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`

Displays the value for the label and can be added as a ISO-date string or an expression.
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 is shown under or next to the label. horizontal for "next to" and vertical for "under".
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.

<!--
#### `icon`
If you want to show an icon before the label, you can add an URL path.
If you want to show an icon before the label, you can add a URL path to the icon/image you want to be displayed.
-->

<br>

Expand Down
24 changes: 12 additions & 12 deletions content/altinn-studio/reference/ux/components/Date/_index.nb.md
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
title: Date
linktitle: Date
description: En komponent som viser formatert dato med eller uten label.
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

Dato komponenten lar brukeren legge til strukturert formatert dato med eller uten label.
`Date`-komponenten lar brukeren legge til strukturert formatert dato med eller uten ledetekst.

### Anatomi

1. **Horisontal**: Dato med label strukturert horisontalt
1. **Horisontal**: Dato med ledetekst strukturert horisontalt
![Dato horisontal anatomi](date-horizontal.png "Dato Horisontal")
2. **Vertikal**: Dato med label strukturert horisontalt.
2. **Vertikal**: Dato med ledetekst strukturert vertikalt
![Dato vertikal anatomi](date-vertical.png "Dato vertikal")


Expand Down Expand Up @@ -64,8 +64,8 @@ We are currently updating how we implement components, and the list of propertie
| `value` | string | Datoen du vil vise frem. Må være en ISO6801 string. |
| `textResourceBindings.title` | string | Labelen 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 på labelen og verdien. **Enum:** `"horizontal" \| "vertical"` |
| `icon` | string | En URL streng til bildet/ikonet |
| `direction` | string | Setter den strukturerte retningen for ledetekst og verdi. <br/><br/>**Enum:** [horizontal, vertical] . <br/> <br/>**Default:** horizontal. |
| `icon` | string | En URL-lenke til bildet/ikonet. |

## Konfigurering

Expand All @@ -91,29 +91,29 @@ We are currently updating how we implement components, and the list of propertie

#### `textResourceBindings.title`

Tittelen for datoen som er vist, blir vist som en label og kan brukes som en tekst direkte eller som en referanse via [tekst ressurs](/nb/altinn-studio/reference/ux/texts/#legge-til-og-endre-tekster-i-en-app).
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`

Viser verdien til labelen og kan legges til som et ISO-dato streng eller et uttrykk.
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 datoen vises under eller ved siden av labelen. Horisontal for "ved siden av" og vertikal for "under".
Bestemmer om teksten vises under eller ved siden av ledeteksten. `horizontal` for ved siden av og `vertical` for under.

#### `icon`

Hvis du vil vise et ikon foran label kan du legge til en url her.
Hvis du vil vise et ikon foran ledeteksten kan du legge til en url til ikonet/bildet du vil vise her.

<br>

#### Eksempel

Dato med label og ikon.
Dato med ledetekst og ikon.

```json{hl_lines=["9-12"]}
...
Expand All @@ -130,4 +130,4 @@ Dato med label og ikon.
},
```

![Dato eksempel](<date-example-with-icon.png> "Dato med ikon og label")
![Dato eksempel](<date-example-with-icon.png> "Dato med ikon og ledetekst")
Loading

0 comments on commit 848463d

Please sign in to comment.