Docs/ppdsc 2514 checkbox component scenario

[RashikaNewsUK]

#766

What

1. Background - why this is needed
2. What did you do
3. What does the reviewers should expect

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[pp-serviceaccount]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/ppdsc-2514-checkbox-component-scenario
Storybook: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/ppdsc-2514-checkbox-component-scenario/storybook

[mutebg]

Don't import this from emotion, use newskit instead.

[mutebg]

You need to add a base state here, something like this, I am not sure about the correct colours, you can check with the design team.

base: {
    backgroundColor: '{{colors.interfaceInformative020}}',
    borderColor: '{{colors.interfaceInformative030}}',
    borderWidth: '{{borders.borderWidth020}}',
    borderRadius: '{{borders.borderRadiusRounded010}}',
    borderStyle: 'solid',
    iconColor: '{{colors.inkInverse}}',
  },

after you have all colours you might need to update them in all states ( check the available states in src/checkbox/style-presets.ts

[mutebg]

here you can use stylePreset: 'inkBrand010', it's gonna have same result, no need for custom style-preset

[RashikaNewsUK]

Thanks @mutebg