|
185 | 185 | /> |
186 | 186 | </section> |
187 | 187 |
|
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 | | - |
356 | 188 | {{! 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 }} |
357 | 189 | <section> |
358 | 190 |
|
359 | | - <Shw::Text::H3>Framed</Shw::Text::H3> |
| 191 | + <Shw::Divider /> |
| 192 | + |
| 193 | + <Shw::Text::H2>Demo</Shw::Text::H2> |
360 | 194 |
|
361 | 195 | <Shw::Frame |
362 | 196 | @id="demo-full-app-frame-with-app-header-and-app-side-nav" |
|
0 commit comments