Challenge Overview
OVERVIEW
We need a React component library, with a custom branding. To get this we will have to create our own component library which has wrapped the material-ui components. And we want to have a demo page to display all the components:
GENERAL REQUIREMENTS
DETAILED REQUIREMENTS
TECHNOLOGIES
We need a React component library, with a custom branding. To get this we will have to create our own component library which has wrapped the material-ui components. And we want to have a demo page to display all the components:
- We have wrapped material-ui components to create our own component lib based on material-ui. Additionally we have created a showroom to visualize this component lib.
- You will receive a lerna project from us which must be used for the implementation. The project consists of two packages:
- **/packages/core** - the component lib wrapping material-ui
- **/packages/showroom** - The showroom to visualize the core package
GENERAL REQUIREMENTS
- The used programming language must be typescript
- The latest version of the following browsers must be supported:
- Chrome
- Firefox
- Edge
- All created custom CSS must work with the supported browsers.
- You must follow the implementation guidelines attached (see ./README.md)
DETAILED REQUIREMENTS
- Each material-ui component must be wrapped and styled according to the provided styling guidelines:
- Use theming styles where applicable to achieve styling changes and we already have two themes (light and dark) in the provided code base. With these applied, there are still some smaller changes that need to be done in order to make it custom branded. Here's a list of the changes we'd like to make (you can find some of them as comments in 190510-Design-System.pdf which may help you better understand what needs to be changed):
- Background should be white
- Preview Background for components should be #EFEFEF
- Display Logo in front of blue (primary color: #0066B3) background in top left corner
- Sidebar should be smaller (260px) and be collapsible through use of the menu-icon
- Icons should be Carbon Design Icons: https://www.carbondesignsystem.com/guidelines/iconography/library
- Sidebar: Active Page should be highlighted in Bold and primary color
- Sidebar: Change direction of chevron icons (up and down – see pdf)
- App Bar should use #002847 as background color
- Icons should be available in text color (#001423) and default (#717171) and in some cases green/orange (see example "snackbars")
- Default buttons should be dark text color (#001423)
- Add danger color/button (color: #EB1946)
- Snackbars have different styling
- Input fields should be primary color as active accent (when clicked on)
- Wrapped ui components can be found in **/packages/core/src/**
- Use theming styles where applicable to achieve styling changes and we already have two themes (light and dark) in the provided code base. With these applied, there are still some smaller changes that need to be done in order to make it custom branded. Here's a list of the changes we'd like to make (you can find some of them as comments in 190510-Design-System.pdf which may help you better understand what needs to be changed):
- Review and adjust all examples:
- Examples can be found in **/packages/showroom/src/app/route/comps/examples**
- You must eliminate all `any` types inside the examples
- Create and wrap all missing material-ui lab components
- To implement these components, see the implementation guidelines attached (see ./README.md).
- Create custom components if necessary
- The following components are currently missing and must be added:
- Breadcrumbs
- Slider
- Speed Dial
- Toggle Buttons
- Create all examples for these components
TECHNOLOGIES
- Typescript
- ReactJS
- CSS
Final Submission Guidelines
- A single zip containing the updated source code.
- A new verification.md that describes how / where to verify the changes you made.