Error boundary UI has no space between button and report link

Bug Description

It seems that when we updated our styles to GM2+ we lost some styling that we had in our error boundary component that looks a bit off now.

Steps to reproduce

1. Trigger an error to view the error boundary
2. See styling issue below

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The error boundary component styling should be updated as follows:
  • There should be an appropriate spacing between the main CTA button and the link to “Report this problem” based on the grid gap for the viewport
  • The text in the CTA button and the link should be vertically aligned
• A story should be added for the error handler (we used to have one) with an accompanying VRT scenario

Implementation Brief

• In assets/js/components/ErrorHandler/index.js:
  • Add a className prop to the <Notification /> prop with the class googlesitekit-error-handler.
• In assets/sass/components/global, create a new file named _googlesitekit-error-handler.scss. In this file:
  • Add styles for the .googlesitekit-error-handler class so that its descendant class .googlesitekit-cta-link has a margin-left of $grid-gap-mobile, and $grid-gap-desktop with a minimum viewport width of $bp-tablet.
  • The text for the button and the link should already be vertically aligned, but if they’re not, add necessary styles.
• In assets/sass/admin.scss:
  • Import the newly created _googlesitekit-error-handler.scss file.
• In assets/js/components/ErrorHandler folder, create a new file named index.stories.js. In this file:
  • Export a story with the <ErrorHandler /> component containing an <ErrorComponent /> component.
  • In the story decorator, simulate a click on the button in the <ErrorHandler /> component, thus setting the shouldThrow prop to true.
  • The exported story should also have a scenario property for the VRT scenario, with appropriate label, and delay if required.
    • The VRT scenario should use the clickSelector as seen in use here to click on the button to trigger the error in the VRT scenario.

Test Coverage

• No tests need to be added/updated.
• Update VRT references to include a reference for the new <ErrorHandler /> story.

QA Brief

• Verify the Components/ErrorHandler Storybook story.
• Verify that there is the appropriate spacing between the CTA and the report link.

QA:Eng

• To trigger an error, place the <ErrorComponent /> component somewhere within the application, say <BannerNotifications />.
• Go to the Site Kit Dashboard and click on Simulate an error.
• Once the error appears, verify that there is spacing between the CTA and the report link.
• Verify that the said spacing is appropriate based on the viewport.

Changelog entry

• Update the error boundary component styling to provide appropriate spacing between the main CTA button and the link to “Report this problem”.

[techanvil]

Hi @nfmohit, the IB is looking good. One suggestion:

Rather than adding more functionality to ErrorComponent while the existing behaviour is unused, how about allowing the existing behaviour of clicking the button to trigger the error to be used in the story, and using clickSelector as seen in use here to click on the button to trigger the error in the VRT scenario?

[jimmymadon]

QA Eng ✅

Verified:

• Created an error using the new <ErrorComponent:

• Triggered a normal error as well. Tested on desktop, tablet and mobile: