docs: add stripe-elements-demo component to stories

bennypowers · Jan 21, 2020 · 4d0a58d · 4d0a58d
1 parent e68f25c
commit 4d0a58d
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 70 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,31 +1,8 @@
 <script src="https://js.stripe.com/v3/"></script>
 <style>
-  stripe-elements { grid-area: stripe; }
-
   #key { width: 100%; }
 
   [label="Publishable Key"] {
     width: 100%;
   }
-
-  json-viewer {
-    color: #212529;
-    padding: 0;
-    background: white;
-
-    --json-viewer-key-color: #d9480f;
-    --json-viewer-boolean-color: #0b7285;
-    --json-viewer-number-color: #087f5b;
-    --json-viewer-null-color: #c92a2a;
-    --json-viewer-string-color: #0b7285;
-  }
-
-  section {
-    align-items: center;
-    display: grid;
-    grid-gap: 12px;
-    grid-template-areas:
-      'stripe stripe'
-      'fields fields';
-  }
 </style>
diff --git a/stories/storybook-helpers.js b/stories/storybook-helpers.js
@@ -1,3 +1,5 @@
+import { LitElement, css, html } from 'lit-element';
+
 export const $ = x => document.querySelector(x);
 export const $$ = x => [...document.querySelectorAll(x)];
 
