From c5f6adf030b48540992c62bcb13d9c8bcd6ef322 Mon Sep 17 00:00:00 2001 From: stefan505 Date: Fri, 21 Jul 2023 07:34:35 +0000 Subject: [PATCH] Updated docs --- README.md | 517 ++++++++++++++++++++++--------------------- package-lock.json | 4 +- package.json | 2 +- src/select/README.md | 4 +- src/toast/README.md | 8 +- 5 files changed, 268 insertions(+), 267 deletions(-) diff --git a/README.md b/README.md index df1fea688..a4c649e9f 100644 --- a/README.md +++ b/README.md @@ -1,185 +1,185 @@ - -
- -

- Logo -

- -

Omni Components

-

@capitec/omni-components

-

Modern UI component library for mobile and web

- -
- -

- Downloads per week - NPM Version - GitHub Build - MIT License -

-

- Docs -

- -
- -

- [Introduction] - [Usage] - [API Reference] - [Contributors] - [License] -

- -
- ---- - -
- -

🚩 View our interactive documentation for more info on component usage and live previews.

- -
- + +
+ +

+ Logo +

+ +

Omni Components

+

@capitec/omni-components

+

Modern UI component library for mobile and web

+ +
+ +

+ Downloads per week + NPM Version + GitHub Build + MIT License +

+

+ Docs +

+ +
+ +

+ [Introduction] + [Usage] + [API Reference] + [Contributors] + [License] +

+ +
+ +--- + +
+ +

🚩 View our interactive documentation for more info on component usage and live previews.

