From 788926cb896b6d066a83aa6848f46377c33344ec Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 15 Apr 2021 20:34:17 +0300
Subject: [PATCH] Templating demo for button

---
 src/assets/images/logo-white.svg | 25 +++++++++++++++++++++++++
 src/views/button/ButtonDemo.vue  |  9 +++++++++
 src/views/button/ButtonDoc.vue   | 31 +++++++++++++++++++++++++++----
 3 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/logo-white.svg

diff --git a/src/assets/images/logo-white.svg b/src/assets/images/logo-white.svg
new file mode 100644
index 000000000..86f08abca
--- /dev/null
+++ b/src/assets/images/logo-white.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>head</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-3.000000, -7.000000)">
+            <g id="head" transform="translate(3.000000, 7.000000)">
+                <polygon id="chick-right" fill="#ffffff" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
+                <polygon id="chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
+                <polygon id="mask" fill="#ffffff" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
+                <polygon id="bottom-chick-right" fill="#ffffff" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
+                <polygon id="bottom-chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
+                <path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
+                <path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#ffffff" fill-rule="nonzero"></path>
+                <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
+                <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
+                <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
+                <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
+                <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
+                <path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#ffffff" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index 8ec64b25b..f720b935d 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -108,6 +108,15 @@
                 <Button type="button" label="Emails" badge="8" />
                 <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+                <h5>Templating</h5>
+                <Button type="button" class="p-px-3">
+                    <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
+                </Button>
+                <Button type="button" class="p-button-outlined p-button-success">
+                    <img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
+                    <span class="p-ml-2 p-text-bold">PrimeVue</span>
+                </Button>
+
                 <h5>Button Set</h5>
                 <span class="p-buttonset">
                     <Button label="Save" icon="pi pi-check" />
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index 197694095..7f9941b2d 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -119,11 +119,16 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-        <h5>Slot</h5>
-        <p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
+        <h5>Templating</h5>
+        <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
 <pre v-code><code>
-&lt;Button&gt;
-    Custom Content
+&lt;Button type="button" class="p-px-3"&gt;
+    &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
+&lt;/Button&gt;
+
+&lt;Button type="button" class="p-button-outlined p-button-success"&gt;
+    &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
+    &lt;span class="p-ml-2 p-text-bold"&gt;PrimeVue&lt;/span&gt;
 &lt;/Button&gt;
 
 </code></pre>
@@ -323,6 +328,15 @@ export default {
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+        <h5>Templating</h5>
+       <Button type="button" class="p-px-3">
+            <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
+        </Button>
+        <Button type="button" class="p-button-outlined p-button-success">
+            <img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
+            <span class="p-ml-2 p-text-bold">PrimeVue</span>
+        </Button>
+
         <h5>Button Set</h5>
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
@@ -487,6 +501,15 @@ export default {
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+        <h5>Templating</h5>
+        <Button type="button" class="p-px-3">
+            <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
+        </Button>
+        <Button type="button" class="p-button-outlined p-button-success">
+            <img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
+            <span class="p-ml-2 p-text-bold">PrimeVue</span>
+        </Button>
+
         <h5>Button Set</h5>
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />