Error variant for Panel

[olemartinorg]

Description

Adding an error variant for the Panel component. Needed for the linked issue.

Related Issue(s)

• Validation: Move error message box to the bottom  app-frontend-react#100
• Moving ErrorReport component to the bottom of the form app-frontend-react#346

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)
• All tests run green

Documentation

• User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)

[olemartinorg]

Marked this draft because I'm still not sure if this is where we want it to be. @haakemon Could you take a look at this and tell me how strict we want to be? Right now I'm using --colors-red-300, which is the right color, but it should have a better alias in figma (which I don't know how to fix). Also, we're missing an icon for both the warning and error variants.

Should we (1) wait for the proper alias and icon for some weeks until the relevant people is back from their holiday, or (2) remove the TODOs from the code, create an issue to track these needs, and continue on a faster track to getting this PR ready for merging:

• Moving ErrorReport component to the bottom of the form app-frontend-react#346

[haakemon]

I think option 2 is best - no problem to use the generic variables until specific ones are created. As for the icons, there has been some back and forth how they should look in the different variants, so we should tackle that separately anyway :)

Should add a test for the error icon as well

[olemartinorg]

Created new issues:

• Figma tokens | Panel component #70
• Panel: Proper icons for warning + error variants #71

Removed TODOs from the code. Also pushed the missing unit test (sorry, I added that yesterday but forgot to push it! 😆)

[haakemon]

Good stuff!