SpilledCoffeeCanvas
Notes
An interactive element with intention to surprise and delight all users. Built using the <canvas>
HTML5 element. Users can mouse-over or use a touch screen to "mop up" the spilled beverage to reveal a message underneath. For keyboard and screen reader users, moving focus to the <canvas>
makes a button visable and focusable. Clicking the button clears the "spill" with a small sound effect, then moving focus to the content underneath. This component is intended primarily for 404 pages.
This component includes an mp3 file that may need to be adjusted for in your project. See PropTypes for details.
Props
- imageDescription
string
Describe to screenreader users how the component looks visually. Is the aria-label for the
<canvas>
element. - className
string
Applied to outtermost parent div
- eraseDiameter
number
[20]
Diameter for "mopping" to occurd for all device types.
- hiddenContent
string
String that is hidden underneath spill, revealed when spill is cleaned up.
- holidayCup
bool
[false]
You can optionally render the cup as a Starbucks Red Cup during holidays.
- cupClass
string
['']
If you'd like to add classes to the cup itself
- instructions
string
Screen reader instructions to interact with component. Set as aria-label on hidden content button.
- spillColor
string
The color of the spill in hash format. Should be reflective of a Starbucks beverage.
- cleanUpSound
any
A sound, powered by JavaScript's Audio API. You'll need to add the file type to your bundler so it can read it. If using Webpack,
file-loader
will load mp3s.
<SpilledCoffeeCanvasclassName="bg-white"spillColor="#D7C2AB"imageDescription="Spilled latte beverage with tipped over Starbucks cup next to it."hiddenContent="Java nice day!"instructions="Mop up the spill to reveal something underneath"/>