Customise HelpScout and Intercom components

- Pass props directly to widget components
- Add additional props for customising HelpScout
- Remove dependency on styled-components

.storybook/addons.js

@@ -1,2 +1,3 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'

README.md

@@ -96,17 +96,23 @@ Currently there are two supported providers:
 To use HelpScout set the `provider` prop as `helpScout` and set the
 `providerKey` prop as your Beacon API Key.
 
+You can customise the HelpScout beacon by passing the following props to the
+`HelpScout` component:
+
+- `color`: The background color of the beacon
+- `icon`: Choose from `message`, `antenna`, `search`, `question`, `beacon`
+- `zIndex`: Changes the CSS index value of how the Beacon relates to other objects
+- `horizontalPosition`: Choose from `left` or `right`
+
 #### Intercom
 
 To use Intercom set the `provider` as `intercom` and set the `providerKey` props
 as your Intercom App ID.
 
-### Options
-
 You can customise the color of the Intercom widget by passing a `color` prop to
-the `LiveChatLoaderProvider`.
+the `Intercom` component.
 
 ### Todo
 
-- Add customisation options for HelpScout
+- Add further customisation options for HelpScout: `buttonStyle`, `text`, `textAlign`
 - Add tests

package.json

@@ -22,15 +22,15 @@
     "url": "https://github.com/calibreapp/react-live-chat-loader.git"
   },
   "peerDependencies": {
-    "react": "^16.8.5",
-    "styled-components": "^4.2.0"
+    "react": "^16.8.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.0",
     "@babel/core": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-knobs": "^5.2.6",
     "@storybook/addon-links": "^5.1.9",
     "@storybook/addons": "^5.1.9",
     "@storybook/react": "^5.1.9",
@@ -44,8 +44,7 @@
     "eslint-plugin-node": "^9.1.0",
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^1.0.1",
-    "react": "^16.8.5",
-    "styled-components": "^4.2.0"
+    "react": "^16.8.5"
   },
   "files": [
     "dist/*"