From 4841334b48966950c62f33ec531e7f318545a253 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 14 May 2025 21:19:24 +0100
Subject: [PATCH 1/2] added frameless demo example to `AppSideNav` showcase
 page

---
 .../app/templates/components/app-side-nav.hbs     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/showcase/app/templates/components/app-side-nav.hbs b/showcase/app/templates/components/app-side-nav.hbs
index 8db073cc55..0e52a6d181 100644
--- a/showcase/app/templates/components/app-side-nav.hbs
+++ b/showcase/app/templates/components/app-side-nav.hbs
@@ -522,4 +522,19 @@
       {{/each}}
     {{/let}}
   </Shw::Flex>
+</section>
+
+{{! For some reason, Ember tests don't play well with iframes (URL not found) so we can't take snapshots of these examples in Percy }}
+<section>
+
+  <Shw::Divider />
+
+  <Shw::Text::H2>Demo</Shw::Text::H2>
+
+  <Shw::Frame
+    @id="demo-full-app-frame-with-app-header-and-app-side-nav"
+    @src="/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav"
+    @height="780"
+    @label="Full AppFrame with AppHeader & AppSideNav"
+  />
 </section>
\ No newline at end of file

From 1dc4e01f0800f6097463f17176d5aebc13e104d7 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 14 May 2025 21:19:41 +0100
Subject: [PATCH 2/2] removed old code from `AppFrame` showcase page

---
 .../app/templates/layouts/app-frame/index.hbs | 172 +-----------------
 1 file changed, 3 insertions(+), 169 deletions(-)

diff --git a/showcase/app/templates/layouts/app-frame/index.hbs b/showcase/app/templates/layouts/app-frame/index.hbs
index 626333225c..a03933e7ad 100644
--- a/showcase/app/templates/layouts/app-frame/index.hbs
+++ b/showcase/app/templates/layouts/app-frame/index.hbs
@@ -185,178 +185,12 @@
   />
 </section>
 
