chore: align README for non-prefixed packages (#2994)

vaadin · Nov 9, 2021 · ad4537e · ad4537e
1 parent affccad
commit ad4537e
Show file tree

Hide file tree

Showing 67 changed files with 1,115 additions and 916 deletions.
diff --git a/packages/accordion/README.md b/packages/accordion/README.md
@@ -1,13 +1,10 @@
-# &lt;vaadin-accordion&gt;
+# @vaadin/accordion
 
-[&lt;vaadin-accordion&gt;](https://vaadin.com/components/vaadin-accordion) is a Web Component implementing the vertically stacked set of expandable panels, part of the [Vaadin components](https://vaadin.com/components).
+A web component for displaying a vertically stacked set of expandable panels.
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-accordion/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-accordion/html-api)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/accordion)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/accordion)](https://www.npmjs.com/package/@vaadin/accordion)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-accordion)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -23,41 +20,44 @@
 </vaadin-accordion>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-accordion/master/screenshot.png" alt="Screenshot of vaadin-accordion" width="900">](https://vaadin.com/components/vaadin-accordion)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/accordion/screenshot.png" alt="Screenshot of vaadin-accordion" width="900">](https://vaadin.com/docs/latest/ds/components/accordion)
 
 ## Installation
 
-Install `vaadin-accordion`:
+Install the component:
 
 ```sh
-npm i @vaadin/accordion --save
+npm i @vaadin/accordion
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/accordion/vaadin-accordion.js';
+import '@vaadin/accordion';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/accordion/vaadin-accordion.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The component with the Lumo theme:
-
-  `theme/lumo/vaadin-accordion.js`
+```js
+import '@vaadin/accordion/theme/material/vaadin-accordion.js';
+```
 
-- The component with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-accordion.js`
+```js
+import '@vaadin/accordion/theme/lumo/vaadin-accordion.js';
+```
 
-- Alias for `theme/lumo/vaadin-accordion.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-accordion.js`
+```js
+import '@vaadin/accordion/src/vaadin-accordion.js';
+```
 
 ## Contributing
 
@@ -67,4 +67,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
diff --git a/packages/app-layout/README.md b/packages/app-layout/README.md
@@ -1,13 +1,10 @@
-# &lt;vaadin-app-layout&gt;
+# @vaadin/app-layout
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-app-layout/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-app-layout/html-api)
+A web component for building common application layouts.
 