+ +
+ [](#introduction) -## Introduction - -Omni Components is a collection UI components for mobile and web that enable you to build omni-channel user experience that look great on every size of screen. - -Core features of the library include: -- **Framework Agnostic** - Components are delivered as standard HTML [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), that can be used in VanillaJS or within any framework, e.g. Lit, React, Vue, Angular, etc. -- **Theming** - Components can be styled globally and individually using CSS properties. -- **Responsive** - The components adapt responsively to the device that they render on to provide contextual user experiences. -- **Mobile Optimized** - We develop for mobile first, and scale up to larger screen sizes from there. -- **Lightweight** - The library is small, tree-shakes well, and comes with minimal dependencies, minimizing bloat to your project. - -
- +## Introduction + +Omni Components is a collection UI components for mobile and web that enable you to build omni-channel user experience that look great on every size of screen. + +Core features of the library include: +- **Framework Agnostic** - Components are delivered as standard HTML [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), that can be used in VanillaJS or within any framework, e.g. Lit, React, Vue, Angular, etc. +- **Theming** - Components can be styled globally and individually using CSS properties. +- **Responsive** - The components adapt responsively to the device that they render on to provide contextual user experiences. +- **Mobile Optimized** - We develop for mobile first, and scale up to larger screen sizes from there. +- **Lightweight** - The library is small, tree-shakes well, and comes with minimal dependencies, minimizing bloat to your project. + +
+ [](#usage) -## Usage - -1️⃣   Install Omni Components in your project. - -```bash -npm install '@capitec/omni-components' -``` - -2️⃣   Import the components you require. See [`INSTALLATION.md`](./INSTALLATION.md) for more detail. - -```js -// JS import -import '@capitec/omni-components/button'; - -// or HTML import - -``` - -3️⃣   Use the component tag in your web page. -```html - -``` - -### πŸ’‘ Example - - -This example shows how to import and use a few common components. Omni Components can be combined with 3rd party libraries, e.g. here we embed a [Google Material Icons](https://fonts.google.com/icons) as a slotted element within a ````. - -[CodePen](https://codepen.io/capitec-oss/pen/eYrLaGZ) - -```html - - - - - - - Omni Components Demo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -
- +## Usage + +1️⃣   Install Omni Components in your project. + +```bash +npm install '@capitec/omni-components' +``` + +2️⃣   Import the components you require. See [`INSTALLATION.md`](./INSTALLATION.md) for more detail. + +```js +// JS import +import '@capitec/omni-components/button'; + +// or HTML import + +``` + +3️⃣   Use the component tag in your web page. +```html + +``` + +### πŸ’‘ Example + + +This example shows how to import and use a few common components. Omni Components can be combined with 3rd party libraries, e.g. here we embed a [Google Material Icons](https://fonts.google.com/icons) as a slotted element within a ````. + +[CodePen](https://codepen.io/capitec-oss/pen/eYrLaGZ) + +```html + + + + + + + Omni Components Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +
+ [](#api-reference) -## API Reference - +## API Reference +
Tag NameDescription
@@ -555,7 +555,7 @@ Search input control. -Control to get or set a value within a list of options. +Control to get / set a value within a list of options.
@@ -571,7 +571,7 @@ Control to switch a value on or off. -Control that can be used to display slotted content for use within an Tab Group component. +Control that can be used to display slotted content, for use within an Tab Group component.
@@ -587,7 +587,7 @@ Component that displays content in tabs. -Control that can be used to display custom slotted content for use within Tab Group component with associated Tab component. +Control that can be used to display custom slotted content, for use within Tab Group component with associated Tab component.
@@ -615,92 +615,93 @@ A toast container that animates in and stacks toast elements.
- -
- + + +
+ [](#contributors) -## Contributors - -Made possible by these fantastic people. πŸ’– - -See the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved. - - - - - - - - - - - -
- - chromaticWaster -
- chromaticWaster - - 		- - BOTLANNER -
- BOTLANNER - - 		- - stefan505 -
- stefan505 - - 		- - jn42lm1 -
- jn42lm1 - - 		- - Makhubedu -
- Makhubedu - - 		- - capitec-oss -
- capitec-oss - -
- - -
- +## Contributors + +Made possible by these fantastic people. πŸ’– + +See the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved. + + + + + + + + + + + +
+ + BOTLANNER +
+ BOTLANNER + + 		+ + chromaticWaster +
+ chromaticWaster + + 		+ + stefan505 +
+ stefan505 + + 		+ + jn42lm1 +
+ jn42lm1 + + 		+ + capitec-oss +
+ capitec-oss + + 		+ + Makhubedu +
+ Makhubedu + +
+ + +
+ [](#license) -## License - -Licensed under [MIT](https://opensource.org/licenses/MIT). - -
-
-
-
-
-
-

- - - Capitec Logo - -

-

We are hiring 🀝 Join us! πŸ‡ΏπŸ‡¦

-

- https://www.capitecbank.co.za/about-us/careers -

- -
+## License + +Licensed under [MIT](https://opensource.org/licenses/MIT). + +
+
+
+
+
+
+

+ + + Capitec Logo + +

+

We are hiring 🀝 Join us! πŸ‡ΏπŸ‡¦

+

+ https://www.capitecbank.co.za/about-us/careers +

+ +

\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 27fa6c161..fff6b7b5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@capitec/omni-components", - "version": "0.8.1", + "version": "0.8.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@capitec/omni-components", - "version": "0.8.1", + "version": "0.8.2", "license": "MIT", "dependencies": { "lit": "^2.3.1", diff --git a/package.json b/package.json index 6bcc3e7b1..a7f668148 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@capitec/omni-components", - "version": "0.8.1", + "version": "0.8.2", "type": "module", "description": "Modern UI component library for mobile and web", "scripts": { diff --git a/src/select/README.md b/src/select/README.md index 2ae3be752..5a80515c8 100644 --- a/src/select/README.md +++ b/src/select/README.md @@ -36,12 +36,12 @@ Control to get / set a value within a list of options. | `items` | `items` | | `string[] \| Record[] \| Promise \| ((filterValue?: string \| undefined) => SelectItems) \| undefined` | | Selectable items of the select component. | | `label` | `label` | | `string \| undefined` | | Text label. | | `lang` | | | `string` | | | -| `override` | `override` | | | | Used to set the base direction of text for display | +| `override` | `override` | | | | Value entered into the form component. | | `renderItem` | `renderItem` | | `RenderFunction \| undefined` | | Render function for each item. | | `renderSelection` | `renderSelection` | | `RenderFunction \| undefined` | | Render function for selected item. | | `searchable` | `searchable` | | `boolean` | false | Toggles the ability to search the items of the select of the component. | | `styles` | | readonly | `CSSResultGroup[]` | | | -| `value` | `value` | | `string \| number \| Record \| undefined` | null | Value entered into the form component. | +| `value` | `value` | | `string \| Record \| undefined` | null | Value entered into the form component. | ## Methods diff --git a/src/toast/README.md b/src/toast/README.md index 24260c766..8c1a8bc5f 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -140,10 +140,10 @@ A toast container that animates in and stacks toast elements. ## Methods -| Method | Type | Description | -|----------------|--------------------------------------------------|---------------------------------------------| -| `showInstance` | `(instance: Toast, options?: ShowToastOptions \| undefined): Toast` | Push a toast instance onto the toast stack. | -| `showToast` | `(init: ShowToastInit): Toast` | Push a toast message onto the toast stack. | +| Method | Type | Description | +|----------------|--------------------------------------------------|--------------------------------------------------| +| `showInstance` | `(instance: Toast, options?: ShowToastOptions \| undefined): Toast` | Push an existing toast instance onto the toast stack. | +| `showToast` | `(init: ShowToastInit): Toast` | Push a toast message onto the toast stack. | ## Events