sample built-in documentation for XD plugin

App.jsx

  render() {
    return (
      <panel>
        <div id="name-height">
          <input
            id="icon-search-input"
            autoFocus
            placeholder="icon name"
            uxp-quiet="true"
            type="search"
            onChange={this.onNameChange}
          />
          <input
            id="icon-size-input"
            uxp-quiet="true"
            type="number"
            value={this.state.size}
            onChange={this.onSizeChange}
          />
        </div>
        <label>
          <input
            type="checkbox"
            onChange={this.onShowNamesClick}
            checked={this.state.showNames}
          />
          show names
        </label>
        <IconButtons
          partialName={this.state.partialName}
          size={this.state.size}
          showNames={this.state.showNames}
        />
        <DisclosureH3 title="INSTRUCTIONS" initiallyOpen={false}>
          {() => (
            <Fragment>
              <h3>SEARCH</h3>
              <p>
                Type in the search field to find icons by name (at least two characters),
                For example, try searching for <b>arrow</b> to see all the arrow variants
                in various collections.
              </p>
              <p>
                When <i>show names</i> is off, you can hover over any icon to see its
                name.
              </p>
              <h3>PLACE</h3>
              <p>
                With the desired height set (the number field to the right of the search
                field), click on any of the displayed icon buttons to place the related
                icon at that size.
              </p>
              <p>
                (The icon's final size depends on its collection's overall design and the
                design of the icon itself, but it will generally be close to, if not
                exactly, the specified height. However, all the icons from a given
                collection should be mutually proportionate.)
              </p>
              <p>
                If you have a selection, the new icon will be placed to the right of the
                first item in the selection. This way, you can place a series of icons
                next to each other with a series of clicks.
              </p>
              <p>
                Otherwise (with nothing selected), new icons are placed at the upper left
                of the current artboard, 100% black fill, no stroke, or 100% black stroke,
                no fill, depending on the icon design.
              </p>
              <p>
                If there is no current artboard, the icon is placed at the origin point
                (0, 0) of the current document.
              </p>
              <h3>EDITING PLACED ICONS</h3>
              <p>
                However created, a new icon becomes the new (single) selection, and any of
                its component paths are fully editable. In many cases, the icon will be a
                single path, but in some cases, it will be a group of paths.
              </p>
              <p>
                Icons can be customized to your heart's content: change fill/stroke color,
                add drop shadows or blur, change stroke properties for a different look,
                etc.
              </p>
              <p>
                Be sure to turn off REPONSIVE RESIZE in the properties panel when scaling
                such an icon group, or some of the paths could be distorted.)
              </p>
              <h3>TIPS</h3>
              <p>Expand the plugin panel to view more icons per line.</p>
              <h3>ICON COLLECTIONS</h3>
              <p>
                All icon collections are licensed as free use, no attribution required, as
                far as we're aware at the time of release. (You can check licenses here,
                using the collection source links.)
              </p>
              <p>
                {iconsCollections.map((key, idx) => (
                  <Fragment key={key}>
                    <a href={iconsMetadata[key].repo}>{key.toUpperCase()} </a>
                    {idx < iconsCollections.length - 1 ? insulate('•') : ''}
                  </Fragment>
                ))}
              </p>
            </Fragment>
          )}
        </DisclosureH3>
        <p>
          Em Software ©2019. Our other
          <a href="http://emsoftware.com/xdplugins/"> fine plugins.</a>
        </p>
      </panel>
    )
  }
}