Convert to LitElement

[abraham]

Process

Help modernize Hoverboard by updating components from Polymer 3 to LitElement.

See a video of how to convert a component

1. Pick an element from the list below
   • That is not assigned to someone else
   • That does not render another element that has not been converted yet
   • Prefer elements before dialogs before pages
2. Comment on this issue saying which element you'd like to convert
3. Convert the element and make sure it's in the components directory
   • See already converted elements for examples
   • Please do clean up the functionality of components as make sense
   • Polymer isn't working in Jest unit tests so if the element depends on other components built in Polymer, a replacement will need to be found.
   • When updating components see about converting Material Design to @mwc
4. Add unit tests
   • Have a look at existing conversions for examples and how to mock and interact with redux
   • These are unit tests and should test the logic and functionality of the component. Feature tests are planned for the future for more app level testing
   • Testing Library is available for tests
   • To run tests for a single component run npm test -- --watch type p and enter the name of the component e.g. hero-block
5. Create a pull request
   • We'll review and provide feedback
   • Feel free to create a draft pull request if you want to get early feedback or are running into issues with something

Feel feel to reach out if you have questions, are less familiar with a technology in use, or are running into issues with something. We're happy to provide help and guidance as we can.

Element	Complexity	Assignee	Pull Request	Merged
<about-block>	Medium	@abraham	#877
<about-organizer-block>	Medium
<auth-required>	Medium	@abraham	#835
<content-loader>	Medium
<featured-videos>	High
<feedback-block>	High
<filter-menu>	High
<footer-block>	Low
<footer-nav>	Low	@abraham	#3291
<footer-rel>	Low	@abraham	#3292
<footer-social>	Low
<fork-me-block>	Low
<gallery-block>	Medium	@abraham
<header-bottom-toolbar>	Medium
<header-toolbar>	High
<hero-block>	Low	@abraham	#837
<hoverboard-analytics>	Medium
<latest-posts-block>	Medium
<map-block>	High
<md-content>	High
<my-schedule>	Medium
<partners-block>	Medium
<polymer-helmet>	Medium
<posts-list>	Low
<previous-speakers-block>	Medium
<schedule-day>	High
<session-element>	High
<speakers-block>	Medium
<sticky-element>	High
<subscribe-block>	Medium
<subscribe-form-footer>	Medium
<text-truncate>	Medium
<tickets-block>	Medium
<toast-element>	Medium
<video-dialog>	High
Dialogs
<feedback-dialog>	High
<signin-dialog>	High
<subscribe-dialog>	High
Pages
<blog-list-page>	Medium
<coc-page>	Medium
<faq-page>	Medium
<home-page>	High
<not-found-page>	Medium
<post-page>	High
<previous-speaker-page>	High
<previous-speakers-page>	High
<schedule-page>	High
<session-page>	High
<speaker-page>	High
<speakers-page>	High
<team-page>	Medium
App
<hoverboard-app>	Super High	@abraham