@hydrogen-design-system/component-accordion

Hydrogen's accordion component

Installation

You can install this component as a standalone package using npm install @hydrogen-design-system/component-accordion --save-dev

This component can also be installed as a part of Hydrogen in its entirety. Learn more.

Usage

For standard usage, please see Hydrogen's documentation.

Twig support

You can import Hydrogen's accordion component into your Twig enabled project using the following:

{% include "PATH-TO-PACKAGE-OR-CUSTOM-COMPONENT/accordion.twig" with {
    enabled: true,
    state: "closed",
    orientation: "left",
    expandIcon: "+",
    collapseIcon: "-",
    title: "",
    subtitle: "",
    content: [],
    classes: [],
    id: "",
    attributes: {
        accordion: [],
        trigger: [],
        expandIcon: [],
        collapseIcon: [],
        triggerTitle: [],
        triggerSubtitle: [],
        content: []
    }
} %}

Contributing

Hydrogen's components are built using Gulp, Sass, Autoprefixer, CSSnano, and Babel.

This component module contains the following in the dist folder:

• the component's code that is imported by @hydrogen-design-system/system
• a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:

• HTML
• Twig

Please ensure that work on this component updates all supported markup where possible.

The code for this component can be found in:

• src/markup/
• src/scripts/
• src/styles/

You will need:

• Node

_VERSION

_VERSION is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have _VERSION appended (e.g. data-h2-accordion_VERSION) in the following places:

• src/markup
• src/scripts
• src/styles/instance.scss

It is also important to use _VERSION when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in src/scripts that follow a function myNewFunctionName_VERSION () {} pattern.

Important commands

• npm install
  • installs all development dependencies
• npm run dev
  • builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
• npm run build
  • runs the build command to process all files for production
  • this will automatically build the system and instanced versions of the component
• npm publish
  • builds the component
  • publishes it to the public package repository