Issue #3384158 by michaellander: Create accordion sdc utilizing bootstrap accordion

source/02-components/01-composites/accordion-item/accordion-item.component.yml

+'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
+name: "Accordion Item"
+status: "stable"
+description: "A bootstrap accordion item."
+props:
+  type: object
+  properties:
+    parent_id:
+      type: "string"
+      title: "Parent ID"
+      description: "The ID of the accordion element."
+      required: true
+    heading:
+      type: "string"
+      title: "Heading"
+      description: "The heading of the accordion item."
+      required: true
+    heading_level:
+      type: "integer"
+      title: "Heading Type"
+      description: "The heading type of the accordion item."
+      default: 3
+      enum:
+        - 2
+        - 3
+        - 4
+    open:
+      type: mixed
+      title: "Initial Open State"
+      description: "The key of the intially opened item, or false."
+      default: false
+slots:
+  body:
+    title: Body
+    required: true
+    description: "The body of the accordion item."

source/02-components/01-composites/accordion-item/accordion-item.twig

+{% set item_id =  parent_id ~ "--" ~ key %}
+{% set heading_id =  item_id ~ "--heading" %}
+{% set target_id =  item_id ~ "--collapse" %}
+{% set heading_level = heading_level|default(3) %}
+{% set open = open is null ? false : open %}
+
+<div class="accordion-item">
+  <h{{ heading_level }} class="accordion-header" id="{{ heading_id }}">
+    <button class="accordion-button  {{ key is same as(open) ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ target_id }}" aria-expanded="{{ key==0 ? 'true' : 'false' }}" aria-controls="{{ target_id }}">
+      {{ heading }}
+    </button>
+  </h{{ heading_level }}>
+  <div id="{{ target_id }}" class="accordion-collapse collapse {{ key is same as(open) ? 'show' : '' }}" aria-labelledby="{{ heading_id }}" data-bs-parent="#{{ parent_id }}">
+    <div class="accordion-body">
+      {% block body %}
+        {{ body }}
+      {% endblock %}
+    </div>
+  </div>
+</div>

source/02-components/01-composites/accordion/accordion.component.yml

+'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
+name: "Accordion"
+status: "stable"
+description: "A bootstrap accordion. Providing a trigger and a accordion."
+props:
+  type: object
+  properties:
+    items:
+      type: array
+      title: "Items"
+      description: "Array of items with heading and body properties."
+      required: true
+    heading_level:
+      type: "integer"
+      title: "Heading Type"
+      description: "The heading type of the accordion item."
+      defaultValue: 3
+      enum:
+        - 2
+        - 3
+        - 4
+    open:
+      type: mixed
+      title: "Initial Open State"
+      description: "The key of the intially opened item, or false."
+      default: false

source/02-components/01-composites/accordion/accordion.css

