@covalent/components 0.0.0-COVALENT

package/stories/demos/dialog.component.html

@@ -0,0 +1,187 @@
+<cv-button data-num="1" raised>Basic</cv-button>
+<cv-dialog id="dialog1" heading="Dialog header">
+  Dialog body text
+  <cv-button slot="primaryAction" dialogAction="ok">Action 2</cv-button>
+  <cv-button slot="secondaryAction" dialogAction="cancel">Action 1</cv-button>
+</cv-dialog>
+
+<cv-button data-num="2" raised>Actions</cv-button>
+<cv-dialog id="dialog2" heading="Actions">
+  <p>
+    By setting the dialogAction="my-action" attribute on any element projected
+    into mwc-dialog, you can close the dialog by clicking on that element. The
+    dialog will then fire a non-bubbling "closing" event and a non-bubbling
+    "closed" event with an event detail of {action: "my-action"}
+  </p>
+  <cv-button slot="primaryAction" dialogAction="customAction"
+    >This has action</cv-button
+  >
+  <cv-button slot="secondaryAction">This does not</cv-button>
+</cv-dialog>
+
+<cv-button data-num="3" raised>Scrollable</cv-button>
+<cv-dialog id="dialog3" heading="My Title">
+  <p>
+    Really long text will scroll. Really long text will scroll. Really long text
+    will scroll. Really long text will scroll. Really long text will scroll.
+    Really long text will scroll. Really long text will scroll. Really long text
+    will scroll. Really long text will scroll. Really long text will scroll.
+    Really long text will scroll. Really long text will scroll. Really long text
+    will scroll. Really long text will scroll. Really long text will scroll.
+    Really long text will scroll. Really long text will scroll. Really long text
+    will scroll. Really long text will scroll. Really long text will scroll.
+    Really long text will scroll. Really long text will scroll. Really long text
+    will scroll. Really long text will scroll. Really long text will scroll.
+    Really long text will scroll. Really long text will scroll. Really long text
+    will scroll. Really long text will scroll. Really long text will scroll.
+    Really long text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll. Really log text will scroll.
+    Really log text will scroll. Really log text will scroll. Really log text
+    will scroll. Really log text will scroll.
+  </p>
+  <cv-button slot="primaryAction" dialogAction="close">Close this!</cv-button>
+</cv-dialog>
+
+<cv-button data-num="4" raised>Hide actions</cv-button>
+<cv-dialog id="dialog4" heading="Hide Actions">
+  <p>
+    If you don't have actions, you may want to set the "hideActions" property.
+    This property will remove extra whitespace at the bottom of this dialog.
+    This button will toggle that whitespace:
+  </p>
+  <cv-button raised id="toggleActions">Toggle hideActions</cv-button>
+  <div>
+    mwc-dialog.hideActions is currently:
+    <span id="hideActionVal"> false </span>
+  </div>
+</cv-dialog>
+
+<style>
+  .styled {
+    --mdc-theme-surface: #fff;
+    --mdc-dialog-scrim-color: rgba(35, 47, 52, 0.32);
+    --mdc-dialog-heading-ink-color: #232f34;
+    --mdc-dialog-content-ink-color: #232f34;
+    --mdc-dialog-scroll-divider-color: transparent;
+    --mdc-dialog-min-width: 500px;
+    --mdc-dialog-max-width: 700px;
+    --mdc-dialog-max-height: 350px;
+    --mdc-dialog-shape-radius: 0px;
+
+    /* color buttons */
+    --mdc-theme-primary: #344955;
+  }
+</style>
+
+<cv-button data-num="5" raised>Styled</cv-button>
+<cv-dialog id="dialog5" heading="Styled" class="styled">
+  <div>These are the current styles applied to this dialog</div>
+  <pre>
+--mdc-theme-surface: #FFF;
+--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
+--mdc-dialog-heading-ink-color: #232F34;
+--mdc-dialog-content-ink-color: #232F34;
+--mdc-dialog-scroll-divider-color: transparent;
+--mdc-dialog-min-width: 500px;
+--mdc-dialog-max-width: 700px;
+--mdc-dialog-max-height: 350px;
+--mdc-dialog-shape-radius: 0px;
+
+/* color buttons */
+--mdc-theme-primary: #344955;
+        </pre
+  >
+  <cv-button slot="primaryAction" dialogAction="close">
+    Too stylish for me!
+  </cv-button>
+</cv-dialog>
+
+<cv-button data-num="6" raised>Stacked</cv-button>
+<cv-dialog id="dialog6" heading="Stacked" stacked>
+  <div>
+    This is what happens when you set the stacked property on mwc-dialog. Notice
+    that the primary action is now on top.
+  </div>
+  <cv-button slot="primaryAction" dialogAction="close"> Primary </cv-button>
+  <cv-button slot="secondaryAction" dialogAction="close"> Secondary </cv-button>
+</cv-dialog>
+
+<cv-button data-num="7" raised>Initial focus</cv-button>
+<cv-dialog id="dialog7" heading="Initial Focus">
+  <p>
+    In this example we set "dialogInitialFocus" on the mwc-textfield. When this
+    dialog opens, it is auto-focused.
+  </p>
+  <cv-textfield label="i am auto-focused" dialogInitialFocus> </cv-textfield>
+  <cv-button slot="primaryAction" dialogAction="close"> Primary </cv-button>
+  <cv-button slot="secondaryAction" dialogAction="close"> Secondary </cv-button>
+</cv-dialog>
+
+<cv-button data-num="8" raised>Form validation</cv-button>
+<cv-dialog id="dialog8" heading="Form Validation">
+  <p>This dialog can validate user input before closing.</p>
+  <cv-textfield
+    id="dialog8-text-field"
+    minlength="3"
+    maxlength="64"
+    placeholder="First name"
+    required
+  >
+  </cv-textfield>
+  <cv-button id="dialog8-primary-action-button" slot="primaryAction">
+    Confirm
+  </cv-button>
+  <cv-button slot="secondaryAction" dialogAction="close"> Cancel </cv-button>
+</cv-dialog>

