botonic-react: Header component with typescript

packages/botonic-react/src/webchat/header/default-header.tsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+
+import { COLORS, ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { Scale } from '../../shared/styles'
+import { resolveImage } from '../../util/environment'
+import { ConditionalWrapper } from '../../util/react'
+import {
+  CloseHeader,
+  HeaderContainer,
+  ImageContainer,
+  Subtitle,
+  TextContainer,
+  Title,
+} from './styles'
+
+export const DefaultHeader = () => {
+  const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
+    true
+  )
+
+  const headerImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
+    getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
+      WEBCHAT.DEFAULTS.LOGO
+    )
+  )
+
+  const headerTitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
+    WEBCHAT.DEFAULTS.TITLE
+  )
+
+  const headerSubtitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
+    ''
+  )
+
+  const handleCloseWebchat = () => {
+    toggleWebchat(false)
+  }
+
+  const color = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
+    COLORS.BOTONIC_BLUE
+  )
+
+  return (
+    <HeaderContainer
+      role={ROLES.HEADER}
+      color={color}
+      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
+    >
+      {headerImage && (
+        <ImageContainer>
+          <img src={resolveImage(headerImage)} />
+        </ImageContainer>
+      )}
+      <TextContainer>
+        <Title>{headerTitle}</Title>
+        {headerSubtitle ? <Subtitle>{headerSubtitle}</Subtitle> : null}
+      </TextContainer>
+      <ConditionalWrapper
+        condition={animationsEnabled}
+        wrapper={children => <Scale>{children}</Scale>}
+      >
+        <CloseHeader onClick={handleCloseWebchat}>⨯</CloseHeader>
+      </ConditionalWrapper>
+    </HeaderContainer>
+  )
+}

packages/botonic-react/src/webchat/header/index.tsx

@@ -0,0 +1,37 @@
+import React, { ForwardedRef, forwardRef, useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { BotonicContainerId } from '../constants'
+import { DefaultHeader } from './default-header'
+import { StyledWebchatHeader } from './styles'
+
+export const WebchatHeader = forwardRef(
+  (_, ref: ForwardedRef<HTMLDivElement>) => {
+    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+    const handleCloseWebchat = () => {
+      toggleWebchat(false)
+    }
+
+    const CustomHeader = getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.customHeader
+    )
+
+    if (CustomHeader) {
+      return (
+        <div id={BotonicContainerId.Header} ref={ref}>
+          <CustomHeader onCloseClick={handleCloseWebchat} />
+        </div>
+      )
+    }
+
+    return (
+      <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
+        <DefaultHeader />
+      </StyledWebchatHeader>
+    )
+  }
+)
+
+WebchatHeader.displayName = 'WebchatHeader'

packages/botonic-react/src/webchat/header/styles.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  z-index: 2;
+  height: inherit;
+`
+
+export const ImageContainer = styled.div`
+  padding: 10px;
+  align-items: center;
+
+  img {
+    width: 32px;
+    border-radius: 50%;
+  }
+`
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`
+
+export const Title = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const Subtitle = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const CloseHeader = styled.div`
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`
+
+export const StyledWebchatHeader = styled.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`