Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
feat(secondary-nav): Refactor secondary-nav.
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: the API has been simplified and the dependency on Router has been removed.
Fixes #465
  • Loading branch information
@ffriedl89
Arnaud Crowther authored and ffriedl89 committed May 15, 2020
1 parent 67caf42 commit 8aa5d6a
Show file tree
Hide file tree
Showing 25 changed files with 526 additions and 457 deletions.
183 changes: 92 additions & 91 deletions apps/dev/src/secondary-nav/secondary-nav-demo.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,59 @@
<div class="secondary-nav-demo" style="width: 284px;">
<dt-secondary-nav aria-label="Dynamic Nav Example">
<dt-secondary-nav-title>Dynamic example</dt-secondary-nav-title>
<dt-secondary-nav-section *ngFor="let section of menu" expandable>
<dt-secondary-nav-section-title>{{
section.title
}}</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description>{{
section.description
}}</dt-secondary-nav-section-description>
<dt-secondary-nav-group
[label]="group.label"
*ngFor="let group of section.groups"
>
<ng-container *ngFor="let link of group.links">
<a
dtSecondaryNavLink
*ngIf="link.routerLink"
[routerLink]="link.routerLink"
>{{ link.label }}</a
>
<a dtSecondaryNavLink *ngIf="link.href" [href]="link.href">{{
link.label
}}</a>
</ng-container>
</dt-secondary-nav-group>
</dt-secondary-nav-section>

<ng-container *ngFor="let section of menu">
<dt-secondary-nav-section *ngIf="section.groups">
<dt-secondary-nav-section-title>{{
section.title
}}</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description>{{
section.description
}}</dt-secondary-nav-section-description>
<dt-secondary-nav-group
[label]="group.label"
*ngFor="let group of section.groups"
>
<ng-container *ngFor="let link of group.links">
<a
dtSecondaryNavLink
*ngIf="link.routerLink"
[routerLink]="link.routerLink"
>{{ link.label }}</a
>
<a
dtSecondaryNavLink
*ngIf="link.href"
[href]="link.href"
[dtSecondaryNavLinkActive]="link.active"
>{{ link.label }}</a
>
</ng-container>
</dt-secondary-nav-group>
</dt-secondary-nav-section>
<ng-container *ngIf="!section.groups">
<a
dtSecondaryNavLink
[routerLink]="section.routerLink"
*ngIf="section.routerLink"
>
<dt-secondary-nav-section-title>{{
section.title
}}</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description>{{
section.description
}}</dt-secondary-nav-section-description>
</a>
<a dtSecondaryNavLink [href]="section.href" *ngIf="section.href">
<dt-secondary-nav-section-title>{{
section.title
}}</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description>{{
section.description
}}</dt-secondary-nav-section-description>
</a>
</ng-container>
</ng-container>
</dt-secondary-nav>

<button dt-button (click)="addMenuItem()" style="margin-top: 8px;">
Expand All @@ -33,84 +62,56 @@

<br /><br /><br />

<dt-secondary-nav aria-label="Settings Nav Example" [multi]="false">
<dt-secondary-nav-title>Settings</dt-secondary-nav-title>
<br /><br /><br />

<dt-secondary-nav-section expandable active>
<dt-secondary-nav-section-title
>Active Section</dt-secondary-nav-section-title
>
<dt-secondary-nav-section-description
>Section with only groups</dt-secondary-nav-section-description
>
<dt-secondary-nav-group label="Group 1">
<a
dtSecondaryNavLink
routerLink="/"
[class.dt-secondary-nav-active]="true"
>Active link in group</a
>
<a dtSecondaryNavLink href="https://google.com"
>External link in group</a
>
</dt-secondary-nav-group>
<dt-secondary-nav-group label="Group 2">
<a dtSecondaryNavLink routerLink="/">Link in group</a>
<a dtSecondaryNavLink routerLink="/">Link in group</a>
</dt-secondary-nav-group>
</dt-secondary-nav-section>
<dt-secondary-nav>
<dt-secondary-nav-title>Secondary nav</dt-secondary-nav-title>

<dt-secondary-nav-section [expandable]="true">
<dt-secondary-nav-section>
<dt-secondary-nav-section-title>Section</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description
>Section with only links</dt-secondary-nav-section-description
>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<dt-secondary-nav-section-description>
Description
</dt-secondary-nav-section-description>
<dt-secondary-nav-group label="Group">
<a dtSecondaryNavLink routerLink="/">Link</a>
<a dtSecondaryNavLink routerLink="/">Link</a>
<a dtSecondaryNavLink routerLink="/">Link</a>
</dt-secondary-nav-group>
</dt-secondary-nav-section>

