[DOCSP-32954] Add ErrorBanner, React-Transition-Group

[jackyw2018]

Resources

• Jira Ticket

[nlarew]

I don't think conversation errors are the concern of the input bar, especially given that we use it here to short circuit rendering. In the docs Chatbot component we conditionally render the InputBar based on conversation error state rather than have the InputBar handle the conditional internally.

Could we refactor here to use that pattern instead? It'll make it easier to combine this all into shared components.

[nlarew]

Let's use emotion for this instead of the jsx style prop. Also at this point we're not actually using any of these states so RTG isn't adding anything until we wire it up.

Since we're only doing CSS transitions right now I think it'd be easier to switch to CSSTransition - then we don't have to manually process the state. We just write the CSS we want for each state and it's wired up automatically.

You should be able to put all this in the message_prompts css (note the different state names compared to regular Transition):

  message_prompts: css`
    margin-left: 70px;
    @media screen and (max-width: 804px) {
      margin-left: 50px;
    }

    transition: opacity ${duration}ms ease-in;

    &-enter {
      opacity: 0;
    }
    &-enter-active {
      opacity: 1;
    }
    &-exit {
      opacity: 1;
    }
    &-exit-active {
      opacity: 0;
    }
  `,

then you'll replace Transition with CSSTransition, add the prop classNames={styles.message_prompts}, and then add ref={nodeRef} to the div that has the message_prompts style.

[nlarew]

Per my earlier comment about using emotion & CSSTransition. Also make sure to import CSSTransition and delete the closing }) too!

Suggested change

	<Transition in={inProp} timeout={duration} nodeRef={nodeRef}>
	{(state) => (
	<div
	className={styles.message_prompts}
	style={{ ...defaultStyle, ...transitionStyles[state] }}
	>
	<CSSTransition
	in={inProp}
	timeout={duration}
	nodeRef={nodeRef}
	classNames={styles.message_prompts}
	>
	<div
	className={styles.message_prompts}
	ref={nodeRef}
	>