@ilo-org/twig 1.1.6 → 1.2.0

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@ilo-org/twig",
-  "version": "1.1.6",
+  "version": "1.2.0",
+  "type": "module",
+  "files": [
+    "dist/**/*"
+  ],
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "dist/**/*",
-    "src/**/*"
-  ],
   "homepage": "https://twig.ui.ilo.org",
   "repository": {
     "type": "git",
@@ -44,89 +44,57 @@
       "url": "https://github.com/ggkapanadze"
     }
   ],
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-swc": "^0.3.1",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/builder-vite": "^8.1.9",
+    "@storybook/html": "^8.1.9",
+    "@storybook/html-vite": "^8.1.9",
+    "@storybook/manager-api": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@storybook/theming": "^8.1.9",
+    "@swc/core": "^1.7.1",
+    "drupal-attribute": "^1.0.2",
+    "drupal-twig-extensions": "^1.0.0-beta.5",
+    "glob": "^10.3.10",
+    "rollup-plugin-copy": "^3.4.0",
+    "storybook": "^8.1.9",
+    "storybook-addon-rtl": "^1.0.0",
+    "twig": "^1.16.0",
+    "vite": "^5.2.0",
+    "zod": "^3.23.8",
+    "@ilo-org/eslint-config": "1.0.0"
+  },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "cypress": "^13.10.0",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "0.5.3",
-    "@ilo-org/fonts": "0.2.2",
     "@ilo-org/icons": "0.4.0",
+    "@ilo-org/fonts": "0.2.2",
+    "@ilo-org/maestro": "1.0.0",
     "@ilo-org/styles": "1.2.0",
     "@ilo-org/themes": "0.9.1",
     "@ilo-org/utils": "0.1.1"
   },
-  "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/linter-config": "^3.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.20",
-    "@wingsuit-designsystem/cli": "1.2.7",
-    "@wingsuit-designsystem/core": "1.2.7",
-    "@wingsuit-designsystem/pattern": "1.2.7",
-    "@wingsuit-designsystem/preset-scss": "^1.2.7",
-    "@wingsuit-designsystem/storybook": "1.2.7",
-    "autoprefixer": "^10.4.13",
-    "cross-env": "^7.0.3",
-    "cypress": "^13.10.0",
-    "eslint": "^8.41.0",
-    "file-loader": "^6.2.0",
-    "fs": "0.0.1-security",
-    "fs-extra": "^8.1.0",
-    "glob": "^10.3.10",
-    "jquery-once": "^2.2.3",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.6.2",
-    "optimize-css-assets-webpack-plugin": "^5.0.8",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^4.3.0",
-    "postcss-nested": "^4.2.3",
-    "postcss-scss": "^4.0.6",
-    "raw-loader": "^4.0.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "regenerator-runtime": "^0.13.3",
-    "require-context": "^1.1.0",
-    "resolve-url-loader": "^3.1.5",
-    "rollup": "^3.23.0",
-    "sass-loader": "^10.4.1",
-    "storybook": "^6.5.16",
-    "storybook-addon-rtl-direction": "^0.0.19",
-    "style-loader": "^1.3.0",
-    "stylelint-scss": "^3.21.0",
-    "webpack": "^4.46.0",
-    "yaml-loader": "0.6.0",
-    "yo": "^3.1.1",
-    "@ilo-org/eslint-config": "1.0.0",
-    "@ilo-org/prettier-config": "1.0.0"
-  },
   "scripts": {
-    "storybook": "node importprefix.js && node importsvgs.js && start-storybook --config-dir apps/storybook",
-    "build:docs": "node importprefix.js && node importsvgs.js && build-storybook --config-dir apps/storybook -o ./storybook-static",
-    "build:template": "node copytemplates.js",
-    "build:styles": "node copystyles.js",
-    "build:js": "rollup -c --bundleConfigAsCjs",
-    "build:lib": "pnpm build:template && pnpm build:js && pnpm build:styles",
+    "build:lib": "rollup -c",
+    "build:docs": "storybook build -o ./storybook-static",
+    "storybook": "storybook dev -p 6006",
+    "start:theme": "docker compose up -d",
+    "cy:open": "cypress open",
+    "test": "cypress run",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
-    "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
-    "import:prefix": "node importprefix.js",
-    "import:svgs": "node importsvgs.js",
-    "start:theme": "docker compose up -d",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
-    "test": "cypress run"
+    "format:fix": "prettier --write . --ignore-path ../../.prettierignore"
   }
 }

