@canopyinc/ui
v0.3.1
Published
A UI web-components library for building on the Canopy API
Downloads
30
Maintainers
andreivn
ioan.sava
jglien
remus-canopy
canopy-ci
rubycanopy
edcanopyserv
vlad-canopy
redsorbet
hahnbrady
ps2_controller
kylefoundry
kpamaran
xer0xKeywords
Readme
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.
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 [email protected]:canopy1/canopy-ui.git
# install package dependencies
yarn install
# compile
yarn build
# run storybook server
yarn storybookStorybook will reload any changes you make. You are able to change background colors in Storybook for better contrast.