HDS-4154 added toggle for PageHeader showcase outlines

Author: dchyun

showcase/app/controllers/components/page-header.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class PageHeaderController extends Controller {
+  @service router;
+
+  @tracked showHighlight = false;
+
+  // =============================
+  // GENERIC HANDLERS
+  // =============================
+
+  @action
+  toggleHighlight() {
+    this.showHighlight = !this.showHighlight;
+  }
+}

showcase/app/styles/app.scss

@@ -60,6 +60,7 @@
 @import "./showcase-pages/link-inline";
 @import "./showcase-pages/menu-primitive";
 @import "./showcase-pages/modal";
+@import "./showcase-pages/page-header";
 @import "./showcase-pages/pagination";
 @import "./showcase-pages/popover-primitive";
 @import "./showcase-pages/power-select";

showcase/app/styles/showcase-pages/page-header.scss

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Page Header
+
+body.components-page-header {
+  .shw-component-page-header-layout-highlight {
+    .hds-page-header {
+      outline: 1px dashed #78909c;
+      outline-offset: -1px;
+    }
+  }
+}