folkehelseinstituttet / fhi.frontend.demo Goto Github PK

Update Angular, and all other libraries, to get all new features, and for improved security.

As described here: https://angular.io/guide/angular-compiler-options#stricttemplates

Need some testing to see if overhead due to "strictness" pays off...

If screen height < left menu height, the bottom elements are not visible/selectable. Solution is to make it scrollable vertically when needed.

Make it so that page is scrolled to anchor on page load, not only on anchor link clicks.

Add a "Back to top" link. Design and funksjonality is part of this issue.

Figure out if it is possible to load the file below and fetch the names to generate the icons list.
https://raw.githubusercontent.com/folkehelseinstituttet/Fhi.Frontend.Style/main/src/icons/_icon-map.GENERATED.scss

Markup as Bootstrap 5

Design sketch:
https://xd.adobe.com/view/816e1dd1-0d75-48ce-a1ea-adf18155fbd0-d43d/screen/6603b93a-f16c-45de-ad87-967750f3ebef/

Screenshot of the above:

Examples of ngBootstrap components in it's own section (previous Angular-bibliotek)

Increase contrast to accommodate for automatic contrast check via WebAim Wave chrome extension

Update this library to support styles library v3.2.0

How to run solution locally with Fhi.Frontend.Styles

Markup as Bootstrap 5

https://xd.adobe.com/view/816e1dd1-0d75-48ce-a1ea-adf18155fbd0-d43d/screen/6603b93a-f16c-45de-ad87-967750f3ebef/

Screenshot of the above:

Using Bootstrap button group

Horizontal and vertical

Remove all scss from Demo and make i work with new dep.

Data attribute on table tag

Port latest updates from the "Allvis"-app

Regarding folkehelseinstituttet/Fhi.Frontend.Style#93

The naming convention should be english. There are some directories that has been named in norwegian, these should all be translated.

Also look for other norwegian named elements, like variables etc.

Should the example texts and component naming be in norwegian or english?

Simple table

Somehow the large buttons have an increased button radius. Must be reduced to the same as the other buttons.

Make each category collapsable using <details><summary>

Need for a select that might be searchable with autocomplete

Add example on icon buttons.

https://xd.adobe.com/view/2a67f994-a3fd-4119-b26a-76ccac4d1ab4-7f34/

Ref: folkehelseinstituttet/Fhi.Frontend.Style#122

Also: check all components for tab-focus an fix if not ok.

Instead of adding the code below the example