How to use the @workday/canvas-kit-react-button.IconButton.Variant function in @workday/canvas-kit-react-button

)}
        openWidth={number(openWidthLabel, openWidthDefaultValue)}
        openDirection={select(label, options, defaultValue)}
        open={open}
        onToggleClick={this.onClick}
        breakpoint={number(breakpointLabel, breakpointDefaultValue)}
        onBreakpointChange={this.handleBreakpoint}
        header={'Side Panel Header'}
      >
        {open ? (
          <button>Add New</button>
        ) : (
          
            
          
        )}
        {/* TODO replace this with our list component */}
        
          
            <span>
              
            </span>
            {open &amp;&amp; Home}
          
          
            <span>
              </span>

return (
      
        {handleClose && (
          
            
          
        )}
        
          {this.props.children}

return React.cloneElement(child as React.ReactElement, {
          children: this.renderChildren(propsChildren),
        });
      }

      // Convert old method of SystemIcon into IconButton
      if (child.type === SystemIcon) {
        const icon = (child.props as SystemIconProps).icon;

        return ;
      }

      // Plain icon buttons have negative margin that we need to negate.
      if (
        child.type === IconButton &&
        (child.props as IconButtonProps).variant === IconButton.Variant.Plain
      ) {
        return React.cloneElement(child as React.ReactElement, {
          style: {margin: `0 0 0 ${childrenSpacing}`},
        });
      }

      return child;
    });
  }

test('renders a header with SystemIcon and IconButton children', () => {
    const tree = renderer
      .create(
        
          
          
          
        
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

test('Converts SystemIcons into IconButtons matching theme', () => {
      const theme = Header.Theme.Blue;

      const wrapper = mount<header>(
        <header>
          <a href="#">
            
          </a>
        </header>
      );
      const renderedIcon = wrapper.find(IconButton).first();

      expect(wrapper.find(IconButton)).toHaveLength(1);
      expect(renderedIcon.props().icon).toBe(activityStreamIcon);
      expect(renderedIcon.props().variant).toBe(IconButton.Variant.Inverse);
      expect(renderedIcon.props().onClick).toBeTruthy();
    });
</header>

test('renders a header with SystemIcon and IconButton children', () => {
    const tree = renderer
      .create(
        <header>
          
          
          
        </header>
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

if (menuToggle) {
      const menuToggleElement = menuToggle as React.ReactElement;
      const onClick = menuToggleElement.props.onClick
        ? menuToggleElement.props.onClick
        : onMenuClick;

      return React.cloneElement(menuToggleElement, {
        onClick,
        className: 'canvas-header--menu-icon',
      });
    }

    return (
      
    );
  }
}

const iconButtonVariant = (inverse: boolean) =>
  inverse ? IconButton.Variant.Inverse : IconButton.Variant.Plain;

>
            
            
          
        
      
    );
  }