Merge pull request #184 from calibreapp/styling

Add class attribute to the container element

Author: robmorieson

README.md

@@ -157,13 +157,14 @@ export default class App extends React.Component {
 }
 ```
 
-You can customise the Help Scout beacon by passing the following props to the
+You can customise the Help Scout placeholder by passing the following props to the
 `HelpScout` component:
 
-- `color`: The background color of the beacon
+- `color`: The background color of the placeholder
 - `icon`: Choose from `message`, `antenna`, `search`, `question`, `beacon`
-- `zIndex`: Changes the CSS index value of how the Beacon relates to other objects
+- `zIndex`: Changes the CSS index value of how the placeholder relates to other objects
 - `horizontalPosition`: Choose from `left` or `right`
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
 
 Currently the Help Scout component only supports the icon button style.
 
@@ -192,8 +193,10 @@ export default class App extends React.Component {
 }
 ```
 
-You can customise the color of the Intercom widget by passing a `color` prop to
-the `Intercom` component.
+You can customise the Intercom placeholder icon by passing the following props to the `Intercom` component:
+
+- `color`: The background color of the placeholder widget
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
 
 [Messenger Settings](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#messenger-attributes), User context and Company context settings can be set using `window.intercomSettings`. See the [official Intercom documentation](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#section-data-attributes) for more details.
 
@@ -241,6 +244,7 @@ You can customise the Messenger widget by passing the following props to the
   currently not logged in to Facebook.
 - `greetingDialogDisplay`: Sets how the greeting dialog will be displayed.
 - `greetingDialogDelay`: Sets the number of seconds of delay before the greeting dialog is shown after the plugin is loaded.
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
 
 For a list of options, refer to [Facebook Customer Chat Plugin documentation](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization).
 
@@ -267,11 +271,12 @@ export default () => (
 )
 ```
 
-You can customise the Drift Messenger by passing the following props to the
+You can customise the Drift placeholder by passing the following props to the
 `Drift` component:
 
-- `color`: The background color of the messenger
+- `color`: The background color of the placeholder
 - `icon`: Choose from `A`, `B`, `C`, `D`; you're presented with these preset icons when signing up for Drift, or in the "Drift Widget > Design > Widget icon" entry under the "App Settings" header on the Drift settings page.
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
 
 </details>
 
@@ -297,7 +302,7 @@ export default () => (
 )
 ```
 
-You can customise the Userlike Widget by passing the following props to the
+You can customise the Userlike placeholder by passing the following props to the
 `Userlike` component:
 
 - `color`: The contrasting color, can be `black` or `white`.
@@ -306,6 +311,7 @@ You can customise the Userlike Widget by passing the following props to the
 - `vOffset`: The amount of vertical margin.
 - `hOffset`: The amount of horizontal margin.
 - `style`: The shape style, can be `round` or `square`.
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
 
 </details>
 
@@ -333,10 +339,11 @@ export default () => (
 )
 ```
 
-You can customise the Chatwoot Widget by passing the following props to the
+You can customise the Chatwoot placeholder by passing the following props to the
 `Chatwoot` component:
 
 - `color`: The background color, set to same color value you choose in Chatwoot dashboard.
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
 
 </details>
 

src/components/Chatwoot/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   button: CSSProperties
@@ -34,17 +35,20 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
 }
 
-const Provider = ({ color }: Props): JSX.Element | null => {
+const Provider = ({
+  color,
+  containerClass = ClassNames.container
+}: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') return null
 
   return (
-    <div>
+    <div className={containerClass}>
       <div
         role="button"
         aria-label="Load Chat"

src/components/Drift/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
 import useWindowWidth from '../../hooks/useWindowWidth'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   container: CSSProperties
@@ -40,14 +41,15 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
   icon?: 'A' | 'B' | 'C' | 'D'
 }
 
 const Drift = ({
   color = '#0176ff',
-  icon = 'A'
+  icon = 'A',
+  containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
   const windowWidth = useWindowWidth()
@@ -72,7 +74,7 @@ const Drift = ({
   }
 
   return (
-    <div style={positionStyles}>
+    <div className={containerClass} style={positionStyles}>
       <div style={styles.container}>
         <div
           role="button"

src/components/HelpScout/index.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, useEffect, useState } from 'react'
 
 import useChat from '../../hooks/useChat'
 import useWindowHeight from '../../hooks/useWindowHeight'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   wrapper: CSSProperties
@@ -157,7 +158,7 @@ const getIcon = (icon: HelpScoutIcon): JSX.Element => {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
   icon?: HelpScoutIcon
   zIndex?: string
@@ -168,7 +169,8 @@ const HelpScout = ({
   color = '#976ad4',
   icon = 'beacon',
   zIndex = '1050',
-  horizontalPosition = 'left'
+  horizontalPosition = 'left',
+  containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
   const windowHeight = useWindowHeight()
@@ -201,6 +203,7 @@ const HelpScout = ({
 
   return (
     <div
+      className={containerClass}
       style={{
         ...styles.wrapper,
         ...positionStyles,

src/components/Intercom/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   wrapper: CSSProperties
@@ -88,11 +89,14 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
 }
 
-const Intercom = ({ color }: Props): JSX.Element | null => {
+const Intercom = ({
+  color,
+  containerClass = ClassNames.container
+}: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') {
@@ -101,6 +105,7 @@ const Intercom = ({ color }: Props): JSX.Element | null => {
 
   return (
     <div
+      className={containerClass}
       style={{
         ...styles.wrapper,
         background: color

src/components/Messenger/index.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, memo } from 'react'
 
 import useProvider from '../../hooks/useProvider'
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: CSSProperties = {
   appearance: 'none',
@@ -24,7 +25,7 @@ const styles: CSSProperties = {
   userSelect: 'none'
 }
 
-interface Props {
+interface Props extends ProviderProps {
   themeColor?: string
   loggedInGreeting?: string
   loggedOutGreeting?: string
@@ -67,7 +68,13 @@ const CustomerChat = memo(
   }
 )
 
-const Widget = ({ color }: { color: string }): JSX.Element | null => {
+const Widget = ({
+  color,
+  containerClass
+}: {
+  color: string
+  containerClass: string
+}): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') {
@@ -76,6 +83,7 @@ const Widget = ({ color }: { color: string }): JSX.Element | null => {
 
   return (
     <div
+      className={containerClass}
       style={styles}
       role="button"
       aria-label="Load Chat"
@@ -104,13 +112,17 @@ const Widget = ({ color }: { color: string }): JSX.Element | null => {
   )
 }
 
-const Messenger = ({ color = '', ...props }: Props): JSX.Element => {
+const Messenger = ({
+  color = '',
+  containerClass = ClassNames.container,
+  ...props
+}: Props): JSX.Element => {
   const { providerKey } = useProvider()
 
   return (
     <>
       <CustomerChat color={color} providerKey={providerKey} {...props} />
-      <Widget color={color} />
+      <Widget color={color} containerClass={containerClass} />
     </>
   )
 }

src/components/Userlike/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   container: CSSProperties
@@ -34,7 +35,7 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
   backgroundColor?: string
   position?: string
@@ -49,7 +50,8 @@ const Userlike = ({
   position = 'right',
   vOffset = '24px',
   hOffset = '24px',
-  style = 'round'
+  style = 'round',
+  containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
   const positionStyles = {
@@ -66,7 +68,10 @@ const Userlike = ({
   }
 
   return (
-    <div style={{ ...styles.container, ...positionStyles, ...shapeStyle }}>
+    <div
+      className={containerClass}
+      style={{ ...styles.container, ...positionStyles, ...shapeStyle }}
+    >
       <button
         role="button"
         aria-label="Load Chat"

src/types.ts

@@ -1,3 +1,10 @@
+export enum ClassNames {
+  container = 'live-chat-loader-placeholder'
+}
+export interface ProviderProps {
+  containerClass?: string
+}
+
 export type State = 'initial' | 'open' | 'complete'
 
 export type Provider =