From 15cd91be72fdd6032bfbc7e9ac4995e044416efd Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 16 Jun 2020 22:59:26 +0300
Subject: [PATCH] Renamed Shadow to Elevation and add more depths

---
 src/AppMenu.vue                        | 11 ++-
 src/assets/styles/primevue.css         |  1 +
 src/components/elevation/Elevation.css | 95 ++++++++++++++++++++++++++
 src/router.js                          | 10 +--
 src/views/elevation/ElevationDemo.vue  | 45 ++++++++++++
 src/views/elevation/ElevationDoc.vue   | 40 +++++++++++
 src/views/shadow/ShadowDemo.vue        | 69 -------------------
 src/views/shadow/ShadowDoc.vue         | 68 ------------------
 8 files changed, 195 insertions(+), 144 deletions(-)
 create mode 100644 src/components/elevation/Elevation.css
 create mode 100644 src/views/elevation/ElevationDemo.vue
 create mode 100644 src/views/elevation/ElevationDoc.vue
 delete mode 100644 src/views/shadow/ShadowDemo.vue
 delete mode 100644 src/views/shadow/ShadowDoc.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 36218324a..9b9d3141c 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -11,7 +11,15 @@
                 <a href="https://www.primefaces.org/designer/primevue">Designer</a>
                 <a href="https://www.primefaces.org/designer/api/primevue/2.0.0">Sass API</a>
                 <router-link to="/accessibility">Accessibility</router-link>
-                <router-link to="/flexgrid">PrimeFlex</router-link>
+            </div>
+
+            <span>
+                <i class="pi pi-cog"></i>
+                <span>Utilities</span>
+            </span>
+            <div>
+                <router-link to="/elevation">Elevation</router-link>
+                <router-link to="/flexgrid">Grid System</router-link>
                 <router-link to="/icons">Icons</router-link>
             </div>
 
@@ -256,7 +264,6 @@
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/progressbar">ProgressBar</router-link>
                 <router-link to="/progressspinner">ProgressSpinner</router-link>
-                <router-link to="/shadow">Shadow</router-link>
                 <router-link to="/terminal">Terminal</router-link>
             </div>
         </div>
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 986a67488..fd1202b5e 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -3,6 +3,7 @@
 @import '../../components/button/Button.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/colorpicker/ColorPicker.css';
