Aiven-Open / Aiven-Open/klaw

refactor(coral): Extract `DefinitionBlock` separate component

Open
#1,503 0 comments 0 reactions 0 assignees View on GitHub
Frontend good first issue Housekeeping
Dominant language
Java
Stars
195
Forks
77
Avg merge
8d 9h
Merged PRs (30d)
1

Description

# What happened?

We are using [Definition Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) in different components. In the component [`ClusterDetails`](https://github.com/aiven/klaw/blob/main/coral/src/app/features/topics/details/overview/components/ClusterDetails.tsx) we have, instead of using `

`, `
`, and `
` elements inline, defined a internal component `DefinitionBlock`.

This `DefinitionBlock` component should be a shared component in `coral/src/app/components`.

## What to do

- create a shared component `DefinitionBlock` in `coral/src/app/components`
- check all usage of `dl` in coral and see if `DefinitionBlock` needs to be more versatile
- update tests of component that currently use `dl` by using the custom queries we added (`getByTermInList`, `getDefinitionList`, `getAllDefinitions` in from `src/services/test-utils/custom-queries` to ensure all markup is correct and the tests are confirming this (the correct markup is important to ensure correct semantic and readability for assistive technology)
- replace usage of `dl` in coral with new component `DefinitionBlock`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.