docs: add tags on component docs pages (#1076)

* docs: add tags on component docs pages

* docs: add dev tag to  tile, panel, and list component pages

docs/_data/sidebars/left-navigation-sidebar.yml

@@ -62,10 +62,6 @@ entries:
       url: /patterns/multi-input.html
       output: web
 
-    - title: Step Input
-      url: /patterns/step-input.html
-      output: web
-
     - title: Time Picker
       url: /patterns/time-picker.html
       output: web

docs/_data/tags.yml

@@ -3,4 +3,5 @@ component-tags:
   f3: {name: 'fiori 3', title: 'Fiori 3 Component' , color: 2}
   theme: {name: 'themeable', title: 'Fiori 3 Themeable Component', color: 3}
   design: {name: 'design in progress', title: 'Design is under review', color: 4}
-  development: {name: 'in development', title: 'The component is under development', color: 5}
+  development: {name: 'in development', title: 'The component is under development, breaking changes may occur', color: 5}
+  non-f3: {name: 'non-fiori 3', title: 'Non Fiori 3 Component' , color: 6}

docs/pages/components/action-bar.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/action-bar.html
 folder: components
+tags: [a11y, theme, non-f3]
 ---
 The Action Bar is located at the top of the page and is used for the following:
 {: .docs-intro}

docs/pages/components/alert.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/alert.html
 folder: components
 summary:
+tags: [a11y, theme, non-f3]
 ---
 
 Alerts provide inline messages within the application that are color-coded to emphasize the level of urgency.

docs/pages/components/asset-upload.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/asset-upload.html
 folder: components
 summary:
+tags: [development]
 ---
 > **UNDER REVIEW**. This component is under review. A new version will be implemented soon.
 Asset Upload provides a stylized component for file upload button.

docs/pages/components/avatar.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/avatar.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 Avatar is a way to visually present something using an icon or user initials.

docs/pages/components/bar.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/bar.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The Bar component is a container that holds titles, buttons and input controls. Its content is distributed in three areas - left, middle and right. <br>

docs/pages/components/breadcrumb.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/breadcrumb.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The breadcrumb allows users to see the current page and navigation path to that page.

docs/pages/components/busy-indicator.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/busy-indicator.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 A busy indicator informs the user of an ongoing operation. Only one busy indicator should be shown at a time.

docs/pages/components/calendar.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/calendar.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 Commonly used as the contents of a popover when composing `date-picker`, rarely used on its own as a standalone component.

docs/pages/components/counter.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/counter.html
 folder: components
+tags: [development]
 ---
 > **UNDER REVIEW**. This component is under review. A new version will be implemented soon.
 {: .docs-intro}

docs/pages/components/dialog.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/dialog.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The dialog is a container displayed in response to an action.

docs/pages/components/form.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/form.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 Form groups are used to assemble form elements with labels, messages, and help containers.

docs/pages/components/generic-tile.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/generic-tile.html
 folder: components
 summary:
+tags: [f3, a11y, theme, development]
 ---
 
 

docs/pages/components/icon.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/icon.html
 folder: components
 summary:
+tags: [development]
 ---
 > **UNDER REVIEW**. This component is under review. A new version will be implemented soon.
 {: .docs-intro}

docs/pages/components/image.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/image.html
 folder: components
 summary:
+tags: [development]
 ---
 > **DEPRECATED**. Use the [Avatar]({{site.baseurl}}/components/avatar.html) component.
 {: .docs-deprecated}

docs/pages/components/info-label.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/info-label.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 Info Label is a small non-interactive numeric or text-based control. Its primary use is to add user-defined characteristic to an object. `fd-info-label`, `fd-info-label--numeric`, `fd-info-label--accent-color-1` and `fd-info-label--icon`

docs/pages/components/inline-help.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/inline-help.html
 folder: components
 summary:
+tags: [non-f3, a11y]
 ---
 > **DEPRECATED**. The component is deprecated.
 {: .docs-intro}

docs/pages/components/input-group.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/input-group.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 The input group includes form inputs with add-ons that allow the user to better understand the information being entered.

docs/pages/components/link.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/link.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The `fd-link` component supports the use of modifiers, as well as the `is-visited` flag, which allows for optimal customization of your hyperlink. There are currently no restrictions as to which content can be included in this component.

docs/pages/components/list.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/list.html
 folder: components
+tags: [f3, a11y, theme, development]
 ---
 
 In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs.

docs/pages/components/localization-editor.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/localization-editor.html
 folder: components
 summary:
+tags: [non-f3]
 ---
 
 ## With input

docs/pages/components/menu.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/menu.html
 folder: components
 summary:
+tags: [f3, a11y, theme, development]
 ---
 
 The menu component is the listing structure with optional headers to create menus.

docs/pages/components/message-box.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/message-box.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 Message Box is used to display simple messages (text) to the user. These messages could be Standard (Default), Confirmation, Error, Success, Warning and Information (Neutral). The Message Box component inherits the look and the basic behaviour (excludes dragging and resizing) of the [Dialog]({{site.baseurl}}/components/dialog.html) component. 

docs/pages/components/message-strip.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/message-strip.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 Message Strip provide inline messages within the application that are color-coded to emphasize the level of urgency.

docs/pages/components/message-toast.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/message-toast.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 Message Toast is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

docs/pages/components/notification.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/notification.html
 folder: components
 summary:
+tags: [f3, a11y, theme, development]
 ---
 > **UNDER REVIEW**. This component is under review. A new version will be implemented soon.
 {: .docs-intro}

docs/pages/components/object-status.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/object-status.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 Object Status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table. 
 {: .docs-intro}

docs/pages/components/pagination.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/pagination.html
 folder: components
 summary:
+tags: [a11y, theme]
 ---
 
 Pagination is commonly used for tables and tiles. It allows users to see how many pages of content exist, to navigate and highlights which page they are currently viewing.

docs/pages/components/panel.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/panel.html
 folder: components
+tags: [f3, a11y, theme, development]
 ---
 The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
 {: .docs-intro}

docs/pages/components/popover.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/popover.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The popover is a wrapping component that accepts a "control" as well as a "body".

docs/pages/components/product-switch.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/product-switch.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 {: .docs-intro}

docs/pages/components/select.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/select.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 The select component is commonly used to enable users to select an item from a predefined list.

docs/pages/components/shellbar.md

@@ -7,6 +7,7 @@ sidebar: left-navigation-sidebar
 permalink: /components/shellbar.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The shellbar offers consistent, responsive navigation across all products and applications.

docs/pages/components/side-navigation.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/side-navigation.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The left navigation area can be used to display navigation structures with links that change the content in the main area. The side navigation consists of two container section:  the Main Navigation Section (top-aligned) with links used to navigate within the user’s current work context, and Utility Section (bottom-aligned) that contains links to additional information.

docs/pages/components/step-input.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/step-input.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 The step input control allows the user to change the input values in predefined increments (steps).

docs/pages/components/switch.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/switch.html
 folder: components
+tags: [f3, a11y, theme]
 ---
 
 The Switch is meant to resemble a physical switch and allow a user to turn a setting “on” or “off”. It should be used to switch between two states/modes: active or inactive.

docs/pages/components/table.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/table.html
 folder: components
+tags: [development]
 ---
 
 > **UNDER REVIEW**. This component is under review. A new version will be implemented soon.

docs/pages/components/tabs.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/tabs.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 Tabs are based on a folder metaphor and used to separate content into different sections. Tabs should be ordered to create a visual hierarchy based on priority.

docs/pages/components/time.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/time.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The time component is used to select a time value.

docs/pages/components/token.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/token.html
 folder: components
 summary:
+tags: [f3, a11y, theme]
 ---
 
 Token are used to represent contextualizing information. They can be useful to show applied filters, selected values for form field or object metadata.

docs/pages/components/toolbar.md

@@ -7,6 +7,7 @@ toc: false
 permalink: components/toolbar.html
 folder: components
 summary:
+tags: [f3, a11y, theme, design]
 ---
 
 The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.  It is most commonly used to display buttons, labels, selects and various other input controls.

docs/pages/components/tree.md

@@ -6,6 +6,7 @@ sidebar: left-navigation-sidebar
 toc: false
 permalink: components/tree.html
 folder: components
+tags: [development]
 ---
 > **UNDER REVIEW**. This component is under review. A new version will be implemented soon.
 {: .docs-intro}

docs/pages/patterns/combobox-input.md

@@ -7,6 +7,7 @@ toc: false
 permalink: patterns/combobox-input.html
 folder: patterns
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The Combobox Input component is an opinionated composition of the input group, popover and list components. 

docs/pages/patterns/contextual-menu.md

@@ -7,6 +7,7 @@ toc: false
 permalink: patterns/contextual-menu.html
 folder: patterns
 summary:
+tags: [f3, a11y, theme]
 ---
 
 

docs/pages/patterns/date-picker.md

@@ -7,6 +7,7 @@ toc: false
 permalink: patterns/date-picker.html
 folder: patterns
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The date-picker component is an opinionated composition of the `input-group`, `popover` and `calendar` components to accomplish the UI pattern for picking a date.

docs/pages/patterns/multi-input.md

@@ -7,6 +7,7 @@ toc: false
 permalink: patterns/multi-input.html
 folder: patterns
 summary:
+tags: [f3, a11y, theme]
 ---
 
 The multi-input component is an opinionated composition of the `input group`, `popover`, `checkbox`, `list` and `token` components.