-<section data-test-percy>
-  <Shw::Divider />
-
-  <Shw::Text::H2>Content</Shw::Text::H2>
-
-  {{!
-    Note: The below examples are commented out as they are redundant to the following "Framed" examples.
-    However we still need to find a solution for adding visual regression tests for the framed examples.
-    (So we may decide to uncomment these examples to add them back to the visual regression tests depending.)
-  }}
-  {{!-- <Shw::Grid @columns={{1}} {{style gap="2rem"}} as |SG|>
-    <SG.Item @label="With AppHeader & typical child component content" {{style width="100%"}}>
-      <Hds::AppFrame class="shw-component-app-frame-container" as |Frame|>
-        <Frame.Header>
-          <Hds::AppHeader>
-            <:logo>
-              <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
-            </:logo>
-            <:globalActions>
-              <Hds::Dropdown as |dd|>
-                <dd.ToggleButton @text="Choose an organization" @icon="org" />
-                <dd.Checkmark>
-                  organizationName
-                </dd.Checkmark>
-              </Hds::Dropdown>
-            </:globalActions>
-            <:utilityActions>
-              <Hds::Dropdown @listPosition="bottom-right" as |dd|>
-                <dd.ToggleIcon @icon="help" @text="help menu" />
-                <dd.Title @text="Help & Support" />
-                <dd.Interactive @href="#">Documentation</dd.Interactive>
-                <dd.Interactive @href="#">Tutorials</dd.Interactive>
-                <dd.Interactive @href="#">Terraform Provider</dd.Interactive>
-                <dd.Interactive @href="#">Changelog</dd.Interactive>
-                <dd.Separator />
-                <dd.Interactive @href="#">Create support ticket</dd.Interactive>
-                <dd.Interactive @href="#">Give feedback</dd.Interactive>
-              </Hds::Dropdown>
-              <Hds::Dropdown @listPosition="bottom-right" as |dd|>
-                <dd.ToggleIcon @icon="user" @text="user menu" />
-                <dd.Title @text="Signed In" />
-                <dd.Description @text="email@domain.com" />
-                <dd.Interactive @href="#" @text="Account Settings" />
-              </Hds::Dropdown>
-            </:utilityActions>
-          </Hds::AppHeader>
-        </Frame.Header>
-        <Frame.Sidebar>
-          <Hds::SideNav
-            @isResponsive={{true}}
-            @hasA11yRefocus={{false}}
-            @isCollapsible={{true}}
-          >
-            <:body>
-              <Hds::SideNav::List aria-label="Dashboard" as |SNL|>
-                <SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-              </Hds::SideNav::List>
-              <Hds::SideNav::List aria-label="Services" as |SNL|>
-                <SNL.Title>Services</SNL.Title>
-                <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
-                <SNL.Link @text="Consul" @icon="consul" @href="#" />
-                <SNL.Link @text="Packer" @icon="packer" @href="#" />
-                <SNL.Link @text="Vault" @icon="vault" @href="#" />
-                <SNL.Link @text="Vault Secrets" @icon="vault-secrets-square" @href="#" />
-                <SNL.Link @text="Terraform" @icon="terraform" @href="#" />
-                <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-                <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
-              </Hds::SideNav::List>
-              <Hds::SideNav::List aria-label="Organization" as |SNL|>
-                <SNL.Title>Default Org</SNL.Title>
-                <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-                <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
-                <SNL.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
-                <SNL.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
-                <SNL.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
-              </Hds::SideNav::List>
-            </:body>
-          </Hds::SideNav>
-        </Frame.Sidebar>
-        <Frame.Main>
-          <Shw::Placeholder @height="100%" @text="main" @background="#fff" />
-        </Frame.Main>
-        <Frame.Footer>
-          <Hds::AppFooter as |AF|>
-            <AF.LegalLinks />
-          </Hds::AppFooter>
-        </Frame.Footer>
-      </Hds::AppFrame>
-    </SG.Item>
-
-    <SG.Item @label="SideNav without AppHeader" {{style width="100%"}}>
-      <Hds::AppFrame class="shw-component-app-frame-container" as |Frame|>
-        <Frame.Sidebar>
-          <Hds::SideNav @isResponsive={{true}} @hasA11yRefocus={{false}} @isCollapsible={{true}} @hasHeader={{false}}>
-            <:header>
-              <Hds::SideNav::Header>
-                <:logo>
-                  <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
-                </:logo>
-                <:actions>
-                  <Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" />
-                  <Hds::Dropdown @listPosition="bottom-left" as |dd|>
-                    <dd.ToggleIcon @icon="help" @text="help menu" />
-                    <dd.Title @text="Help & Support" />
-                    <dd.Interactive @href="#">Documentation</dd.Interactive>
-                    <dd.Interactive @href="#">Tutorials</dd.Interactive>
-                    <dd.Interactive @href="#">Terraform Provider</dd.Interactive>
-                    <dd.Interactive @href="#">Changelog</dd.Interactive>
-                    <dd.Separator />
-                    <dd.Interactive @href="#">Create support ticket</dd.Interactive>
-                    <dd.Interactive @href="#">Give feedback</dd.Interactive>
-                  </Hds::Dropdown>
-                  <Hds::Dropdown @listPosition="bottom-left" as |dd|>
-                    <dd.ToggleIcon @icon="user" @text="user menu" />
-                    <dd.Title @text="Signed In" />
-                    <dd.Description @text="email@domain.com" />
-                    <dd.Interactive @href="#">Account Settings</dd.Interactive>
-                  </Hds::Dropdown>
-                </:actions>
-              </Hds::SideNav::Header>
-            </:header>
-            <:body>
-              <Hds::SideNav::List aria-label="Dashboard" as |SNL|>
-                <SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-              </Hds::SideNav::List>
-              <Hds::SideNav::List aria-label="Services" as |SNL|>
-                <SNL.Title>Services</SNL.Title>
-                <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
-                <SNL.Link @text="Consul" @icon="consul" @href="#" />
-                <SNL.Link @text="Packer" @icon="packer" @href="#" />
-                <SNL.Link @text="Vault" @icon="vault" @href="#" />
-                <SNL.Link @text="Vault Secrets" @icon="vault-secrets-square" @href="#" />
-                <SNL.Link @text="Terraform" @icon="terraform" @href="#" />
-                <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-                <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
-              </Hds::SideNav::List>
-              <Hds::SideNav::List aria-label="Organization" as |SNL|>
-                <SNL.Title>Default Org</SNL.Title>
-                <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-                <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
-                <SNL.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
-                <SNL.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
-                <SNL.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
-              </Hds::SideNav::List>
-            </:body>
-            <:footer>
-              <Hds::Dropdown class="shw-layout-app-frame-full-width-elem" as |dd|>
-                <dd.ToggleButton @text="Choose an organization" @icon="org" />
-                <dd.Checkmark>
-                  organizationName
-                </dd.Checkmark>
-              </Hds::Dropdown>
-            </:footer>
-          </Hds::SideNav>
-        </Frame.Sidebar>
-        <Frame.Main>
-          <Shw::Placeholder @height="100%" @text="main" @background="#fff" />
-        </Frame.Main>
-        <Frame.Footer>
-          <Hds::AppFooter as |AF|>
-            <AF.LegalLinks />
-          </Hds::AppFooter>
-        </Frame.Footer>
-      </Hds::AppFrame>
-    </SG.Item>
-  </Shw::Grid> --}}
-</section>
-
 {{! For some reason, Ember tests don't play well with iframes (URL not found) so we can't take snapshots of these examples in Percy }}
 <section>
 
-  <Shw::Text::H3>Framed</Shw::Text::H3>
+  <Shw::Divider />
+
+  <Shw::Text::H2>Demo</Shw::Text::H2>
 
   <Shw::Frame
     @id="demo-full-app-frame-with-app-header-and-app-side-nav"