Update project structure

awx/ui/client/lib/components/panel/_index.less

@@ -0,0 +1,30 @@
+.at-Panel {
+    margin: @at-space-6x 0 0 0;
+    padding: @at-space-6x;
+    border-color: @at-gray-dark;
+}
+
+.at-Panel-heading {
+    margin: 0;
+    padding: 0;
+}
+
+.at-Panel-dismiss {
+    .at-mixin-ButtonIcon();
+    text-align: right;
+}
+
+.at-Panel-body {
+    margin: @at-space-6x 0 0 0;
+    padding: 0;
+}
+
+.at-Panel-headingTitle {
+    color: @at-gray-dark-4x;
+    font-size: @at-font-size-3x;
+    font-weight: @at-font-weight-2x;
+    line-height: @at-line-height-short;
+    text-transform: uppercase;
+    margin: 0;
+    padding: 0;
+}

awx/ui/client/lib/components/panel/body.directive.js

@@ -0,0 +1,12 @@
+function atPanelBody (pathService) {
+    return {
+        restrict: 'E',
+        require: '^^atPanel',
+        transclude: true,
+        templateUrl: pathService.getPartialPath('components/panel/body'),
+    };
+}
+
+atPanelBody.$inject = ['PathService'];
+
+export default atPanelBody;

awx/ui/client/lib/components/panel/body.partial.html

@@ -0,0 +1,3 @@
+<div class="panel-body at-Panel-body">
+  <ng-transclude></ng-transclude>
+</div>

awx/ui/client/lib/components/panel/heading.directive.js

@@ -0,0 +1,20 @@
+function link (scope, el, attrs, panel) {
+    panel.use(scope);
+}
+
+function atPanelHeading (pathService) {
+    return {
+        restrict: 'E',
+        require: '^^atPanel',
+        transclude: true,
+        templateUrl: pathService.getPartialPath('components/panel/heading'),
+        link,
+        scope: {
+            config: '='
+        }
+    };
+}
+
+atPanelHeading.$inject = ['PathService'];
+
+export default atPanelHeading;

awx/ui/client/lib/components/panel/heading.partial.html

@@ -0,0 +1,12 @@
+<div class="row">
+    <div class="col-xs-10">
+        <h3 class="at-Panel-headingTitle">
+            {{ config.text }}
+        </h3>
+    </div>
+    <div class="col-xs-2">
+        <div class="at-Panel-dismiss">
+            <i class="fa fa-times fa-lg" ng-click="dismiss()"></i>
+        </div>
+    </div>
+</div>

awx/ui/client/lib/components/panel/panel.directive.js

@@ -0,0 +1,33 @@
+function use (scope) {
+    scope.dismiss = this.dismiss;
+}
+
+function dismiss ($state) {
+    $state.go('^');
+}
+
+function controller ($state) {
+    let vm = this;
+
+    vm.dismiss = dismiss.bind(vm, $state);
+    vm.use = use;
+}
+
+controller.$inject = ['$state'];
+
+function atPanel (pathService) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: pathService.getPartialPath('components/panel/panel'),
+        controller,
+        controllerAs: 'vm',
+        scope: {
+            config: '='
+        }
+    };
+}
+
+atPanel.$inject = ['PathService'];
+
+export default atPanel;

awx/ui/client/lib/components/panel/panel.partial.html

@@ -0,0 +1,3 @@
+<div class="panel panel-default at-Panel">
+  <ng-transclude></ng-transclude>
+</div>