GCHQ-Developer-398
commented
1 year ago Angular App Setup Notes: https://design.sis.gov.uk/get-started/install-components/angular After Step 4: Add - "skipLibCheck": true, - into tsconfig.json file [Investigate component use with Angular#850](https://github.com/mi6/ic-ui-kit/issues/850) Components I have tried to use:
Alert - Works, however when bringing in all 5 alerts together only one shows, then as styling changes more start to appear 1 by 1. Only neutral was visible at first then when I shrunk the width of that alert down, a small section of the info label was visible at the top of the page (top half was cut off not visible, but this may have been to do with margins).
Back To Top - Does not work - does not appear and cannot be seen when veiwing the app. Code is not bringing up any errors in terminal, but component is not visible. May be to do with styling?? I have now tried resizing, margins, alignment and it still is not visible in the angular app. Is the component not imported or incompatible with angular? Solution - I think it may have been because the app is not scrollable yet, so will try that. It works now that my app is scrollable - overlooked the fact that the button takes you to the top of the page so app should be scrollable. Back to top button works with no issues.
Breadcrumb - Works, no issues
Button - Works, no issues
Card - Works, no issues
Checkbox - Works, no issues
Chip -Works, slight issue. Had some trouble with the icon. The icon is separate from the label, so needs different styling to match up with the label.
Classification Banner - Works, no issues
Data Entity - Has some major issues. Cannot be repositioned I have tried aligned, align-items, position, but the component will not move. Also this component removes the footer and classification banner when put into the angular app, this may be a potential bug.
Dialog - Does not work. Button can be seen in the app, but when clicked nothing happens. Does the onclick function not work? There are no errors with the code, so the onclick and dialog should work. May just be me not knowing how to get it to work, but I did copy the component code, so it should work in a regular app. May need to import ICDS functions to allow it to work?
Empty State - Works, no issues
Footer - Works, no issues
Hero - Works, no issues - much easier to move and postion than other components.
Link - Works, no issues
Loading Indicator - Both linear and circular work with no issues.
Page Header - Works, no issues
Pagination - Works, no issues
Pop Over Menu - Does not work. Button can be seen in the app, but when clicked nothing happens. Does the onclick function not work? There are no errors with the code, so the onclick and pop up menu should work. May just be me not being experienced enough to get it to work, but I did copy the component code, so it should work in a regular app. May need to import ICDS functions to allow it to work?
Radio Button - Works, no issues
Search Bar - Works, no issues
Search Container - Works, no issues
Select - Does not work, the select component is visible, but you cannot select any option. Unsure why the options are not available.
Side Navigation - Works, no issues
Skeleton - Works, no issues
Status Tag - Works, no issues
Stepper - Works, no issues
Switch - Works, no issues
Tabs - Works, no issues
Textfield - Works, no issues
Toast - Does not work, toast button is visible but toast does not appear when button is clicked. Toast function does not work - are ICDS functions not available on an angular app do they need to be written differently of functions imported?
Tooltip - Works, no issues
Top Navigation - Works, but the v0.0.7 is not visible as the text is white in a white label - change background of label to grey. I am not sure how to only change the background of the version label - may be a probelm with the code?
Typography - Works, no issues
Here is all of my research when testing every single component that is put into an angular app. Some of these issues may be bugs and separate issues should be opened accordingly, but I am happy to close this investigation ticket.
What is the purpose of the work?
Setup up an example project in Angular (with Typescript?), to see how easy it is to use the components
Why do we need it?
A number of issues have been raised recently, but we do not have experience of usage in Angular. In setting this up, it would be useful to keep in mind the following issues:
776
https://github.com/mi6/ic-design-system/issues/498 https://github.com/mi6/ic-design-system/issues/499
It may be that we need to look at adding a Angular output target for our components, if this would provide a better developer experience