Challenge Overview
We need your help to come with a simple POC that helps us understanding and theming a React component in an easy way. As for this challenge, the Top Bar from the header.
Project Overview
This challenge goal is to create a React application theming Proof of Concept (POC) with React-CSS-Themr, using CSS Modules. It should represent the global and local use of CSS Modules to style the 3 types of components we use in the Connect App (dumb, smart, and container components).
Your task is to explore all the cases of (S)CSS styles overrides for a component or collection of components that the Topcoder team faces with the new Connect app.
Default theming:
Context theming:
Requirements
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
- Provide notes stating the necessary steps to apply your solution, as well as modified files, lines, and so on.
- See note about the video in the challenge requirements.
Project Overview
This challenge goal is to create a React application theming Proof of Concept (POC) with React-CSS-Themr, using CSS Modules. It should represent the global and local use of CSS Modules to style the 3 types of components we use in the Connect App (dumb, smart, and container components).
Your task is to explore all the cases of (S)CSS styles overrides for a component or collection of components that the Topcoder team faces with the new Connect app.
Default theming:
Dumb component style override -- standalone.
Dumb component style overridden by composing parent component -- passing different theme {(S)CSS stylesheet} to the dumb component.
Container component providing theme context for its child components.
Dumb component style overridden by composing parent component -- passing different theme {(S)CSS stylesheet} to the dumb component.
Container component providing theme context for its child components.
Context theming:
Theme change based on global context;
Theme change based on container logic;
Theme change based on container logic;
Requirements
To demonstrate the correct use of CSS Modules for styling components you’ll have to refactor the Topbar component and break it down to small “dumb” components. You can follow the Thinking in React tutorial. Follow the component architecture organization.
Write a solid code, include comments to clarify what you’re doing, follow Connect’s styleguides for JavaScript and SCSS, use CSS Modules.
Your work would become the standard for the subsequent component refactoring effort. It is critical that your solution is clear, elegant, and can be understood from every developer that works on the Topcoder Connect project.
Focus on the JavaScript code, not on the CSS. The POC should show how to include and switch CSS stylesheets, but we’re not interested in high quality CSS code at this point. It should be good enough to demonstrate changes from one style override to another, but not more. A good approach would be to modify the background and text colors without changing anything else.
Your solution must showcase working component being dynamically styled. Demonstrate all the cases listed.
The project wiki and branch readme are essential to understand our application front-end architecture. Make sure you read them. If you encounter any errors, or have a suggestion for improvements, please add them to your solution. We highly value your feedback!
Provide a screencast demonstrating the theming application (switching samples) ~ in code and rendered results ~ for each component model (dumb, composed, etc).
Do not use or include any extra libraries. The starting repository “scaffolding” is already setup to include all that you need. Use this as baseline for your POC solution.
Source code and design text must be written in US-English.
Write a solid code, include comments to clarify what you’re doing, follow Connect’s styleguides for JavaScript and SCSS, use CSS Modules.
Your work would become the standard for the subsequent component refactoring effort. It is critical that your solution is clear, elegant, and can be understood from every developer that works on the Topcoder Connect project.
Focus on the JavaScript code, not on the CSS. The POC should show how to include and switch CSS stylesheets, but we’re not interested in high quality CSS code at this point. It should be good enough to demonstrate changes from one style override to another, but not more. A good approach would be to modify the background and text colors without changing anything else.
Your solution must showcase working component being dynamically styled. Demonstrate all the cases listed.
The project wiki and branch readme are essential to understand our application front-end architecture. Make sure you read them. If you encounter any errors, or have a suggestion for improvements, please add them to your solution. We highly value your feedback!
Provide a screencast demonstrating the theming application (switching samples) ~ in code and rendered results ~ for each component model (dumb, composed, etc).
Do not use or include any extra libraries. The starting repository “scaffolding” is already setup to include all that you need. Use this as baseline for your POC solution.
Source code and design text must be written in US-English.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Final Submission Guidelines
- Provide all your files within a zip container.- Provide notes stating the necessary steps to apply your solution, as well as modified files, lines, and so on.
- See note about the video in the challenge requirements.