feat:(Typography) add text-align prop and support span variant <FE-6204 & FE-6220>

[nineteen88]

Proposed behaviour

• add prop support for text-align
• include support for using span as a variant

fixes #6331

Current behaviour

Currently there is no support for the above props and span variant

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Unit tests added or updated if required
• Storybook added or updated if required
• Typescript d.ts file added or updated if required
• Related docs have been 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

https://codesandbox.io/s/carbon-quickstart-forked-24w5sc

[codesandbox-ci]

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 553d854:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
carbon-quickstart	PR
carbon-quickstart (forked)	PR

[tomdavies73]

suggestion: we have some variant tests already in typography.cy.tsx, where we check the variant is applied, font-size, line-height, font-weight, text-transform and text-decoration-line. It might be worth adding "span" to these tests. We can do this by adding "span" to VARIANT_TYPES, getAs, getSize, getLineHeight, getWeight functions etc. Could be a good shout to ensure span is added with other variants as a baseline.

[nineteen88]

suggestion: we have some variant tests already in typography.cy.tsx, where we check the variant is applied, font-size, line-height, font-weight, text-transform and text-decoration-line. It might be worth adding "span" to these tests. We can do this by adding "span" to VARIANT_TYPES, getAs, getSize, getLineHeight, getWeight functions etc. Could be a good shout to ensure span is added with other variants as a baseline.

Added this now.

[divyajindel]

Hi @nineteen88 , could you please add cypress tests for TextAlign prop?

[Parsium]

note: unrelated to these changes, but it might be worth us refactoring the cypress file in the future to remove these value lookups on lines 12-160. I feel this could be simplified quite a bit.

[nineteen88]

Yeah, I've spoken to @edleeks87 about this and we will do a refactor of the tests later. You're definitely correct.

[carbonci]

🎉 This PR is included in version 121.2.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