Skip to content

Navigation Bar Specification

Jump to bottom
Maria Tsvyatkova edited this page Jul 20, 2021 · 10 revisions

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: CodeX

Developer Name: Maria Tsvyatkova

Designer Name

Requires approval from

  • Peer Developer Name | Date:
  • Design Manager Name | Date:

Signed off by

  • Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Names of Developers and Designers Date

1. Overview

The <igc-navbar> is used to facilitate the navigation through a series of hierarchical screens within an app. It is placed above the content in a header/toolbar.

<igc-navbar title="currentView">
</igc-navbar>

Objectives

  • Display information about the current position within an app.
  • Provide links to quick actions.

Acceptance criteria

  1. The navigation bar component should have a left aligned Back button.
  2. The navigation bar component should allow adding quick action buttons.
  3. The navigation bar component should have customizable title. ...

2. User Stories

Elaborate more on the multi-facetted use cases Developer stories:

  • Story 1: As a developer, I want to add a Back button to the navigation bar, which shows the previous page in the history stack. The Back Button should be left aligned by default.
  • Story 2: As a developer, I want to add right-aligned quick action icons to the navigation bar.
  • Story 3: As a developer, I want to specify a title and be able to show custom content as a title.
  • Story 4: As a developer, I want to hide/show the navigation bar when the main content is scrolled.

End-user stories:

  • Story 1: As an end-user, I want to navigate back to my previous page using a Back button.
  • Story 2: As an end-user, I want to know the status of the system.
  • Story 3: As an end-user, I want to apply actions on the content of the view.
  • Story 4: As an end-user, I want the navigation bar to be shown/hidden while I scroll the main content.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience

** Integration scenarios or functionality with other features/components prototype ** End-to-end user experienceprototype ** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off 3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats 3.4. Keyboard Navigation

Keys Description

3.5. API

IgcNavbarComponent Properties

Name Description Type Default value Reflected
id Sets the value of the id attribute. If not provided it will be automatically generated. string igc-navbar-${NEXT_ID++} false
isActionButtonVisible Specify whether the default action button should be visible. boolean true true
actionButtonIcon Sets the default icon. string undefined true
title Sets the title of the navigation bar. string undefined true
titleId Sets the titleId of the navigation bar. string igc-navbar-title-${NEXT_ID++} true

Events

Name Description Cancelable Parameters
onAction The event that will be thrown when the action of the default icon is executed. (Provides a reference to the IgcNavbar component as an argument)

Slots

Name Description
(default) Renders the title of the navigation bar.
prefix Renders the left aligned action button.
suffix Renders the right aligned action buttons.

CSS Parts

Name Description
base The base wrapper of the navigation bar.

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

ARIA Support RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Clone this wiki locally