How to use the @axa-fr/react-toolkit-core.ClassManager.getComponentClassName function in @axa-fr/react-toolkit-core

const TabsStateless = ({
  activeIndex,
  className,
  classModifier,
  children,
  onChange,
}) => {
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return (
    <div>
      <ul>
        {React.Children.map(children, (tab, index) =&gt;
          React.cloneElement(tab, {
            active: activeIndex === index,
            onChange,
            role: 'TITLE',
            // index as a key is ok here, no better candidate
            key: index, // eslint-disable-line
            index,
          })</ul></div>

const TabsStateless: React.SFC = ({
  activeIndex,
  className,
  classModifier,
  children,
  onChange,
}) => {
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return (
    <div>
      <ul>
        {children.map((item, index) =&gt; (
          <title id="{`${index}`}">
            {item.props.title}
          </title></ul></div>

const Tr = props => {
  const { children, id, className, classModifier, ...otherProps } = props;
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return (
    
      {children}
    
  );
};

render() {
    const { className, classModifier, collapse } = this.props;

    let newClassModifier = collapse ? 'open' : '';
    newClassModifier = classModifier
      ? `${newClassModifier} ${classModifier}`
      : `${newClassModifier}`;

    const componentClassName = ClassManager.getComponentClassName(
      className,
      newClassModifier,
      defaultClassName
    );

    return <div>{this.renderChildren()}</div>;
  }
}

const Body = props => {
  const { children, className, classModifier } = props;
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return {children};
};

const FileTable = ({
  errors,
  values,
  className,
  classModifier,
  disabled,
  onClick,
}) => {
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return (
    <div>
      
      {values &amp;&amp; values.length &gt; 0 &amp;&amp; (
        <ul>
          {values.map(({ file, id }) =&gt; (
            </ul></div>

const NavBarBase = ({
  isVisible,
  onClick,
  id,
  toggleMenuId,
  isMenuFocused,
  className,
  classModifier,
  handleKeys,
  onFocus,
  onBlur,
  children,
}) => {
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );

  return (
    <div>
      
        <button id="{toggleMenuId}" type="button">
      
      </button></div>

render() {
    const { title, subtitle, img, alt, className, classModifier } = this.props;
    const componentClassName = ClassManager.getComponentClassName(
      className,
      classModifier,
      defaultClassName
    );
    return (
      <div>
        <a href="/">
          <img alt="{alt}" src="{img}">
        </a>
        <h2>
          {title}
          <small>{subtitle}</small>
        </h2>
      </div>
    );
  }

const Title = props => {
  const { active, className, classModifier } = props;
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return (
    <li>
      <button type="button">
        TEST
      </button>
    </li>
  );
};

render() {
    const {
      role,
      active,
      disabled,
      children,
      title,
      className,
      classModifier,
    } = this.props;
    const componentClassName = ClassManager.getComponentClassName(
      className,
      classModifier,
      defaultClassName
    );
    switch (role) {
      case 'TITLE':
        return (
          <li>
            <button type="button"></button></li>