docs: improve documentation

Add additional information for publishing the component in Vaadin's directory.

Author: mlopezFC

Demo.gif

@@ -1,7 +1,6 @@
 [![npm version](https://badgen.net/npm/v/@vaadin-component-factory/vcf-date-range-picker)](https://www.npmjs.com/package/@vaadin-component-factory/vcf-date-range-picker)
-
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-date-range-picker)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvcf-date-range-picker.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-date-range-picker)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-date-range-picker)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-component-factoryvcf-date-range-picker.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-date-range-picker)
 
 # <vcf-date-range-picker>
 
@@ -12,7 +11,7 @@
 </vcf-date-range-picker>
 ```
 
-[<img src="./screenshot.png" width="439" alt="Screenshot of vcf-date-range-picker">](https://vaadin.com/components/vcf-date-range-picker)
+![GIF for fc-menuitem](./Demo.gif)
 
 ## Running demo
 

README.md

@@ -1,15 +1,14 @@
 
 # <vcf-date-range-picker>
 
-[![Available in Vaadin_Directory](https://img.shields.io/vaadin-directory/v/vaadinvcf-date-range-picker.svg)](https://vaadin.com/directory/component/vaadinvcf-date-range-picker)
+[![Available in Vaadin_Directory](https://vaadin.com/directory/component/vcf-date-range-picker.svg)](https://vaadin.com/directory/component/vcf-date-range-picker)
 
-[<vcf-date-range-picker>](https://vaadin.com/components/vcf-date-range-picker) is a Web Component providing a date selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
+[<vcf-date-range-picker>](https://vaadin.com/components/vcf-date-range-picker) is a Web Component providing a date range selection field which includes a scrollable month calendar view.
 
-
-[<img src="https://raw.githubusercontent.com/vaadin/vcf-date-range-picker/master/screenshot.png" width="439" alt="Screenshot of vcf-date-range-picker">](https://vaadin.com/components/vcf-date-range-picker)
+![GIF for fc-menuitem](./Demo.gif)
 
 ## Example Usage
 ```html
-<vcf-date-range-picker label="Label" placeholder="Placeholder">
+<vcf-date-range-picker label="Enter date range">
 </vcf-date-range-picker>
 ```