LG-5468: Update IAL2 full-page ID error to show three troubleshooting options

[aduth]

Why: So that we are consistent in the options that we show users during document capture.

Screenshots:

Before	After

[aduth]

Alternatively, instead of overloading this usage to support either the element or the array of options, we could enforce the element be passed always. A difference is that we default a heading in the case that someone passes troubleshootingOptions but not troubleshootingHeading, but maybe that default could be moved to TroubleshootingOptions itself.

[zachmargolis]

So you're saying troubleshooting options would look like this?

{
  heading: 'aaa',
  options: [ { text, url  },  { text, url } ],
}

That makes sense to me, but the current overload is not so complex either

[aduth]

I was imagining to remove support for troubleshootingHeading and troubleshootingOptions as an array, and only to only support it passed as an element.

[zachmargolis]

Oh so more like a children passthrough?

[aduth]

Oh so more like a children passthrough?

Yeah, although Warning already accepts children for content of the warning, so we'd need it to be a different prop. I figure we can use the existing troubleshootingOptions for this.

So usage ends up being like:

<Warning
  troubleshootingOptions={<TroubleshootingOptions {/*...*/} />}
>
  Warning content
</Warning>

[aduth]

I'll plan to make this refactoring, but noting a couple watch items for the future:

• If we're changing pairing props "troubleshootingHeading" and "troubleshootingOptions" to a single "options" prop, it raises a question of what to do about "actionText" and "actionOnClick", as they are similar in nature.
  • It's not as obvious to allow an element to be passed through for the action, since we want to enforce an opinionated appearance of the button ("big", "primary").
• Noting that we have a similar ERB file for this markup, and options ideally align (idv/shared/_error.html.erb)
  • Proposed refactoring arguably brings into closer alignment, since "options" is a singular setting there, and "heading" has smart defaults.

[zachmargolis]

LGTM

[aduth]

96e2e47b7 refactors to always accept an element as Warning's troubleshootingOptions prop value. This also incorporates design feedback to use the same set of troubleshooting options for pre-submit blur / glare tips (see related Slack discussion). f7193a5 is a temporary commit cherry-picked from a necessary localization fix implemented separately at #5740.