feat(sidebar): add padding props for customising content container (FE-4458)

[Parsium]

resolves #4494

Proposed behaviour

• Added styled system padding props to Sidebar, which are applied to the sidebar content container. Updated PropTypes, types in d.ts file and storybook prop table
• Define default content padding using design tokens:
• Added new story to demonstrate that custom padding can be added
• Minor refactors:
  • remove defaultProps
  • rename inner style component to fit convention
  • modify prop types of size and position props - so all of their possible values are displayed clearly in storybook, as opposed to SIDEBAR_SIZES and SIDEBAR_ALIGNMENTS

Current behaviour

• Cannot pass custom padding props to Sidebar
• Padding of content is not defined using design tokens

Checklist

• [x] Commits follow our style guide
• [x] Related issues linked in commit messages if required
• [x] Screenshots are included in the PR if useful
• [x] All themes are supported if required
• [x] Unit tests added or updated if required
• [x] Cypress automation tests added or updated if required
• [x] Storybook added or updated if required
• [x] Translations added or updated (including creating or amending translation keys table in storybook) if required
• [x] Typescript d.ts file added or updated if required

QA

• [ ] Tested in CodeSandbox/storybook
• [ ] Add new Cypress test coverage if required
• [ ] Carbon implementation matches Design System/designs
• [ ] UI Tests GitHub check reviewed if required

Additional context

The content padding styles have been updated with design tokens to match the DS design:

Testing instructions

• Check new story custom-padding-around-content to see new behaviour.
• Ensure no regressions have been introduced as a result of this change.
• Double check for any ambiguity in storybook docs for Sidebar as a result of this change.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3e305a1541dd0ad21251328843e55a26cf89a56d:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
stupefied-butterfly-ssjk2b	Issue #4494

[cypress[bot]]

---

Test summary

2848 • 0 • 2 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	3e305a1541
Started	Aug 17, 2022 2:19 PM
Ended	Aug 17, 2022 2:25 PM
Duration	05:31 💡
OS	Linux Debian - 10.10
Browser	Chrome 100

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[carbonci]

:tada: This PR is included in version 110.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: