Change Details

## Background After reviewing the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html | Accordion ]] with the design team, it seems that there is a slight inclination towards the accordion without divider. In some cases, the divider is useful to separate the different accordion items in a group, but in some other cases the dividers within the accordion items in a group create noise (e.g. when they are placed on big screens like desktop or tablet). Also, we need to keep in mind that a single accordion could appear in a page, so in this case the divider could not be necessary. {F37933880} We could implement this divider as a component's property so users can decide when to use it. Once this is done, we will need to decide if we define one of these accordion's versions (with or without divider) as the default component's version, and also define guidelines for the use of each one of them. ### Design spec // Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. // | Component spec sheet | ### Open questions // Add here the questions to be answered in order to design and implement the component // ### Acceptance criteria (or Done) **Design** [] Design the Figma spec sheet and add it in this task [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.// **Code** [] Implement the component in Codex

## Background We have seen continuous needs for various styling of the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html | Accordion ]] — with the divider, with an outline, or without one at all. Additionally, a more minimal and space saving Accordion has also been desired. In some cases, the divider is useful to separate the different accordion items in a group, but in some other cases the dividers within the accordion items in a group create noise (e.g. when they are placed on big screens like desktop or tablet). Also, we need to keep in mind that a single accordion could appear in a page, so in this case the divider could not be necessary. {F37933880} ### Goal Ideally, we would have a variant property called something like `separation` with the values of `divider`, `outline`, and `none`. In order to not break any current implementations of Accordion, `divider` should be the default. Additionally, we should add a boolean prop for `minimal` or something, which is forced to have a `separation` of `none` due to its styling. Also, for a `separation` of `divider`, the border division should only appear on accordion groups, and not on a lone accordion. ### Acceptance criteria (or Done) **Design** [] Update the component in the Figma **Code** [] Implement the component in Codex

## Background After reviewingWe have seen continuous needs for various styling of the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html | Accordion ]] — with the design team,divider, with an outline, or without one at all. it seems that there is a slight inclinaAddition towards the accordion without divider.ally, a more minimal and space saving Accordion has also been desired. In some cases, the divider is useful to separate the different accordion items in a group, but in some other cases the dividers within the accordion items in a group create noise (e.g. when they are placed on big screens like desktop or tablet). Also, we need to keep in mind that a single accordion could appear in a page, so in this case the divider could not be necessary. {F37933880} We could implement this divider as a component's property so users can decide when to use it. Once this is done, we will need to decide if we define one of these accordion's versions (with or without divider) as the default component's version, and also define guidelines for the use of each one of them. ### Design spec### Goal // Once a component spec sheet has been created in FigmaIdeally, we would have a variant property called something like `separation` with the values of `divider`, `outline`, and `none`. In order to not break any current implementations of Accordion, `divider` should be the default. Additionally, remove the note stating that the spec is missing and link to the spec below.we should add a boolean prop for `minimal` or something, //which is forced to have a `separation` of `none` due to its styling. | Component spec sheet | ### Open questions // Add here the questions to be answered in order to design and implement the component //Also, for a `separation` of `divider`, the border division should only appear on accordion groups, and not on a lone accordion. ### Acceptance criteria (or Done) **Design** [] Design the Figma spec sheet and add it in this task [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.// **Code** [] Implement the component in Codex