HomeStarbucks Pattern Library

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

  • imageDescriptionstring

    Describe to screenreader users how the component looks visually. Is the aria-label for the <canvas> element.

  • classNamestring

    Applied to outtermost parent div

  • eraseDiameternumber[20]

    Diameter for "mopping" to occurd for all device types.

  • hiddenContentstring

    String that is hidden underneath spill, revealed when spill is cleaned up.

  • holidayCupbool[false]

    You can optionally render the cup as a Starbucks Red Cup during holidays.

  • cupClassstring['']

    If you'd like to add classes to the cup itself

  • instructionsstring

    Screen reader instructions to interact with component. Set as aria-label on hidden content button.

  • spillColorstring

    The color of the spill in hash format. Should be reflective of a Starbucks beverage.

  • cleanUpSoundany

    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.

Example: Sample 404 Page