Source: neptune.js

/**
 * @class Badge
 * @description Create a new Neptune Badge
 * 
 * @param {any} config Add your configuration
 * 
 * parent -> class or id of your target element, when null its document.body
 * 
 * text -> content of your badge
 * 
 * size -> s, m, l
 * 
 * style -> primary, accent, information, success, warning, error
 * 
 * @example
 * const myBadge = new Badge({
 *  parent: "#container",
 *  text: "My Badge",
 *  size: "m",
 *  style: "primary"
 * });
 * 
 */
export class Badge {
    constructor(config) {
        // Create Badge
        const newBadge = document.createElement('span');
        newBadge.classList.add('badge');
        newBadge.innerText = config.text;

        // Setup Size
        if (config.size != null) {
            newBadge.classList.add('badge-' + config.size);
        }

        // Setup Style
        if (config.style != null) {
            // Setup Style
            newBadge.classList.add('badge-' + config.style);
        }

        // Append badge to DOM
        if (config.parent != null) {
            document.querySelector(config.parent).appendChild(newBadge)
        } else {
            document.body.appendChild(newBadge);
        }
    }
}

/**
 * @class Button
 * @description Create a new Neptune Button
 * 
 * @param {any} config Add your configuration
 * 
 * parent -> class or id of your target element, when null its document.body
 * 
 * text -> content of your Button
 * 
 * icon -> add the i tag of your icon
 * 
 * iconPosition -> left or right
 * 
 * size -> s, m, l
 * 
 * style -> primary, secondary, cta, information, success, warning, error
 * 
 * @example
 * const myButton = new Button({
 *  parent: "#container",
 *  text: "My Button",
 *  size: "m",
 *  style: "primary"
 * });
 */
export class Button {
    constructor(config) {
        // Create Badge
        const newButton = document.createElement('button');
        newButton.classList.add('button');
        newButton.innerHTML = '<span class="button-text">' + config.text + '</span>';

        // Add Icon
        if (config.icon != null) {
            const newIcon = document.createElement('span');
            newIcon.innerHTML = config.icon;

            if (config.iconPosition != null) {
                if (config.iconPosition == 'left') {
                    newIcon.classList.add('button-icon-left');
                    newButton.insertBefore(newIcon, newButton.children[0]);

                }

                if (config.iconPosition == 'right') {
                    newIcon.classList.add('button-icon-right');
                    newButton.appendChild(newIcon);
            
                }
            } else {
                console.error("Error! Please set icon position!");
            }
        } 

        // Setup Size
        if (config.size != null) {
            newButton.classList.add('button-' + config.size);
        }

        // Setup Style
        if (config.style != null) {
            // Setup Style
            newButton.classList.add('button-' + config.style);
        }

        // Append badge to DOM
        if (config.parent != null) {
            document.querySelector(config.parent).appendChild(newButton)
        } else {
            document.body.appendChild(newButton);
        }
    }
}

/**
 * @class Link
 * @description Create a new Neptune Link
 * 
 * @param {any} config Add your configuration
 * 
 * parent -> class or id of your target element, when null its document.body
 * 
 * text -> content of your Link
 * 
 * size -> s, m, l
 * 
 * style -> primary, accent, information, success, warning, error
 * 
 * title -> add the title
 * 
 * href -> add the href
 * 
 * @example
 * const myLink = new Link({
 *  parent: "#container",
 *  text: "My Link",
 *  size: "m",
 *  style: "primary",
 *  title: "My Link",
 *  href: "https://de.wikipedia.org/"
 * });
 */
export class Link {
    constructor(config) {
        // Create Link
        const newLink = document.createElement('a');
        newLink.classList.add('link');
        newLink.innerText = config.text;

        // Setup Size
        if (config.size != null) {
            newLink.classList.add('link-' + config.size);
        }

        // Setup Style
        if (config.style != null) {
            newLink.classList.add('link-' + config.style);
        }

        // Setup title
        if (config.title != null) {
            newLink.title = config.title;
        }

        // Setup href
        if (config.href != null) {
            newLink.href = config.href;
        }

        // Append to parent element
        if (config.parent != null) {
            document.querySelector(config.parent).appendChild(newLink);
        } else {
            document.body.appendChild(newLink);
        }
    }
}