<dt-secondary-nav-section [expandable]="true">
<dt-secondary-nav-section>
<dt-secondary-nav-section-title>Section</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description
>Section with groups and links</dt-secondary-nav-section-description
<dt-secondary-nav-section-description>
Description
</dt-secondary-nav-section-description>
<a
routerLinkActive
dtSecondaryNavLink
#rla="routerLinkActive"
routerLink="/secondary-nav"
[dtSecondaryNavLinkActive]="rla.isActive"
>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<dt-secondary-nav-group label="Group 1">
<a dtSecondaryNavLink routerLink="/">Link in group</a>
<a dtSecondaryNavLink routerLink="/">Link in group</a>
Link, rla:{{ rla.isActive }}
</a>
<dt-secondary-nav-group label="Group">
<a dtSecondaryNavLink routerLink="/">Link</a>
<a dtSecondaryNavLink routerLink="/">Link</a>
</dt-secondary-nav-group>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<dt-secondary-nav-group label="Group 2">
<a dtSecondaryNavLink routerLink="/">Link in group</a>
<a dtSecondaryNavLink routerLink="/">Link in group</a>
<dt-secondary-nav-group label="Group">
<a dtSecondaryNavLink href="https://google.com">Link</a>
<a dtSecondaryNavLink href="/">Link</a>
</dt-secondary-nav-group>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
</dt-secondary-nav-section>

<dt-secondary-nav-section [expandable]="true">
<dt-secondary-nav-section-title
>Section without description</dt-secondary-nav-section-title
>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
<a dtSecondaryNavLink routerLink="/">Link without group</a>
</dt-secondary-nav-section>

<dt-secondary-nav-section href="https://google.com" [external]="true">
<dt-secondary-nav-section-title
>External Link</dt-secondary-nav-section-title
>
<dt-secondary-nav-section-description
>Non expanding section</dt-secondary-nav-section-description
>
</dt-secondary-nav-section>
<a dtSecondaryNavLink routerLink="/">
<dt-secondary-nav-section-title>Section</dt-secondary-nav-section-title>
<dt-secondary-nav-section-description>
Description
</dt-secondary-nav-section-description>
</a>