@@ -17,24 +19,87 @@ export const setKeys = selector => ({ target: { value } }) => {
 
 const fieldEntry = field => [field.dataset.ownerProp, field.value];
 
-export const ownerPropsIn = element =>
-  Object.fromEntries([...element.querySelectorAll('[data-owner-prop]')].map(fieldEntry));
+customElements.define('stripe-elements-demo', class StripeElementsDemo extends LitElement {
+  static properties = {
+    label: { type: String },
+    submitDisabled: { type: Boolean },
+    output: { type: Object },
+  };
+
+  static styles = css`
+    [hidden] { display: none !important; }
+
+    :host {
+      align-items: center;
+      display: grid;
+      grid-gap: 12px;
+      grid-template-areas:
+        'stripe stripe'
+        'fields fields';
+    }
+
+    #stripe,
+    #actions {
+      display: contents;
+    }
+
+    ::slotted(stripe-elements) {
+      grid-area: stripe;
+    }
+
+    json-viewer {
+      color: #212529;
+      padding: 0;
+      background: white;
+
+      --json-viewer-key-color: #d9480f;
+      --json-viewer-boolean-color: #0b7285;
+      --json-viewer-number-color: #087f5b;
+      --json-viewer-null-color: #c92a2a;
+      --json-viewer-string-color: #0b7285;
+    }
+
+  `;
+
+  constructor() {
+    super();
+    this.submitDisabled = true;
+    this.addEventListener('stripe-change', this.onStripeChange.bind(this));
+  }
+
+  get billingDetails() {
+    const slot = this.shadowRoot.querySelector('slot[name="actions"]');
+    const assigned = slot.assignedElements();
+    const elements = (assigned.length ? assigned : [...slot.children]);
+    return Object.fromEntries(elements.map(fieldEntry));
+  }
+
+  render() {
+    return html`
+      <div id="stripe" ?hidden="${this.output}">
+        <slot name="stripe"></slot>
+      </div>
 
-export const siblingSelector = (selector, element) =>
-  element.parentElement.querySelector(selector);
+      <div id="actions" ?hidden="${this.output}">
+        <slot name="actions">
+          <mwc-textfield outlined label="Cardholder Name" data-owner-prop="name" value="Mr. Man"> </mwc-textfield>
+          <mwc-textfield outlined label="Cardholder Email" data-owner-prop="email" value="[email protected]"> </mwc-textfield>
+          <mwc-textfield outlined label="Cardholder Phone" data-owner-prop="phone" value="555 555 5555"> </mwc-textfield>
+          <mwc-button ?disabled="${this.submitDisabled}" outlined @click="${this.onClickSubmit}">${this.label}</mwc-button>
+        </slot>
+      </div>
 
-const hide = el => el.style.display = 'none';
+      <json-viewer .object="${this.output}"> </json-viewer>
+    `;
+  }
 
-export function enableButton({ target: { isComplete, parentElement } }) {
-  parentElement.querySelector('mwc-button').disabled = !isComplete;
-}
+  async onClickSubmit() {
+    const element = this.querySelector('stripe-elements');
+    element.billingDetails = this.billingDetails;
+    this.output = await element.submit();
+  }
 
-export async function submitThenDisplayResult(event) {
-  const parent = event.target.parentElement;
-  const viewer = parent.querySelector('json-viewer');
-  const element = parent.querySelector('stripe-elements');
-  element.billingDetails = ownerPropsIn(parent);
-  viewer.object = await element.submit();
-  parent.querySelectorAll('mwc-textfield').forEach(hide);
-  parent.querySelectorAll('mwc-button').forEach(hide);
-}
+  onStripeChange({ target: { isComplete } }) {
+    this.submitDisabled = !isComplete;
+  }
+});
diff --git a/stories/stripe-elements.stories.mdx b/stories/stripe-elements.stories.mdx
@@ -14,7 +14,7 @@ import '@material/mwc-textfield';
 import '@power-elements/codesandbox-button';
 import '@power-elements/json-viewer';
 
-import { $, $$, enableButton, ownerPropsIn, publishableKey, setKeys, submitThenDisplayResult } from './storybook-helpers.js';
+import { $, $$, publishableKey, setKeys } from './storybook-helpers.js';
 
 <Meta
   title="Stripe Elements"
@@ -57,14 +57,9 @@ Enter your publishable key here (use the test key, not the production key) to ru
 <Preview>
   <Story name="Generate a PaymentMethod" height="220px">{
     html`
-      <section id="payment-method">
-        <stripe-elements generate="payment-method" publishable-key="${publishableKey}" @stripe-change="${enableButton}"> </stripe-elements>
-        <mwc-textfield outlined label="Cardholder Name" data-owner-prop="name" value="Mr. Man"> </mwc-textfield>
-        <mwc-textfield outlined label="Cardholder Email" data-owner-prop="email" value="[email protected]"> </mwc-textfield>
-        <mwc-textfield outlined label="Cardholder Phone" data-owner-prop="phone" value="555 555 5555"> </mwc-textfield>
-        <mwc-button disabled outlined @click="${submitThenDisplayResult}">Generate PaymentMethod</mwc-button>
-        <json-viewer> </json-viewer>
-      </section>
+      <stripe-elements-demo label="Generate PaymentMethod">
+        <stripe-elements slot="stripe" generate="payment-method" publishable-key="${publishableKey}"> </stripe-elements>
+      </stripe-elements-demo>
     `
   }</Story>
 </Preview>
@@ -74,15 +69,10 @@ Enter your publishable key here (use the test key, not the production key) to ru
 <Preview>
   <Story name="Generate a Source" height="220px">{
     html`
-      <section id="source">
-        <stripe-elements generate="source" publishable-key="${publishableKey}" @stripe-change="${enableButton}"> </stripe-elements>
-        <mwc-textfield outlined label="Cardholder Name" data-owner-prop="name" value="Mr. Man"> </mwc-textfield>
-        <mwc-textfield outlined label="Cardholder Email" data-owner-prop="email" value="[email protected]"> </mwc-textfield>
-        <mwc-textfield outlined label="Cardholder Phone" data-owner-prop="phone" value="555 555 5555"> </mwc-textfield>
-        <mwc-button disabled outlined @click="${submitThenDisplayResult}">Generate Source</mwc-button>
-        <json-viewer> </json-viewer>
-      </section>
-      `
+      <stripe-elements-demo label="Generate Source">
+        <stripe-elements slot="stripe" generate="source" publishable-key="${publishableKey}"> </stripe-elements>
+      </stripe-elements-demo>
+    `
   }</Story>
 </Preview>
 
@@ -94,14 +84,9 @@ you may generate a token from the filled-out form by calling the `createToken()`
 <Preview>
   <Story name="Generate a Token" height="220px">{
     html`
-      <section id="token">
-        <stripe-elements generate="token" publishable-key="${publishableKey}" @stripe-change="${enableButton}"> </stripe-elements>
-        <mwc-textfield outlined label="Cardholder Name" data-owner-prop="name" value="Mr. Man"> </mwc-textfield>
-        <mwc-textfield outlined label="Cardholder Email" data-owner-prop="email" value="[email protected]"> </mwc-textfield>
-        <mwc-textfield outlined label="Cardholder Phone" data-owner-prop="phone" value="555 555 5555"> </mwc-textfield>
-        <mwc-button disabled outlined @click="${submitThenDisplayResult}">Generate Token</mwc-button>
-        <json-viewer> </json-viewer>
-      </section>
+      <stripe-elements-demo label="Generate Token">
+        <stripe-elements slot="stripe" generate="token" publishable-key="${publishableKey}"> </stripe-elements>
+      </stripe-elements-demo>
     `
   }</Story>
 </Preview>
@@ -114,10 +99,10 @@ This is useful for simple validation in cases where you don't need to build your
 <Preview>
   <Story name="Error Display" height="120px">{
     html`
-      <section id="show-errror">
+      <article id="show-error">
         <stripe-elements publishable-key="should-error-use-bad-key" show-error> </stripe-elements>
         <mwc-button outlined @click="${event => event.target.parentElement.querySelector('stripe-elements').validate()}">Validate</mwc-button>
-      </section>
+      </article>
     `
   }</Story>
 </Preview>
@@ -145,10 +130,10 @@ stripe-elements[has-error] { border: 1px solid red; }
         #states stripe-elements[is-complete] { border: 1px solid blue; }
         #states stripe-elements[has-error] { border: 1px solid red; }
       </style>
-      <section id="states">
+      <article id="states">
         <stripe-elements publishable-key="${publishableKey}"> </stripe-elements>
         <mwc-button outlined @click="${event => event.target.parentElement.querySelector('stripe-elements').validate()}"> Validate</mwc-button>
-      </section>
+      </article>
     `
   }</Story>
 </Preview>