🍱(front) add ViewersList and its related components

Add a new component ViewersList, which is in charge of displaying the viewers
list, and the on stage management buttons, depending on if the user is an
instructor or not. This commit also add all necessaries components needed for
ViewersList to work properly.

src/frontend/components/ViewersList/components/ViewersListHeader/index.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
+import { ViewersListHeader } from '.';
+
+describe('<ViewersListHeader />', () => {
+  it('renders ViewersListHeader component and compares it with previous render.', async () => {
+    await renderImageSnapshot(
+      <ViewersListHeader margin={{ bottom: '6px' }} text="An example text" />,
+    );
+    screen.getByText('An example text');
+  });
+});

src/frontend/components/ViewersList/components/ViewersListHeader/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, BoxProps, Text } from 'grommet';
+import styled from 'styled-components';
+
+const StyledTextHeader = styled(Text)`
+  font-family: 'Roboto-Regular';
+  letter-spacing: -0.2px;
+`;
+
+interface ViewersListHeaderProps extends BoxProps {
+  text: string;
+}
+
+export const ViewersListHeader = ({
+  text,
+  ...boxProps
+}: ViewersListHeaderProps) => {
+  return (
+    <Box align="start" {...boxProps}>
+      <Box
+        align="center"
+        border={{
+          color: 'blue-active',
+          size: 'xsmall',
+        }}
+        pad={{
+          horizontal: 'small',
+          vertical: '2px',
+        }}
+        round="14px"
+      >
+        <StyledTextHeader color="blue-active" size="0.625rem" weight="normal">
+          {text}
+        </StyledTextHeader>
+      </Box>
+    </Box>
+  );
+};

src/frontend/components/ViewersList/components/ViewersListItem/index.spec.tsx

@@ -0,0 +1,21 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
+import { ViewersListItem } from '.';
+
+describe('<ViewersListItem />', () => {
+  it('renders ViewersListItem component, for a student, and compares it with previous render.', async () => {
+    await renderImageSnapshot(
+      <ViewersListItem isInstructor={false} name={'An example name'} />,
+    );
+    screen.getByText('An example name');
+  });
+
+  it('renders ViewersListItem component, for an instructor, and compares it with previous render.', async () => {
+    await renderImageSnapshot(
+      <ViewersListItem isInstructor={true} name={'An example name'} />,
+    );
+    screen.getByText('An example name');
+  });
+});

src/frontend/components/ViewersList/components/ViewersListItem/index.tsx

@@ -0,0 +1,33 @@
+import { Box, Text } from 'grommet';
+import React from 'react';
+import styled from 'styled-components';
+
+import { ChatAvatar } from 'components/Chat/SharedChatComponents/ChatAvatar';
+
+const StyledText = styled(Text)`
+  font-family: 'Roboto-Medium';
+  letter-spacing: 0.07px;
+`;
+
+interface ViewersListItemProps {
+  isInstructor: boolean;
+  name: string;
+}
+
+export const ViewersListItem = ({
+  isInstructor,
+  name,
+}: ViewersListItemProps) => {
+  return (
+    <Box align="center" direction="row" gap="10px">
+      <ChatAvatar isInstructor={isInstructor} />
+      <StyledText
+        color="blue-active"
+        size="0.75rem"
+        weight={isInstructor ? 'bold' : 'normal'}
+      >
+        {name}
+      </StyledText>
+    </Box>
+  );
+};

src/frontend/components/ViewersList/components/ViewersListItemContainer/index.spec.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { normalizeColor } from 'grommet/utils';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { theme } from 'utils/theme/theme';
+import { ViewersListItemContainer } from '.';
+
+const GenericChild = () => <p>Some text</p>;
+
+describe('<ViewersListItemContainer />', () => {
+  it('renders ViewersListItemContainer, with a child', () => {
+    render(
+      <ViewersListItemContainer>
+        <GenericChild />
+      </ViewersListItemContainer>,
+    );
+    screen.getByText('Some text');
+  });
+
+  it('checks hover style is applied', async () => {
+    const tree = renderer
+      .create(
+        <ViewersListItemContainer>
+          <GenericChild />
+        </ViewersListItemContainer>,
+      )
+      .toJSON();
+
+    expect(tree).toHaveStyleRule(
+      'background',
+      normalizeColor('bg-marsha', theme),
+      {
+        modifier: ':hover',
+      },
+    );
+  });
+});

src/frontend/components/ViewersList/components/ViewersListItemContainer/index.tsx

@@ -0,0 +1,26 @@
+import { Box } from 'grommet';
+import { normalizeColor } from 'grommet/utils';
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from 'utils/theme/theme';
+
+const StyledItemContainer = styled(Box)`
+  &:hover {
+    background: ${normalizeColor('bg-marsha', theme)};
+  }
+`;
+
+export const ViewersListItemContainer = ({
+  children,
+}: React.PropsWithChildren<{}>) => (
+  <StyledItemContainer
+    align="center"
+    justify="between"
+    direction="row"
+    gap="small"
+    pad={{ horizontal: 'medium', vertical: 'xsmall' }}
+  >
+    {children}
+  </StyledItemContainer>
+);

src/frontend/components/ViewersList/components/ViewersListTextButton/index.spec.tsx

@@ -0,0 +1,21 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { ViewersListTextButton } from '.';
+
+const mockOnClick = jest.fn();
+
+describe('<ViewersListTextButton />', () => {
+  beforeEach(() => jest.resetAllMocks());
+
+  it('renders ViewersListTextButton component and clicks on it', () => {
+    render(
+      <ViewersListTextButton onClick={mockOnClick} text="An example text" />,
+    );
+    screen.getByText('An example text');
+    const button = screen.getByRole('button', { name: 'An example text' });
+    act(() => userEvent.click(button));
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+});

src/frontend/components/ViewersList/components/ViewersListTextButton/index.tsx

@@ -0,0 +1,36 @@
+import { Button, Text } from 'grommet';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled(Button)`
+  align-items: center;
+  display: flex;
+  height: 20px;
+  padding: 0px 10px;
+`;
+
+const StyledTextButton = styled(Text)`
+  color: white;
+  font-family: 'Roboto-Bold';
+`;
+
+interface ViewersListTextButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+export const ViewersListTextButton = ({
+  onClick,
+  text,
+}: ViewersListTextButtonProps) => {
+  return (
+    <StyledButton
+      a11yTitle={text}
+      color="blue-active"
+      label={<StyledTextButton size="0.625rem">{text}</StyledTextButton>}
+      onClick={onClick}
+      primary
+      title={text}
+    />
+  );
+};