Add a template for field accordion in content types ( node ) to use the Accordion component

Created on 26 May 2024, about 1 month ago

Problem/Motivation

The accordion component is working on the block and we need to create a default component for nodes

Steps to reproduce

1- Create a content type
2- Add field paragraph [field_accordion] and use the current paragraph items
3- Render the field

{% set accordion_items = [] %}
{% for accordion_item_paragraph in items %}
  {% set accordion_item_header = accordion_item_paragraph.content['#paragraph'].field_title.value %}
  {% set accordion_item_body = {
    '#type':   'processed_text',
    '#text':    accordion_item_paragraph.content['#paragraph'].field_body.value,
    '#format':  accordion_item_paragraph.content['#paragraph'].field_body.format,
  } %}
  {% set accordion_item_expanded = (accordion_item_paragraph.content['#paragraph'].field_expanded and accordion_item_paragraph.content['#paragraph'].field_expanded.value == true) ? true : false %}

  {% set accordion_item = {'header': accordion_item_header, 'body': accordion_item_body, 'expanded': accordion_item_expanded } %}
  {% set accordion_items = accordion_items|merge([accordion_item]) %}

{% endfor %}

{% include "varbase_components:accordion" with {
  title_tag: 'h2',
  heading: label,
  items: accordion_items,
} %}

→

Proposed resolution

Add a twig template file to map the field_accordion with the accordion component in content types.
Add a default field_accordion config in Varbase Core, to be able to re-use with content types.
📌 Change the style of Accordion and Accordion Items to follow with Varbase Design System Active
📌 Add a new Accordion Item and Accordion components with stories for storybook following with Varbase Design System Active

Remaining tasks

✅ File an issue about this project
❌ Addition/Change/Update/Fix to this project
❌ Testing to ensure no regression
➖ Automated unit/functional testing coverage
➖ Developer Documentation support on feature change/addition
➖ User Guide Documentation support on feature change/addition
➖ UX/UI designer responsibilities
➖ Accessibility and Readability
❌ Code review from 1 Varbase core team member
❌ Full testing and approval
❌ Credit contributors
❌ Review with the product owner
❌ Update Release Notes and Update Helper on new feature change/addition
❌ Release

Varbase update type

✅ No Update
➖ Optional Update
➖ Forced Update
➖ Forced Update if Unchanged

User interface changes

API changes

Data model changes

Release notes snippet

✨ Feature request

Status

Needs work

Version

3.0

Component

Code

Created by

🇯🇴Jordan Ahmad Abbad Jordan

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @Ahmad Abbad
Comment about 1 month ago →
🇯🇴Jordan Rajab Natshah Jordan
Comment about 1 month ago →
🇯🇴Jordan Rajab Natshah Jordan
Comment about 1 month ago →
🇯🇴Jordan Rajab Natshah Jordan
Status changed to Needs work about 1 month ago10:37am 26 May 2024
Comment about 1 month ago →
🇯🇴Jordan Rajab Natshah Jordan
Please, provide a merge request

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024