[Feat] Crear componente Team Member

[nykka]

¿Qué te gustaría agregar a este proyecto?

Estructura:

El componente tiene que ubicarse en la carpeta componentes dentro de una carpeta propia en donde se van a crear los archivos necesarios:

• Componente
• Story: Tiene que mostrar como se ve el componente con cada uno de los estados
• Test: Debe testear que el componente se renderice y que muestre sus diferentes estados

Comportamiento esperado:

El componente tiene que recibir las props necesarias para renderizar foto, nombre, apellido, rol, links de contacto (array). Para los links hay que utilizar el componente Link de nuestro design system.

Accesibilidad:

La imagen tiene que estar oculta para los lectores de pantalla.

Story:

Crear un archivo .story para Storybook https://storybook.js.org/docs/react/writing-stories/introduction

Test:

Crear un test para el componente https://storybook.js.org/docs/react/writing-tests/introduction

Preview

Desktop	Mobile

Links Figma

• En uso - Desktop
• En uso - Mobile

Código de conducta y licencia.

• [x] He comprobado que la feature solicitada no fue solicitada previamente.
• [x] Estoy de acuerdo con seguir el código de conducta de este proyecto.
• [x] Estoy de acuerdo con seguir las licencias de este proyecto.

[alexxuss1996]

Hello, can you assign me to this issue, please?

[LPRegen]

Yes @alexxuss1996

[alexxuss1996]

Great, thanks! @LPRegen

[alexxuss1996]

How links array and structure of data, in general, should look like? @LPRegen @TonyMckes

[TonyMckes]

How links array and structure of data, in general, should look like? @LPRegen @TonyMckes

@alexxuss1996 probably something like:

interface TeamMember {
  _id: string
  image: Image
  name: string
  surname: string
  pronouns: string
  role: string
  contactLinks: ContactLink[]
}

interface ContactLink {
  name: string  // or "label"
  url: string
}

interface Image {
  altText: string
  asset: AssetRef  // This can be pass to the function `urlFor`
}

[alexxuss1996]

@TonyMckes can you make the asset ref (to pass in urlFor)? Need some mock data. Oh, and _id also...

[TonyMckes]

@TonyMckes can you make the asset ref (to pass in urlFor)? Need some mock data. Oh, and _id also...

Mhmm... @alexxuss1996 I think the image can be optional, so we may as well check if the image is actually there, and if not then render a placeholder (gray circle for now)