How to use the @commercetools-uikit/utils.filterInvalidAttributes function in @commercetools-uikit/utils

To help you get started, we’ve selected a few @commercetools-uikit/utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github commercetools / ui-kit / src / components / buttons / primary-button / primary-button.js View on Github external
const PrimaryButton = props => {
  const dataProps = {
    'data-track-component': 'PrimaryButton',
    ...filterInvalidAttributes(omit(props, propsToOmit)),
    // if there is a divergence between `isDisabled` and `disabled`,
    // we fall back to `isDisabled`
    disabled: props.isDisabled,
  };

  const isActive = props.isToggleButton && props.isToggled;
  return (
github commercetools / ui-kit / src / components / buttons / flat-button / flat-button.js View on Github external
export const FlatButton = props => {
  const dataProps = {
    'data-track-component': 'FlatButton',
    ...filterInvalidAttributes(omit(props, propsToOmit)),
    // if there is a divergence between `isDisabled` and `disabled`,
    // we fall back to `isDisabled`
    disabled: props.isDisabled,
  };

  return (
     {
        const overwrittenVars = {
          ...vars,
          ...theme,
github commercetools / ui-kit / src / components / buttons / secondary-icon-button / secondary-icon-button.js View on Github external
export const SecondaryIconButton = props => {
  const buttonAttributes = {
    ...filterInvalidAttributes(omit(props, propsToOmit)),
    'data-track-component': 'SecondaryIconButton',
    // if there is a divergence between `isDisabled` and `disabled`,
    // we fall back to `isDisabled`
    disabled: props.isDisabled,
  };
  return (
     getBaseStyles(theme, props)}
    >
      {props.icon}
github commercetools / ui-kit / src / components / buttons / icon-button / icon-button.js View on Github external
export const IconButton = props => {
  const attributes = {
    'data-track-component': 'IconButton',
    ...filterInvalidAttributes(props),
  };

  const isActive = props.isToggleButton && props.isToggled;

  return (
github commercetools / ui-kit / src / components / buttons / secondary-button / secondary-button.js View on Github external
export const SecondaryButton = props => {
  const isActive = props.isToggleButton && props.isToggled;
  const shouldUseLinkTag = !props.isDisabled && Boolean(props.linkTo);

  const asProps = shouldUseLinkTag ? { as: Link } : { as: props.as };

  const buttonAttributes = {
    'data-track-component': 'SecondaryButton',
    ...filterInvalidAttributes(props),
    ...(shouldUseLinkTag ? { to: props.linkTo } : {}),
  };

  const containerStyles = [
    css`
      display: inline-flex;
      background-color: ${vars.colorSurface};
      border-radius: ${vars.borderRadius6};
      box-shadow: ${vars.shadow7};
      color: ${vars.colorSolid};
      font-size: ${vars.fontSizeDefault};
      transition: background-color ${vars.transitionLinear80Ms},
        box-shadow ${vars.transitionEaseinout150Ms};
    `,
    getStateStyles(props.isDisabled, isActive, props.theme),
    getThemeStyles(props.theme),