@canopyinc/ui NPM

CanopyUI

CanopyUI is a library of WebComponents you can use regardless of your tech stack. Our public Storybook preview is hosted on Github Pages at https://canopy1.github.io/canopy-ui/. You can walk through our Storybook to see what properties are supported and experiment with dynamic properties yourself.

CanopyUI

Usage

You can load the JavaScript directly into the browser.

Browser Setup

<!-- Load JavaScript for CanopyUI -->
<body>
  ...
  <script src="https://unpkg.com/@canopyinc/ui/build/browser.min.js"></script>
</body>

Or include it via a module bundler such as Webpack or Rollup.

Node Setup

# with npm
npm install @canopyinc/ui --save

# or yarn
yarn add @canopyinc/ui

// index.js (or some entry point in your codebase)

import "@canopyinc/ui";

You will need to include the default CSS theme for CanopyUI as well.

CSS Setup

<!-- Load default CSS for CanopyUI -->
<head>
  ...
  <link href="https://unpkg.com/@canopyinc/ui/public/variables.css" rel="stylesheet" />
</head>

Start Writing CanopyUI

Once the JS is loaded you can start writing CanopyUI web components.

<div id="container"></div>

<script>
  const el = document.createElement("cui-account-overview");
  const accountDetails = {
    total_balance_cents: 349391,
    credit_limit_cents: 800000,
    available_credit_cents: 450608,
    pending_charges_cents: 0,
    promo_exclusive_end: "10/15/2021",
  };
  el.setAttribute("details", JSON.stringify(accountDetails));
  document.getElementById("container").appendChild(el);
</script>

Since CanopyUI is built from the WebComponents set of standards you may also write HTML markup directly.

<!-- NOTE: All properties should be passed as strings (including objects and arrays.) -->
<cui-account-overview details="..."></cui-account-overview>

Components

Available Components

Component	Status	Doc
`<cui-account-overview>`	v0.3.0	link
`<cui-am-schedule>`	v0.3.0	link
`<cui-external-fields>`	v0.3.0	link
`<cui-payment>`	v0.3.0	link
`<cui-statements>`	v0.3.0	link
`<cui-customer-details>`	TBD
`<cui-payment-history>`	TBD
`<cui-product-details>`	TBD
`<cui-transaction-history>`	TBD

Styling

To theme CanopyUI components with a custom CSS property, pass a supported custom property to the :root { ... } CSS selector. For more granularity per component you can also target the name of the component with a CSS selector directly such as cui-account-overview { ... }.

Refer to the Styling doc for a list of supported CSS properties.

<style>
  :root {
    --cui-color-primary: darkblue;
  }
</style>

<cui-account-overview details="..."></cui-account-overview>

Local Development

# download the repo
git clone git@github.com:canopy1/canopy-ui.git

# install package dependencies
yarn install

# compile
yarn build

# run storybook server
yarn storybook

Storybook will reload any changes you make. You are able to change background colors in Storybook for better contrast.

lit luxon ts-lit-plugin

@everything-registry/sub-chunk-154 @infinitebrahmanuniverse/nolb-_can @zalastax/nolb-_can

3 years ago

3 years ago

3 years ago

3 years ago