React18 refactor Badge

[BillyG83]

• Remove ReactDOM by using modern RTL setup (see below)
• Scope styles to the component better by not using named exports, but make sure they are not shared in another component as with some niche cases (see below)
• Add this component to the docs, you might get lucky and its already there. There is a bunch of tools to make the gifs, i like Quicktime but a search will prob find even easier tools
• make sure all possible renders / versions of this component are rendered in Storybook, some times we forget and hide great features
• standardise the hell out of the names please, see here for reference https://github.com/web3ui/web3uikit/blob/master/CONTRIBUTE.md#css-naming-an-element

Test like this

import {
    render,
    screen,
    fireEvent,
    act,
    waitFor,
} from '@testing-library/react';

const copyIconTestId = 'this-component';

test('Should render the component', () => {
    render(<ThisComponent />);
    const element = screen.getByTestId(copyIconTestId);
    expect(element).not.toBeNull();

    // Verify that the `icon copy` is visible
    expect(element.textContent).toBe(`${iconTypes.copy} icon`);
});

Scope CSS like this

this is bad, intellisense is going crazy

export const ButtonStyled = styled.button`
   // CSS stuff here
`;

this is better

const ButtonStyled = styled.button`
   // CSS stuff here
`;

export default {
  ButtonStyled,
}

then import like this

import styles from './ThisComponent.styles';

const { ButtonStyled, } = styles;

need help?

check this PR i already did this for Accordion =] https://github.com/web3ui/web3uikit/pull/356

[AbhinavMV]

I am working on this