collector-portal-framework
v20.7.18
Published
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/collector-bank/collector-portal-framework/CI?logo=GitHub) ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/collector-bank/collector-portal-framework/CD?label=de
Downloads
57
Keywords
Readme
Collector Portal Framework
A collection of UI components and helper functions used in a couple of our internal and external web applications at Collector Bank. Documentation and an interactive test area can be found here.
This package contains
Technologies used
- React
- TypeScript
- ~~Glamorous~~ emotion
Install
$ npm install --save collector-portal-framework
How to use
import React from 'react';
import ReactDOM from 'react-dom';
import { CollectorPortalFramework } from 'collector-portal-framework';
import { YourApp } from './App';
ReactDOM.render(
<CollectorPortalFramework>
<YourApp />
</CollectorPortalFramework>,
document.getElementById('root')
);
Available components
You can see a demo of the UI components here. If you want your own local copy you can clone this repo and do npm install
followed by npm start
to start a local instance of Storybook.
Generic components
| Component | Source | | ----------------------------------------------------------------- | ---------------------------------------------------------------- | | Alert | Source | | Amount selector | Source | | Badge | Source | | Button | Source | | Button group | Source | | Card | Source | | Checkbox | Source | | Checkbox group | Source | | Date picker | Source | | Date picker group | Source | | Input | Source | | Paginator | Source | | Radio button | Source | | Radio button group | Source | | Select | Source | | Slider | Source | | Spinner | Source | | Tags Input | Source |
Typographic components
| Component | Source | | --------- | -------------------------------------------- | | H1 | Source | | H2 | Source | | H3 | Source | | Text | Source | | TextLink | Source |
"Portal specific" components
| Component | Source | | ------------- | -------------------------------------------- | | Togglable | Source | | Fieldset | Source | | Logo | Source | | MainContainer | Source | | MainMenu | Source | | Modal | Source | | PageHeader | Source | | Tabs | Source | | ValueList | Source |