refactor(coral): Extract `DefinitionBlock` separate component
- 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
Assessment
This issue has not been assessed yet.