Add panel header to Panel component. Add example. (#10028)

ui_framework/components/index.scss

@@ -23,6 +23,9 @@ $font: "Open Sans", Helvetica, Arial, sans-serif;
 $fontSize: 14px;
 $lineHeight: 1.5;
 
+// Typography
+$titleFontSize: 18px;
+
 // Button
 $buttonBorderRadius: 4px;
 
@@ -47,6 +50,8 @@ $tableRowBorder: 1px solid $standoutBackgroundColor;
 $formTransitionTiming: 0.1s linear;
 
 // Bar
+$toolBarHeight: 50px;
+$toolBarPadding: 10px;
 $toolBarSectionSpacing: 50px;
 $toolBarItsemSpacing: 10px;
 

ui_framework/components/modal/_modal.scss

@@ -17,7 +17,7 @@ $modalPadding: 10px;
 }
 
   .kuiModalHeader__title {
-    font-size: 18px;
+    font-size: $titleFontSize;
   }
 
 .kuiModalHeaderCloseButton {

ui_framework/components/panel/_panel.scss

@@ -1,5 +1,7 @@
 .kuiPanel {
-  border: $tableBorder;
+  border-left: $tableBorder;
+  border-right: $tableBorder;
+  border-bottom: $tableBorder;
 }
 
 .kuiPanel--centered {
@@ -7,3 +9,23 @@
   justify-content: center;
   align-items: center;
 }
+
+.kuiPanelHeader {
+  @include buttonOnStandoutBackground;
+  @include selectOnStandoutBackground;
+
+  display: flex;
+  align-items: center;
+  padding: $toolBarPadding;
+  height: $toolBarHeight;
+  background-color: $standoutBackgroundColor;
+}
+
+  .kuiPanelHeader__title {
+    font-size: $titleFontSize;
+    line-height: $lineHeight;
+  }
+
+.kuiPanelBody {
+  padding: $toolBarPadding;
+}

ui_framework/components/tool_bar/_tool_bar.scss

@@ -3,8 +3,8 @@
   @include buttonOnStandoutBackground;
   @include selectOnStandoutBackground;
 
-  padding: 10px;
-  height: 50px;
+  padding: $toolBarPadding;
+  height: $toolBarHeight;
   background-color: $standoutBackgroundColor;
 }
 

ui_framework/dist/ui_framework.css

@@ -930,7 +930,9 @@ body {
   line-height: 1.5; }
 
 .kuiPanel {
-  border: 2px solid #E4E4E4; }
+  border-left: 2px solid #E4E4E4;
+  border-right: 2px solid #E4E4E4;
+  border-bottom: 2px solid #E4E4E4; }
 
 .kuiPanel--centered {
   display: -webkit-box;
@@ -946,6 +948,37 @@ body {
       -ms-flex-align: center;
           align-items: center; }
 
+.kuiPanelHeader {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 10px;
+  height: 50px;
+  background-color: #E4E4E4; }
+  .kuiPanelHeader .kuiButton--basic {
+    color: #5a5a5a;
+    background-color: #FFFFFF; }
+    .kuiPanelHeader .kuiButton--basic:disabled {
+      color: #a7a7a7;
+      background-color: #F3F3F3; }
+  .kuiPanelHeader .kuiSelect {
+    border-color: #ffffff; }
+    .kuiPanelHeader .kuiSelect:focus {
+      outline: none;
+      border-color: #6EADC1; }
+
+.kuiPanelHeader__title {
+  font-size: 18px;
+  line-height: 1.5; }
+
+.kuiPanelBody {
+  padding: 10px; }
+
 .kuiPromptForItems {
   display: -webkit-box;
   display: -webkit-flex;

ui_framework/doc_site/src/services/routes/routes.js

@@ -28,6 +28,9 @@ import LocalNavExample
 import MicroButtonExample
   from '../../views/micro_button/micro_button_example.jsx';
 
+import PanelExample
+  from '../../views/panel/panel_example.jsx';
+
 import TableExample
   from '../../views/table/table_example.jsx';
 
@@ -65,6 +68,9 @@ const components = [{
 }, {
   name: 'Modal',
   component: ModalExample,
+}, {
+  name: 'Panel',
+  component: PanelExample,
 }, {
   name: 'Table',
   component: TableExample,

ui_framework/doc_site/src/views/panel/panel.html

@@ -0,0 +1,11 @@
+<div class="kuiPanel">
+  <div class="kuiPanelHeader">
+    <div class="kuiPanelHeader__title">
+      Panel title
+    </div>
+  </div>
+
+  <div class="kuiPanelBody">
+    <p>Content goes here</p>
+  </div>
+</div>

ui_framework/doc_site/src/views/panel/panel_example.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Panel',
+  html: require('./panel.html'),
+  hasDarkTheme: false,
+}]);