wikimedia/mediawiki-extensions-MobileFrontend

const
    CANCEL_GLYPH = 'close',
    Icon = require( './Icon' ),
    IconButton = require( './IconButton' );

/**
 * A set of shared icons.
 *
 * Factory methods are used to keep separate features that use the same icons
 * from accidentally manipulating one another's DOM when calling methods like
 * `remove`.
 *
 * @class icons
 * @singleton
 * @uses Icon
 */
const icons = {
    CANCEL_GLYPH,
    // Exported to support testing and stubbing
    Icon,
    IconButton,
    /**
     * Gets a back icon
     *
     * The icon should be used to inform the user that the front-end is
     * communicating with the back-end.
     *
     * @memberof icons
     * @instance
     * @return {IconButton}
     */
    back() {
        return new icons.IconButton( {
            tagName: 'button',
            icon: 'previous',
            additionalClassNames: 'back',
            label: mw.msg( 'mobile-frontend-overlay-close' )
        } );
    },
    /**
     * Gets a cancel icon
     *
     * The icon should be used to inform the user that the front-end is
     * communicating with the back-end.
     *
     * @memberof icons
     * @instance
     * @param {string} [variant]
     * @param {Object} [props] to extend
     * @return {IconButton}
     */
    cancel( variant, props = {} ) {
        const glyph = variant ? `${ CANCEL_GLYPH }-${ variant }` : `${ CANCEL_GLYPH }`;
        props.additionalClassNames = props.additionalClassNames || '';
        props.additionalClassNames += ' cancel';

        return new icons.IconButton( Object.assign( {
            tagName: 'button',
            icon: glyph,
            label: mw.msg( 'mobile-frontend-overlay-close' )
        }, props ) );
    },
    /**
     * Gets a spinner icon. This uses IconButton but should never actually
     * be a button or have full button styles, as its purely presentational
     *
     * The icon should be used to inform the user that the front-end is
     * communicating with the back-end.
     *
     * @memberof icons
     * @instance
     * @param {Object} [props] See `Icon` for more details
     * @return {IconButton}
     */
    spinner( props = {} ) {
        if ( props.additionalClassNames === undefined ) {
            props.additionalClassNames = 'spinner loading';
        }

        const spinner = new icons.IconButton( Object.assign( {
            tagName: 'span',
            icon: 'spinner',
            label: mw.msg( 'mobile-frontend-loading-message' )
        }, props ) );

        // Update the element to not use button classes or attributes
        spinner.$el.removeClass();
        // eslint-disable-next-line mediawiki/class-doc
        spinner.$el.addClass( props.additionalClassNames );
        spinner.$el.attr( 'type', '' );
        if ( spinner.options.isIconOnly ) {
            spinner.$el.addClass( 'mf-spinner-icon-element' );
        }
        return spinner;
    },
    /**
     * Gets a failure (error) icon
     *
     * @memberof icons
     * @instance
     * @return {IconButton}
     */
    error() {
        return new icons.IconButton( {
            icon: 'alert-invert',
            additionalClassNames: 'load-fail-msg-icon'
        } );
    },
    /**
     * Gets a non-filled watch star icon.
     *
     * @memberof icons
     * @instance
     * @param {Object} props
     * @return {IconButton}
     */
    watch( props = {} ) {
        props.additionalClassNames = props.additionalClassNames || '';
        props.additionalClassNames += ' watch-this-article';

        return new icons.IconButton( Object.assign( {
            icon: 'star-subtle'
        }, props ) );
    },
    /**
     * Gets a filled watch star icon.
     *
     * @memberof icons
     * @instance
     * @param {Object} props
     * @return {IconButton}
     */
    watched( props = {} ) {
        props.additionalClassNames = props.additionalClassNames || '';
        props.additionalClassNames += ' watch-this-article watched';

        return new icons.IconButton( Object.assign( {
            icon: 'unStar-progressive'
        }, props ) );
    }
};

module.exports = icons;