How to use @tds/util-prop-types - 10 common examples

span: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  /**
   * @deprecated Offset the specified number of columns.
   * @since 1.2.0
   *
   * Use the xsOffset prop instead for identical functionality.
   */
  offset: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
  /**
   * @since 2.3.0
   *
   * Align content horizontally within the column.
   *
   * Accepts a `PropType.string` following the [responsive prop](#responsiveProps) structure.
   */
  horizontalAlign: responsiveProps(PropTypes.string),
}
/* eslint-enable */

Col.defaultProps = {
  span: undefined,
  offset: undefined,
  horizontalAlign: undefined,
}

export default Col

span: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  /**
   * @deprecated Offset the specified number of columns.
   * @since 1.2.0
   *
   * Use the xsOffset prop instead for identical functionality.
   */
  offset: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
  /**
   * @since 2.3.0
   *
   * Align content horizontally within the column.
   *
   * Accepts a `PropType.string` following the [responsive prop](#responsiveProps) structure.
   */
  horizontalAlign: responsiveProps(PropTypes.string),
}
/* eslint-enable */

Col.defaultProps = {
  span: undefined,
  offset: undefined,
  horizontalAlign: undefined,
}

export default Col

)
}

Button.propTypes = {
  /**
   * The HTML button type.
   */
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
  /**
   * The style.
   */
  variant: PropTypes.oneOf(['primary', 'secondary', 'inverted']),
  /**
   * The label. It can include the `A11yContent` component.
   */
  children: or([PropTypes.string, componentWithName('A11yContent')]).isRequired,
}
Button.defaultProps = {
  type: 'button',
  variant: 'primary',
}

export default Button

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

BenefitWithHeading.propTypes = {
  /**
   * A `DecorativeIcon`. If set here, it applies to all nested Benefit Items
   * except for Items that receive an `icon` prop.
   */
  icon: componentWithName('DecorativeIcon', true),
  /**
   * An Item in the Benefit list.
   */
  children: componentWithName('BenefitItem').isRequired,
}

BenefitWithHeading.defaultProps = {
  icon: undefined,
}

BenefitWithHeading.Item = Item

export default BenefitWithHeading

UnorderedList.propTypes = {
  /**
   * The bullet style.
   */
  listStyle: PropTypes.oneOf(['circle', 'checkmark', 'x']),
  /**
   * The size of the list's text.
   *
   * @since 2.0.0
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * The list items. Must be at least one `UnorderedList.Item`.
   */
  children: componentWithName('UnorderedItem').isRequired,
}

UnorderedList.defaultProps = {
  listStyle: 'circle',
  size: 'medium',
}

UnorderedList.Item = UnorderedItem

export default UnorderedList

)
  }

  return (
    
      {Icon && }
      
    
  )
}

BenefitItem.propTypes = {
  /**
   * A DecorativeIcon. This will override any `icon` prop set in the parent.
   */
  icon: componentWithName('DecorativeIcon', true),
  /**
   * An item in the Benefit list
   */
  children: PropTypes.node.isRequired,
}

BenefitItem.defaultProps = {
  icon: undefined,
}

BenefitItem.displayName = 'BenefitNoHeading.Item'

export default BenefitItem

*/
  open: PropTypes.string,
  /**
   * Whether or not to show the divider above the first panel.
   */
  topDivider: PropTypes.bool,
  /**
   * A callback function to be invoked when any panel is opened or closed.
   *
   * @param {String} openPanel The currently open panel identifier.
   */
  onToggle: PropTypes.func,
  /**
   * The expandable panels. Must be at least one `Accordion.Panel`.
   */
  children: componentWithName('Panel').isRequired,
}

Accordion.defaultProps = {
  open: undefined,
  topDivider: true,
  onToggle: undefined,
}

Accordion.Panel = Panel

export default Accordion

)}
      
    )
  }
}

FormField.propTypes = {
  label: PropTypes.string.isRequired,
  hint: PropTypes.string,
  hintPosition: PropTypes.oneOf(['inline', 'below']),
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  feedback: PropTypes.oneOf(['success', 'error']),
  error: PropTypes.node,
  helper: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  tooltip: componentWithName('Tooltip'),
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  children: PropTypes.func.isRequired,
}

FormField.defaultProps = {
  hint: undefined,
  hintPosition: 'inline',
  value: undefined,
  defaultValue: undefined,
  feedback: undefined,
  error: undefined,
  helper: undefined,
  tooltip: undefined,
  onChange: undefined,

UnorderedList.propTypes = {
  /**
   * The bullet style.
   */
  listStyle: PropTypes.oneOf(['circle', 'checkmark', 'x']),
  /**
   * The size of the list's text.
   *
   * @since 2.0.0
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * The list items. Must be at least one `UnorderedList.Item`.
   */
  children: componentWithName('UnorderedItem').isRequired,
}

UnorderedList.defaultProps = {
  listStyle: 'circle',
  size: 'medium',
}

UnorderedList.Item = UnorderedItem

export default UnorderedList

error: PropTypes.node,
  /**
   * A detailed explanation of the input expected by a form field. Can be text,
   * other components, or HTML elements.
   *
   * If a function is provided, it must return an `InputFeedback`. The function will be
   * invoked with the following arguments.
   *
   * @param {String} feedback The input's current feedback state.
   * @param {String} value The input's current value.
   */
  helper: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  /**
   * A `Tooltip`
   */
  tooltip: componentWithName('Tooltip', true),
}

TextArea.defaultProps = {
  id: undefined,
  hint: undefined,
  value: undefined,
  feedback: undefined,
  error: undefined,
  tooltip: undefined,
  helper: undefined,
}

export default TextArea