zh-releases

A Web Component for embedding design systems releases on any page.

Demo | Further reading

Examples

General usage example:

<zh-releases></zh-releases>

<script>
  const zhAPI = {
    key: "zhat_VuWPCQcW78XRw4ufLt3FTdJ8AIyGz5ff-q6jGLcG",
    client: "zhci_5rSLVtpSHA28sk9Li2TpGRIVtSejhfIIRbRBkBgC",
    styleguide: 114183,
  };
</script>

<script type="module" src="zh-releases.js"></script>

Example using a custom template:

<template id="custom-template">
  <ol>
    <li data-key="release">
      <a data-key="release_url"><span data-key="name"></span></a>
    </li>
  </ol>
</template>

<zh-releases template="custom-template"></zh-releases>

<script>
  const zhAPI = {
    key: "zhat_VuWPCQcW78XRw4ufLt3FTdJ8AIyGz5ff-q6jGLcG",
    client: "zhci_5rSLVtpSHA28sk9Li2TpGRIVtSejhfIIRbRBkBgC",
    styleguide: 114183,
  };
</script>

<script type="module" src="zh-releases.js"></script>

Features

This Web Component allows you to:

• Render a full history of your design systems releases
• Link to versions of your styleguide within the release history
• Customise the look of the releases with a custom template

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @zeroheight/zh-releases
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

After choosing one of these options you'll need to attain an API Key, Access Token and the ID of your styleguide from your zeroheight account. For more information check out our resources guide. These credentials can be applied to the component as a global object variable like so:

const zhAPI = {
  key: "zhat_VuWPCQcW78XRw4ufLt3FTdJ8AIyGz5ff-q6jGLcG",
  client: "zhci_5rSLVtpSHA28sk9Li2TpGRIVtSejhfIIRbRBkBgC",
  styleguide: 114183,
};

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script>
  const zhAPI = {
    key: "zhat_VuWPCQcW78XRw4ufLt3FTdJ8AIyGz5ff-q6jGLcG",
    client: "zhci_5rSLVtpSHA28sk9Li2TpGRIVtSejhfIIRbRBkBgC",
    styleguide: 114183,
  };
</script>

<script type="module" src="zh-releases.js"></script>

Credit

With thanks to the following people:

• Zach Leatherman for inspiring this Web Component repo template