Skip to content

Commit 85ebe9c

Browse files
didoodidoo
authored
Showcase - Add a frameless example for the AppSideNav (#2876)
1 parent 3ff33a4 commit 85ebe9c

File tree

2 files changed

+18
-169
lines changed

2 files changed

+18
-169
lines changed

‎showcase/app/templates/components/app-side-nav.hbs

+15
Original file line numberDiff line numberDiff line change
@@ -522,4 +522,19 @@
522522
{{/each}}
523523
{{/let}}
524524
</Shw::Flex>
525+
</section>
526+
527+
{{! 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 }}
528+
<section>
529+
530+
<Shw::Divider />
531+
532+
<Shw::Text::H2>Demo</Shw::Text::H2>
533+
534+
<Shw::Frame
535+
@id="demo-full-app-frame-with-app-header-and-app-side-nav"
536+
@src="/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav"
537+
@height="780"
538+
@label="Full AppFrame with AppHeader & AppSideNav"
539+
/>
525540
</section>

‎showcase/app/templates/layouts/app-frame/index.hbs

+3-169
Original file line numberDiff line numberDiff line change
@@ -185,178 +185,12 @@
185185
/>
186186
</section>
187187

188-
<section data-test-percy>
189-
<Shw::Divider />
190-
191-
<Shw::Text::H2>Content</Shw::Text::H2>
192-
193-
{{!
194-
Note: The below examples are commented out as they are redundant to the following "Framed" examples.
195-
However we still need to find a solution for adding visual regression tests for the framed examples.
196-
(So we may decide to uncomment these examples to add them back to the visual regression tests depending.)
197-
}}
198-
{{!-- <Shw::Grid @columns={{1}} {{style gap="2rem"}} as |SG|>
199-
<SG.Item @label="With AppHeader & typical child component content" {{style width="100%"}}>
200-
<Hds::AppFrame class="shw-component-app-frame-container" as |Frame|>
201-
<Frame.Header>
202-
<Hds::AppHeader>
203-
<:logo>
204-
<Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
205-
</:logo>
206-
<:globalActions>
207-
<Hds::Dropdown as |dd|>
208-
<dd.ToggleButton @text="Choose an organization" @icon="org" />
209-
<dd.Checkmark>
210-
organizationName
211-
</dd.Checkmark>
212-
</Hds::Dropdown>
213-
</:globalActions>
214-
<:utilityActions>
215-
<Hds::Dropdown @listPosition="bottom-right" as |dd|>
216-
<dd.ToggleIcon @icon="help" @text="help menu" />
217-
<dd.Title @text="Help & Support" />
218-
<dd.Interactive @href="#">Documentation</dd.Interactive>
219-
<dd.Interactive @href="#">Tutorials</dd.Interactive>
220-
<dd.Interactive @href="#">Terraform Provider</dd.Interactive>
221-
<dd.Interactive @href="#">Changelog</dd.Interactive>
222-
<dd.Separator />
223-
<dd.Interactive @href="#">Create support ticket</dd.Interactive>
224-
<dd.Interactive @href="#">Give feedback</dd.Interactive>
225-
</Hds::Dropdown>
226-
<Hds::Dropdown @listPosition="bottom-right" as |dd|>
227-
<dd.ToggleIcon @icon="user" @text="user menu" />
228-
<dd.Title @text="Signed In" />
229-
<dd.Description @text="email@domain.com" />
230-
<dd.Interactive @href="#" @text="Account Settings" />
231-
</Hds::Dropdown>
232-
</:utilityActions>
233-
</Hds::AppHeader>
234-
</Frame.Header>
235-
<Frame.Sidebar>
236-
<Hds::SideNav
237-
@isResponsive={{true}}
238-
@hasA11yRefocus={{false}}
239-
@isCollapsible={{true}}
240-
>
241-
<:body>
242-
<Hds::SideNav::List aria-label="Dashboard" as |SNL|>
243-
<SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
244-
</Hds::SideNav::List>
245-
<Hds::SideNav::List aria-label="Services" as |SNL|>
246-
<SNL.Title>Services</SNL.Title>
247-
<SNL.Link @text="Boundary" @icon="boundary" @href="#" />
248-
<SNL.Link @text="Consul" @icon="consul" @href="#" />
249-
<SNL.Link @text="Packer" @icon="packer" @href="#" />
250-
<SNL.Link @text="Vault" @icon="vault" @href="#" />
251-
<SNL.Link @text="Vault Secrets" @icon="vault-secrets-square" @href="#" />
252-
<SNL.Link @text="Terraform" @icon="terraform" @href="#" />
253-
<SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
254-
<SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
255-
</Hds::SideNav::List>
256-
<Hds::SideNav::List aria-label="Organization" as |SNL|>
257-
<SNL.Title>Default Org</SNL.Title>
258-
<SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
259-
<SNL.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
260-
<SNL.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
261-
<SNL.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
262-
<SNL.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
263-
</Hds::SideNav::List>
264-
</:body>
265-
</Hds::SideNav>
266-
</Frame.Sidebar>
267-
<Frame.Main>
268-
<Shw::Placeholder @height="100%" @text="main" @background="#fff" />
269-
</Frame.Main>
270-
<Frame.Footer>
271-
<Hds::AppFooter as |AF|>
272-
<AF.LegalLinks />
273-
</Hds::AppFooter>
274-
</Frame.Footer>
275-
</Hds::AppFrame>
276-
</SG.Item>
277-
278-
<SG.Item @label="SideNav without AppHeader" {{style width="100%"}}>
279-
<Hds::AppFrame class="shw-component-app-frame-container" as |Frame|>
280-
<Frame.Sidebar>
281-
<Hds::SideNav @isResponsive={{true}} @hasA11yRefocus={{false}} @isCollapsible={{true}} @hasHeader={{false}}>
282-
<:header>
283-
<Hds::SideNav::Header>
284-
<:logo>
285-
<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
286-
</:logo>
287-
<:actions>
288-
<Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" />
289-
<Hds::Dropdown @listPosition="bottom-left" as |dd|>
290-
<dd.ToggleIcon @icon="help" @text="help menu" />
291-
<dd.Title @text="Help & Support" />
292-
<dd.Interactive @href="#">Documentation</dd.Interactive>
293-
<dd.Interactive @href="#">Tutorials</dd.Interactive>
294-
<dd.Interactive @href="#">Terraform Provider</dd.Interactive>
295-
<dd.Interactive @href="#">Changelog</dd.Interactive>
296-
<dd.Separator />
297-
<dd.Interactive @href="#">Create support ticket</dd.Interactive>
298-
<dd.Interactive @href="#">Give feedback</dd.Interactive>
299-
</Hds::Dropdown>
300-
<Hds::Dropdown @listPosition="bottom-left" as |dd|>
301-
<dd.ToggleIcon @icon="user" @text="user menu" />
302-
<dd.Title @text="Signed In" />
303-
<dd.Description @text="email@domain.com" />
304-
<dd.Interactive @href="#">Account Settings</dd.Interactive>
305-
</Hds::Dropdown>
306-
</:actions>
307-
</Hds::SideNav::Header>
308-
</:header>
309-
<:body>
310-
<Hds::SideNav::List aria-label="Dashboard" as |SNL|>
311-
<SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
312-
</Hds::SideNav::List>
313-
<Hds::SideNav::List aria-label="Services" as |SNL|>
314-
<SNL.Title>Services</SNL.Title>
315-
<SNL.Link @text="Boundary" @icon="boundary" @href="#" />
316-
<SNL.Link @text="Consul" @icon="consul" @href="#" />
317-
<SNL.Link @text="Packer" @icon="packer" @href="#" />
318-
<SNL.Link @text="Vault" @icon="vault" @href="#" />
319-
<SNL.Link @text="Vault Secrets" @icon="vault-secrets-square" @href="#" />
320-
<SNL.Link @text="Terraform" @icon="terraform" @href="#" />
321-
<SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
322-
<SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
323-
</Hds::SideNav::List>
324-
<Hds::SideNav::List aria-label="Organization" as |SNL|>
325-
<SNL.Title>Default Org</SNL.Title>
326-
<SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
327-
<SNL.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
328-
<SNL.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
329-
<SNL.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
330-
<SNL.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
331-
</Hds::SideNav::List>
332-
</:body>
333-
<:footer>
334-
<Hds::Dropdown class="shw-layout-app-frame-full-width-elem" as |dd|>
335-
<dd.ToggleButton @text="Choose an organization" @icon="org" />
336-
<dd.Checkmark>
337-
organizationName
338-
</dd.Checkmark>
339-
</Hds::Dropdown>
340-
</:footer>
341-
</Hds::SideNav>
342-
</Frame.Sidebar>
343-
<Frame.Main>
344-
<Shw::Placeholder @height="100%" @text="main" @background="#fff" />
345-
</Frame.Main>
346-
<Frame.Footer>
347-
<Hds::AppFooter as |AF|>
348-
<AF.LegalLinks />
349-
</Hds::AppFooter>
350-
</Frame.Footer>
351-
</Hds::AppFrame>
352-
</SG.Item>
353-
</Shw::Grid> --}}
354-
</section>
355-
356188
{{! 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 }}
357189
<section>
358190

359-
<Shw::Text::H3>Framed</Shw::Text::H3>
191+
<Shw::Divider />
192+
193+
<Shw::Text::H2>Demo</Shw::Text::H2>
360194

361195
<Shw::Frame
362196
@id="demo-full-app-frame-with-app-header-and-app-side-nav"

0 commit comments

Comments
 (0)