package/stories/demos/dialog.component.js

@@ -0,0 +1,57 @@
+// Material Dialog example taken Material Components Catalog
+// https://github.com/material-components/material-web/blob/master/demos/dialog
+import dialogTemplate from './dialog.component.html?raw';
+
+export default ({}) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const buttons = document.body.querySelectorAll('cv-button[data-num]');
+
+      for (let i = 0; i < buttons.length; i++) {
+        const button = buttons[i];
+        const buttonNum = button.dataset.num;
+
+        const listenerFactory = (numButton) => {
+          return function () {
+            const dialog = document.body.querySelector('#dialog' + numButton);
+            dialog.open = true;
+          };
+        };
+
+        const listener = listenerFactory(buttonNum);
+
+        button.addEventListener('click', listener);
+      }
+
+      window.toggleActions.onclick = function () {
+        const dialog = document.body.querySelector('#dialog4');
+        const hideActionSpan = document.body.querySelector('#hideActionVal');
+
+        const hideAction = !dialog.hideActions;
+        dialog.hideActions = hideAction;
+        hideActionSpan.innerText = hideAction;
+      };
+
+      const dialog = document.querySelector('#dialog8');
+      const textField = document.querySelector('#dialog8-text-field');
+      const primaryButton = document.querySelector(
+        '#dialog8-primary-action-button'
+      );
+
+      primaryButton.addEventListener('click', () => {
+        // validate, possible asynchronous such as a server response
+        const isValid = textField.checkValidity();
+        if (isValid) {
+          dialog.close();
+          return;
+        }
+
+        textField.reportValidity();
+      });
+    },
+    { once: true }
+  );
+
+  return dialogTemplate;
+};

package/stories/demos/grid.content.html

@@ -0,0 +1,99 @@
+<style>
+  .demo-grid {
+    background: rgba(0, 0, 0, 0.2);
+    min-width: 360px;
+  }
+
+  .demo-grid--alignment {
+    max-width: 800px;
+  }
+
+  .demo-grid--cell-alignment {
+    min-height: 200px;
+  }
+
+  .demo-inner {
+    min-height: 200px;
+  }
+
+  .demo-cell {
+    background: rgba(0, 0, 0, 0.2);
+    height: 100px;
+  }
+
+  .demo-cell--alignment {
+    max-height: 50px;
+  }
+</style>
+<div>
+  <h3 class="mdc-typography--subtitle1">Columns</h3>
+  <div class="mdc-layout-grid demo-grid">
+    <div class="mdc-layout-grid__inner">
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6 demo-cell"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-cell"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 demo-cell"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 demo-cell"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-cell"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 demo-cell"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8 demo-cell"
+      ></div>
+    </div>
+  </div>
+  <h3 class="mdc-typography--subtitle1">Grid Left Alignment</h3>
+  <p class="mdc-typography--body2">
+    This requires a max-width on the top-level grid element.
+  </p>
+  <div
+    class="mdc-layout-grid mdc-layout-grid--align-left demo-grid demo-grid--alignment"
+  >
+    <div class="mdc-layout-grid__inner">
+      <div class="mdc-layout-grid__cell demo-cell"></div>
+      <div class="mdc-layout-grid__cell demo-cell"></div>
+      <div class="mdc-layout-grid__cell demo-cell"></div>
+    </div>
+  </div>
+  <h3 class="mdc-typography--subtitle1">Right Alignment</h3>
+  <p class="mdc-typography--body2">
+    This requires a max-width on the top-level grid element.
+  </p>
+  <div
+    class="mdc-layout-grid mdc-layout-grid--align-right demo-grid demo-grid--alignment"
+  >
+    <div class="mdc-layout-grid__inner">
+      <div class="mdc-layout-grid__cell demo-cell"></div>
+      <div class="mdc-layout-grid__cell demo-cell"></div>
+      <div class="mdc-layout-grid__cell demo-cell"></div>
+    </div>
+  </div>
+  <h3 class="mdc-typography--subtitle1">Cell Alignment</h3>
+  <p class="mdc-typography--body2">
+    Cell alignment requires a cell height smaller than the inner height of the
+    grid.
+  </p>
+  <div class="mdc-layout-grid demo-grid demo-grid--cell-alignment">
+    <div class="mdc-layout-grid__inner demo-inner">
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top demo-cell demo-cell--alignment"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle demo-cell demo-cell--alignment"
+      ></div>
+      <div
+        class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom demo-cell demo-cell--alignment"
+      ></div>
+    </div>
+  </div>
+</div>