🕐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
onboardingbranch: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/NewsBannerStart building out the component, reference the
./docsto 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.
{% 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:
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/NewsBannerStart building out the component, reference the
./docsto 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
Last updated
