How to use @tds/util-helpers - 10 common examples

const VideoSplash = ({ poster, videoLength, label, customButton, ...rest }) => {
  return (
    
      {customButton || } label={label} videoLength={videoLength} />}
    
  )
}

const Checkbox = React.forwardRef(({ id, name, value, label, feedback, error, ...rest }, ref) => (
  
    {feedback === 'error' && renderError(error, getErrorId(name, value, id))}
    
    
      
        
          
        
        
          
        
      

{renderLabel(fieldId.identity(), label, hint, hintPosition, hintId, tooltip)}
        {helper && renderHelper(helper, helperId, feedback, value)}
        {error && feedback === 'error' && renderError(error, errorId)}
        <div>
          
            
              {placeholder &amp;&amp; (
                <option disabled="" value="">
                  {placeholder}
                </option>
              )}
              {renderOptions(options)}
            

            {!rest.disabled &amp;&amp; (
              
                
                </div>

const Icon = ({ symbol, variant, size, ...rest }) => (
  
)

const Heading = forwardRef(({ level, tag = level, invert, children, ...rest }, ref) => {
  return (
    
      {children}
    
  )
})

const BenefitWithHeading = ({ icon, children, ...rest }) => (
  
    {React.Children.map(children, child => cloneChild(icon, child))}
  
)

trueDirection = this.state.tooltipPos > this.state.halfPageWidth ? 'left' : 'right'
    } else {
      trueDirection = direction
    }

    const bubbleWidth =
      trueDirection === 'left'
        ? this.state.tooltipPos
        : this.state.halfPageWidth * 2 - this.state.tooltipPos - 16

    const width = {
      width: `calc(${bubbleWidth}px - 1rem - 0.5rem)`,
    }

    return (
      
        
          
            {children}

name,
      value,
      checked,
      onChange,
      onFocus,
      onBlur,
      children,
      defaultChecked,
      readOnly,
      ...rest
    },
    ref
  ) => {
    const itemId = generateId(name).postfix(value)
    return (
      
        
        {children}
      
    )

const Panels = ({ topDivider, isPanelOpen, togglePanel, tag, children, ...rest }) => (
  
    {topDivider && }

    {React.Children.toArray(children)
      .filter(Boolean)
      .map(panel => {
        const { id, header, subtext, tertiaryText, disabled, onToggle } = panel.props

        return (

const $COMPONENT$ = ({ ...rest }) =&gt; <div>
</div>