feat: new component "connection"

Author: joekarasek

docs-site/src/pages/pattern-lab/_patterns/04-pages/99999-bolt-dev-sandbox/interactive-pathway-fragments/_pathwayOne.twig

@@ -19,6 +19,18 @@
         character-left-url="https://github.com/basaltinc/temp-pega-dummy-assets/raw/master/customer-neutral.png"
         character-right-url="https://github.com/basaltinc/temp-pega-dummy-assets/raw/master/pega-rep.png"
       >
+        <span slot="connection">
+          <bolt-connection
+            connection-url="https://github.com/basaltinc/temp-pega-dummy-assets/raw/master/animated-bands-ltr.png"
+          >
+            <span slot="top">
+              <bolt-text>Top slot</bolt-text>
+            </span>
+            <span slot="bottom">
+              <bolt-text>Bottom slot</bolt-text>
+            </span>
+          </bolt-connection>
+        </span>
       </bolt-two-character-chat>
     </span>
     <bolt-text tag="p" style="margin-bottom: 0;" slot="dialogue"><span style="color: black;">Why is my bill so high?</span></bolt-text>

packages/components/bolt-interactive-step/index.js

@@ -7,4 +7,7 @@ polyfillLoader.then(res => {
   import(
     /* webpackMode: 'eager', webpackChunkName: 'bolt-two-character-chat' */ './src/two-character-chat'
   );
+  import(
+      /* webpackMode: 'eager', webpackChunkName: 'bolt-connection' */ './src/connection'
+      );
 });

packages/components/bolt-interactive-step/src/connection.js

@@ -0,0 +1,58 @@
+import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
+import { withLitHtml, html } from '@bolt/core';
+import classNames from 'classnames/bind';
+import styles from './connection.scss';
+
+let cx = classNames.bind(styles);
+
+@define
+class BoltTwoCharacterChat extends withLitHtml() {
+  static is = 'bolt-connection';
+
+  static props = {
+    noShadow: {
+      ...props.boolean,
+      ...{ default: false },
+    },
+    connectionUrl: {
+      ...props.string,
+      ...{
+        default:
+          'https://github.com/basaltinc/temp-pega-dummy-assets/raw/master/animated-bands-ltr.png',
+      },
+    },
+  };
+
+  // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
+  constructor(self) {
+    self = super(self);
+    self.useShadow = hasNativeShadowDomSupport;
+    return self;
+  }
+
+  render() {
+    const {
+      connectionUrl,
+    } = this.validateProps(this.props);
+    const classes = cx('c-bolt-connection');
+
+    return html`
+      ${this.addStyles([styles])}
+      <div class="${classes}" is="shadow-root">
+        <span class="c-bolt-connection__top-slot">
+          ${this.slot('top')}
+        </span>
+        <img
+          class="c-bolt-connection__main-image"
+          src="${connectionUrl}"
+          alt="Connection Band"
+        />
+        <span class="c-bolt-connection__bottom-slot">
+          ${this.slot('bottom')}
+        </span>
+      </div>
+    `;
+  }
+}
+
+export { BoltTwoCharacterChat };

packages/components/bolt-interactive-step/src/connection.scss

@@ -0,0 +1,21 @@
+.c-bolt-connection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+
+  &__main-image {
+    //@todo Height will probably need to be exposed as an adjustable field to match the various sizes of the character elements
+    width: 350px;
+    height: 60px;
+  }
+
+  &__top-slot {
+    margin-bottom: 10px;
+  }
+
+  &__bottom-slot {
+    margin-top: 10px;
+  }
+}

packages/components/bolt-interactive-step/src/interactive-step.js

@@ -27,18 +27,6 @@ class BoltInteractiveStep extends withLitHtml() {
       ...props.boolean,
       ...{ default: false },
     },
-    hideInteractionAnimations: {
-      ...props.boolean,
-      ...{ default: false },
-    },
-    customerDisposition: {
-      ...props.string,
-      ...{ default: 'happy' },
-    },
-    speakerPosition: {
-      ...props.string,
-      ...{ default: 'left' },
-    },
   };
 
   // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
@@ -49,13 +37,11 @@ class BoltInteractiveStep extends withLitHtml() {
   }
 
   render() {
-    const { step, customerDisposition } = this;
     // validate the original prop data passed along -- returns back the validated data w/ added default values
     const {
       disabled,
       active,
-      hideInteractionAnimations,
-      speakerPosition,
+      step,
     } = this.validateProps(this.props);
 
     const classes = cx('c-bolt-interactive-step', {

packages/components/bolt-interactive-step/src/two-character-chat.js

@@ -68,11 +68,7 @@ class BoltTwoCharacterChat extends withLitHtml() {
             src="${characterLeftUrl}"
             alt="Character on the left"
           />
-          <img
-            class="c-bolt-two-character-chat__connection"
-            src="${connectionUrl}"
-            alt="Connection Band"
-          />
+          ${this.slot('connection')}
           <img
             class="c-bolt-two-character-chat__character c-bolt-two-character-chat__character--right"
             src="${characterRightUrl}"

packages/components/bolt-interactive-step/src/two-character-chat.scss

@@ -20,10 +20,4 @@
       transform: translateX(-50%);
     }
   }
-
-  &__connection {
-    //@todo Height will probably need to be exposed as an adjustable field to match the various sizes of the character elements
-    width: 350px;
-    height: 60px;
-  }
 }