How to use @workday/canvas-kit-react-common - 10 common examples

value={formattedValue}
          error={error}
          spellCheck={false}
          disabled={disabled}
          maxLength={7} // 7 to allow pasting with a hash
          {...elemProps}
        />
        
        {showCheck && this.isValidHex(formattedValue) ? (
          
        ) : null}
        #
      
    );
  }

case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

backgroundFocus: 'rgba(0, 0, 0, 0)',
    color: colors.blackPepper300,
    colorFocus: colors.blackPepper300,
    placeholderColor: colors.licorice300,
    placeholderColorFocus: colors.licorice300,
    boxShadow: 'none',
    boxShadowFocus: 'none',
  },
  [SearchTheme.Light]: {
    background: colors.soap200,
    backgroundFocus: colors.soap200,
    backgroundHover: colors.soap300,
    color: colors.blackPepper300,
    placeholderColor: colors.licorice300,
    boxShadow: 'none',
    boxShadowFocus: focusRing().boxShadow,
  },
  [SearchTheme.Dark]: {
    background: 'rgba(0, 0, 0, 0.2)',
    backgroundFocus: colors.frenchVanilla100,
    color: colors.frenchVanilla100,
    colorFocus: colors.blackPepper300,
    placeholderColor: colors.frenchVanilla100,
    placeholderColorFocus: colors.licorice300,
    boxShadow: 'none',
  },
};

function getInputColors(themeColor: HeaderTheme, collapsed: boolean) {
  if (collapsed) {
    return {
      background: 'transparent',
      color: colors.blackPepper300,
      placeholderColor: colors.licorice300,
    };
  } else if (themeColor === HeaderTheme.White) {
    return {
      background: colors.soap200,
      color: colors.blackPepper300,
      placeholderColor: colors.licorice300,
      focusBackground: colors.soap200,
      focusBoxShadow: focusRing().boxShadow,
    };
  } else {
    return {
      background: 'rgba(0,0,0,0.2)',
      color: colors.frenchVanilla100,
      placeholderColor: colors.frenchVanilla100,
      focusBackground: colors.frenchVanilla100,
    };
  }
}

const buttonColors = ButtonColors[variant];

  if (buttonColors == null) {
    return {};
  }

  switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

export function getButtonFocusRing(variant: AllButtonVariants): CSSObject {
  const buttonColors = ButtonColors[variant];

  if (buttonColors == null) {
    return {};
  }

  switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

export function getButtonFocusRing(variant: AllButtonVariants): CSSObject {
  const buttonColors = ButtonColors[variant];

  if (buttonColors == null) {
    return {};
  }

  switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

({error}) => {
    let errorRingColor;
    let errorRingBorderColor = 'transparent';

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorRingBorderColor = colors.cantaloupe600;
    } else {
      return;
    }

    const styles = {
      '& ~ div:first-of-type': {
        boxShadow: `
          0 0 0 2px ${colors.frenchVanilla100},
          0 0 0 4px ${errorRingColor},
          0 0 0 5px ${errorRingBorderColor}`,
      },
      '&:focus ~ div:first-of-type': {

({error}) => {
    let errorBorderColor;
    let errorRingColor;

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorBorderColor = colors.cantaloupe600;
    } else {
      return {};
    }
    return {
      borderRadius: borderRadius.m,
      transition: '100ms box-shadow',
      boxShadow: errorBorderColor
        ? `inset 0 0 0 1px ${errorBorderColor}, inset 0 0 0 3px ${errorRingColor}`
        : `inset 0 0 0 2px ${errorRingColor}`,
      padding: `${spacing.xxxs} ${spacing.xs}`,
      margin: `-${spacing.xxxs} -${spacing.xs}`,
    };