diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index 450d8928fd1f39837f65a7844c6a7d85b947119f..fb7fd224305ab5fdecc80cd7c29ea532c23fef50 100644
--- a/source/import_documentation/Developping-with-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-with-SibTemplateElement.rst
@@ -2,7 +2,7 @@ Developping a comoponent with SiBTemplateElement
================================================
.. warning::
- To start this tutorial, you should I've followed `this first part <https://docs.startinblox.com/import_documentation/How-to-make-components>`__ .
+ To start this tutorial, you should I've followed `this first part <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__ .
For the example, we are gonna make a FAQ component like this :
@@ -67,11 +67,13 @@ It's in your `static get propsDefinition()` method that it take place.
3. Create your template
-----------------------
-Pass your attributes to you template and write it.
+Pass your attributes to your template and write it.
.. code:: js
+ //Pass attribute to your template
template({dataSrc, title, moderatorEmail}) {
+ //Write your template
if (!dataSrc) return '';
let tmpl = `
<h3>${title}</h3>
@@ -91,13 +93,13 @@ Pass your attributes to you template and write it.
return tmpl
}
-As you can see, we've set classes to the question's and answer's field to help us managing the accordion.
+As you can see, we've set classes to the question's and answer's fields to help us managing the accordion.
4. Implement JS and CSS in your component
---------------------------------
-Create a js file, like "/js/main.js"
+Create a js file, like "/js/main.js".
-Add the js you need to make your accordion worked, like this :
+Add the JS you need to make your accordion work, like this :
.. code:: js
@@ -109,16 +111,15 @@ Add the js you need to make your accordion worked, like this :
var i;
for (i = 0; i < acc.length; i++) {
- console.log(acc[i]);
acc[i].addEventListener("click", function () {
- console.log("we click")
this.classList.toggle("active");
+
var panel = this.nextElementSibling;
- console.log(panel)
+
if (panel.style.maxHeight) {
- panel.style.maxHeight = null;
+ panel.style.maxHeight = null;
} else {
- panel.style.maxHeight = panel.scrollHeight + "px";
+ panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
@@ -126,49 +127,50 @@ Add the js you need to make your accordion worked, like this :
Here is the CSS used for the demo :
- .. code:: js
- /* /css/main.css */
- .accordion {
- background-color: $second-color;
- color : white;
- cursor: pointer;
- padding: 18px;
- text-align: left;
- border: none;
- outline: none;
- transition: 0.4s;
- display : block;
- }
+.. code:: css
+
+ /* /css/main.css */
+ .accordion {
+ background-color: $second-color;
+ color : white;
+ cursor: pointer;
+ padding: 18px;
+ text-align: left;
+ border: none;
+ outline: none;
+ transition: 0.4s;
+ display : block;
+ }
- .active, .accordion:hover {
- background-color: $primary-color;
- }
+ .active, .accordion:hover {
+ background-color: $primary-color;
+ }
- .panel {
- padding: 0 18px;
- background-color: white;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.2s ease-out;
- display : block;
- }
+ .panel {
+ padding: 0 18px;
+ background-color: white;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ display : block;
+ }
- .accordion:after {
- content: '\02795'; /* Unicode character for "plus" sign (+) */
- font-size: 13px;
- color: white;
- float: right;
- margin-left: 5px;
- }
+ .accordion:after {
+ content: '\02795'; /* Unicode character for "plus" sign (+) */
+ font-size: 13px;
+ color: white;
+ float: right;
+ margin-left: 5px;
+ }
- .active:after {
- content: "\2796"; /* Unicode character for "minus" sign (-) */
- color: white;
- }
+ .active:after {
+ content: "\2796"; /* Unicode character for "minus" sign (-) */
+ color: white;
+ }
-SiB framework provide you Helpers function to add js in your component.
+SiB framework provide you `Helpers function <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
-Add at the begin of your solid-faq.js, import your js and css with an Helpers function :
+Add at the begin of your solid-faq.js, import your JS and CSS with a Helpers functions :
.. code:: js
@@ -189,7 +191,7 @@ Add at the begin of your solid-faq.js, import your js and css with an Helpers fu
---------------
Creating data sources is quite another matter. For the example, we will use static data in `JsonLD <https://fr.wikipedia.org/wiki/JSON-LD>`__.
-Create a file named "datas-faq.jsonld" at the root of your project and put those datas :
+Create a file named "datas-faq.jsonLD" at the root of your project and put these datas :
.. code:: json
@@ -252,6 +254,14 @@ Put the component in your index.html
.. image:: ./../../_static/images/import_documentation/faq.gif
:alt: A FAQ component as example
-If you get any trouble, please `mail me <'mailto:alice@startinblox.com?subject=A%20feedback%20from%20the%20doc>`__ :)
+If you get any trouble (or any idea to improve!), please `mail me <'mailto:alice@startinblox.com?subject=A%20feedback%20from%20the%20doc>`__ :)
+
+Go Deeper
+==========
+
+Discover other functionalities of the framework playing with `the demo on the website <https://startinblox.com/fr/technology#demo>`__.
+
+
+
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index 082452b80b50809fe217f2afb7e358801a3128ef..4f9af81b88aaf064d3173f6bba5045499d9deb2e 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -22,14 +22,14 @@ So, when you develop a new feature, think about who could use it. If it can be u
Let's start
=============
- Requirements
- -------------
- Check in you have et least the version 6.14.5 of npm.
+Requirements
+-------------
+ Check if you have et least the version 6.14.5 of npm.
1. Create a folder named "Solid-ComponentName"
.. note::
- By convention, we prefix Startin'blox components with "solid". Example: solid-faq, solid-agenda, solid-map
+ By convention, we prefix Startin'blox components with "solid". Example: solid-faq, solid-agenda, solid-map..
2. Open a terminal in the folder and type those following commands:
@@ -71,7 +71,7 @@ Your `package.json` should look like this :
}
}
-4. Create your a file `solid-componentName.js` which will welcom your component
+4. Create your a file `solid-componentName.js` which will welcome your component.
@@ -82,9 +82,9 @@ We've create a template to make component development easier named "SiBTemplateE
If you are new in SiB, we recommand you to start with it.
- EASY WAY => `Developping component with SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-with-SibTemplateElement.html>`__
+ **EASY WAY** => `Developping component with SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-with-SibTemplateElement.html>`__
- MORE COMPLEX WAY => `Developping component without SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-without-SibTemplateElement.html>`__
+ **MORE COMPLEX WAY** => `Developping component without SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-without-SibTemplateElement.html>`__