From 344154e8fe66626031087d4d03300965af72ecd6 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sun, 9 Dec 2018 22:03:25 +0300
Subject: [PATCH] Initiated Panel component

---
 src/AppMenu.vue                |  2 +-
 src/assets/styles/primevue.css |  3 ++-
 src/components/panel/Panel.css | 48 ++++++++++++++++++++++++++++++++++
 src/components/panel/Panel.vue | 27 +++++++++++++++++++
 src/main.js                    |  2 ++
 src/router.js                  | 10 +++----
 src/views/About.vue            |  5 ----
 src/views/panel/PanelDemo.vue  | 26 ++++++++++++++++++
 8 files changed, 111 insertions(+), 12 deletions(-)
 create mode 100644 src/components/panel/Panel.css
 create mode 100644 src/components/panel/Panel.vue
 delete mode 100644 src/views/About.vue
 create mode 100644 src/views/panel/PanelDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f5f546110..7c217bdc5 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -42,7 +42,7 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}">
                 <div>
-                    <router-link to="/">&#9679; Link</router-link>
+                    <router-link to="/panel">&#9679; Panel</router-link>
                 </div>
             </div>
 
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 3e62abf94..eb880c4f3 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -1,4 +1,5 @@
 @import '../../components/common/Common.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/listbox/ListBox.css';
-@import '../../components/button/Button.css';
\ No newline at end of file
+@import '../../components/button/Button.css';
+@import '../../components/panel/Panel.css';
\ No newline at end of file
diff --git a/src/components/panel/Panel.css b/src/components/panel/Panel.css
new file mode 100644
index 000000000..37cfe5374
--- /dev/null
+++ b/src/components/panel/Panel.css
@@ -0,0 +1,48 @@
+.p-panel {
+	padding: 0.2em;
+}
+
+.p-panel .p-panel-titlebar {
+	padding: .5em .75em;
+}
+
+.p-panel .p-panel-titlebar-icon {
+	float: right;
+    cursor: pointer;
+    height: 1.25em;
+    width: 1.25em;
+    line-height: 1.25em;
+    text-align: center;
+}
+
+.p-panel .p-panel-titlebar-icon span {
+    line-height: inherit;
+    margin-top: -1px;
+}
+
+.p-panel .p-panel-content {
+	border: 0;
+    background: none;
+    padding: .5em .75em;
+}
+
+.p-panel .p-panel-footer {
+	border-width: 1px 0 0;
+	padding: .25em .5em;
+	text-align:left;
+}
+
+.p-panel-content-wrapper-collapsed {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-panel-content-wrapper-expanded {
+    max-height: 1000px;
+    transition: max-height 1s ease-in-out;
+}
+
+.p-panel-content-wrapper-expanding {
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
new file mode 100644
index 000000000..17b52170e
--- /dev/null
+++ b/src/components/panel/Panel.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="p-panel p-component">
+        <div class="p-panel-titlebar">
+            <slot name="header">
+                <span class="p-panel-title" v-if="header">{{header}}</span>
+            </slot>
+        </div>
+        <div class="p-panel-content-wrapper">
+            <div class="p-panel-content">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        header: String,
+        toggleable: Boolean
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 9243e1c89..0b04f4742 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import router from './router';
 import InputText from './components/inputtext/InputText';
 import ListBox from './components/listbox/ListBox';
 import Button from './components/button/Button';
+import Panel from './components/panel/Panel';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -14,6 +15,7 @@ Vue.config.productionTip = false;
 Vue.component('p-inputtext', InputText);
 Vue.component('p-button', Button);
 Vue.component('p-listBox', ListBox);
+Vue.component('p-panel', Panel);
 
 new Vue({
   router,
diff --git a/src/router.js b/src/router.js
index 01419b6cd..eac022fc1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -11,11 +11,6 @@ export default new Router({
       name: 'home',
       component: Home
     },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('./views/About.vue')
-    },
     {
         path: '/inputtext',
         name: 'inputtext',
@@ -30,6 +25,11 @@ export default new Router({
         path: '/button',
         name: 'button',
         component: () => import('./views/button/ButtonDemo.vue')
+    },
+    {
+        path: '/panel',
+        name: 'panel',
+        component: () => import('./views/panel/PanelDemo.vue')
     }
   ]
 });
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa28070d..000000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/panel/PanelDemo.vue b/src/views/panel/PanelDemo.vue
new file mode 100644
index 000000000..85a4beb85
--- /dev/null
+++ b/src/views/panel/PanelDemo.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Panel</h1>
+                <p>Panel is a grouping component with the optional content toggle feature.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-panel header="Godfather I">
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+            </p-panel>
+
+            <p-panel header="Godfather I" style="margin-top:2em" :toggleable="true">
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+            </p-panel>
+        </div>
+    </div>
+</template>
\ No newline at end of file