Skip to main content

Creating a javascript file

To create a JavaScript file in a specific element folder (e.g. "organism," "molecule," or "atom"), follow these steps:

Determine which atom design folder you want to create the file in.

Examples of three javascript files in a specific atom, molecule, and organism folder:

src/patterns/01-atoms/misc/scroll-to-top-a/scroll-to-top-a-1/scroll-to-top-a-1.js
src/patterns/02-molecules/accordions/accordion-a/accordion-a-1.js
src/patterns/03-organisms/repeatable-custom/events-a/events-a-1/events-type-a-1.js

In your javascript file, make sure to add the class or function with the name of that file and export it:

class EventsTypeA {
//script goes here
}
export default eventsTypeA;

Next, go to the src/global/js/scripts.js file and import the javascript file under the proper comment (Organism, molecule or atom)

Example of an import:

import eventsTypeA from '../../patterns/03-organisms/repeatable-custom/events-a/events-a-1/events-type-a-1';

Inside src/global/js/scripts.js, add imported instance to the "module fire system" to ensure the script is fired on the page where the module is used.

const modules = {
eventsTypeA
}

As the final step, to fire the module when the page loads, add the following code to a HTML element: data-module="eventsTypeA"

Note : Read more about ECMAScript modules importing/exporting here.