add widgets examples with code and web rendering

source/import_documentation/Widgets/Examples.rst

 Examples
 =========
 
+Common widgets
+--------------
+
+Here is a few examples of widgets use. First, there is the HTML using Startin'blox and then, the displayed result in a webpage.
+
+All the values from ``<solid-display>`` are displayed with and without widget.
+
+solid-display-img
+~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/user-1.jsonld"
+      fields="notimage, image"
+      value-notimage="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+      value-image="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+      widget-image="solid-display-img"
+      alt-image="pink flowers"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-img.png
+   :alt: Widget solid-display-img
+
+
+solid-display-link
+~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/user-1.jsonld"
+      fields="notlink, link"
+      value-notlink="https://startinblox.com/fr/"
+      value-link="https://startinblox.com/fr/"
+      widget-link="solid-display-link"
+    ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-link.png
+   :alt: Widget solid-display-link
+
+
+solid-display-link-mailto
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/user-5.jsonld"
+      fields="email"
+   ></solid-display>
+
+   <solid-display
+      data-src="data/list/user-5.jsonld"
+      fields="email"
+      widget-email="solid-display-link-mailto"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-mailto.png
+   :alt: Widget solid-display-link-mailto
+
+
+solid-display-value-date
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/event-1.jsonld"
+      fields="date"
+   ></solid-display>
+
+   <solid-display
+      data-src="data/list/event-1.jsonld"
+      fields="date"
+      widget-date="solid-display-value-date"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-date.png
+   :alt: Widget solid-display-value-date
+
+
+solid-form-radio
+~~~~~~~~~~~~~~~~
+range attribute
+
+.. code:: html
+
+   <solid-form
+      data-src="data/list/event-1.jsonld"
+      fields="contact"
+      widget-contact="solid-form-radio"
+      range-contact="data/list/users.jsonld"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-radio.png
+   :alt: Widget solid-form-radio
+
+solid-form-dropdown
+~~~~~~~~~~~~~~~~~~~
+enum attribute
+
+.. code:: html
+
+   <solid-form
+      data-src="data/list/event-1.jsonld"
+      fields="personnes"
+      widget-personnes="solid-form-dropdown"
+      enum-personnes="Sacha, Camille, Charlie, Lou"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-dropdown.png
+   :alt: Widget solid-form-dropdown
+
+solid-form-textarea-label
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-form
+      data-src="data/list/event-1.jsonld"
+      fields="description"
+      widget-description="solid-form-textarea-label"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-textarea.png
+   :alt: Widget solid-form-textarea-label
+
+solid-form-text-placeholder
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-form
+      data-src="./data/list/users.jsonld"
+      fields="first_name"
+      widget-first_name="solid-form-text-placeholder"
+      placeholder-first_name="Enter your name"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-placeholder.png
+   :alt: Widget solid-form-text-placehoder
+
+solid-form-text-label
+~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-form
+      data-src="./data/list/users.jsonld"
+      fields="first_name"
+      widget-first_name="solid-form-text-label"
+      label-first_name="First name :"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-label.png
+   :alt: Widget solid-form-text-label
+
+solid-set-div
+~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/users.jsonld"
+      fields="name(first_name, ' - ' ,last_name, ' - ', username)"
+      widget-name="solid-set-div"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-set.png
+   :alt: Widget solid-set-div
+
+*The border is applied on solid-set-div*
+
+
+Step-by-step widget creation
+----------------------------
+
 Create your widget
 ~~~~~~~~~~~~~~~~~~