@helpscout/hsds-react/utilities/classNames.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.BEM = exports.getHashedClassName = exports.classNames = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _arrays = require("./arrays");

// TODO: remove, use classNames lib in all apps

/**
 * Tiny implementation of the classnames library.
 *
 * @param   {any} classes
 * @returns {string}
 */
var classNames = _classnames.default;
/**
 * Used with classNames generated by a styled-component.
 * Styled component appends the hashed className at the very end.
 * This function plucks it out and returns it.
 *
 * @param   {string} classNames
 * @returns {string}
 */

exports.classNames = classNames;

var getHashedClassName = function getHashedClassName(classNames) {
  return (0, _arrays.last)(classNames.split(' '));
};
/**
 * Convenience class for generating BEM style classNames, based on a block.
 */


exports.getHashedClassName = getHashedClassName;

var BEMClass = /*#__PURE__*/function () {
  function BEMClass(block) {
    this.block = '';
    this.block = block;
  }
  /**
   * Generates a BEM element className
   *
   * @param   {string} element
   * @returns {string}
   */


  var _proto = BEMClass.prototype;

  _proto.element = function element(_element) {
    return this.block + "__" + _element;
  }
  /**
   * Alias for BEM.element
   *
   * @param   {string} element
   * @returns {string}
   */
  ;

  _proto.e = function e(element) {
    return this.element(element);
  }
  /**
   * Generates a BEM modifer className
   *
   * @param   {string} element
   * @returns {string}
   */
  ;

  _proto.modifier = function modifier(_modifier) {
    return this.block + "--" + _modifier;
  }
  /**
   * Alias for BEM.modifer
   *
   * @param   {string} element
   * @returns {string}
   */
  ;

  _proto.m = function m(modifier) {
    return this.modifier(modifier);
  };

  return BEMClass;
}();
/**
 * Used with classNames generated by a styled-component, combined
 * with a BEM styled __element suffix.
 *
 * @param   {string} classNames
 * @param   {string} suffix
 * @returns {string}
 */


var BEM = function BEM(classNames) {
  return new BEMClass(getHashedClassName(classNames));
};

exports.BEM = BEM;
var _default = classNames;
exports.default = _default;