Remove Manual JSX Pragma Definitions

[joe-bell]

Description

• Remove manual jsx pragma definitions.
• Make use of component selectors

How Has This Been Tested?

Tests fail (see below)

Screenshots

N/A

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I have read the contributing guidelines.
• My code follows the code style of this project.
• All new and existing tests passed.
• My HTML markup is valid and meets W3C standards.
• My styles avoid hard-coded 'magic' values and make use of the design tokens.
• My code meets the A11Y Web Accessibility Checklist. If not, please add justification documentation.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.

[joe-bell]

Currently having a few issues with this and it's turned out to be a complete pain in the backside

1. ts-jest doesn't understand babel-config paths so we have to use require - ts-jest does not support new Babel 7 Project-wide config file kulshekhar/ts-jest#933
2. jest-emotion doesn't seem to allow the pragma/allow shallow rendering of the CSS
   • Cannot make 'jest-emotion' work with Emotion 10, CSS Prop and Enzyme emotion-js/emotion#1187
   • Issues with Jest, Typescript and Emotion Babel Plugin  emotion-js/emotion#687
   • toHaveStyleRule does not work with Emotion 10 emotion-js/emotion#949 (comment)

Emotion's core maintainers seem to be completely uninterested in solving it. I would seriously debate the effort of continually working around things for Emotion...

This is yet another roadblock/hurdle with Emotion (including the ssr and typescript issues we had before). I'm seriously starting to wonder why we should keep using this platform when styled-components has none of the extra leg-work (other than ssr config) and wider community support