message: fix(banner): Convert Banner to a functional component
  Convert Banner to a functional component with ref forwarding to be compatible with compound components that use `as`.
  [category:Components]
diff: @@ -85,19 +85,15 @@ const BannerViewAll = styled('span')<BannerProps>(
  })
  );
  -class Banner extends React.Component<BannerProps> {
  - static Variant = BannerVariant;
  - static ErrorType = ErrorType;
  -
  - public render() {
  +const Banner = (React.forwardRef<HTMLButtonElement, BannerProps>((props, ref) => {
  const {
  actionText = 'View All',
  variant = BannerVariant.Full,
  error = ErrorType.Alert,
  label,
  onClick,
  - ...props
  - } = this.props;
  + ...elemProps
  + } = props;
  const bannerIcon = error === ErrorType.Error ? exclamationCircleIcon : exclamationTriangleIcon;
  const iconColor = error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400;
  @@ -111,15 +107,18 @@ class Banner extends React.Component<BannerProps> {
  tabIndex={0}
  onClick={onClick}
  error={error}
  - {...props}
  + ref={ref}
  + {...elemProps}
  >
  <BannerIcon icon={bannerIcon} color={iconColor} colorHover={iconColor} size={iconSize} />
  <BannerLabel>{label}</BannerLabel>
  <BannerViewAll variant={variant}>{actionText}</BannerViewAll>
  </BannerWrapper>
  );
  - }
  -}
  +}) as any) as React.FC<BannerProps> & {
  + Variant: typeof BannerVariant;
  + ErrorType: typeof ErrorType;
  +};
  Banner.Variant = BannerVariant;
  Banner.ErrorType = ErrorType;
  