@botonic/react 0.31.0-alpha.1 → 0.31.0-alpha.3

package/src/webchat/typing-indicator/index.tsx

@@ -1,16 +1,24 @@
-import React from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 import { COLORS, ROLES } from '../../constants'
-import { Dot, TypingIndicatorWrapper } from './styles'
+import { Dot, TypingContainer, TypingMsgWrapper } from './styles'
 
-export const TypingIndicator = () => (
-  <TypingIndicatorWrapper
-    role={ROLES.TYPING_INDICATOR}
-    className='typing-indicator'
-    backgroundColor={COLORS.SEASHELL_WHITE}
-  >
-    <Dot />
-    <Dot />
-    <Dot />
-  </TypingIndicatorWrapper>
+const TypingIndicator = forwardRef<HTMLDivElement, any>(
+  (_props, ref: ForwardedRef<HTMLDivElement>) => (
+    <TypingContainer ref={ref}>
+      <TypingMsgWrapper
+        role={ROLES.TYPING_INDICATOR}
+        className='typing-indicator'
+        backgroundColor={COLORS.SEASHELL_WHITE}
+      >
+        <Dot />
+        <Dot />
+        <Dot />
+      </TypingMsgWrapper>
+    </TypingContainer>
+  )
 )
+
+TypingIndicator.displayName = 'TypingIndicator'
+
+export default TypingIndicator

package/src/webchat/typing-indicator/styles.ts

@@ -12,16 +12,20 @@ const bulge = keyframes`
   }
 `
 
-interface TypingIndicatorWrapperProps {
+export const TypingContainer = styled.div`
+  padding: 0px 8px 8px 8px;
+`
+
+interface TypingMsgWrapperProps {
   backgroundColor: string
 }
 
-export const TypingIndicatorWrapper = styled.div<TypingIndicatorWrapperProps>`
+export const TypingMsgWrapper = styled.div<TypingMsgWrapperProps>`
   will-change: transform;
   width: 44px;
   line-height: 0px;
   border-radius: 20px;
-  padding: 8px 2px 8px;
+  padding: 8px 2px;
   text-align: center;
   display: block;
   margin: 8px;

package/src/webchat/webchat-reducer.ts

@@ -48,6 +48,8 @@ export function webchatReducer(
       return { ...state, lastRoutePath: action.payload }
     case WebchatAction.SET_CURRENT_ATTACHMENT:
       return { ...state, currentAttachment: action.payload }
+    case WebchatAction.SET_IS_INPUT_FOCUSED:
+      return { ...state, isInputFocused: action.payload }
     default:
       return messagesReducer(state, action)
   }

package/src/webchat/webchat-typed/styles.ts

@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const StyledWebchat = styled.div<{ height: string; width: string }>`
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  margin: auto;
+  background-color: ${COLORS.SOLID_WHITE};
+  border-radius: 10px;
+  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+`
+
+export const ErrorMessageContainer = styled.div`
+  position: relative;
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  width: 100%;
+`
+
+export const ErrorMessage = styled.div`
+  position: absolute;
+  top: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 11px;
+  display: flex;
+  background-color: ${COLORS.ERROR_RED};
+  color: ${COLORS.CONCRETE_WHITE};
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
+`
+
+export const DarkBackgroundMenu = styled.div`
+  background: ${COLORS.SOLID_BLACK};
+  opacity: 0.3;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  border-radius: 10px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`