<dt-secondary-nav-section href="/">
<dt-secondary-nav-section-title
>Link without description</dt-secondary-nav-section-title
>
</dt-secondary-nav-section>
<a dtSecondaryNavLink href="https://google.com">
<dt-secondary-nav-section-title>Section</dt-secondary-nav-section-title>
</a>
</dt-secondary-nav>
</div>
26 changes: 17 additions & 9 deletions apps/dev/src/secondary-nav/secondary-nav-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,16 @@ import { Component } from '@angular/core';
templateUrl: './secondary-nav-demo.component.html',
})
export class SecondaryNavDemo {
count = 3;
menu = [
{
title: 'Section 1',
description: 'Description 1',
title: 'Item 1',
description: 'Description',
groups: [
{
label: 'Group 1',
links: [
{ routerLink: '/test', label: 'link 1' },
{ href: 'https://google.com', label: 'link 2' },
{ href: 'https://google.com', label: 'link 2', active: true },
],
},
{
Expand All @@ -44,8 +43,8 @@ export class SecondaryNavDemo {
],
},
{
title: 'Section 2',
description: 'Description 1',
title: 'Item 2',
description: 'Description',
groups: [
{
label: 'Group 1',
Expand All @@ -63,12 +62,22 @@ export class SecondaryNavDemo {
},
],
},
{
title: 'Item 3',
description: 'Non expanding link',
routerLink: '/',
},
{
title: 'Item 4',
description: 'Non expanding external link',
href: 'https://google.com',
},
];

addMenuItem(): void {
this.menu.push({
title: `Section ${this.count} (push)`,
description: 'Description 1',
title: `Item ${this.menu.length + 1} (push)`,
description: 'Description',
groups: [
{
label: 'Group 1',
Expand All @@ -86,6 +95,5 @@ export class SecondaryNavDemo {
},
],
});
this.count = this.count + 1;
}
}
45 changes: 20 additions & 25 deletions libs/barista-components/secondary-nav/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,6 @@ To make our components accessible it is obligatory to provide either an

## DtSecondaryNavSection

### Inputs

| Name | Type | Description |
| ------------ | --------- | ---------------------------------------------------------------- |
| `expanded` | `boolean` | Whether or not the section is expanded. |
| `expandable` | `boolean` | Whether or not the section can be expanded. |
| `active` | `boolean` | Whether or not the section is active and is highlighted. |
| `external` | `boolean` | Whether or not the section link routes internally or externally. |
| `href` | `string` | The router path or URL used for navigation. |

### Outputs

| Name | Type | Description |
Expand All @@ -77,6 +67,14 @@ To make our components accessible it is obligatory to provide either an
| ------- | -------- | ------------------------------------------------------------------------ |
| `label` | `string` | The value used in the group label, displayed above the cluster of links. |

## DtSecondaryNavLinkActive

### Inputs

| Name | Type | Description |
| -------------------------- | --------- | ------------------------------------------------------------------------------------ |
| `dtSecondaryNavLinkActive` | `boolean` | Whether or not a link should be active which would set the entire section to active. |

## Multiple sections open simultaneously

By default, only one section can be opened at a time unless the `multi` input is
Expand All @@ -86,29 +84,26 @@ added to `<dt-secondary-nav>`.

## Setting an active section and link

In order to set the section to a highlighted active state, the
`<dt-secondary-nav-section>` has a `active` input that can be used as a
directive or as an input. In order to set a `dtSecondaryNavLink` to a
highlighted active state, you must add the following css class:
`dt-secondary-nav-active`.
In order to set the section to a highlighted active state, simply add the
`dtSecondaryNavLinkActive` directive to any link in the nav, section, or groups.
This will cause the element to be styled in the active design.

<ba-live-example name="DtExampleSecondaryNavActive"></ba-live-example>

## Setting external links
## Using Angular RouterLinkActive

`<dt-secondary-nav>` can be used to route to external links when the
`expandable` input is not included or set to false. Then you must use the
`external` input.
In order to dynamically expand and activate a section or a link, you an use the
`routerLinkActive` directive directly on a link inside or outside of a group.

<ba-live-example name="DtExampleSecondaryNavExternal"></ba-live-example>
<ba-live-example name="DtExampleSecondaryNavRouterLinkActive"></ba-live-example>

## Disabling expandable sections
## Setting external links

In order to disable the expanding behavior of a section and use it as a regular
menu link, do not include the `expandable` input on
`<dt-secondary-nav-section>`.
`<dt-secondary-nav>` can be used to route to external links. Instead of using
`<dt-secondary-nav-section>`, use an anchor with the `dtSecondaryNavLink`
directive.

<ba-live-example name="DtExampleSecondaryNavExpandable"></ba-live-example>
<ba-live-example name="DtExampleSecondaryNavExternal"></ba-live-example>

## Removing the title

Expand Down
19 changes: 10 additions & 9 deletions libs/barista-components/secondary-nav/src/secondary-nav-module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,34 @@

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DtIconModule } from '@dynatrace/barista-components/icon';
import { DtExpandablePanelModule } from '@dynatrace/barista-components/expandable-panel';
import {
DtSecondaryNav,
DtSecondaryNavTitle,
DtSecondaryNavLink,
} from './secondary-nav';
import { DtSecondaryNav, DtSecondaryNavTitle } from './secondary-nav';
import {
DtSecondaryNavSection,
DtSecondaryNavSectionTitle,
DtSecondaryNavSectionDescription,
} from './section/secondary-nav-section';
import { DtSecondaryNavGroup } from './section/secondary-nav-group';
import {
DtSecondaryNavLink,
DtSecondaryNavLinkActive,
} from './section/secondary-nav-link';

const EXPORTED_DECLARATIONS = [
DtSecondaryNav,
DtSecondaryNavLink,
DtSecondaryNavGroup,
DtSecondaryNavTitle,
DtSecondaryNavSection,
DtSecondaryNavLinkActive,

DtSecondaryNavSectionTitle,
DtSecondaryNavSectionDescription,
DtSecondaryNavLink,
DtSecondaryNavGroup,
];

@NgModule({
imports: [CommonModule, RouterModule, DtIconModule, DtExpandablePanelModule],
imports: [CommonModule, DtIconModule, DtExpandablePanelModule],
exports: [...EXPORTED_DECLARATIONS],
declarations: [...EXPORTED_DECLARATIONS],
})
Expand Down
Loading

0 comments on commit 8aa5d6a

Please sign in to comment.