Zendesk Help Widget (#499)

Add a Zendesk custom help button on archive.org site
internetarchive · Nov 4, 2020 · b8b23bb · b8b23bb
1 parent de06d56
commit b8b23bb
Show file tree

Hide file tree

Showing 23 changed files with 39,323 additions and 1 deletion.
diff --git a/.travis.yml b/.travis.yml
@@ -18,7 +18,7 @@ install:
   - npm install -g codecov
 
 script:
-  - lerna bootstrap
+  - travis_wait lerna bootstrap
   - lerna run test
 
 after_success:

diff --git a/packages/ia-zendesk-help-widget/.eslintrc b/packages/ia-zendesk-help-widget/.eslintrc
@@ -0,0 +1,16 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js"]
+      }
+    }
+  },
+  "overrides": [{
+    "files": ["test/**/*.js"],
+    "rules": {
+      "no-unused-expressions": "off"
+    }
+  }]
+}
diff --git a/packages/ia-zendesk-help-widget/.gitignore b/packages/ia-zendesk-help-widget/.gitignore
@@ -0,0 +1,13 @@
+/node_modules/
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/lib/
+
+*.log
diff --git a/packages/ia-zendesk-help-widget/.storybook/.babelrc b/packages/ia-zendesk-help-widget/.storybook/.babelrc
@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": "2",
+      }
+    ]
+  ]
+}
diff --git a/packages/ia-zendesk-help-widget/.storybook/addons.js b/packages/ia-zendesk-help-widget/.storybook/addons.js
@@ -0,0 +1,7 @@
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-viewport/register';
diff --git a/packages/ia-zendesk-help-widget/.storybook/config.js b/packages/ia-zendesk-help-widget/.storybook/config.js
@@ -0,0 +1,11 @@
+import { configure, addDecorator } from '@storybook/polymer';
+import { withA11y } from '@storybook/addon-a11y';
+import '@storybook/addon-console';
+
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+addDecorator(withA11y);
+configure(loadStories, module);
diff --git a/packages/ia-zendesk-help-widget/.storybook/webpack.config.js b/packages/ia-zendesk-help-widget/.storybook/webpack.config.js
@@ -0,0 +1,5 @@
+const defaultConfig = require('@open-wc/demoing-storybook/default-storybook-webpack-config.js');
+
+module.exports = ({ config }) => {
+  return defaultConfig({ config, transpilePackages: ['lit-html', 'lit-element', '@open-wc'] });
+};
diff --git a/packages/ia-zendesk-help-widget/LICENSE b/packages/ia-zendesk-help-widget/LICENSE
diff --git a/packages/ia-zendesk-help-widget/README.md b/packages/ia-zendesk-help-widget/README.md
@@ -0,0 +1,38 @@
+# Zendesk Help Widget Component
+
+## Usage
+
+```html
+<ia-zendesk-help-widget
+  widgetSrc="https://static.zdassets.com/ekr/snippet.js?key=[zendesk-api-key]"
+></ia-zendesk-help-widget>
+```
+
+### Properties:
+
+```js
+widgetSrc: { type: String }, // widget src
+```
+
+### Events
+
+*
+    **initiateZenDesk**: Initiate third party script injection
+
+## Testing
+
+Unit tests are placed in the ./test directory with the suffix and extension
+".test.js". Any other JS files in the test directory will be ignored by Karma.
+Run the tests with `yarn test`.
+
+## Structure
+
+* index.js - main component export
+* index.html - file opened when running `yarn start`
+* karma.conf.js - Karma runner config
+* karma.bs.conf.js - Karma BrowserStack config. Note that BROWSER_STACK_USERNAME
+  and BROWSER_STACK_ACCESS_KEY need to be set as environment variables before
+  running.
+* /src/ia-zendesk-help-widget - main component definition
+* /stories - Storybook setup
+* /test - unit tests
diff --git a/packages/ia-zendesk-help-widget/index.html b/packages/ia-zendesk-help-widget/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="index.js"></script>
+    <title>ZenDesk Help Widget</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import { html, render } from './node_modules/lit-html/lit-html.js';
+
+      render(html`<ia-zendesk-help-widget
+        widgetSrc="https://static.zdassets.com/ekr/snippet.js?key=685f6dc4-48c5-411f-8463-cc6dd50abe2d"
+        ></ia-zendesk-help-widget>`, document.getElementById('root'));
+
+      const zendeskButton = document.querySelector('ia-zendesk-help-widget');
+
+      zendeskButton.addEventListener('zendeskHelpButtonClicked', () => {
+        console.log('zendeskHelpButtonClicked event');
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/ia-zendesk-help-widget/index.js b/packages/ia-zendesk-help-widget/index.js
@@ -0,0 +1,3 @@
+import ZenDeskHelp from './src/ia-zendesk-help-widget';
+
+export default ZenDeskHelp;
diff --git a/packages/ia-zendesk-help-widget/karma.bs.config.js b/packages/ia-zendesk-help-widget/karma.bs.config.js
@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const merge = require('webpack-merge');
+const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
+const createBaseConfig = require('./karma.conf.js');
+
+module.exports = (config) => {
+  config.set(
+    merge(bsSettings(config), createBaseConfig(config), {
+      browserStack: {
+        project: 'ia-zendesk-help-widget',
+      },
+    }),
+  );
+
+  return config;
+};
diff --git a/packages/ia-zendesk-help-widget/karma.conf.js b/packages/ia-zendesk-help-widget/karma.conf.js
@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('webpack-merge');
+
+module.exports = (config) => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      files: [
+        // runs all files ending with .test in the test folder,
+        // can be overwritten by passing a --grep flag. examples:
+        //
+        // npm run test -- --grep test/foo/bar.test.js
+        // npm run test -- --grep test/bar/*
+        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
+      ],
+
+      esm: {
+        nodeResolve: true,
+      },
+      // you can overwrite/extend the config further
+    }),
+  );
+  return config;
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ZenDeskHelp from './src/ia-zendesk-help-widget';

		export default ZenDeskHelp;