+@import '../../components/elevation/Elevation.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';
diff --git a/src/components/elevation/Elevation.css b/src/components/elevation/Elevation.css
new file mode 100644
index 000000000..a228cd5ff
--- /dev/null
+++ b/src/components/elevation/Elevation.css
@@ -0,0 +1,95 @@
+.p-shadow-1 {
+    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+}
+
+.p-shadow-2 {
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.p-shadow-3 {
+    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
+}
+
+.p-shadow-4 {
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+}
+
+.p-shadow-5 {
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
+}
+
+.p-shadow-6 {
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+}
+
+.p-shadow-7 {
+    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
+}
+
+.p-shadow-8 {
+    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+}
+
+.p-shadow-9 {
+    box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
+}
+
+.p-shadow-10 {
+    box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
+}
+
+.p-shadow-11 {
+    box-shadow: 0 6px 7px -4px rgba(0,0,0,.2), 0 11px 15px 1px rgba(0,0,0,.14), 0 4px 20px 3px rgba(0,0,0,.12);
+}
+
+.p-shadow-12 {
+    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 12px 17px 2px rgba(0,0,0,.14), 0 5px 22px 4px rgba(0,0,0,.12);
+}
+
+.p-shadow-13 {
+    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 13px 19px 2px rgba(0,0,0,.14), 0 5px 24px 4px rgba(0,0,0,.12);
+}
+
+.p-shadow-14 {
+    box-shadow: 0 7px 9px -4px rgba(0,0,0,.2), 0 14px 21px 2px rgba(0,0,0,.14), 0 5px 26px 4px rgba(0,0,0,.12);
+}
+
+.p-shadow-15 {
+    box-shadow: 0 8px 9px -5px rgba(0,0,0,.2), 0 15px 22px 2px rgba(0,0,0,.14), 0 6px 28px 5px rgba(0,0,0,.12);
+}
+
+.p-shadow-16 {
+    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
+}
+
+.p-shadow-17 {
+    box-shadow: 0 8px 11px -5px rgba(0,0,0,.2), 0 17px 26px 2px rgba(0,0,0,.14), 0 6px 32px 5px rgba(0,0,0,.12);
+}
+
+.p-shadow-18 {
+    box-shadow: 0 9px 11px -5px rgba(0,0,0,.2), 0 18px 28px 2px rgba(0,0,0,.14), 0 7px 34px 6px rgba(0,0,0,.12);
+}
+
+.p-shadow-19 {
+    box-shadow: 0 9px 12px -6px rgba(0,0,0,.2), 0 19px 29px 2px rgba(0,0,0,.14), 0 7px 36px 6px rgba(0,0,0,.12);
+}
+
+.p-shadow-20 {
+    box-shadow: 0 10px 13px -6px rgba(0,0,0,.2), 0 20px 31px 3px rgba(0,0,0,.14), 0 8px 38px 7px rgba(0,0,0,.12);
+}
+
+.p-shadow-21 {
+    box-shadow: 0 10px 13px -6px rgba(0,0,0,.2), 0 21px 33px 3px rgba(0,0,0,.14), 0 8px 40px 7px rgba(0,0,0,.12);
+}
+
+.p-shadow-22 {
+    box-shadow: 0 10px 14px -6px rgba(0,0,0,.2), 0 22px 35px 3px rgba(0,0,0,.14), 0 8px 42px 7px rgba(0,0,0,.12);
+}
+
+.p-shadow-23 {
+    box-shadow: 0 11px 14px -7px rgba(0,0,0,.2), 0 23px 36px 3px rgba(0,0,0,.14), 0 9px 44px 8px rgba(0,0,0,.12);
+}
+
+.p-shadow-24 {
+    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 98cc8e8ac..5bb9cbc65 100755
--- a/src/router.js
+++ b/src/router.js
@@ -290,6 +290,11 @@ export default new Router({
 			path: '/editor',
 			name: 'editor',
 			component: () => import('./views/editor/EditorDemo.vue')
+        },
+        {
+			path: '/elevation',
+			name: 'elevation',
+			component: () => import('./views/elevation/ElevationDemo.vue')
 		},
 		{
 			path: '/fieldset',
@@ -451,11 +456,6 @@ export default new Router({
 			name: 'selectbutton',
 			component: () => import('./views/selectbutton/SelectButtonDemo.vue')
         },
-        {
-			path: '/shadow',
-			name: 'shadow',
-			component: () => import('./views/shadow/ShadowDemo.vue')
-		},
 		{
 			path: '/sidebar',
 			name: 'sidebar',
diff --git a/src/views/elevation/ElevationDemo.vue b/src/views/elevation/ElevationDemo.vue
new file mode 100644
index 000000000..e8d976c23
--- /dev/null
+++ b/src/views/elevation/ElevationDemo.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Elevation</h1>
+                <p>Elevation is used to specify separation between surfaces and elements along the z-axis.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="p-grid">
+                <div class="p-col" v-for="index in 24" :key="index">
+                    <div :class="['box', 'p-shadow-' + index]">
+                        p-shadow-{{index}}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <ElevationDoc />
+    </div>
+</template>
+
+<script>
+import ElevationDoc from './ElevationDoc';
+
+export default {
+	components: {
+		'ElevationDoc': ElevationDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+    min-height: 100px;
+    min-width: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    margin: 2rem;
+    border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
new file mode 100644
index 000000000..540ff7f0d
--- /dev/null
+++ b/src/views/elevation/ElevationDoc.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Getting Started</h3>
+				<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
+<CodeHighlight>
+&lt;div class="p-shadow-1" /&gt;
+</CodeHighlight>
+
+                <h3>Levels</h3>
+                <p>There are 24 depths available varying from 1 to 24.</p>
+<CodeHighlight>
+&lt;div class="p-shadow-1" /&gt;
+&lt;div class="p-shadow-24" /&gt;
+</CodeHighlight>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/shadow" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-grid"&gt;
+    &lt;div class="p-col" v-for="index in 24" :key="index"&gt;
+        &lt;div :class="['box', 'p-shadow-' + index]"&gt;
+            p-shadow-{{index}}
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/views/shadow/ShadowDemo.vue b/src/views/shadow/ShadowDemo.vue
deleted file mode 100644
index b625a6e69..000000000
--- a/src/views/shadow/ShadowDemo.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <div>
-        <div class="content-section introduction">
-            <div class="feature-intro">
-                <h1>Shadow</h1>
-                <p>Shadow is used to add depth to an element.</p>
-            </div>
-        </div>
-
-        <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-2">
-                    <div class="box">
-                        none
-                    </div>
-                </div>
-                <div class="p-col-12 p-md-2">
-                    <div class="box p-shadow-1">
-                        p-shadow-1
-                    </div>
-                </div>
-                <div class="p-col-12 p-md-2">
-                    <div class="box p-shadow-2">
-                        p-shadow-2
-                    </div>
-                </div>
-                <div class="p-col-12 p-md-2">
-                    <div class="box p-shadow-3">
-                        p-shadow-3
-                    </div>
-                </div>
-                <div class="p-col-12 p-md-2">
-                    <div class="box p-shadow-4">
-                        p-shadow-4
-                    </div>
-                </div>
-                <div class="p-col-12 p-md-2">
-                    <div class="box p-shadow-5">
-                        p-shadow-5
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <ShadowDoc />
-    </div>
-</template>
-
-<script>
-import ShadowDoc from './ShadowDoc';
-
-export default {
-	components: {
-		'ShadowDoc': ShadowDoc
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.box {
-    background-color: #e9ecef;
-    width: 100%;
-    height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/shadow/ShadowDoc.vue b/src/views/shadow/ShadowDoc.vue
deleted file mode 100644
index 45965717b..000000000
--- a/src/views/shadow/ShadowDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h3>Getting Started</h3>
-				<p>A shadow is added to an element using the <i>.p-shadow-{level}</i> class.</p>
-<CodeHighlight>
-&lt;div class="p-shadow-1" /&gt;
-</CodeHighlight>
-
-                <h3>Levels</h3>
-                <p>There are 5 depths available varying from 1 to 5.</p>
-<CodeHighlight>
-&lt;div class="p-shadow-1" /&gt;
-&lt;div class="p-shadow-2" /&gt;
-&lt;div class="p-shadow-3" /&gt;
-&lt;div class="p-shadow-4" /&gt;
-&lt;div class="p-shadow-5" /&gt;
-</CodeHighlight>
-
-				<h3>Dependencies</h3>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/shadow" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
-<CodeHighlight>
-<template v-pre>
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12 p-md-2"&gt;
-        &lt;div class="box"&gt;
-            none
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-2"&gt;
-        &lt;div class="box p-shadow-1"&gt;
-            p-shadow-1
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-2"&gt;
-        &lt;div class="box p-shadow-2"&gt;
-            p-shadow-2
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-2"&gt;
-        &lt;div class="box p-shadow-3"&gt;
-            p-shadow-3
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-2"&gt;
-        &lt;div class="box p-shadow-4"&gt;
-            p-shadow-4
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-2"&gt;
-        &lt;div class="box p-shadow-5"&gt;
-            p-shadow-5
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</template>
-</CodeHighlight>
-			</TabPanel>
-		</TabView>
-	</div>
-</template>
\ No newline at end of file