Addon-docs/web-components: Add attributes to props table

addons/docs/src/frameworks/web-components/config.js

@@ -26,6 +26,9 @@ addParameters({
           tag => tag.name.toUpperCase() === tagName.toUpperCase()
         );
         const sections = {};
+        if (metaData.attributes) {
+          sections.attributes = mapData(metaData.attributes);
+        }
         if (metaData.properties) {
           sections.props = mapData(metaData.properties);
         }

examples/web-components-kitchen-sink/custom-elements.json

@@ -4,28 +4,45 @@
     {
       "name": "demo-wc-card",
       "description": "This is a container looking like a card with a back and front side you can switch",
-      "properties": [
+      "jsDoc": "/**\n * This is a container looking like a card with a back and front side you can switch\n *\n * @slot - This is an unnamed slot (the default slot)\n * @fires side-changed - Fires whenever it switches between front/back\n * @cssprop --demo-wc-card-header-font-size - Header font size\n * @cssprop --demo-wc-card-front-color - Font color for front\n * @cssprop --demo-wc-card-back-color - Font color for back\n */",
+      "attributes": [
+        {
+          "name": "back-side",
+          "description": "Indicates that the back of the card is shown",
+          "jsDoc": "/**\n     * Indicates that the back of the card is shown\n     */",
+          "type": "boolean"
+        },
         {
           "name": "header",
-          "type": "String",
-          "attribute": "header",
-          "description": "Shown at the top of the card",
-          "default": "Your Message"
+          "description": "Header message",
+          "jsDoc": "/**\n     * Header message\n     */",
+          "type": "string"
         },
         {
           "name": "rows",
-          "type": "Array",
-          "attribute": "rows",
-          "description": "Tabular data shown on the back of the card",
-          "default": []
-        },
+          "description": "Data rows",
+          "jsDoc": "/**\n     * Data rows\n     */",
+          "type": "never[]"
+        }
+      ],
+      "properties": [
         {
           "name": "backSide",
-          "type": "Boolean",
-          "attribute": "back-side",
-          "reflect": true,
           "description": "Indicates that the back of the card is shown",
-          "default": false
+          "jsDoc": "/**\n     * Indicates that the back of the card is shown\n     */",
+          "type": "boolean"
+        },
+        {
+          "name": "header",
+          "description": "Header message",
+          "jsDoc": "/**\n     * Header message\n     */",
+          "type": "string"
+        },
+        {
+          "name": "rows",
+          "description": "Data rows",
+          "jsDoc": "/**\n     * Data rows\n     */",
+          "type": "never[]"
         }
       ],
       "events": [
@@ -37,26 +54,23 @@
       "slots": [
         {
           "name": "",
-          "description": "Content inside the card gets displayed on the front page"
+          "description": "This is an unnamed slot (the default slot)"
         }
       ],
       "cssProperties": [
         {
-          "name": "--demo-wc-card-header-font-size",
-          "description": "Header Font size",
-          "type": "Length"
+          "name": "--demo-wc-card-back-color",
+          "description": "Font color for back"
         },
         {
           "name": "--demo-wc-card-front-color",
-          "description": "Font color for the front",
-          "type": "Color"
+          "description": "Font color for front"
         },
         {
-          "name": "--demo-wc-card-back-color",
-          "description": "Font color for the back",
-          "type": "Color"
+          "name": "--demo-wc-card-header-font-size",
+          "description": "Header font size"
         }
       ]
     }
   ]
-}
+}

examples/web-components-kitchen-sink/custom-elements.md

@@ -0,0 +1,32 @@
+# demo-wc-card
+
+This is a container looking like a card with a back and front side you can switch
+
+## Properties
+
+| Property   | Attribute   | Type         | Default        | Description                        |
+|------------|-------------|--------------|----------------|------------------------------------|
+| `backSide` | `back-side` | `boolean`    | false          |                                    |
+| `header`   | `header`    | `string`     | "Your Message" |                                    |
+| `rows`     | `rows`      | `never[]`    |                |                                    |
+| `side`     |             | `"A" \| "B"` |                | A card setter can have side A or B |
+
+## Events
+
+| Event          | Description                                   |
+|----------------|-----------------------------------------------|
+| `side-changed` | Fires whenever it switches between front/back |
+
+## CSS Custom Properties
+
+| Property                          | Description          |
+|-----------------------------------|----------------------|
+| `--demo-wc-card-back-color`       | Font color for back  |
+| `--demo-wc-card-front-color`      | Font color for front |
+| `--demo-wc-card-header-font-size` | Header font size     |
+
+## Slots
+
+| Name | Description                                |
+|------|--------------------------------------------|
+|      | This is an unnamed slot (the default slot) |

examples/web-components-kitchen-sink/src/DemoWcCard.js

@@ -1,43 +1,50 @@
-/* eslint-disable no-underscore-dangle, import/extensions */
-import { Event } from 'global';
+/* eslint-disable import/extensions */
+import { CustomEvent } from 'global';
 import { LitElement, html } from 'lit-element';
 import { demoWcCardStyle } from './demoWcCardStyle.css.js';
 
+/**
+ * This is a container looking like a card with a back and front side you can switch
+ *
+ * @slot - This is an unnamed slot (the default slot)
+ * @fires side-changed - Fires whenever it switches between front/back
+ * @cssprop --demo-wc-card-header-font-size - Header font size
+ * @cssprop --demo-wc-card-front-color - Font color for front
+ * @cssprop --demo-wc-card-back-color - Font color for back
+ */
 export class DemoWcCard extends LitElement {
   static get properties() {
     return {
-      backSide: { type: Boolean, reflect: true, attribute: 'back-side' },
+      backSide: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'back-side',
+      },
       header: { type: String },
       rows: { type: Object },
     };
   }
 
-  /**
-   * A card setter can have side A or B
-   *
-   * @param {("A"|"B")} value
-   */
-  set side(value) {
-    this.__side = value;
-    this.dispatchEvent(new Event('side-changed'));
-    this.requestUpdate();
-  }
-
-  /**
-   * @returns {("A"|"B")}
-   */
-  get side() {
-    return this.__side;
-  }
-
   static get styles() {
     return demoWcCardStyle;
   }
 
   constructor() {
     super();
+
+    /**
+     * Indicates that the back of the card is shown
+     */
     this.backSide = false;
+
+    /**
+     * Header message
+     */
     this.header = 'Your Message';
+
+    /**
+     * Data rows
+     */
     this.rows = [];
   }
 
@@ -85,4 +92,10 @@ export class DemoWcCard extends LitElement {
       </div>
     `;
   }
+
+  updated(changedProperties) {
+    if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) {
+      this.dispatchEvent(new CustomEvent('side-changed'));
+    }
+  }
 }

examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js

@@ -88,7 +88,7 @@ export const demoWcCardStyle = css`
     background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);
     color: var(--demo-wc-card-back-color, #fff);
     text-align: center;
-    transform: rotateY(180deg);
+    transform: rotateY(180deg) translate3d(0px, 0, 1px);
   }
 
   #back .note {