Closed spencern closed 6 years ago
The dropdown (another component) should only display for 3 seconds unless the user hovers over the cart icon or the dropdown during that timeout. This behavior should be wired up as part of this issue.
@spencern Is this behavior necessary, considering this component is only shown on mobile sizes where "hover" isn't really a thing?
My work on this is on hold, as we've decided to move the CartCheckoutButton out of the component library and into the starterkit. I've been working with the component library version, I'm going to stop work until https://github.com/reactioncommerce/reaction-component-library/pull/110 and the PR to create the new button inside this repo are both pulled in.
@kieckhafer good question - I think the mobile view renders this additional behavior unnecessary on mobile, but this PR and the PR to connect the mini-cart should play nicely together.
Mobile Item Added to Cart Popover Component
Overview / Summary
Create a popover component which displays the most recent item added to the cart. This component should display a single Cart Item and a button with a link to the checkout page. This component should be added to the Storefront starter-kit This component should only be displayed on mobile devices
Expected use cases
This component will be used whenever a mobile user adds a product to their cart.
Where should this component live
This component should be created in the starterkit.
Images
Data
Props
Data Fetching
None. The item should be passed as a prop into this component
State Store
All data comes from props. No global state used.
Render Criteria
Breakpoints
The Mobile Item Added to Cart Popover should be shown on browsers from 959px and narrower
UI States
Desktop
The Mobile Item Added to Cart Popover is not displayed for desktop users.
Mobile
Normal
Zeplin: https://app.zeplin.io/project/5afc82f5e8d73e250ff9d855/screen/5adf99f52f1dbdd37e7c611c The normal state of the Popover consists of one section and a button. The upper section of the popover should display the item that was most recently added to the cart, it's image, qty, and name and the phrase "added to cart" Below this section should be a single button linking to the checkout
Empty
This component should not be rendered without an item to display