Feat/update checkbox

[kaylarobertson3]

Proposed changes

This PR updates the checkbox component so it's ready for use in the sapera-website forms.

• Update onChange function to allow components to function inside of a form the same as other Input components
• Add required, and hasError, improve a11y, and optionally display error message
• Centers checkbox label to design, update spacing slightly
• This PR also updates colors in the pattern library with the most recent ones from design. Later, colors will be shared across repo in a css utility repo, but for now, if they update in sapera-website they should also change in sapera-components. (for example, thin will not exist as a border option in sapera-website, although it currently exists. It is not used anymore in this repo since it's being phased out)

Can QA sapera-components locally and test by clicking on the checkboxes in Checkbox story

This PR can optionally be tested in the sapera-website footer newsletter subscription in a related PR (WIP) https://github.com/infographicsgroup/sapera-website/pull/426 by using yarn link

Before

After

Example use in sapera-website

Technical

• 🔧 Add props and update onChange function
• 🔧 Add checkbox story to demo error message
• 🌈 Update colors in util
• 🌈 update spacing and alignment

Ticket

• Update checkbox component in pattern library

Related:

• Footer Newsletter subscription

[a14m]

Done quick QA on the netlify deployed storybook https://5f8d454d4c3d0c5f820ffdaf--sapera-storybook.netlify.app/?path=/story/checkbox--default

looks working to me

[cawo88]

I quickly QA in Chrome, Safari and Firefox and found one minor cosmetic issue. Please use a transparent background color inside the checkbox. Therefore it will use the same color as the body background color to allow more flexibility. See attached.

[kaylarobertson3]

@cawo88 Here is the follow-up PR fixing the blocking comment #41