/**
 * @class Spinner
 * @description Create a new Neptune Spinner
 * 
 * @param {any} config Add your configuration
 * 
 * parent -> class or id of your target element, when null its document.body
 * 
 * style -> primary, accent, information, success, warning, error
 * 
 * animation -> linnear, eased
 * 
 * @example
 * const mySpinner = new Spinner({
 *  parent: "#container",
 *  style: "primary",
 *  animation: "eased"
 * });
 */
export class Spinner {
    constructor(config) {
        // Create Link
        const newSpinner = document.createElement('div');
        const spinnerInner = document.createElement('div')
        const spinnerHole = document.createElement('div')
        newSpinner.classList.add('spinner');

        spinnerInner.classList.add('spinner-inner');
        spinnerHole.classList.add('spinner-hole');

        newSpinner.appendChild(spinnerHole);
        newSpinner.appendChild(spinnerInner);

        // Setup Style
        if (config.style != null) {
            newSpinner.classList.add('spinner-' + config.style);
        }

        // Setup Animation
        if (config.animation != null) {
            newSpinner.classList.add('spin-' + config.animation)
        }

        // Append to parent element
        if (config.parent != null) {
            document.querySelector(config.parent).appendChild(newSpinner);
        } else {
            document.body.appendChild(newSpinner);
        }
    }
}

/**
 * @class Toast
 * @description Create a new Neptune Toast
 * 
 * @param {any} config Add your configuration
 * 
 * parent -> class or id of your target element, when null its document.body
 * 
 * icon -> add your icon
 * 
 * text -> add your message text
 * 
 * style -> primary, accent, information, success, warning, error
 * 
 * position -> left-top, left-bottom, right-top, right-bottom
 * 
 * @example
 * const myToast = new Toast({
 *  icon: "YOUR ICON",
 *  text: "Test Toast",
 *  style: "primary",
 *  position: "top-right"
 * });
 */
export class Toast {
    constructor(config) {
        // Create Toast
        const newToast = document.createElement('div');
        newToast.classList.add('toast');

        // Add Icon
        if (config.icon != null) {
            // Create Icon
            const newIcon = document.createElement('span');
            newIcon.classList.add('toast-icon');
            newIcon.innerHTML = config.icon;

            // Append icon
            newToast.appendChild(newIcon);
        }

        // Add Message
        if (config.text != null) {
            // Create Message
            const newMessage = document.createElement('p');
            newMessage.classList.add('toast-text', 'text-l');
            newMessage.innerText = config.text;

            // Append Message
            newToast.appendChild(newMessage);
        } else {
            console.error('Error! Please ad a Message to your Toast!');
        }

        // Setup Style
        if (config.style != null) {
            newToast.classList.add('toast-' + config.style);
        }

        // Setup Position
        if (config.position != null) {
            newToast.classList.add('toast-' + config.position);
        }

        // Append to parent element
        if (config.parent != null) {
            document.querySelector(config.parent).appendChild(newToast);
        } else {
            document.body.appendChild(newToast);
        }
    }
}

/**
 * @class ProgressBar
 * @description Create a new Neptune Progress Bar
 * 
 * @param {any} config Add your configuration
 * 
 * parent -> class or id of your target element, when null its document.body
 * 
 * size -> xs, s, m, l, xl
 * 
 * style -> primary, accent, information, success, warning, error
 * 
 * progress -> set the progress of the par width a number
 * 
 * @example
 * const myProgressBAr = new ProgressBar({
 *  size: "l",
 *  style: "primary",
 *  progress: 30
 * });
 */
export class ProgressBar {
    constructor(config) {
        // Create Progress Bar
        const newProgressBar = document.createElement('div');
        newProgressBar.classList.add('progress');

        // Create Bar
        const newBar = document.createElement('div');
        newBar.classList.add('progress-bar');
        newProgressBar.appendChild(newBar);

        // Setup Size
        if (config.size != null) {
            newProgressBar.classList.add('progress-' + config.size);
        }

        // Setup Style
        if (config.style != null) {
            newProgressBar.classList.add('progress-' + config.style);
        }

        // Handle Progress
        if (config.progress != null) {
            newBar.style.width = config.progress + '%';
        }

        // Append to parent element
        if (config.parent != null) {
            document.querySelector(config.parent).appendChild(newProgressBar);
        } else {
            document.body.appendChild(newProgressBar);
        }
    }
}