Alpaca components for Magento 2

Collapsible 

<p>
    This component is only demonstrative to use collapsible script in fractal component. In Magento we can use collapsible Magento-UI component (example - gift cards on cart view in theme);
    Check Component's README (Notes) for more information.
</p>

<div class="collapsible">
    <button class="button collapsible__trigger" aria-expanded="false">
        Collapsible trigger
    </button>
    <div class="collapsible__content">
        Collapsible content goes here
    </div>
</div>

<script type="text/javascript">
    const collapsible = document.querySelector('.collapsible');
    new Collapsible(collapsible);
</script>
 
<p>
    This component is only demonstrative to use collapsible script in fractal component. In Magento we can use collapsible Magento-UI component (example - gift cards on cart view in theme);
    Check Component's README (Notes) for more information.
</p>

<div class="collapsible">
    <button
        class="button collapsible__trigger"
        aria-expanded="false"
    >
        {{ triggerText }}
    </button>
    <div class="collapsible__content">
        {{ contentText }}
    </div>
</div>

<script type="text/javascript">
const collapsible = document.querySelector('.collapsible');

new Collapsible(collapsible);
</script>
 
{
  "triggerText": "Collapsible trigger",
  "contentText": "Collapsible content goes here"
}
  • Content: 
    .collapsible {
    &__trigger {
        &[aria-expanded="false"] + .collapsible__content {
            display: none;
        }
        &[aria-expanded="true"] + .collapsible__content {
            display: block;
        }
    }
}
  • URL: /components/raw/collapsible/_collapsible.scss
  • Filesystem Path: build/components/Molecules/collapsible/_collapsible.scss
  • Size: 232 Bytes
  • Content: 
    'use strict';

class Collapsible { // eslint-disable-line
  constructor(wrapper) {
    this.wrapperElem = wrapper;
    this.trigger = this.wrapperElem.querySelector('.collapsible__trigger');
    this.content = this.wrapperElem.querySelector('.collapsible__content');
    this.listener();
  }
  toggle() {
    let currentState = this.trigger.getAttribute('aria-expanded');
    let newState = currentState === 'true' ? 'false' : 'true';
    this.trigger.setAttribute('aria-expanded', newState);
  }

  listener() {
    this.trigger.addEventListener('click', () => {
      this.toggle();
    })
  }
}
  • URL: /components/raw/collapsible/collapsible.js
  • Filesystem Path: build/components/Molecules/collapsible/collapsible.js
  • Size: 598 Bytes

Collapsible Component

Notice

This component is only demonstrative to use collapsible script in fractal component. In Magento we can use collapsible Magento-UI component (example - gift cards on cart view in theme); Check Component’s README (Notes) for more information.

Usage

If you want to use this script in component, please add:

<script type="text/javascript">
  const collapsible = document.querySelector('.collapsible');
  new Collapsible(collapsible);
</script>

to the template. Check template of this component to use proper css classes, you don’t need to use them in Magento.