Merge branch 'master' into mpopov/update-bootstrap-theme

README.md

@@ -2,18 +2,47 @@
 
 [![Node.js CI](https://github.com/IgniteUI/igniteui-webcomponents/workflows/Node.js%20CI/badge.svg)](https://github.com/IgniteUI/igniteui-webcomponents/actions/workflows/node.js.yml)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-webcomponents/badge.svg)](https://coveralls.io/github/IgniteUI/igniteui-webcomponents)
+[![npm version](https://badge.fury.io/js/igniteui-webcomponents.svg)](https://badge.fury.io/js/igniteui-webcomponents)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
 [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
 
 ## Usage
 
-TODO:
+In order to use the Ignite UI Web Components in your application you should install the `igniteui-webcomponents` package:
 
+```
+npm install igniteui-webcomponents
+```
+
+Next you will need to import the components that you want to use. You could import one or more components using the `defineComponents` function like this:
+
+```ts
+import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcAvatarComponent, IgcBadgeComponent);
+```
+
+You could also import all of the components using the `defineAllComponents` function:
+
+```ts
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+```
+
+Please note that importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.
+
+After the components are imported you could use them in your html:
+
+```html
+<igc-avatar initials="AZ"></igc-avatar>
+<igc-badge></igc-badge>
+```
 
 ## Setup
 
-From the root folder run:
+In order to run the repository locally from the root folder run:
 
 ```
 npm install

scripts/_package.json

@@ -10,10 +10,10 @@
   "module": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
-    "./components/calendar/days-view/days-view.js",
-    "./components/calendar/months-view/months-view.js",
-    "./components/calendar/years-view/years-view.js",
-    "./components/calendar/icon/icon.js",
+    "components/calendar/days-view/days-view.js",
+    "components/calendar/months-view/months-view.js",
+    "components/calendar/years-view/years-view.js",
+    "components/icon/icon.js",
     "*.css"
   ],
   "repository": {

src/components/button/button.material.scss

@@ -68,8 +68,12 @@ span[part='suffix'] {
 }
 
 .flat {
-    background: transparent;
     color: color(secondary, 500);
+    background: transparent;
+
+    &.disabled {
+        background: transparent;
+    }
 
     &::before {
         opacity: 0;

src/components/nav-drawer/nav-drawer-item.ts

@@ -1,6 +1,5 @@
 import { html, LitElement } from 'lit';
 import { property, queryAssignedNodes, state } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
 import { partNameMap } from '../common/util';
 import { styles } from './nav-drawer-item.material.css';
 
@@ -53,11 +52,7 @@ export default class IgcNavDrawerItemComponent extends LitElement {
 
   protected render() {
     return html`
-      <div
-        part="${partNameMap(this.resolvePartNames('base'))}"
-        .disabled="${this.disabled}"
-        .active="${live(this.active)}"
-      >
+      <div part="${partNameMap(this.resolvePartNames('base'))}">
         <span part="icon">
           <slot name="icon"></slot>
         </span>