docs: fix relative demo links to open in new tab (#1498)

* docs: fix relative demo links to open in new tab

* chore: fix formatting

docs/docs/components/alertbar.md

@@ -224,4 +224,4 @@ import { AlertStack, AlertBar } from '@dhis2/ui'
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/feedback-alerts-alert-bar--default)
+-   <a href="/demo/?path=/story/alert-bar--default" target="_blank">Demo</a>

docs/docs/components/avatar.md

@@ -65,4 +65,4 @@ The Demo above lists the different sizes available. The related JSX is:
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/utils-user-avatar--default)
+-   <a href="/demo/?path=/story/user-avatar--default" target="_blank">Demo</a>

docs/docs/components/button.md

@@ -231,4 +231,4 @@ Buttons are available in different sizes. Use the size that matches the usage gu
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/actions-buttons-button--basic)
+-   <a href="/demo/?path=/story/button--basic" target="_blank">Demo</a>

docs/docs/components/calendar.md

@@ -204,12 +204,8 @@ To display a calendar for the user to pick a day in any supported calendar syste
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/calendar--with-ethiopic)
-
+-   <a href="/demo/?path=/story/calendar--ethiopic" target="_blank">Demo</a>
 -   [Design document](https://docs.google.com/document/d/19zjyB45oBbqC5KeubaU8E7cw9fGhFc3tOXY0GkzZKqc/edit#)
-
 -   [ADR for decision to use Temporal API](https://github.com/dhis2/multi-calendar-dates/blob/beta/doc/architecture/decisions/0002-use-temporal-api-as-the-backbone-for-the-engine.md)
-
 -   [multi-calendar-dates](https://github.com/dhis2/multi-calendar-dates) is the library that this component is built on top of.
-
 -   [Temporal API standard propsal](https://tc39.es/proposal-temporal/): the standard powering the multi-calendar-dates library

docs/docs/components/card.md

@@ -35,4 +35,4 @@ A card is a container element used to group together and separate blocks of cont
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/layout-card--default)
+-   <a href="/demo/?path=/story/card--default" target="_blank">Demo</a>

docs/docs/components/checkbox.md

@@ -55,4 +55,4 @@ Checkboxes are used to choose one or more items from a list. A checkbox can also
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-checkbox-checkbox--default)
+-   <a href="/demo/?path=/story/checkbox--default" target="_blank">Demo</a>

docs/docs/components/chip.md

@@ -101,4 +101,4 @@ Chips are used to select from a set of defined options. Chips can also represent
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/actions-chip--default)
+-   <a href="/demo/?path=/story/chip--default" target="_blank">Demo</a>

docs/docs/components/data-table.md

@@ -194,4 +194,4 @@ Patterns are common ways of achieving some functionality. Patterns aren't offere
 
 ## Links
 
--   [Demo](/demo/?path=/story/datatable--default)
+-   <a href="/demo/?path=/story/datatable--default" target="_blank">Demo</a>

docs/docs/components/fileinput.md

@@ -107,4 +107,4 @@ A file input is used to choose and upload files.
 
 ## Links
 
--   [Demo](/demo/?path=/story/file-input--default)
+-   <a href="/demo/?path=/story/file-input--default" target="_blank">Demo</a>

docs/docs/components/inputfield.md

@@ -262,5 +262,5 @@ The following data types don't change the interaction with the input, but should
 
 ## Links
 
--   [Demo](/demo/?path=/story/file-input-field--default)
--   [`TextArea` demo](/demo/?path=/story/text-area--placeholder-no-value)
+-   <a href="/demo/?path=/story/file-input-field--default" target="_blank">Demo</a>
+-   <a href="/demo/?path=/story/text-area--placeholder-no-value" target="_blank">`TextArea`Demo</a>

docs/docs/components/loading.md

@@ -104,4 +104,4 @@ Loaders are used to show that something is in progress. They keep users informed
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/feedback-loading-indicators-circular-loader--default)
+-   <a href="/demo/?path=/story/circular-loader--default" target="_blank">Demo</a>

docs/docs/components/menu.md

@@ -249,4 +249,4 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
 
 ## Links
 
