README.md

Overview 🏠 {#Overview}

This client is an SPA allowing to test the result of your implementation. It represents your future users and how they will use your components. So, all your components have to be conform with the specifications.

This client has been created in order to make the test finished within 3 hours but there are definitely some improvements to make at any level.

Acceptance criteria

Your solution has to produce the same previews for the Button component.

ℹ️ For the design and components to build that client, it is up to you to keep the existing or do your own. Of course, more you do more you can convince us you are the right fit for the company.

Theme 1

States

Playground

Initial

Enabled state

Hover state

Focus state

Disabled state

Colour

Enabled state

Hover state

Focus state

Disabled state

Background colour

Enabled state

Hover state

Focus state

Disabled state

Hover background colour

Enabled state

Hover state

Focus state

Disabled state

Theme 2

States

Playground

Initial

Enabled state

Hover state

Focus state

Disabled state

Color

Enabled state

Hover state

Focus state

Disabled state

Mandatory

• In the file src/externals/prisma-theme-one.tsx
  • Use your TH1Button + Th1Theme instead of the temporary code
  • Set the TH1Customisations to match the enabled state of the TH1Button
  • Check TH1Button proposes only the properties defined in the specifications (use the intelliSense of your IDE in the App.tsx file)
• In the file src/externals/prisma-theme-two.tsx
  • Use your TH2Button + Th2Theme instead of the temporary code
  • Set the TH2Customisations to match the enabled state of the TH2Button
  • Check TH2Button proposes only the properties defined in the specifications (use the intelliSense of your IDE in the App.tsx file)

Optionals

• Improve the solution
• Explain all your improvements in the Improvments section below
• Test your solution

Improvments

Explain your choices and anything you would have to do but did not have time