+[data-component-id="kinetic:accordion"] .accordion{--bs-accordion-color: #212529;--bs-accordion-bg: #fff;--bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;--bs-accordion-border-color: var(--bs-border-color);--bs-accordion-border-width: 1px;--bs-accordion-border-radius: 0.375rem;--bs-accordion-inner-border-radius: calc(0.375rem - 1px);--bs-accordion-btn-padding-x: 1.25rem;--bs-accordion-btn-padding-y: 1rem;--bs-accordion-btn-color: #212529;--bs-accordion-btn-bg: var(--bs-accordion-bg);--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23212529%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");--bs-accordion-btn-icon-width: 1.25rem;--bs-accordion-btn-icon-transform: rotate(-180deg);--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%230c63e4%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");--bs-accordion-btn-focus-border-color: #86b7fe;--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x: 1.25rem;--bs-accordion-body-padding-y: 1rem;--bs-accordion-active-color: #0c63e4;--bs-accordion-active-bg: #e7f1ff}[data-component-id="kinetic:accordion"] .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media(prefers-reduced-motion: reduce){[data-component-id="kinetic:accordion"] .accordion-button{transition:none}}[data-component-id="kinetic:accordion"] .accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1*var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}[data-component-id="kinetic:accordion"] .accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);-webkit-transform:var(--bs-accordion-btn-icon-transform);transform:var(--bs-accordion-btn-icon-transform)}[data-component-id="kinetic:accordion"] .accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media(prefers-reduced-motion: reduce){[data-component-id="kinetic:accordion"] .accordion-button::after{transition:none}}[data-component-id="kinetic:accordion"] .accordion-button:hover{z-index:2}[data-component-id="kinetic:accordion"] .accordion-button:focus{z-index:3;border-color:var(--bs-accordion-btn-focus-border-color);outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}[data-component-id="kinetic:accordion"] .accordion-header{margin-bottom:0}[data-component-id="kinetic:accordion"] .accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}[data-component-id="kinetic:accordion"] .accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}[data-component-id="kinetic:accordion"] .accordion-item:first-of-type .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}[data-component-id="kinetic:accordion"] .accordion-item:not(:first-of-type){border-top:0}[data-component-id="kinetic:accordion"] .accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}[data-component-id="kinetic:accordion"] .accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}[data-component-id="kinetic:accordion"] .accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}[data-component-id="kinetic:accordion"] .accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}[data-component-id="kinetic:accordion"] .accordion-flush .accordion-collapse{border-width:0}[data-component-id="kinetic:accordion"] .accordion-flush .accordion-item{border-right:0;border-left:0;border-radius:0}[data-component-id="kinetic:accordion"] .accordion-flush .accordion-item:first-child{border-top:0}[data-component-id="kinetic:accordion"] .accordion-flush .accordion-item:last-child{border-bottom:0}[data-component-id="kinetic:accordion"] .accordion-flush .accordion-item .accordion-button,[data-component-id="kinetic:accordion"] .accordion-flush .accordion-item .accordion-button.collapsed{border-radius:0}[data-component-id="kinetic:accordion"] .fade{transition:opacity .15s linear}@media(prefers-reduced-motion: reduce){[data-component-id="kinetic:accordion"] .fade{transition:none}}[data-component-id="kinetic:accordion"] .fade:not(.show){opacity:0}[data-component-id="kinetic:accordion"] .collapse:not(.show){display:none}[data-component-id="kinetic:accordion"] .collapsing{height:0;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion: reduce){[data-component-id="kinetic:accordion"] .collapsing{transition:none}}[data-component-id="kinetic:accordion"] .collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media(prefers-reduced-motion: reduce){[data-component-id="kinetic:accordion"] .collapsing.collapse-horizontal{transition:none}}

source/02-components/01-composites/accordion/accordion.es6.js

+import Collapse from 'bootstrap/js/dist/collapse';
+
+((Drupal) => {
+  // eslint-disable-next-line
+  Drupal.behaviors.kinecticAccordion = {
+    attach: function attach(context) {
+      const accordions = once('kinetic-accordion', '[data-component-id="kinetic:accordion"]', context);
+      accordions.forEach((el) => {
+        // assign to var if you need to call methods
+        new Collapse(el);
+      });
+    },
+  };
+})(Drupal);

source/02-components/01-composites/accordion/accordion.js.LICENSE.txt

+/*!
+  * Bootstrap base-component.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap collapse.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap config.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap data.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap event-handler.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap index.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap manipulator.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap selector-engine.js v5.2.3 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */

source/02-components/01-composites/accordion/accordion.scss

+
+[data-component-id="kinetic:accordion"] {
+  // stylelint-disable-next-line
+  @import '~bootstrap/scss/accordion';
+  // stylelint-disable-next-line
+  @import '~bootstrap/scss/transitions';
+
+  /* Add your styles here */
+}

source/02-components/01-composites/accordion/accordion.twig

+{% set accordion_id =  "accordion--" ~ random() %}
+{% set open = open is null ? false : open %}
+
+<div {{ attributes }}>
+  <div class="accordion" id="{{ accordion_id }}">
+    {% for key,item in items %}
+      {% embed 'kinetic:accordion-item' with { heading: item.heading, parent_id: accordion_id, heading_level: heading_level, open: open} %}
+        {% block body %}
+          {{ item.body }}
+        {% endblock %}
+      {% endembed %}
+    {% endfor %}
+  </div>
+</div>
+