Replace deprecated constants with enums

Description

We are currently in the process of migrating to TypeScript. To help reduce tech debt and move the needle closer to a type strict extension it would be great to replace the deprecated design system constant instances with their enum equivalent for all components.

This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements. A PR can be as small as 1 file or as large as 3.

Deprecated consts and their enum replacements

• DISPLAY => Display
• FLEX_DIRECTION => FlexDirection
• FLEX_WRAP => FlexWrap
• BLOCK_SIZES => BlockSize
• SEVERITIES => Severity
• TEXT_ALIGN => TextAlign
• TEXT_TRANSFORM => TextTransform
• FONT_WEIGHT => FontWeight
• OVERFLOW_WRAP => OverflowWrap
• FONT_STYLE => FontStyle

An example of this would be to swap

import {
  TEXT_ALIGN,
  DISPLAY,
  FLEX_DIRECTION,
  FLEX_WRAP,
} from '../../../helpers/constants/design-system';

<Component
  textAlign={TEXT_ALIGN.LEFT}
  display={DISPLAY.FLEX}
  flexDirection={FLEX_DIRECTION.ROW}
  flexWrap={FLEX_WRAP.WRAP}
>

with

import {
  TextAlign,
  Display,
  FlexDirection,
  FlexWrap,
} from '../../../helpers/constants/design-system';

<Component
  textAlign={TextAlign.Left}
  display={Display.Flex}
  flexDirection={FlexDirection.Row}
  flexWrap={FlexWrap.Wrap}
>

Technical Details

• Replace constants with their enum equivalent

Acceptance Criteria

• PRs contain no more than 3 files this will ensure the PR is easy to review and merged sooner
• Before / After screenshots of the UI to show no visual regressions
• CI tests for jest, linting, and e2e pass

Difficulty: Beginner

Good first issue for: External contributors who are familiar with running the extension locally, have knowledge of Jest tests, linting, and are proficient at searching a code base.