From 8855a7d74c54b74c3b071da2bc5b15f165301a16 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 2 Jul 2020 14:32:01 +0300
Subject: [PATCH] Add text utilities

---
 src/AppMenu.vue             |  2 +-
 src/views/text/TextDemo.vue | 34 ++++++++++++--
 src/views/text/TextDoc.vue  | 90 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 119 insertions(+), 7 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index be7861a65..298003b79 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -10,7 +10,7 @@
                 <router-link to="/accessibility">Accessibility</router-link>
             </div>
 
-            <div class="menu-category">Utilities</div>
+            <div class="menu-category">PrimeFlex Utilities</div>
             <div class="menu-items">
                 <router-link to="/display">Display</router-link>
                 <router-link to="/elevation">Elevation</router-link>
diff --git a/src/views/text/TextDemo.vue b/src/views/text/TextDemo.vue
index 10772b7e9..49172adf8 100644
--- a/src/views/text/TextDemo.vue
+++ b/src/views/text/TextDemo.vue
@@ -3,13 +3,33 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Text</h1>
-                <p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
+                <p>Manage the alignment and the styling of a text with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> text utilities.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            
-            
+            <div class="card">
+                <h5>Alignment</h5>
+                <div class="p-mb-3 p-text-left">Left</div>
+                <div class="p-mb-3 p-text-center">Center</div>
+                <div class="p-text-right">Right</div>
+
+                <h5>Wrap</h5>
+                <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+                <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+                <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+
+                <h5>Transform</h5>
+                <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
+                <div class="p-mb-3 p-text-uppercase">uppercase</div>
+                <div class="p-text-capitalize">capitalize</div>
+
+                <h5>Style</h5>
+                <div class="p-mb-3 p-text-bold">Bold</div>
+                <div class="p-mb-3 p-text-normal">Normal</div>
+                <div class="p-mb-3 p-text-light">Light</div>
+                <div class="p-mb-3 p-text-italic">Italic</div>
+            </div>
 
             <TextDoc />
         </div>
@@ -24,4 +44,10 @@ export default {
 		'TextDoc': TextDoc
 	}
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.demo-container {
+    border: 2px solid var(--surface-d);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index 0c8283657..752d11e8a 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -3,8 +3,73 @@
 		<TabView>
 			<TabPanel header="Documentation">
                 <h5>Getting Started</h5>
-                <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
-                values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+                <p>The text classes use the <i>p-text-{value}</i> syntax.</p>
+
+                <h5>Alignment</h5>
+                <p>Four options are available for alignment.</p>
+                <ul>
+                    <li>left</li>
+                    <li>center</li>
+                    <li>right</li>
+                    <li>justify</li>
+                </ul>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-text-left"&gt;Left&lt;/div&gt;
+&lt;div class="p-text-center"&gt;Center&lt;/div&gt;
+&lt;div class="p-text-right"&gt;Right&lt;/div&gt;
+&lt;div class="p-text-justify"&gt;Justify&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+                <h5>Wrap</h5>
+                <p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
+                <ul>
+                    <li>nowrap</li>
+                    <li>wrap</li>
+                    <li>truncate</li>
+                </ul>
+<CodeHighlight>
+<template v-pre>
+&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
+&lt;div class="p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+&lt;div class="p-text-nowrap p-text-truncate" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+                <h5>Transform</h5>
+                <p>Transform property changes the case of the text.</p>
+                <ul>
+                    <li>lowercase</li>
+                    <li>uppercase</li>
+                    <li>capitalize</li>
+                </ul>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
+&lt;div class="p-text-uppercase"&gt;uppercase&lt;/div&gt;
+&lt;div class="p-text-capitalize"&gt;capitalize&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+                <h5>Style</h5>
+                <p>Text styling applies to font weight and style.</p>
+                <ul>
+                    <li>bold</li>
+                    <li>normal</li>
+                    <li>light</li>
+                    <li>italic</li>
+                </ul>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-text-bold"&gt;Bold&lt;/div&gt;
+&lt;div class="p-text-normal"&gt;Normal&lt;/div&gt;
+&lt;div class="p-text-light"&gt;Light&lt;/div&gt;
+&lt;div class="p-text-italic"&gt;Italic&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+
 
 
 				<h5>Dependencies</h5>
@@ -17,7 +82,28 @@
 				</a>
 <CodeHighlight>
 <template v-pre>
+&lt;div class="card"&gt;
+    &lt;h5&gt;Alignment&lt;/h5&gt;
+    &lt;div class="p-mb-3 p-text-left"&gt;Left&lt;/div&gt;
+    &lt;div class="p-mb-3 p-text-center"&gt;Center&lt;/div&gt;
+    &lt;div class="p-text-right"&gt;Right&lt;/div&gt;
 
+    &lt;h5&gt;Wrap&lt;/h5&gt;
+    &lt;div class="p-mb-3 demo-container" style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
+    &lt;div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+    &lt;div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+
+    &lt;h5&gt;Transform&lt;/h5&gt;
+    &lt;div class="p-mb-3 p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
+    &lt;div class="p-mb-3 p-text-uppercase"&gt;uppercase&lt;/div&gt;
+    &lt;div class="p-text-capitalize"&gt;capitalize&lt;/div&gt;
+
+    &lt;h5&gt;Style&lt;/h5&gt;
+    &lt;div class="p-mb-3 p-text-bold"&gt;Bold&lt;/div&gt;
+    &lt;div class="p-mb-3 p-text-normal"&gt;Normal&lt;/div&gt;
+    &lt;div class="p-mb-3 p-text-light"&gt;Light&lt;/div&gt;
+    &lt;div class="p-mb-3 p-text-italic"&gt;Italic&lt;/div&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 			</TabPanel>