States

Description

The purpose of this page is to edit or add a new State, according to the country.

States User Interface

QA

Link to the test

Components description

Common components

• Breadcrumbs navigation - Breadcrumb UI Kit.

• Heading of the page - Headings UI Kit.

• Help Button - Buttons Outline UI Kit.

• 4 table header links

• Save button

• Cancel button

Tabs section

The active selected tab States is highlighted using Navigation Tab UI Kit.

The main block

Header of the block

Named States with the numeric value of total counted states in the listing.

The second component nearby is from common component 4 table header tools

Sorting section

The table list can be easily sorted by clicking the arrows at the beginning of the table.

The arrow indicators - arrow up and arrow down appears, when headers are hovered. A single click will toggle the arrangement from highest to lowest, and another click will sort from lowest to highest table row values. The sorting table headers are:

• ID

• Name

• ISO code

• Zone

• Country

See sorting rules

Filtering the table information

There are several input fields and few dropdowns, for filtering the table information.

After clicking Search CTA (Buttons with icons UI Kit), the table returns the filtered results.

If filtered results do not return any information that was searched, there will be an empty table with the placeholder with the black warning triangle sign in the center - No records found. Then, a cross icon X with the word Reset, will be shown in the right table position, to reset the filtering and return to full table list. The inputs of the filtering are:

• Search ID - Accepts only numbers.

• Name - Accepts the numbers and letters.

• ISO code - Accepts the numbers and letters.

• Zone - Dropdown with the selections (by default, no value selected, single dash symbol):

  • Africa

  • Asia

  • Central America/Antilla

  • Europe

  • Europe (non-EU)

  • North America

  • Oceania

  • South America

• Country - Dropdown with the selections (by default, no value selected, single dash symbol):

  • Argentina

  • Australia

  • Canada

  • India

  • Indonesia

  • Italy

  • Japan

  • Mexico

  • Netherlands

  • United States

• Enabled - Dropdown with the selections (by default, no value selected, single dash symbol):

  • Yes

  • No

Content of the table section

There are the following components from the left to the right:

• Checkbox (Forms checkboxes UI Kit) - enabling or disabling the certain entry.

• Numeric value - ID number.

• Name of the State - two-letter initials or full State name.

• Two-letter initials - particular ISO code defined.

• Continent name - shows the certain continent name.

• Country name - shows the certain country name.

• Green checkmark or red cross - indicates that the State is enabled or disabled.

• Edit (Dropdown with Button split UI Kit)- clicking the CTA button redirects to the States editing page.

  • Dropdown arrow - shows an option of Deleting the entry. After clicking Delete, there will ba a small popup with exclamation mark and the text: Delete selected item? Name: {the name of the State}. Yes - deletes the entry with the alert success message. (Alerts Basics UI Kit) No - closes the popup with no action.

Bulk actions behavior

Clicking the CTA button (Buttons Outline UI Kit) with a small arrow, extends a contextual menu, with the following selections:

• Select all - this checkbox can select all entries in the table on that page.

• Unselect all - this checkbox can unselect all entries in the table on that page.

• Enable selection - enables all the entries in the table on that page.

• Disable selection - disables all the entries in the table on that page.

• Delete selected - deletes the selected entries in the table on that page.

• Assign to a new zone - assigns the selection to a new zone.

Pagination section

Pagination from common components

Multistores functionality

This page is Multistores dependent page.