Merge pull request #1284 from hashicorp/app-frame-component

`AppFrame` component

.changeset/cyan-horses-buy.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+Added `AppFrame` component

packages/components/addon/components/hds/app-frame/index.hbs

@@ -0,0 +1,19 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-app-frame" ...attributes>
+  {{#if this.hasHeader}}
+    {{yield (hash Header=(component "hds/app-frame/parts/header"))}}
+  {{/if}}
+  {{#if this.hasSidebar}}
+    {{yield (hash Sidebar=(component "hds/app-frame/parts/sidebar"))}}
+  {{/if}}
+  {{yield (hash Main=(component "hds/app-frame/parts/main"))}}
+  {{#if this.hasFooter}}
+    {{yield (hash Footer=(component "hds/app-frame/parts/footer"))}}
+  {{/if}}
+  {{#if this.hasModals}}
+    {{yield (hash Modals=(component "hds/app-frame/parts/modals"))}}
+  {{/if}}
+</div>

packages/components/addon/components/hds/app-frame/index.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFrameIndexComponent extends Component {
+  /**
+   * Indicates if the "header" container should be displayed
+   *
+   * @param hasHeader
+   * @type {boolean}
+   * @default true
+   */
+  get hasHeader() {
+    return this.args.hasHeader ?? true;
+  }
+
+  /**
+   * Indicates if the "sidebar" container should be displayed
+   *
+   * @param hasSidebar
+   * @type {boolean}
+   * @default true
+   */
+  get hasSidebar() {
+    return this.args.hasSidebar ?? true;
+  }
+
+  /**
+   * Indicates if the "footer" container should be displayed
+   *
+   * @param hasFooter
+   * @type {boolean}
+   * @default true
+   */
+  get hasFooter() {
+    return this.args.hasFooter ?? true;
+  }
+
+  /**
+   * Indicates if the "modals" container should be displayed
+   *
+   * @param hasModals
+   * @type {boolean}
+   * @default true
+   */
+  get hasModals() {
+    return this.args.hasModals ?? true;
+  }
+}

packages/components/addon/components/hds/app-frame/parts/footer.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<footer class="hds-app-frame__footer" ...attributes>
+  {{yield}}
+</footer>

packages/components/addon/components/hds/app-frame/parts/header.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<header class="hds-app-frame__header" ...attributes>
+  {{yield}}
+</header>

packages/components/addon/components/hds/app-frame/parts/main.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<main class="hds-app-frame__main" ...attributes>
+  {{yield}}
+</main>

packages/components/addon/components/hds/app-frame/parts/modals.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{! we use `:empty` in CSS so we have to avoid whitespaces }}
+<div class="hds-app-frame__modals" ...attributes>{{~yield~}}</div>

packages/components/addon/components/hds/app-frame/parts/sidebar.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<aside class="hds-app-frame__sidebar" ...attributes>
+  {{yield}}
+</aside>

packages/components/app/components/hds/app-frame/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/index';

packages/components/app/components/hds/app-frame/parts/footer.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/footer';

packages/components/app/components/hds/app-frame/parts/header.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/header';

packages/components/app/components/hds/app-frame/parts/main.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/main';

packages/components/app/components/hds/app-frame/parts/modals.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/modals';

packages/components/app/components/hds/app-frame/parts/sidebar.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/sidebar';

packages/components/app/styles/@hashicorp/design-system-components.scss

@@ -13,6 +13,7 @@
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/alert";
+@use "../components/app-frame";
 @use "../components/application-state";
 @use "../components/avatar";
 @use "../components/badge";

packages/components/app/styles/components/app-frame.scss

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APP-FRAME
+//
+
+.hds-app-frame {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "sidebar footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr;
+  min-height: 100vh;
+}
+
+
+// FRAME'S CONTAINERS
+
+.hds-app-frame__header {
+  z-index: 7;
+  grid-area: header;
+}
+
+.hds-app-frame__sidebar {
+  z-index: 6;
+  grid-area: sidebar;
+}
+
+.hds-app-frame__main {
+  grid-area: main;
+}
+
+.hds-app-frame__footer {
+  z-index: 5;
+  grid-area: footer;
+}
+
+
+// MODALS "CONTAINER"
+
+.hds-app-frame__modals {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+
+  // since the content is injected via DOM manipulation, there's no issues of whitespace generated by Ember
+  // that make this approach unreliable (in some cases), so we can safely use it to controls its display
+  &:empty {
+    display: none;
+  }
+}

packages/components/tests/acceptance/percy-test.js

@@ -119,12 +119,15 @@ module('Acceptance | Percy test', function (hooks) {
     await visit('/components/toast');
     await percySnapshot('Toast');
 
-    await visit('/utilities/dismiss-button');
-    await percySnapshot('DismissButton');
+    await visit('/layouts/app-frame');
+    await percySnapshot('AppFrame');
 
     await visit('/overrides/power-select');
     await percySnapshot('PowerSelect');
 
+    await visit('/utilities/dismiss-button');
+    await percySnapshot('DismissButton');
+
     assert.ok(true);
   });
 });

packages/components/tests/dummy/app/controllers/layouts/app-frame.js

@@ -0,0 +1,17 @@
+/**
+ * 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';
+
+export default class AppFrameController extends Controller {
+  @tracked show3DVisualization = false;
+
+  @action
+  toggle3DVisualization() {
+    this.show3DVisualization = !this.show3DVisualization;
+  }
+}

packages/components/tests/dummy/app/router.js

@@ -55,6 +55,9 @@ Router.map(function () {
     this.route('tabs');
     this.route('side-nav');
   });
+  this.route('layouts', function () {
+    this.route('app-frame');
+  });
   this.route('utilities', function () {
     this.route('disclosure');
     this.route('dismiss-button');

packages/components/tests/dummy/app/routes/layouts/app-frame.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+
+export default class ComponentsAppFrameRoute extends Route {}

packages/components/tests/dummy/app/styles/app.scss

@@ -27,13 +27,14 @@
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENT PAGES IMPORTS
 @import "./showcase-pages/alert";
+@import "./showcase-pages/app-frame";
 @import "./showcase-pages/badge";
 @import "./showcase-pages/breadcrumb";
 @import "./showcase-pages/button";
 @import "./showcase-pages/card";
 @import "./showcase-pages/disclosure";
-@import "./showcase-pages/dropdown";
 @import "./showcase-pages/dismiss-button";
+@import "./showcase-pages/dropdown";
 @import "./showcase-pages/flyout";
 @import "./showcase-pages/form/base-elements";
 @import "./showcase-pages/form/checkbox";
@@ -47,8 +48,8 @@
 @import "./showcase-pages/pagination";
 @import "./showcase-pages/power-select";
 @import "./showcase-pages/side-nav";
-@import "./showcase-pages/tabs";
 @import "./showcase-pages/table";
+@import "./showcase-pages/tabs";
 @import "./showcase-pages/tag";
 @import "./showcase-pages/typography";
 // END COMPONENT PAGES IMPORTS