package/README.md

@@ -1,218 +0,0 @@
-# ILO Design System - Twig Package
-
-This package provides the implementation of the Design System using [Twig](https://twig.symfony.com/doc/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of Twig components, using [Wingsuit](https://wingsuit-designsystem.github.io/). Wingsuit uses [Twing](https://www.npmjs.com/package/twing), a Node port of Twig, to compile Twigs to HTML. It has dependencies on the following other @ilo-org packages:
-
-- [@ilo-org/themes](./packages/themes)
-- [@ilo-org/fonts](./packages/fonts)
-- [@ilo-org/styles](./packages/styles)
-- [@ilo-org/utils](./packages/utils)
-- [@ilo-org/icons](./packages/icons)
-
-#### Architecture
-
-Because this is a modified version of Storybook which compliles and displays Twigs instead of React components, there are some notable differences between this and vanilla versions of Storybook. One prominent difference is in directory structure. Each component folder, located in `src/patterns/components`, contains the following files:
-
-```
-component.stories.jsx
-component.twig
-component.wingsuit.yml
-index.js
-```
-
-and potentially, if Javascript interactivity exists, also the following:
-
-```
-component.behavior.js
-component.js
-```
-
-Wingsuit consumes the `component.wingsuit.yml` file, which is a [UI Pattern YAML](https://wingsuit-designsystem.github.io/components/wingsuit/) borrowed from [Drupal](https://www.drupal.org/project/ui_patterns_settings), and uses this to populate and format the Storybook story for each components. **As such, one is limited in how much one can customize the Storybook experience.**
-
-#### Javascript
-
-In this package, Javascript is vanilla, with each component that requires Javascript functionality loading an [ES class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) named after the component, scoped and bound to the component's outermost element. Wingsuit is configured to instantiate view classes via a function that looks for a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) that calls the view name provided in that attribute. On page load, the app looks for elements with the data attribute `data-loadcomponent` and loads whatever modules have corresponding names, passing a reference to the `HTMLElement` containing the data attribute. All the JS is bundled by Webpack into one file, meaning the JS file can be cached and only has to be downloaded from the server once per session.
-
-The JS is well-documented in comments, so poke around and you'll get the gist of how it works.
-
-Here's an example of HTML component markup that will automatically call some Javascript. Given the following HTML:
-
-```
-<section class="component componentname" data-loadcomponent="ComponentName">
-      <!-- component HTML goes here -->
-</section>
-```
-
-Javascript will look in the `ComponentMap` Class for a JS Class called `ComponentName` and then create a new instance of that class and call it. If you've added a new JS Class specific to the module you've built, you'll need to import the JS file to `ComponenetMap` and add it to `ComponenteMap`'s exports. If you've created a new Class, you'll need to make sure to pass the param `element` into the constructor - this is a reference to the DOM element with the `data-loadcomponent` attribute on it. This allows you to scope your JS to each instance of an HTML module.
-
-#### Installation and PNPM Commands
-
-To install
-
-```bash
-npm i @ilo-org/twig
-```
-
-To start storybook
-
-```bash
-pnpm storybook
-```
-
-To build storybook
-
-```bash
-pnpm build:storybook
-```
-
-To build the package for distribution
-
-```bash
-pnpm build:lib
-```
-
-This package imports the `prefix` from the `themes` package; to manually import it, run
-
-```bash
-pnpm import:prefix
-```
-
-This package imports icon svgs from the `icons` package; to manually import them, run
-
-```bash
-pnpm import:svgs
-```
-
-## Questions and Feedback
-
-(TBD)
-
-## Accessibility Standards
-
-(TBD)
-
-## Contributing
-
-ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.
-
-### Branches
-
-| Branch    | Purpose                            |
-| --------- | ---------------------------------- |
-| `main`    | The latest version of all packages |
-| `develop` | The next release of all packages   |
-
-### Contribution workflow
-
-1. Fork and clone the repo
-2. Create a new branch from the `develop` branch
-3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages
-4. Push your branch to the forked version of the repo
-5. Open a pull request back to the `develop` branch of the main repo
-
-### Versioning
-
-The project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.
-
-See more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
-
-### Conventions
-
-Contributions should respect the following conventions for branch names, commit messages and pull request descriptions
-
-#### Commits
-
-Commits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).
-
-```
-<type>(<scope>): <subject>
-```
-
-Examples:
-
-```
-fix(react): change button color on hover
-feat(twig): add button component
-ci(github): add release workflow
-perf(react): improve modal animations
-```
-
-#### Types
-
-- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
-- docs: Documentation only changes
-- feat: A new feature
-- fix: A bug fix
-- perf: A code change that improves performance
-- refactor: A code change that neither fixes a bug nor adds a feature
-- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-- test: Adding missing tests or correcting existing tests
-
-#### Scopes
-
-This should be a package name or an aspect of the project's configuration.
-
-### Branches
-
-Branch names should broadly mirror the same convention as commits.
-
-Examples:
-
-```
-feat/react/modal-wrapper
-fix/twig/modal-wrapper
-```
-
-### Pull requests
-
-Pull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.
-
-## Building the project
-
-Use [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.
-
-```bash
-nvm use
-```
-
-Install [pnpm](https://pnpm.io/).
-
-```bash
-npm i -g pnpm
-```
-
-Install dependencies
-
-```bash
-pnpm recursive install
-```
-
-Build all packages.
-
-```bash
-pnpm build:all
-```
-
-Start React storybook
-
-```bash
-pnpm start:react-storybook
-```
-
-Start Twig storybook
-
-```bash
-pnpm start:twig-storybook
-```
-
-Check types
-
-```bash
-pnpm check:types
-```
-
-Run all tests
-
-```bash
-pnpm test:all
-```

package/dist/components/polyfill/polyfill.twig

@@ -1,10 +0,0 @@
-{#
-  POLYFILL COMPONENT
-
-  This component is specifically to make this polyfill work correctly in Wingsuit. To use this in the context of Drupal, Wordpress, etc, consider using the approach documented at https://github.com/GoogleChromeLabs/container-query-polyfill
-#}
-<script>
-  if (!("container" in document.documentElement.style)) {
-    import("https://unpkg.com/container-query-polyfill@^0.2.0");
-  }
-</script>

package/dist/components/tag/tag.behavior.js

@@ -1 +0,0 @@
-!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=Array(e);i<e;i++)n[i]=t[i];return n}function e(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,n(r.key),r)}}function i(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(e)||function(e,i){if(e){if("string"==typeof e)return t(e,i);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,i):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function r(t){var e=i(t.itemStatuses);return e.indexOf(t.id)>-1?e=e.filter((function(e){return e!==t.id})):t.allowMultipleExpanded?e.push(t.id):e=[t.id],e}var a="click",o=function(){return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}((function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.multipleActive=!0,this.itemStatuses=[],this.init()}),[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){var t=this;return this.buttonTags=this.element.querySelectorAll(".ilo--tag--button"),this.multipleActive=this.element.getAttribute("data-multipleactive"),this.buttonTags.forEach((function(e,i){var n=e.dataset.active,a=t.buttonTags[i].getAttribute("id");"true"===n&&(t.itemStatuses=r({id:a,itemStatuses:t.itemStatuses,allowMultipleActive:t.multipleActive}))})),this}},{key:"setupHandlers",value:function(){return this.onClick=this.onClick.bind(this),this.updateTagItems=this.updateTagItems.bind(this),this}},{key:"enable",value:function(){var t=this;return this.buttonTags.length>0&&this.buttonTags.forEach((function(e,i){e.addEventListener(a,(function(){return t.onClick(i)}))})),this}},{key:"onClick",value:function(t){var e=this.buttonTags[t].getAttribute("id");return this.itemStatuses=r({id:e,itemStatuses:this.itemStatuses,allowMultipleacmultipleActive:this.multipleActive}),this.removeParentDom(e),this}},{key:"removeParentDom",value:function(t){var e=document.getElementById(t);return e&&e.parentElement.remove(),this}},{key:"updateTagItems",value:function(){var t=this;return this.tags.forEach((function(e,i){var n=e.getAttribute("id");t.itemStatuses.indexOf(n)>-1?(t.tags[i].classList.add("ilo--tag--active"),t.tags[i].setAttribute("data-active","true")):(t.tags[i].classList.remove("ilo--tag--active"),t.tags[i].setAttribute("data-active","true"))})),this}}])}();Drupal.behaviors.tag={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Tag"]'),(function(t){t.dataset.jsProcessed||(new o(t),t.dataset.jsProcessed=!0)}))}}}));

package/src/namespaces.js

@@ -1,14 +0,0 @@
-/**
- * Global namespaces
- */
-
-const path = require("path");
-
-const patterns = path.resolve(__dirname, "patterns");
-
-module.exports = {
-  patterns: patterns,
-  components: path.resolve(patterns, "components"),
-  tokens: path.resolve(__dirname, "tokens"),
-  svgs: path.resolve(__dirname, "svgs"),
-};

package/src/patterns/components/accordion/accordion-item.twig

@@ -1,22 +0,0 @@
-{#
-  ACCORDION ITEM COMPONENT
-#}
-{% set uid = "now"|date('Uv') %}
-{% set accordion_id = id ~ uid %}
-{% set button_id = 'button-' ~ accordion_id %}
-{% set panel_id = 'panel-' ~ accordion_id %}
-{% set expanded_class = defaultExpanded ? prefix ~ '--accordion--panel__open' : '' %}
-{% set scroll_class = scroll ? prefix ~ '--accordion--panel__scroll' : '' %}
-
-<li class="{{prefix}}--accordion--item" id="{{ accordion_id }}">
-	<div class="ilo--h3">
-		<button class="{{prefix}}--accordion--button {{prefix}}--accordion--button__{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="{{ panel_id }}" id="{{ button_id }}">
-			{{label}}
-		</button>
-	</div>
-	<div class="{{prefix}}--accordion--panel {{ expanded_class }} {{ scroll_class }}" id="{{ panel_id }}" aria-labelledby="{{ button_id }}" role="region" aria-hidden={{defaultExpanded ? 'false' : 'true'}}>
-		<div class="{{prefix}}--accordion--innerpanel">
-			{{content}}
-		</div>
-	</div>
-</li>

package/src/patterns/components/accordion/accordion.behavior.js

@@ -1,16 +0,0 @@
-import Accordion from "./accordion";
-
-Drupal.behaviors.accordion = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Accordion"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new Accordion(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};

package/src/patterns/components/accordion/accordion.js

@@ -1,200 +0,0 @@
-import { EVENTS, ARIA } from "@ilo-org/utils";
-
-const FOCUSABLE_SELECTORS = [
-  "a",
-  "button",
-  "input",
-  "select",
-  "textarea",
-  "[tabindex]:not([tabindex='-1'])",
-];
-
-/**
- * The Accordion module which handles rendering field labels inline on a form.
- *
- * @class Accordion
- */
-export default class Accordion {
-  /**
-   * Accordion constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-    this.multipleExpanded = false;
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} Accordion A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} Accordion A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The field that a user interacts with on a form
-     * @type {Object}
-     */
-    this.accordionItems = this.element.querySelectorAll(
-      ".ilo--accordion--item"
-    );
-    this.multipleExpanded = this.element.hasAttribute("data-multipleexpanded");
-    this.accordionPanels = this.element.querySelectorAll(
-      ".ilo--accordion--panel"
-    );
-    this.accordionButtons = this.element.querySelectorAll(
-      ".ilo--accordion--button"
-    );
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Accordion A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.collapseSection = this.collapseSection.bind(this);
-    this.expandSection = this.expandSection.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.updateAccordionItems = this.updateAccordionItems.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Accordion A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    if (this.accordionButtons.length > 0) {
-      this.accordionButtons.forEach((button) => {
-        button.addEventListener(EVENTS.CLICK, (e) => this.onClick(e));
-      });
-    }
-
-    if (this.accordionPanels.length > 0) {
-      this.accordionPanels.forEach((panel) => {
-        this.handleTabIndex(panel, "REMOVE");
-      });
-    }
-
-    return this;
-  }
-
-  /**
-   * Onclick interaction with the accordion button
-   *
-   * @return {Object} Accordion A reference to the instance of the class
-   * @chainable
-   */
-  onClick(e) {
-    this.updateAccordionItems(e.target);
-
-    return this;
-  }
-
-  /**
-   * Update accordion items based off of new statuses
-   *
-   * @chainable
-   */
-  updateAccordionItems(panelbutton) {
-    const panel = panelbutton
-      .closest(".ilo--accordion--item")
-      .querySelector(".ilo--accordion--panel");
-    const isopen = panel.classList.contains("ilo--accordion--panel__open");
-
-    if (!this.multipleExpanded) {
-      this.accordionPanels.forEach((item) => {
-        if (panel !== item) {
-          this.collapseSection(item);
-        }
-      });
-    }
-
-    if (!isopen) {
-      this.expandSection(panel);
-    } else {
-      this.collapseSection(panel);
-    }
-    panelbutton.blur();
-
-    return this;
-  }
-
-  /**
-   * Animates a panel collapse
-   *
-   * @param {HTMLElement} element - REQUIRED - the accordion panel to be collapsed
-   *
-   * @chainable
-   */
-  collapseSection(element) {
-    element.classList.remove("ilo--accordion--panel__open");
-    element.parentElement
-      .querySelector(".ilo--accordion--button")
-      .setAttribute(ARIA.EXPANDED, "false");
-    element.setAttribute(ARIA.HIDDEN, "true");
-    this.handleTabIndex(element, "REMOVE");
-  }
-
-  /**
-   * Animates a panel expansion
-   *
-   * @param {HTMLElement} element - REQUIRED - the accordion panel to be expanded
-   *
-   * @chainable
-   */
-  expandSection(element) {
-    element.parentElement
-      .querySelector(".ilo--accordion--button")
-      .setAttribute(ARIA.EXPANDED, "true");
-    element.setAttribute(ARIA.HIDDEN, "false");
-    element.classList.add("ilo--accordion--panel__open");
-    this.handleTabIndex(element, "ADD");
-  }
-
-  /**
-   *
-   * @param {HTMLElement} element - REQUIRED - the accordion panel to be adjusted
-   * @param {('ADD' | 'REMOVE')} mode - REQUIRED -  weather to set or remove tabindex
-   */
-  handleTabIndex(element, mode) {
-    element.querySelectorAll(FOCUSABLE_SELECTORS.join(", ")).forEach((item) => {
-      if (mode === "ADD") {
-        item.removeAttribute("tabindex");
-        return;
-      }
-
-      item.setAttribute("tabindex", "-1");
-    });
-  }
-}

package/src/patterns/components/accordion/accordion.stories.jsx

@@ -1,9 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./accordion.wingsuit.yml");
-
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

package/src/patterns/components/accordion/accordion.twig

@@ -1,16 +0,0 @@
-{# accordion.twig #}
-
-<ul class="{{prefix}}--accordion" data-loadcomponent="Accordion"{{ allowMultipleExpanded|boolval ? ' data-multipleexpanded' }}>
-	{% for item in items %}
-		{% include "@components/accordion/accordion-item.twig" with {
-        label: item.label,
-        content: item.content,
-        defaultExpanded: item.defaultExpanded,
-        size: size,
-        headingLevel: headingLevel,
-        id: item.id,
-        prefix: prefix,
-        scroll: item.scroll
-      } only %}
-	{% endfor %}
-</ul>

package/src/patterns/components/accordion/index.js

@@ -1,7 +0,0 @@
-/**
- * accordion
- */
-// Module template
-import "./accordion.twig";
-import "./accordion.wingsuit.yml";
-import "./accordion.behavior";