Overview of external web UI elements

The table below contains an overview of UI elements needed for the external web part of OS2Valghalla.

The table is split into the following columns:

OS2Valghalla: The name of the element used in the OS2Valghalla project, specifically for external web, including a link to a page containing the element in the Figma prototype.
Designsystemet (FDS): The name of the corresponding element from the FDS framework and the link to the official documentation.
Angular: The name of the corresponding element from the Angular Material framework and the link to the official documentation.
Implementation: The FDS documentation has an example of how to implement the framework in Angular (Frameworks | Det Fælles Designsystem ) and has an official NPM package: https://www.npmjs.com/package/dkfds .
Notes: Extra notes in relation to that element

OS2Valghalla	Designsystemet (FDS)	Angular	Notes

OS2Valghalla	Designsystemet (FDS)	Angular	Notes
Button	Knap	Button	The standard Angular button can be used together with the FDS CSS class out-of-the-box.
Card	Card	Card	The FDS and Angular markup differs quite a bit.
Alert	Besked	N/A	Angular does not have a stand-alone component for in-line alert/messages.
Table	Tabel	Table	The Angular table only needs a few changes to work with FDS. However, the arrows for sorting have to be changed to FDS.
Snackbar	Toastbesked	Snackbar	While the FDS toastbesked and the Angular snackbar are both a pop-up information notification, they differ a lot from each other.
Structured list	Struktureret liste	List	Do note that the FDS list makes use of the FDS flexbox grid.
Header	Header	N/A	As a header is not a component it is not provided in the Angular framework. However FDS has specific markup and CSS for headers.
Footer	Footer	N/A	As a footer is not a component it is not provided in the Angular framework. However FDS has specific markup and CSS for footers.
Stepper (vertical)	Trinindikator	Stepper	It is important that the stepper is vertical and not horizontal, in order to follow the FDS guidelines.
Status label	Badge	N/A	While Angular contains a badge component, it is not the same kind of badge as the FDS badge.
Validation error	Fejlmeddelse	Input validation	Angular’s input errors are already part of components with input validation.
Popup	Modal	Dialog	Be very mindful of the FDS modal guidelines (retningslinjer) when creating modals.
Tooltip	Tooltip	Tooltip	Note that the FDS tooltip also has a hidden screen reader attribute.
Paginator	Paginering	Paginator	If the Angular paginator component is used, then it is important that aria labels and screen reader attributes from FDS are included.
Back-to-top	Tilbage til toppen	N/A	This element can just be a simple fixed button, but it is important that the FDS guidelines are followed.
Tabs	Faneblade	Tabs	Be mindful of the HTML attributes that FDS uses.
Loading spinner	Loading spinner	Progress spinner	The FDS loading spinner comes with no functionality and barely any markup, so the Angular progress spinner can be used instead, as long as the FDS CSS is included.
Search bar	Søgefelt	Search filter	Angular does not of a standalone search bar, but it incorporates search as a filter for some components, such as the table component.
Input field	Input felt	Input	The FDS “Hjælpetekst” (helptext) functionality is important.
Dropdown	Dropdown	Select	The FDS and Angular markup for dropdown/select is fairly close to each other.
Date field	Datofelt	N/A	Angular does not have a specific component for day, month, and year input. Instead three standard input fields can be used.
Datepicker	Datovælger	Datepicker	The visual functionality of the FDS and Angular datepicker are very close, but their markup are very different which can cause the FDS CSS to fail.
Checkbox	Tjekboks	Checkbox	The FDS JavaSript is most likely only important if hidden fields are needed.
Grid layout	Grid	Grid list	Both FDS and Angular is based on flexbox. It’s important to use the margin and padding from FDS.