react/src/components/toggle/SprkToggle.js
// TODO: Remove title, titleAddClasses, iconAddClasses in issue #1296
Remove title, titleAddClasses, iconAddClasses in issue #1296
Remove title titleAddClasses iconAddClasses in issue #1296
render() {
    const {
      children,
      idString,
      additionalClasses,
      analyticsString,
      title,
      triggerText = title,
      titleAddClasses,
      triggerTextAdditionalClasses = titleAddClasses,
      iconAddClasses,
      iconAdditionalClasses = iconAddClasses,
      toggleIconName,
      contentId,
      contentAdditionalClasses,
      onClick,
      ...other
    } = this.props;
    const { isOpen, height, uniqueIdentifier } = this.state;
    const containerClasses = classnames('sprk-c-Toggle', additionalClasses);
    const titleClasses = classnames(
      'sprk-c-Toggle__trigger sprk-b-TypeBodyThree sprk-b-Type--crop-none',
      triggerTextAdditionalClasses,
    );
    const iconClasses = classnames(
      'sprk-c-Icon--xl sprk-c-Icon--toggle sprk-c-Toggle__trigger-icon',
      { 'sprk-c-Icon--open': isOpen },
      iconAdditionalClasses,
    );
    const contentClasses = classnames(
      'sprk-c-Toggle__content',
      contentAdditionalClasses,
    );
    return (
      <div data-id={idString} {...other} className={containerClasses}>
        <button
          className={titleClasses}
          data-analytics={analyticsString}
          onClick={(e) => {
            if (onClick) {
              onClick(e);
            }
            this.toggleOpen(e);
          }}
          aria-expanded={isOpen ? 'true' : 'false'}
          aria-controls={uniqueIdentifier}
          type="button"
        >
          <SprkIcon iconName={toggleIconName} additionalClasses={iconClasses} />
          {triggerText}
        </button>
        <AnimateHeight
          duration={300}
          height={height}
          className={contentClasses}
          id={uniqueIdentifier}
        >
          <div>{children}</div>
        </AnimateHeight>
      </div>
    );
  }
render ( ) { const { children , idString , additionalClasses , analyticsString , title , triggerText = title , titleAddClasses , triggerTextAdditionalClasses = titleAddClasses , iconAddClasses , iconAdditionalClasses = iconAddClasses , toggleIconName , contentId , contentAdditionalClasses , onClick , ... other } = this . props ; const { isOpen , height , uniqueIdentifier } = this . state ; const containerClasses = classnames ( 'sprk-c-Toggle' , additionalClasses ) ; const titleClasses = classnames ( 'sprk-c-Toggle__trigger sprk-b-TypeBodyThree sprk-b-Type--crop-none' , triggerTextAdditionalClasses , ) ; const iconClasses = classnames ( 'sprk-c-Icon--xl sprk-c-Icon--toggle sprk-c-Toggle__trigger-icon' , { 'sprk-c-Icon--open' : isOpen } , iconAdditionalClasses , ) ; const contentClasses = classnames ( 'sprk-c-Toggle__content' , contentAdditionalClasses , ) ; return ( < div data-id = { idString } { ... other } className = { containerClasses } > < button className = { titleClasses } data-analytics = { analyticsString } onClick = { ( e ) => { if ( onClick ) { onClick ( e ) ; } this . toggleOpen ( e ) ; } } aria-expanded = { isOpen ? 'true' : 'false' } aria-controls = { uniqueIdentifier } type = "button" > < SprkIcon iconName = { toggleIconName } additionalClasses = { iconClasses } / > { triggerText } < / button > < AnimateHeight duration = { 300 } height = { height } className = { contentClasses } id = { uniqueIdentifier } > < div > { children } < / div > < / AnimateHeight > < / div > ) ; }
TODO: Remove title, titleAddClasses, iconAddClasses in issue #1296
TODO : Remove title titleAddClasses iconAddClasses in issue #1296