fix(box): css style properties passed as HTML attributes

[mihai-albu-sage]

Proposed behaviour

The height, width, opacity and color are not being passed directly to the StyledBox component but instead are placed in the cssProps object, and then they are used inside the StyledBox. This prevents the props from being applied to the HTML node directly.

Playwright tests that were checking for the attribute being present on the node have been amended since the attribute is no longer present.

Current behaviour

The height, width, opacity and color props are passed directly to the StyledBox component which applies them directly to the HTML node.

Checklist

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

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

[DipperTheDan]

suggestion(non-blocking): toHaveStyle accepts an object with multiple values, so you could pass these in as one assertion. I'm OK with the way you've done it, though. Feel free to ignore this comment if you prefer your way 😄

[mihai-albu-sage]

The indicated tests have been refactored.