@canopyinc/canopy-ui v0.1.11

CanopyUI

CanopyUI is a library of WebComponents you can use regardless of your tech stack. See the usage guide below.

Usage

# install
yarn add @canopyinc/ui

# import then bundle with your other JS
import "@canopyinc/ui"

Then once the JS is loaded you can start writing HTML with CanopyUI's web components.

<cui-account-overview
  amount: 349392,
  credit_limit: 800000,
  available_credit: 450608,
  pending_charges: 0,
  promo_exp: "10/15/2021"
>
</cui-account-overview>

Styling

To theme CanopyUI components with a custom CSS property, pass a supported variable to the selector on the target web component. All variables are prefixed with --cui-.

<style>
  cui-account-overview {
    --cui-color-primary: darkblue;
  }
</style>
<cui-account-overview
  amount="349392"
  credit-limit="800000"
  available-credit="450608"
  pending-charges="0"
  promo-exp="10/15/2021"
>
</cui-account-overview>

Local Setup

# install package dependencies
yarn install

# compile typescript
yarn build

# run tests
yarn test

# run storybook server
yarn storybook

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

Available Components

As of v0.1.0:

• Account Overview
• Amortization Schedule
• Payments
• External Fields

Sloted for v0.1.1:

• Product Details
• Transaction History
• Payment History
• Statements
• Customer Details