-[&lt;vaadin-app-layout&gt;](https://vaadin.com/components/vaadin-app-layout) is a Web Component providing a quick and easy way to get a common application layout structure done, part of the [Vaadin components](https://vaadin.com/components).
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/app-layout)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/app-layout)](https://www.npmjs.com/package/@vaadin/app-layout)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -32,47 +29,50 @@
 </vaadin-app-layout>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-app-layout/master/screenshot.png" width="900" alt="Screenshot of vaadin-app-layout">](https://vaadin.com/components/vaadin-app-layout)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/app-layout/screenshot.png" width="900" alt="Screenshot of vaadin-app-layout">](https://vaadin.com/docs/latest/ds/components/app-layout)
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-app-layout/master/screenshot-mobile.png" width="350" alt="Screenshot of vaadin-app-layout on mobile">](https://vaadin.com/components/vaadin-app-layout)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/app-layout/screenshot-mobile.png" width="350" alt="Screenshot of vaadin-app-layout on mobile">](https://vaadin.com/docs/latest/ds/components/app-layout)
 
 ## Installation
 
-Install `vaadin-app-layout`:
+Install the component:
 
 ```sh
-npm i @vaadin/app-layout --save
+npm i @vaadin/app-layout
 ```
 
-Once installed, import it in your application:
+Once installed, import the components in your application:
 
 ```js
-import '@vaadin/app-layout/vaadin-app-layout.js';
+import '@vaadin/app-layout';
 import '@vaadin/app-layout/vaadin-drawer-toggle.js';
 ```
 
-## Getting Started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/app-layout/vaadin-app-layout.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the components from the `theme/material` folder:
 
-## Entry points
-
-- The components with the Lumo theme:
-
-  `theme/lumo/vaadin-app-layout.js`
-  `theme/lumo/vaadin-drawer-toggle.js`
+```js
+import '@vaadin/app-layout/theme/material/vaadin-app-layout.js';
+import '@vaadin/app-layout/theme/material/vaadin-drawer-toggle.js';
+```
 
-- The components with the Material theme:
+You can also import the Lumo version of the components explicitly:
 
-  `theme/material/vaadin-app-layout.js`
-  `theme/material/vaadin-drawer-toggle.js`
+```js
+import '@vaadin/app-layout/theme/lumo/vaadin-app-layout.js';
+import '@vaadin/app-layout/theme/lumo/vaadin-drawer-toggle.js';
+```
 
-- Aliases for `theme/lumo/vaadin-app-layout.js` `theme/lumo/vaadin-drawer-toggle.js`
+Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:
 
-  `vaadin-app-layout.js`
-  `vaadin-drawer-toggle.js`
+```js
+import '@vaadin/app-layout/src/vaadin-app-layout.js';
+import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
+```
 
 ## Contributing
 
@@ -82,4 +82,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
diff --git a/packages/avatar-group/README.md b/packages/avatar-group/README.md
@@ -1,13 +1,10 @@
-# &lt;vaadin-avatar&gt;
+# @vaadin/avatar-group
 
-[&lt;vaadin-avatar-group&gt;](https://vaadin.com/components/vaadin-avatar) is a Web Component providing avatar in groups displaying functionality.
+A web component for grouping multiple [`<vaadin-avatar>`](https://www.npmjs.com/package/@vaadin/avatar-group) components together.
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-avatar/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-avatar/html-api)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/avatar/#avatar-group)
 
-[![npm version](https://badgen.net/npm/v/@vaadin/avatar-group)](https://www.npmjs.com/package/@vaadin/avatar)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-avatar)
+[![npm version](https://badgen.net/npm/v/@vaadin/avatar-group)](https://www.npmjs.com/package/@vaadin/avatar-group)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -22,41 +19,44 @@
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar-group/screenshot.png" width="200" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/components/vaadin-avatar)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar-group/screenshot.png" width="108" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/docs/latest/ds/components/avatar/#avatar-group)
 
 ## Installation
 
-Install `vaadin-avatar-group`:
+Install the component:
 
 ```sh
-npm i @vaadin/avatar-group --save
+npm i @vaadin/avatar-group
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/avatar-group/vaadin-avatar-group.js';
+import '@vaadin/avatar-group';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/avatar-group/vaadin-avatar-group.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The component with the Lumo theme:
-
-  `theme/lumo/vaadin-avatar-group.js`
+```js
+import '@vaadin/avatar-group/theme/material/vaadin-avatar-group.js';
+```
 
-- The component with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-avatar-group.js`
+```js
+import '@vaadin/avatar-group/theme/lumo/vaadin-avatar-group.js';
+```
 
-- Alias for `theme/lumo/vaadin-avatar-group.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-avatar-group.js`
+```js
+import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
+```
 
 ## Contributing
 
@@ -66,4 +66,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
diff --git a/packages/avatar/README.md b/packages/avatar/README.md
@@ -1,13 +1,10 @@
-# &lt;vaadin-avatar&gt;
+# @vaadin/avatar
 
-[&lt;vaadin-avatar&gt;](https://vaadin.com/components/vaadin-avatar) is a Web Component providing avatar displaying functionality.
+A web component for graphical representation of an object or entity, for example a person or an organization.
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-avatar/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-avatar/html-api)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/avatar)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/avatar)](https://www.npmjs.com/package/@vaadin/avatar)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-avatar)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -16,41 +13,44 @@
 <vaadin-avatar abbr="SK"></vaadin-avatar>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar/screenshot.png" width="200" alt="Screenshot of vaadin-avatar">](https://vaadin.com/components/vaadin-avatar)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar/screenshot.png" width="132" alt="Screenshot of vaadin-avatar">](https://vaadin.com/docs/latest/ds/components/avatar)
 
 ## Installation
 
-Install `vaadin-avatar`:
+Install the component:
 
 ```sh
-npm i @vaadin/avatar --save
+npm i @vaadin/avatar
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/avatar/vaadin-avatar.js';
+import '@vaadin/avatar';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/avatar/vaadin-avatar.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The components with the Lumo theme:
-
-  `theme/lumo/vaadin-avatar.js`
+```js
+import '@vaadin/avatar/theme/material/vaadin-avatar.js';
+```
 
-- The components with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-avatar.js`
+```js
+import '@vaadin/avatar/theme/lumo/vaadin-avatar.js';
+```
 
-- Alias for `theme/lumo/vaadin-avatar.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-avatar.js`
+```js
+import '@vaadin/avatar/src/vaadin-avatar.js';
+```
 
 ## Contributing
 
@@ -60,4 +60,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.