Leaving IBM Popup: Final design

RobertaJHahn commented 3 years ago

User story 1 - End user

As an [user role below]: IBM customer

I need to be able to do: leave the IBM.com domain confidently

so that I can: understand and complete a service or transaction (such as commerce or to register for a conference) via a 3rd party that is not owned by IBM.

Notes

Additional Information

See the epic for the overarching descriptions of the work.
[box folder]
Select the Register on Lanyrd link on this web page
Northstar design

Acceptance Criteria

[ ] Final designs are available
[ ] Design spec issue has been created on the Agile board with the documentation needed and the work scheduled.

photodow commented 3 years ago

Saw @ljcarot opened up this issue to update the text.

https://github.ibm.com/webstandards/digital-design/issues/1871

Looks like content is based used from the translation API.

photodow commented 3 years ago

Here is a quick mock-up using our expressive modal.

I almost feel like this is more of a productive moment within the IBM.com experience, and suggest we might just want to use the Carbon Modal as-is for this.

photodow commented 3 years ago

With expressive theme turned on using Carbon's modal out of the box.

photodow commented 3 years ago

From a functional standpoint, I see this being a dependency of CTA. So maybe a prop can be passed into CTA to allow for this to be turned on, but it'll probably be a variation of the modal similar to the lightbox media viewer.

From a guidelines standpoint it should it should never be used on an IBM.com domain. We might be able to build that into the CTA functionality. But the intent per Northstar I feel like is still relevant...

Do not apply this notice to all external links. Use this notice only when the user leaves the ibm.com domain to complete a service or transaction (such as commerce or to register for a conference) on behalf of IBM. For example, when purchasing a product from IBM Marketplace, a user may choose to use PayPal as a payment method. When they leave ibm.com to go to the PayPal site to complete the transaction, the Leaving IBM overlay would be displayed.

The CTA already has the external icon, and so that still aligns with Northstar if we'd like to add that as well.

photodow commented 3 years ago

Here are the design specs. Presented to the development yesterday.

https://ibm.ent.box.com/folder/124606259113

carbon-design-system / digital-design-ideation