<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

Where this element can be seen?

A popup can be found on the following elements:

• Product page
• Checkout page
• Account page

How should this element be designed?

The popup should be displayed in the following states:

• Hovered on a close button
• Having a title
• Having no title

Please account for the following:

• Popup title might span multiple lines

• Popup content might be larger than viewport and require scrolling

  

  Product zoom popup

  

  Account details popup

Share wishlist popup

Terms and conditions on the checkout page

Write a review popup

Design example #1

How to develop styles for this element?

The Popup component is responsible for rendering popups.

Mainly we need to style popup close button, borders, width, button placement, and heading, the content of each popup is different scope.

<aside> ➡️ Several other components use the Popup component (e.g. MyAccountOrderPopup, ImageZoomPopup) – however, you don't need to style content now.

</aside>

If you want to show new popup, you need to perform this steps:

1. Get showPopup prop from state manager
   • Code example
2. Create render method for the Popup and add id
   • Code example
3. Add onClick event for element, which should trigger Popup visibility and pass to showPopup() the same id which is specified for the Popup
   • Code example

To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.

How to override JavaScript classes?

How to override styles?

Implementation example #1

Implementation example #2