--   [Demo](/demo/?path=/story/flyout-menu--default)
+-   <a href="/demo/?path=/story/flyout-menu--default" target="_blank">Demo</a>

docs/docs/components/modal.md

@@ -179,4 +179,4 @@ The `hide` variable used in the demo's below are initiated using `useState(true)
 
 ## Links
 
--   [Demo](/demo/?path=/story/modal--default-content)
+-   <a href="/demo/?path=/story/modal--default-content" target="_blank">Demo</a>

docs/docs/components/notice-box.md

@@ -144,4 +144,4 @@ A notice box shows important information about a situation.
 
 ## Links
 
--   [Demo](/demo/?path=/story/notice-box--default)
+-   <a href="/demo/?path=/story/notice-box--default" target="_blank">Demo</a>

docs/docs/components/org-unit-tree.md

@@ -41,4 +41,4 @@ An organisation unit tree is used to choose organisation units from a hierarchy.
 
 ## Links
 
--   [Demo](/demo/?path=/story/organisation-unit-tree--collapsed)
+-   <a href="/demo/?path=/story/organisation-unit-tree--collapsed" target="_blank">Demo</a>

docs/docs/components/pagination.md

@@ -104,4 +104,4 @@ Different elements of the pagination component can be included, depending on the
 
 ## Links
 
--   [Demo](/demo/?path=/story/pagination--default)
+-   <a href="/demo/?path=/story/pagination--default" target="_blank">Demo</a>

docs/docs/components/popover.md

@@ -37,4 +37,4 @@ A popover is used to show more information when a user interacts with a trigger
 
 ## Links
 
--   [Demo](/demo/?path=/story/popover--default)
+-   <a href="/demo/?path=/story/popover--default" target="_blank">Demo</a>

docs/docs/components/radio.md

@@ -61,4 +61,4 @@ Radio inputs are used to choose one item from a list.
 
 ## Links
 
--   [Demo](/demo/?path=/story/radio--default)
+-   <a href="/demo/?path=/story/radio--default" target="_blank">Demo</a>

docs/docs/components/segmented-control.md

@@ -82,4 +82,4 @@ The value of each property can be used to select the option, using the `selected
 
 ## Links
 
--   [Demo](/demo/?path=/story/segmented-control--default)
+-   <a href="/demo/?path=/story/segmented-control--default" target="_blank">Demo</a>

docs/docs/components/select.md

@@ -352,4 +352,4 @@ Selects are used to choose one or more items from a list of options.
 
 ## Links
 
--   [Demo](/demo/?path=/story/single-select--with-options-and-on-change)
+-   <a href="/demo/?path=/story/single-select--with-options-and-on-change" target="_blank">Demo</a>

docs/docs/components/switch.md

@@ -58,4 +58,4 @@ Switches are used to toggle something between an on and off state.
 
 ## Links
 
--   [Demo](/demo/?path=/story/switch--default)
+-   <a href="/demo/?path=/story/switch--default" target="_blank">Demo</a>

docs/docs/components/tab.md

@@ -95,4 +95,4 @@ Tabs are used to navigate between different views within the same page or contex
 
 ## Links
 
--   [Demo](/demo/?path=/story/tab-bar--default-fluid)
+-   <a href="/demo/?path=/story/tab-bar--default-fluid" target="_blank">Demo</a>

docs/docs/components/tag.md

@@ -95,4 +95,4 @@ Tags are used to label items by a set of shared properties, like category or sta
 
 ## Links
 
--   [Demo](/demo/?path=/story/tag--default)
+-   <a href="/demo/?path=/story/tag--default" target="_blank">Demo</a>

docs/docs/components/tooltip.md

@@ -80,4 +80,4 @@ A tooltip is used to show contextual information when triggered by clicking, foc
 
 ## Links
 
--   [Demo](/demo/?path=/story/tooltip--default-placement-top)
+-   <a href="/demo/?path=/story/tooltip--default-placement-top" target="_blank">Demo</a>

docs/docs/components/transfer.md

@@ -158,4 +158,4 @@ The footer component is as follows:
 
 ## Links
 
--   [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-transfer--multiple)
+-   <a href="/demo/?path=/story/transfer--multiple" target="_blank">Demo</a>