# Testing Assignment

*   **Onboarding project**

    You will work through building a component using React, TypeScript and Tailwind, working with mock data from Sitecore, writing tests, and setting up your component in Storybook.

    To begin, please create a new branch off of this `onboarding` branch:

    ```
    git checkout onboarding
    git checkout -b onboarding-yourname
    ```

    **The Component**

    You will be creating a NewsBanner component.

    * View the component \[design]\(https: //app.abstract.com/projects/7d33aa49-f1f0-47eb-971d-893d6457bcbc/branches/9556131a-d820-4925-8e56-968513c820b5/commits/latest/files/56AED96A-C786-42FD-8B75-CFA17F1BE644/layers/2CFCCB94-B674-49E3-B0CD-E73E9BEEAB81?collectionId=e0eaf804-c52c-4f76-9ae9-c8643bd687e3\&collectionLayerId=26c85763-39d5-411c-991b-ed946c19bf50) in abstract
    * Ask questions about the design if you have any
    * Go to `./src/components/NewsBanner`
    * Start building out the component, reference the `./docs` to understand the files to create and how to use them (composition, data, index, stories, test, types)
    * Be sure to make commits to your branch
    * When done, push all commits to remote and open a pull request
    * This is a full-width component.
    * It includes a visual, a title, a description, a CTA button and a background.
    * A title is required
    * Text that exceeds the available content space will be truncated.
    * The visual is required. An icon or image may be used as the supporting visual.
    * The height for the banner should be determined by the height of the content plus the top and bottom spacing. Therefore, banners including icons and images will vary in height.
    * On desktop, the max height of the banner with an icon is 140px. The max height of the banner with an image is 170px on desktop.
    * On mobile, the max height of the banner with an icon is 296px. The max height of the banner with an image is 324px on mobile.
    * The description and CTA button are optional.
    * The content area should be centered horizontally when when the CTA is not displayed.
    * There are predefined background options.

![](https://3187432912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnAUAWneokvjKD0JGoJK%2Fuploads%2Fgit-blob-b6c631e17d0ba869a2fc2e018b3e4775bdbe72ce%2FScreen%20Shot%202022-01-28%20at%2012.18.23%20PM.png?alt=media)

![](https://3187432912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnAUAWneokvjKD0JGoJK%2Fuploads%2Fgit-blob-6434f01d29306aaac4d65b8c1d644105aac7f7b8%2Fassignment.png?alt=media)

![](https://3187432912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnAUAWneokvjKD0JGoJK%2Fuploads%2Fgit-blob-dfc9593e1f3bb9a3cbeaff6720451a810774a6af%2FScreen%20Shot%202022-01-27%20at%203.23.20%20AM.png?alt=media)

![](https://3187432912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnAUAWneokvjKD0JGoJK%2Fuploads%2Fgit-blob-04f1bd89ae93fa990a921426ffd90ccd01fe80ad%2FScreen%20Shot%202022-01-27%20at%2012.59.02%20AM.png?alt=media)

\{% embed url="https: //share.goabstract.com/2b800eac-7c18-47bb-ba7c-16266b03146c?collectionLayerId=26c85763-39d5-411c-991b-ed946c19bf50\&mode=design\&sha=latest" %\} Abstract Sketch

## Welcome to the team!

We're excited to have you on board. The purpose of this project is to get you familiar with our application and toolset.

Please spend some time reading through our docs and be sure to ask questions as they arise.

Next, you will start writing some code!

### Onboarding project

You will work through building a component using React, TypeScript and Tailwind, working with mock data from Sitecore, writing tests, and setting up your component in Storybook.

To begin, please create a new branch off of this `onboarding` branch:

```
git checkout onboarding
git checkout -b onboarding-yourname
```

#### The Component

You will be creating a NewsBanner component.

* View the component \[design]\(https: //app.abstract.com/projects/7d33aa49-f1f0-47eb-971d-893d6457bcbc/branches/9556131a-d820-4925-8e56-968513c820b5/commits/latest/files/56AED96A-C786-42FD-8B75-CFA17F1BE644/layers/2CFCCB94-B674-49E3-B0CD-E73E9BEEAB81?collectionId=e0eaf804-c52c-4f76-9ae9-c8643bd687e3\&collectionLayerId=26c85763-39d5-411c-991b-ed946c19bf50) in abstract
* Ask questions about the design if you have any
* Go to `./src/components/NewsBanner`
* Start building out the component, reference the `./docs` to understand the files to create and how to use them (composition, data, index, stories, test, types)
* Be sure to make commits to your branch
* When done, push all commits to remote and open a pull request
