Altinn / Altinn/app-frontend-react

Better design and guidelines for presenting dynamic data for the end-user

Open
#207 3 comments 0 reactions 0 assignees View on GitHub
area/accessibility kind/user-story status/draft status/for-consideration
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Description
This is a draft of an issue that should look into if we need to expand functionality for presenting data.
Today we have supported using read-only fields to show for example the user pre-fill data taken from some source, the sum of an calculation based on input by the user and generally show the user a dynamic value based on some source that the user can not edit. One challenge with this solution is that a read-only will get keyboard focus and if you choose to make it disabled you get another bunch of potensial UU problems. The best way to do this is to present this data as simple texts. Input fields should be used for user input and not present the user with information.

## Design Tasks
- [ ] Write guidelines
- [ ] Design different relevant views for presenting data
- [ ] Summary of an calculation where the label is left aligned
- [ ] Summary in a table
- [ ] Data tables
- [ ] Panel for presenting more information and using less space. (For instance name, phone and e-mail of a person)

## Screenshots
> Screenshots or links to Figma (make sure your sketch is public)

## Considerations
> Describe input (beyond tasks) on how the user story should be solved can be put here.

### Ops requirements
> Are there any requirements for monitoring? What is being built and what could go wrong?
> Are there any requirements related to backup?

## Acceptance criteria
> Describe criteria here (i.e. What is allowed/not allowed (negative tesing), validations, error messages and warnings etc.)

## Specification tasks

- [ ] Development tasks are defined

## Development tasks
> Add tasks here

## Test
> Add test cases here as checkboxes that are being tested as part of the changes.

## Definition of done
Verify that this issue meets [DoD](https://digdir-digitalisering.atlassian.net/wiki/spaces/T3KP/pages/5049246/Definition+of+Done) (Only for project members) before closing.

- [ ] Documentation is updated (if relevant)
- [ ] Technical documentation (docs.altinn.studio)
- [ ] User documentation (altinn.github.io/docs)
- [ ] QA
- [ ] Manual test is complete (if relevant)
- [ ] Automated test is implemented (if relevant)
- [ ] All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

Contributor guide

Open the contributing guide

Research direction

No files, tests, entry points, or concrete acceptance criteria are named. Start by turning the draft design tasks into agreed guidelines and specifications for dynamic values, including the listed summary, table, data-table, and information-panel views; done means those decisions and development tasks are documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.