Feature/icon text (#3230)

* Init icon text, Remove old new-tag elements

* Improve icon text

* Fix icon text docs

* Update sidebar

* Update changelog

docs/documentation/elements/button.html

@@ -582,8 +582,6 @@ meta:
 
 {% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>buttons</code> parent, and applying one of 3 modifiers:
@@ -657,7 +655,6 @@ meta:
 
 <div class="columns">
   <div class="column">
-    {% include elements/new-tag.html version="0.6.2" %}
     <div class="buttons">
       {{ button_rounded_example }}
     </div>
@@ -823,8 +820,6 @@ meta:
 
 {% include elements/anchor.html name="List of buttons" %}
 
-{% include elements/new-tag.html version="0.6.1" %}
-
 <div class="columns">
   <div class="column">
     <div class="content">

docs/documentation/elements/content.html

@@ -178,8 +178,6 @@ meta:
   <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
 </div>
 
-{% include elements/new-tag.html version="0.7.2" %}
-
 <div class="content">
   <p>
     <strong>Ordered lists</strong> <code>&lt;ol&gt;</code> support different <strong>types</strong> of items markers. To modify them, use either:

docs/documentation/elements/icon.html

@@ -24,6 +24,133 @@ meta:
 </span>
 {% endcapture %}
 
+{% capture icon_text_example %}
+<span class="icon-text">
+  <span class="icon">
+    <i class="fas fa-home"></i>
+  </span>
+  <span>Home</span>
+</span>
+{% endcapture %}
+
+{% capture icon_text_train_example %}
+<span class="icon-text">
+  <span class="icon">
+    <i class="fas fa-train"></i>
+  </span>
+  <span>Paris</span>
+  <span class="icon">
+    <i class="fas fa-arrow-right"></i>
+  </span>
+  <span>Budapest</span>
+  <span class="icon">
+    <i class="fas fa-arrow-right"></i>
+  </span>
+  <span>Bucharest</span>
+  <span class="icon">
+    <i class="fas fa-arrow-right"></i>
+  </span>
+  <span>Istanbul</span>
+  <span class="icon">
+    <i class="fas fa-flag-checkered"></i>
+  </span>
+</span>
+{% endcapture %}
+
+{% capture icon_text_in_content_example %}
+<div class="content">
+  <p>
+    An invitation to
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-utensils"></i>
+      </span>
+      <span>dinner</span>
+    </span>
+    was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-city"></i>
+      </span>
+      <span>town</span>
+    </span>
+    the following day, and, consequently, unable to accept the honour of their
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-envelope-open-text"></i>
+      </span>
+      <span>invitation</span>
+    </span>,
+    etc.
+  </p>
+
+  <p>
+    Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-flag-checkered"></i>
+      </span>
+      <span>arrival</span>
+    </span>
+    in Hertfordshire; and she began to fear that he might be always
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-plane-departure"></i>
+      </span>
+      <span>flying</span>
+    </span>
+    about from one place to another, and never settled at Netherfield as he ought to be.
+  </p>
+</div>
+{% endcapture %}
+
+{% capture icon_text_div_example %}
+<div class="icon-text">
+  <span class="icon has-text-info">
+    <i class="fas fa-info-circle"></i>
+  </span>
+  <span>Information</span>
+</div>
+
+<p class="block">
+  Your package will be delivered on <strong>Tuesday at 08:00</strong>.
+</p>
+
+<div class="icon-text">
+  <span class="icon has-text-success">
+    <i class="fas fa-check-square"></i>
+  </span>
+  <span>Success</span>
+</div>
+
+<p class="block">
+  Your image has been successfully uploaded.
+</p>
+
+<div class="icon-text">
+  <span class="icon has-text-warning">
+    <i class="fas fa-exclamation-triangle"></i>
+  </span>
+  <span>Warning</span>
+</div>
+
+<p class="block">
+  Some information is missing from your <a href="#">profile</a> details.
+</p>
+
+<div class="icon-text">
+  <span class="icon has-text-danger">
+    <i class="fas fa-ban"></i>
+  </span>
+  <span>Danger</span>
+</div>
+
+<p class="block">
+  There was an error in your submission. <a href="#">Please try again</a>.
+</p>
+
+{% endcapture %}
+
 {% capture icon_color_example %}
 <span class="icon has-text-info">
   <i class="fas fa-info-circle"></i>
@@ -39,6 +166,36 @@ meta:
 </span>
 {% endcapture %}
 
+{% capture icon_text_color_example %}
+<span class="icon-text has-text-info">
+  <span class="icon">
+    <i class="fas fa-info-circle"></i>
+  </span>
+  <span>Info</span>
+</span>
+
+<span class="icon-text has-text-success">
+  <span class="icon">
+    <i class="fas fa-check-square"></i>
+  </span>
+  <span>Success</span>
+</span>
+
+<span class="icon-text has-text-warning">
+  <span class="icon">
+    <i class="fas fa-exclamation-triangle"></i>
+  </span>
+  <span>Warning</span>
+</span>
+
+<span class="icon-text has-text-danger">
+  <span class="icon">
+    <i class="fas fa-ban"></i>
+  </span>
+  <span>Danger</span>
+</span>
+{% endcapture %}
+
 {% capture icon_sizes_example %}
 <span class="icon">
   <i class="fas fa-camera-retro fa-lg"></i>
@@ -90,13 +247,50 @@ meta:
   </div>
 </div>
 
-
 <div class="content">
   <p>
     By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.
   </p>
 </div>
 
+<!--  -->
+{% include elements/anchor.html name="Icon text" %}
+
+{% include elements/new-tag.html version="0.9.2" %}
+
+<div class="content">
+  <p>
+    You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long as all text <em>inside</em> is wrapped in its own <code>span</code> element:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_example %}
+
+<div class="content">
+  <p>
+    You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_train_example %}
+
+<div class="content">
+  <p>
+    Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph of <strong>text</strong>.
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_in_content_example %}
+
+<div class="content">
+  <p>
+    You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a <code>&lt;div&gt;</code> tag instead:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_div_example %}
+
+<!--  -->
 {% include elements/anchor.html name="Colors" %}
 
 <div class="content">
@@ -107,6 +301,15 @@ meta:
 
 {% include elements/snippet.html content=icon_color_example %}
 
+<div class="content">
+  <p>
+    The same applies to the <code>icon-text</code>:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_color_example %}
+
+<!--  -->
 {% include elements/anchor.html name="Sizes" %}
 
 <div class="content">
@@ -283,6 +486,7 @@ meta:
   </tbody>
 </table>
 
+<!--  -->
 {% include elements/anchor.html name="Font Awesome variations" %}
 
 <div class="content">
@@ -426,6 +630,7 @@ meta:
   </tbody>
 </table>
 
+<!--  -->
 {% include elements/anchor.html name="Material Design Icons" %}
 
 <div class="content">
@@ -750,6 +955,7 @@ meta:
   </tbody>
 </table>
 
+<!--  -->
 {% include elements/anchor.html name="Ionicons" %}
 
 <div class="content">

docs/documentation/elements/image.html

@@ -184,8 +184,6 @@ meta:
 
 {% include elements/anchor.html name="Arbitrary ratios with any element" %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.

docs/documentation/elements/progress.html

@@ -65,8 +65,6 @@ meta:
 
 {% include elements/anchor.html name="Indeterminate" %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress bar. It's used to show that some progress is going on, but the actual duration is not yet determined.

docs/documentation/elements/tag.html

@@ -381,8 +381,6 @@ meta:
   </div>
 </div>
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can change the size of <strong>all</strong> tags at once: