From 9122ec1eafafae7b777b2f0fb1a286fa788b2e89 Mon Sep 17 00:00:00 2001
From: Dawid Harat <dawidharat03@gmail.com>
Date: Sun, 8 Dec 2019 20:24:29 +0100
Subject: [PATCH 1/3] divider jekyll element added

---
 pages/_docs/divider.md     | 24 ++++++++++++++++++------
 pages/_includes/ui/hr.html |  1 +
 2 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 pages/_includes/ui/hr.html

diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md
index d50a9a4bf..2a5379dbe 100644
--- a/pages/_docs/divider.md
+++ b/pages/_docs/divider.md
@@ -7,19 +7,31 @@ done: true
 ### Default markup
 
 {% example html max-width=300 %}
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? 
-</p>
-<div class="hr-text">Left divider</div>
+{% include ui/hr.html%}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text hr-text-center">Centered divider</div>
+{% include ui/hr.html text="Left divider"%}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text hr-text-right">Right divider</div>
+{% include ui/hr.html text="Centered divider" position="center"%}
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% include ui/hr.html text="Right divider" position="right"%}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
 {% endexample %}
+
+### Divider color
+
+Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
+{% example %}
+{% include ui/hr.html text="Green divider" color="green"%}
+<p>
+Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% endexample %}
\ No newline at end of file
diff --git a/pages/_includes/ui/hr.html b/pages/_includes/ui/hr.html
new file mode 100644
index 000000000..6b7cceeae
--- /dev/null
+++ b/pages/_includes/ui/hr.html
@@ -0,0 +1 @@
+<div class="hr-text hr-text-{{ include.position | default: 'left' | downcase }}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text }}</div> 

From 118c696d6842fdadcd75f8383e5e32bd1ce9ffe3 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 9 Dec 2019 16:52:32 +0100
Subject: [PATCH 2/3] hr fixes

---
 pages/_docs/divider.md     | 12 ++++++------
 pages/_includes/ui/hr.html |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md
index 2a5379dbe..ed38f6933 100644
--- a/pages/_docs/divider.md
+++ b/pages/_docs/divider.md
@@ -7,19 +7,19 @@ done: true
 ### Default markup
 
 {% example html max-width=300 %}
-{% include ui/hr.html%}
+{% include ui/hr.html %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% include ui/hr.html text="Left divider"%}
+{% include ui/hr.html text="Left divider" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% include ui/hr.html text="Centered divider" position="center"%}
+{% include ui/hr.html text="Centered divider" position="center" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% include ui/hr.html text="Right divider" position="right"%}
+{% include ui/hr.html text="Right divider" position="right" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
@@ -30,8 +30,8 @@ done: true
 Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
 {% example %}
-{% include ui/hr.html text="Green divider" color="green"%}
+{% include ui/hr.html text="Green divider" color="green" %}
 <p>
 Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% endexample %}
\ No newline at end of file
+{% endexample %}
diff --git a/pages/_includes/ui/hr.html b/pages/_includes/ui/hr.html
index 6b7cceeae..b0357a25b 100644
--- a/pages/_includes/ui/hr.html
+++ b/pages/_includes/ui/hr.html
@@ -1 +1 @@
-<div class="hr-text hr-text-{{ include.position | default: 'left' | downcase }}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text }}</div> 
+<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>

From aed534557f2889ef7bc5956fd057e2c57f0ddfec Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 9 Dec 2019 16:57:20 +0100
Subject: [PATCH 3/3] divider docs fixes

---
 pages/_docs/divider.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md
index ed38f6933..588e6f5e2 100644
--- a/pages/_docs/divider.md
+++ b/pages/_docs/divider.md
@@ -6,8 +6,7 @@ done: true
 
 ### Default markup
 
-{% example html max-width=300 %}
-{% include ui/hr.html %}
+{% example html columns=1 %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
@@ -29,9 +28,12 @@ done: true
 
 Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
-{% example %}
+{% example html columns=1 %}
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
 {% include ui/hr.html text="Green divider" color="green" %}
 <p>
-Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
 {% endexample %}