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

{
  "version": "experimental",
  "tags": [
    {
      "name": "demo-wc-card",
      "path": "./demo-wc-card.js",
      "description": "This is a container looking like a card with a back and front side you can switch",
      "attributes": [
        {
          "name": "back-side",
          "description": "Indicates that the back of the card is shown",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "header",
          "description": "Header message",
          "type": "string",
          "default": "\"Your Message\""
        },
        {
          "name": "rows",
          "description": "Data rows",
          "type": "object",
          "default": "[]"
        }
      ],
      "properties": [
        {
          "name": "backSide",
          "attribute": "back-side",
          "description": "Indicates that the back of the card is shown",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "header",
          "attribute": "header",
          "description": "Header message",
          "type": "string",
          "default": "\"Your Message\""
        },
        {
          "name": "rows",
          "attribute": "rows",
          "description": "Data rows",
          "type": "object",
          "default": "[]"
        }
      ],
      "events": [
        {
          "name": "side-changed",
          "description": "Fires whenever it switches between front/back"
        }
      ],
      "methods": [
        {
          "name": "testMethod",
          "description": "Some web component frameworks like Stencil generate extra docs for methods. These are also displayed in the ArgsTable."
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "This is an unnamed slot (the default slot)"
        }
      ],
      "cssProperties": [
        {
          "name": "--demo-wc-card-header-font-size",
          "description": "Header font size"
        },
        {
          "name": "--demo-wc-card-front-color",
          "description": "Font color for front"
        },
        {
          "name": "--demo-wc-card-back-color",
          "description": "Font color for back"
        }
      ],
      "cssParts": [
        {
          "name": "front",
          "description": "Front of the card"
        },
        {
          "name": "back",
          "description": "Back of the card"
        }
      ]
    }
  ]
}