Convert to LitElement
abraham opened this issue · comments
Process
Help modernize Hoverboard by updating components from Polymer 3 to LitElement.
See a video of how to convert a component
- 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
- Comment on this issue saying which element you'd like to convert
- Convert the element and make sure it's in the
componentsdirectory- 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
- 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 -- --watchtypepand enter the name of the component e.g.hero-block
- 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 | |||
<footer-rel> |
Low | |||
<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 |