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

const defaultProps: Partial = {
  children: null,
};

const omitProperties = PropsManager.omit(['classModifier']);

const BadgeRaw: React.SFC = ({ children, ...otherProps }) => (
  <span>{children}</span>
);

BadgeRaw.defaultProps = defaultProps;

interface BadgeProps extends WithClassModifierOptions, BadgeBaseProps {}

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(BadgeRaw);
Enhanced.displayName = 'Badge';
export default Enhanced;

tabIndex: 0,
  href: '#',
};

const omitProperties = PropsManager.omit(['classModifier']);

const ActionCore: React.FC = ({ icon, ...otherProps }) => (
  <a>
    <i>
  </i></a><i>
);

ActionCore.defaultProps = defaultProps;

const enhance = compose(
  withClassDefault(defaultClassName),
  withClassModifier,
  withProps(({ onClick, href, role }: ActionCoreProps) =&gt; ({
    href: onClick ? '#' : href || undefined,
    role: onClick ? 'button' : role || undefined,
  }))
);

const Enhanced = enhance(ActionCore);
Enhanced.displayName = 'ActionCore';
export default Enhanced;
</i>

<div>{title}</div>
    
    {children &amp;&amp; (
      <div>
        <div>
        <div>{children}</div>
      </div>
    )}
  </div>
);

export type AlertCoreProps = AlertCoreComponentProps &amp; WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(AlertCoreRaw);
Enhanced.displayName = 'AlertCore';
export default Enhanced;

interface TabComponentProps {
  className?: string;
  title: string;
  children?: React.ReactNode;
  classModifier?: string;
}

const Tab: React.SFC = () =&gt; <span>;

const DEFAULT_CLASSNAME = 'af-tabs__pane';

export type TabProps = TabComponentProps &amp; WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(Tab);
Enhanced.displayName = 'TabCore';
export default Enhanced;
</span>

import {
  withClassDefault,
  withClassModifier,
  WithClassModifierOptions,
  compose,
} from '@axa-fr/react-toolkit-core';
import Div, { DivProps } from './Div';

const DEFAULT_CLASSNAME = 'af-modal__header';

export type HeaderBaseProps = DivProps & WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(Div);
Enhanced.displayName = 'HeaderBase';
export default Enhanced;

compose,
} from '@axa-fr/react-toolkit-core';

const DEFAULT_CLASSNAME = 'af-table__body';

export type BodyComponentProps = React.HTMLProps;

const Body: React.SFC = props => {
  const { children, className } = props;

  return {children};
};

export type BodyProps = BodyComponentProps & WithClassModifierOptions;
const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

Body.displayName = 'Table.Body';

export default enhance(Body);

{title &amp;&amp; <span>{title}</span>}
          <span>{subtitle}</span>
        
      
      {rightTitle &amp;&amp; (<div>
        <span>
          {rightTitle}
        </span>
      </div>)}
    
  );

type HeaderRestitutionProps = WithClassModifierOptions &amp; HeaderRestitutionBaseProps;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const defaultProps: Partial = {
  className: DEFAULT_CLASSNAME
};

const Enhanced = enhance(HeaderRestitution);
Enhanced.displayName = 'HeaderRestitution';
Enhanced.defaultProps = defaultProps;

export default Enhanced;

const DEFAULT_CLASSNAME = 'af-table';

export type TableCoreComponentProps = Pick<
  React.HTMLProps,
  'className'
>;

const TableCore: React.SFC = props => {
  const { className, children } = props;
  return {children}<table></table>;
};

export type TableCoreProps = TableCoreComponentProps &amp; WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);
TableCore.displayName = 'TableCore';
export default enhance(TableCore);

}) => (
  <footer>
    <div>
      <a title="{title}" href="{href}">
        <img alt="{alt}" src="{icon}">
      </a>
      <div>{children}</div>
    </div>
  </footer>
);
FooterCoreRaw.defaultProps = defaultProps;

export type FooterCoreProps = FooterCoreComponentProps &amp; WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(FooterCoreRaw);
Enhanced.displayName = 'FooterCore';
export default Enhanced;

>;

interface PaneComponentProps extends DivProps {
  active: boolean;
  className?: string;
  children?: React.ReactNode;
}
const Pane: React.SFC = ({ children, className, active }) => {
  if(!active) {
    return null;
  }
  return (<div>{children}</div>);
};

const enchance = compose(
  withClassDefault(DEFAULT_CLASSNAME)
)(Pane);

export default enchance;