Skip to content
Snippets Groups Projects
Commit 32e9a0e3 authored by Michael Lander's avatar Michael Lander
Browse files

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

parent e686f181
No related branches found
No related tags found
1 merge request!11Created accordion and accordion-item components.
Showing with 171 additions and 0 deletions
'$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."
{% 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>
'$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
[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}}
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);
This diff is collapsed.
/*!
* 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)
*/
[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 */
}
{% 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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment