Issue #3301556: Add Accordion component with its story and config

src/components/molecules/accordion/accordion.config.yml

+title: "Molecules/Accordion"
+description:
+  component: "Build vertically collapsing accordions in combination with our Collapse JavaScript plugin."
+## Canvas height.
+height: 150
+## Accordion Title settings.
+heading:
+  description: 'string'
+  table:
+    category: 'fields'
+  default: 'string'
+## Accordion body settings.
+body:
+  description: 'string'
+  table:
+    category: 'fields'
+  default: 'string'
\ No newline at end of file

src/components/molecules/accordion/accordion.story.js

+import config from "./accordion.config.yml";
+import accordion from './accordion.twig';
+import twigCode from '!!raw-loader!./accordion.twig';
+import DrupalAttribute from 'drupal-attribute';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+
+export default {
+  title : config.title,
+  component: accordion,
+  parameters: {
+    docs: {
+      container: DocsContainer,
+      page: DocsPage,
+      source: {code: twigCode},
+      description: config.description,
+      iframeHeight: config.height
+    },
+  },
+  argTypes: {
+    heading: {
+      heading: { control: 'text' },
+      description: config.heading.description,
+      defaultValue: {summary: config.heading.default},
+      table: config.heading.table,
+    },
+    body: {
+      heading: { control: 'text' },
+      description: config.body.description,
+      defaultValue: {summary: config.body.default},
+      table: config.body.table,
+    },
+  }
+};
+
+export const Accordion = (args) => {
+  return (
+    accordion({
+      heading: args.heading ? args.heading : 'Title',
+      body: args.body ? args.body : 'Body',
+      accordion_id: 'accordionExample',
+      heading_id: 'headingOne',
+      collapse_id: 'collapseOne'
+    })
+  )
+}
+
+Accordion.args = {
+  heading: 'Accordion item heading',
+  body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus sollicitudin fermentum. Sed lobortis, felis non bibendum tristique, orci nisl porttitor libero, eget feugiat nulla eros ac felis. Praesent ac lobortis risus, sed luctus turpis. Curabitur sed ex ex. Praesent vitae tempus nunc. Donec facilisis diam vitae ipsum sodales, a efficitur sapien maximus. Vivamus pulvinar mauris sed lorem vulputate, in dignissim odio laoreet. Sed et libero eu magna blandit venenatis eu sit amet risus. Morbi non elit dui. Donec est risus, molestie ut urna id, luctus venenatis elit. Phasellus cursus nulla felis, ac maximus lacus semper a.'
+};

src/components/molecules/accordion/accordion.twig

+{#
+/**
+ * @file
+ * Template for the Accordion component.
+ *
+ * Available config:
+ * - accordion_id: An ID of the whole accordion block
+ * - heading_id: An ID of accordion header
+ * - collapse_id: An ID of collapse div part
+ * - heading: Accordion item heading field text
+ * - body: Accordion item body field text
+ */
+#}
+
+<div class="accordion" id="{{ accordion_id }}">
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="{{ heading_id }}">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="{{ '#' ~ collapse_id }}" aria-expanded="true" aria-controls="collapseOne">
+        {{ heading }}
+      </button>
+    </h2>
+    <div id="{{ collapse_id }}" class="accordion-collapse collapse show" aria-labelledby="{{ heading_id }}" data-bs-parent="{{ '#' ~ accordion_id }}">
+      <div class="accordion-body">
+        <p>{{ body }}</p>
+      </div>
+    </div>
+  </div>
+</div>