Tab interview task

Intro

Your client within your team has requested a tab component for their site. The work was approved and handed to the team designer designer, who has created a design for large screens in Sketch however they haven't done anything for small screens. They have now gone on holiday with the work unfinished and you have the task to complete the work.

Component Considerations

• The tab component is to be managed by the client
• The client will be inserting it on the pages via their CMS
• It is a global website that has a broad range of customers

Task Considerations

Develop the tab component however you feel it should be developed, using the technique you feel is most appropriate. There are a couple of requirements from us:

• If you use scripting please only use vanilla JavaScript
• Please don't use any frameworks when building the tabs
• Please host the code in a repository (GitHub, ButBucket, etc), it's advised to commit often so that we can see how your solution evolves.
• You don't need to spend a long time on this, timebox yourself to no more than an hour.
• Focus on what you percieve to be the most important aspects first.

Designs

The designer has got to this point with the component which is available in a Sketch file or on SKtech cloud, for the purposes of this task don't worry about matching the font.

Acceptance criteria:

The following acceptance criteria have been developed between the team and the client.

Given: I am a site user When: I click on a tab Then: Then the related block should be shown And: Any other open tabs should be closed

Given: I am a site user When: I click on a tab Then: That tab should be marked as active

Given: I am a site user When: I view the component Then: I want it to render appropriately on whatever device I am currently using

Given: I am a site author When: I add the component to the page Then: I want to be able to add as many tabs as i require