Challenge Overview
Welcome to Barton Multi-Level-Menu Component Polymer Code Challenge
In this challenge we need to develop a new component that fits seamless into the existing components the client already has. We will use the same code structure and organization that's already been established from the other components.
We need you to follow the requirements, along with the existing UI and design style (established by the other components) and design the new Multi-Level Menu.
Base of your submission:
- The customer has developed their own web component front end built in Polymer. A demo of these components is available here on Heroku. The source for this demo (including the web components themselves) is available here.
- The UI you build must use these existing web components. The client wants to make sure this admin tool fully leverages their web component framework.
- UI Interface should be responsive on Desktop/Tablet and Mobile layout and perform well in both Chrome and IE
- Client will be present in the forums so please ask questions.
Branding
- You need to follow the existing UI design and styles of the existing components
- We've included live examples for you to reference
- The menu items (px-item or px-row) already follow the proper style and the trigger items (px-dropdown-button, px-button, etc.) follow the style, there shouldn’t need to be too much work on styling. It’s more of just getting the structure established to launch the menu and nest the levels.
Responsive
- The Multi-Level Menu needs to be responsive
- It should work at varying widths
- Items that are in these menus should not be particularly long
-- Typically we restrict them to be single line and if the text is too long, it will be ellipsed This should be handled by the existing px-item/px-row components though.
Multi-Level Menu Requirements
- We've supplied a visual representation of how the multi-level menu should function.
- Check the attached screenshot indicated by the Alphabetical number on Menus.png.
-- This is the high level idea/ required functionality of how the menus should work
A). Menu should support a list of items (px-item or px-row)
- These items can be nested in a tree structure
- Items with subitems should be displayed with an arrow icon
- List of items can be supplied in JSON format via a component attribute, or manually laid out by nesting components in the HTML markup.
B). Menu should support two color styles, light and dark (A and B)
C). Items in the menu may have icons (C & D)
D). Items in the menu may be used as section headers, which will not be selectable (C & D)
E). The user should be able to specify any component which will be used to launch the menu on click
- The typical use case will be to launch from a px-dropdown-button (E & F)
- We will also want to at least support launching from px-input, px-button, px-icon, px-row, px-title
F). There should be two modes of interaction for the menu
- The first mode is a typical selection - when the user selects an item in the menu, the contents of that item are added to the triggering component (e.g. px-dropdown-button, px-input, etc.), if appropriate
- The second mode is "action" mode
- In action mode, each item in the menu represents an action and no selection mechanics are necessary
Component Demo
- https://nameless-fortress-89956.herokuapp.com/
- Live examples of working components
Judging Criteria
- Meets all of the requirements set in the challenge brief
- Code quality
- Does your component structure and organization match the existing components
Submission Guideline
- Deploy your solution on Heroku so we can see it in action and include the link to your submission.
- Provide documentation, (usage and deployment guide) for your solution
In this challenge we need to develop a new component that fits seamless into the existing components the client already has. We will use the same code structure and organization that's already been established from the other components.
Final Submission Guidelines
Our client has an existing library UI components already designed and developed. We are adding to that library, with the first component being a Multi-Level Menu. The client has included a quick wireframe of how they see the component functioning and the number of levels that they require.We need you to follow the requirements, along with the existing UI and design style (established by the other components) and design the new Multi-Level Menu.
Base of your submission:
- The customer has developed their own web component front end built in Polymer. A demo of these components is available here on Heroku. The source for this demo (including the web components themselves) is available here.
- The UI you build must use these existing web components. The client wants to make sure this admin tool fully leverages their web component framework.
- UI Interface should be responsive on Desktop/Tablet and Mobile layout and perform well in both Chrome and IE
- Client will be present in the forums so please ask questions.
Branding
- You need to follow the existing UI design and styles of the existing components
- We've included live examples for you to reference
- The menu items (px-item or px-row) already follow the proper style and the trigger items (px-dropdown-button, px-button, etc.) follow the style, there shouldn’t need to be too much work on styling. It’s more of just getting the structure established to launch the menu and nest the levels.
Responsive
- The Multi-Level Menu needs to be responsive
- It should work at varying widths
- Items that are in these menus should not be particularly long
-- Typically we restrict them to be single line and if the text is too long, it will be ellipsed This should be handled by the existing px-item/px-row components though.
Multi-Level Menu Requirements
- We've supplied a visual representation of how the multi-level menu should function.
- Check the attached screenshot indicated by the Alphabetical number on Menus.png.
-- This is the high level idea/ required functionality of how the menus should work
A). Menu should support a list of items (px-item or px-row)
- These items can be nested in a tree structure
- Items with subitems should be displayed with an arrow icon
- List of items can be supplied in JSON format via a component attribute, or manually laid out by nesting components in the HTML markup.
B). Menu should support two color styles, light and dark (A and B)
C). Items in the menu may have icons (C & D)
D). Items in the menu may be used as section headers, which will not be selectable (C & D)
E). The user should be able to specify any component which will be used to launch the menu on click
- The typical use case will be to launch from a px-dropdown-button (E & F)
- We will also want to at least support launching from px-input, px-button, px-icon, px-row, px-title
F). There should be two modes of interaction for the menu
- The first mode is a typical selection - when the user selects an item in the menu, the contents of that item are added to the triggering component (e.g. px-dropdown-button, px-input, etc.), if appropriate
- The second mode is "action" mode
- In action mode, each item in the menu represents an action and no selection mechanics are necessary
Component Demo
- https://nameless-fortress-89956.herokuapp.com/
- Live examples of working components
Judging Criteria
- Meets all of the requirements set in the challenge brief
- Code quality
- Does your component structure and organization match the existing components
Submission Guideline
- Deploy your solution on Heroku so we can see it in action and include the link to your submission.
- Provide documentation, (usage and deployment guide) for your solution