add documentation examples to components

Author: hapticdata

src/components/button.ts

@@ -24,6 +24,15 @@ export interface ButtonProperties extends UIProperties {
     icon: string;
 }
 
+/**
+ * A `<acc-button>` element.
+ * @example
+ * ```html
+ *
+ *  <acc-button label="My Button" icon="my-icon.png"></acc-button>
+ *  <acc-button label="My Button" disabled></acc-button>
+ * ```
+ */
 export class ButtonElement extends AbstractUIElement {
 
     /**

src/components/content.ts

@@ -36,6 +36,18 @@ const isFocusable = (el: any): el is { focus: ()=> void } =>
 const isInputWithCanvas = (c: any): c is { canvas: HTMLCanvasElement } =>
     typeof c.canvas === 'object' && typeof c.canvas.getContext === 'function';
 
+/**
+ * An `<acc-content>` element is intended as a container for the main content area.
+ * If using an AbstractInput such as `<acc-mouse-input>` or `<acc-pose-input>`
+ * the coordinate space will be mapped to this element and can optionally
+ * simplify display of the camera image.
+ *
+ * @example ```html
+ *
+ * <acc-content webcamOpacity="0.25" grayscale mounted></acc-content>
+ * ```
+ *
+ */
 export class ContentElement extends AbstractUIElement {
 
 

src/components/group.ts

@@ -54,6 +54,16 @@ const extractValue = (el:any):any => {
     return null;
 }
 
+/**
+ * A `<acc-group>` element. Make a group (typically within side-panel) of related
+ * controls. Provides proper headings and aria-labels and consistent focusing.
+ *
+ * @example ```html
+ *
+ * <acc-group label="My Group" shortcut="Shift G"></acc-group>
+ * <acc-group label="My Group" disabled></acc-group>
+ * ```
+ */
 export class GroupElement extends AbstractUIElement {
 
     /**

src/components/input-mode-select.ts

@@ -33,11 +33,17 @@ interface UIElements {
 }
 
 /**
- * <acc-input-mode-select>
- * Creates a UI element for selecting an appropriate input method,
- * bundles proper initialization, event bubbling, access to calibration
+ * An `<acc-input-mode-select>` element creates a UI element for selecting an input
+ * method. It bundles proper initialization, event bubbling, access to calibration
  * and messaging.
- * @extends AbstractSelectElement
+ *
+ * @example ```html
+ *
+ * <acc-input-mode-select>
+ *  <acc-mouse-input amplification="5"></acc-mouse-input>
+ *  <acc-pose-input amplification="2" part="nose" smoothing="0.5"></acc-pose-input>
+ * </acc-input-mode-select>
+ * ```
  */
 export class InputModeSelectElement extends AbstractSelectElement {
 

src/components/mouse-input.ts

@@ -32,6 +32,12 @@ enum MouseKeyboardInputMode {
 }
 
 
+/**
+ * A Mouse Input element binds mouse, keyboard and touch as a single method
+ * of translating a cursor position.
+ *
+ * @see InputModeSelectElement
+ */
 class MouseInputElement extends AbstractInputElement {
 
     @property({ type: String })

src/components/optgroup.ts

@@ -17,8 +17,9 @@ import { property } from './decorators';
 
 
 /**
- * <acc-optgroup> is an element to designate a group within an <acc-select>
- * @example
+ * `<acc-optgroup>` is an element to designate a group within an <acc-select>
+ * @example ```html
+ *
  * <acc-select label="Instruments">
  *  <acc-optgroup label="Strings">
  *      <acc-item label="guitar"></acc-item>
@@ -29,6 +30,7 @@ import { property } from './decorators';
  *      <acc-item label="tamborine"></acc-item>
  *  </acc-optgroup>
  * </acc-select>
+ * ```
  */
 export class OptgroupElement extends LitElement {
 

src/components/pose-input.ts

@@ -190,6 +190,17 @@ export class ACCPoseInputEvent extends ACCInputEvent {
 
 const _tmpContentDims: [number, number] = [NaN, NaN];
 
+/**
+ * `<acc-pose-input>` element easily adds PoseNet based tracking for controlling
+ * the cursor position on a webpage with a chosen body part of the user.
+ * For example with a couple lines of code, a user's nose can be used to control
+ * a webpage.
+ *
+ * @example ```html
+ *
+ * <acc-pose-input amplification="2" smoothing="0.5" part="nose"></acc-pose-input>
+ * ```
+ */
 export class PoseInputElement extends AbstractInputElement {
 
     @property({ type: String })

src/components/range.ts

@@ -42,6 +42,15 @@ export interface RangeProperties extends UIProperties {
     value: string;
 }
 
+/**
+ * `<acc-range>` element is a custom range / slider component that simplifies
+ * labelling.
+ *
+ * @example ```html
+ *
+ * <acc-range label="amplification" min="1" max="10" step="0.1" value="2"></acc-range>
+ * ```
+ */
 class RangeElement extends AbstractUIElement {
 
     @property({ type: String })

src/components/select.ts

@@ -42,6 +42,24 @@ const toOptionTemplate = (node: OptionItem) =>
 
 
 
+/**
+ * `<acc-select>` element is similar to a `<select>` element with built-in
+ * labelling and aria attributes.
+ *
+ * @example ```html
+ *
+ * <acc-select label="Instruments">
+ *  <acc-optgroup label="Strings">
+ *      <acc-item label="guitar"></acc-item>
+ *      <acc-item label="cello"></acc-item>
+ *  </acc-optgroup>
+ *  <acc-optgroup label="percussion">
+ *      <acc-item label="drums"></acc-item>
+ *      <acc-item label="tamborine"></acc-item>
+ *  </acc-optgroup>
+ * </acc-select>
+ * ```
+ */
 export class SelectElement extends AbstractSelectElement  {
 
 

src/components/side-panel.ts

@@ -36,8 +36,20 @@ interface PanelProperties extends UIProperties {
 
 
 /**
+ * `<acc-side-panel label="App Name">`
+ * The side panel element is a collapsable menu that houses UI elements. It
+ * simplifies tab management, heading structure and provides a "skip to content"
+ * link when navigated with keyboard.
+ *
+ * @example ```html
+ *
  * <acc-side-panel label="App Name">
- * The side panel element that houses UI elements.
+ *  <acc-group label="Group 1">
+ *      <acc-range label="Slider" value="5" max="10"></acc-range>
+ *      <acc-button label="Button"></acc-button>
+ *  </acc-group>
+ * </acc-side-panel>
+ * ```
  */
 export class SidePanel extends GroupElement {