docs: remove redundant demo links (#1597)

* docs: remove redundant demo links * chore(docs): formatting * docs: fix embedded demo link
dhis2 · Sep 24, 2024 · 5552de7 · 5552de7
1 parent 6006c4e
commit 5552de7
Show file tree

Hide file tree

Showing 27 changed files with 5 additions and 103 deletions.
diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md
@@ -224,7 +224,3 @@ import { AlertStack, AlertBar } from '@dhis2/ui'
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/alert-bar--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
@@ -55,7 +55,3 @@ The Demo above lists the different sizes available. The related JSX is:
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/user-avatar--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
@@ -95,7 +95,7 @@ Buttons are used to trigger actions. There are different button variants that ar
 ```
 
 <Demo
-    path="/story/button--destructive-secondary"
+    path="button--destructive-secondary"
     args="children:Destructive secondary button"
     height="120px"
 />
@@ -240,7 +240,3 @@ Buttons are available in different sizes. Use the size that matches the usage gu
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/button--basic" target="_blank">Demo</a>
diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md
@@ -14,7 +14,7 @@ This is an Input wrapper around [calendar](./calendar) to display an input that
 Below you'll find a customizable demo of the CalendarInput component. Click "show full demo" to see this and other components.
 
 <Demo
-    path="/story/calendarinput--gregorian-with-english"
+    path="calendarinput--gregorian-with-english"
     height="350px"
 />
 

diff --git a/docs/docs/components/calendar.md b/docs/docs/components/calendar.md
@@ -178,7 +178,6 @@ To display a calendar for the user to pick a day in any supported calendar syste
 
 ## Links
 
--   <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.

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
@@ -32,7 +32,3 @@ A card is a container element used to group together and separate blocks of cont
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/card--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md
@@ -55,7 +55,3 @@ Checkboxes are used to choose one or more items from a list. A checkbox can also
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/checkbox--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/chip.md b/docs/docs/components/chip.md
@@ -102,7 +102,3 @@ Chips are used to select from a set of defined options. Chips can also represent
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/chip--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/data-table.md b/docs/docs/components/data-table.md
@@ -201,7 +201,3 @@ Patterns are common ways of achieving some functionality. Patterns aren't offere
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=datatable--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/fileinput.md b/docs/docs/components/fileinput.md
@@ -101,7 +101,3 @@ A file input is used to choose and upload files.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/file-input--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/inputfield.md b/docs/docs/components/inputfield.md
@@ -284,8 +284,3 @@ The following data types don't change the interaction with the input, but should
 ## API Reference
 
 <API />
-
-## Links
-
--   <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>
diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md
@@ -123,7 +123,3 @@ Loaders are used to show that something is in progress. They keep users informed
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/circular-loader--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md
@@ -208,7 +208,3 @@ As shown in the [order and grouping](#order-and-grouping) section, a menu can co
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/flyout-menu--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/modal.md b/docs/docs/components/modal.md
@@ -183,7 +183,3 @@ Here's the modal that is controlled by the buttons:
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/modal--default-content" target="_blank">Demo</a>
diff --git a/docs/docs/components/notice-box.md b/docs/docs/components/notice-box.md
@@ -124,7 +124,3 @@ A notice box shows important information about a situation.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/notice-box--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/org-unit-tree.md b/docs/docs/components/org-unit-tree.md
@@ -42,7 +42,3 @@ An organisation unit tree is used to choose organisation units from a hierarchy.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/organisation-unit-tree--collapsed" target="_blank">Demo</a>
diff --git a/docs/docs/components/pagination.md b/docs/docs/components/pagination.md
@@ -107,7 +107,3 @@ Different elements of the pagination component can be included, depending on the
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/pagination--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/popover.md b/docs/docs/components/popover.md
@@ -34,7 +34,3 @@ A popover is used to show more information when a user interacts with a trigger
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/popover--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md
@@ -68,7 +68,3 @@ Radio inputs are used to choose one item from a list.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/radio--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/segmented-control.md b/docs/docs/components/segmented-control.md
@@ -61,7 +61,3 @@ The value of each property can be used to select the option, using the `selected
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/segmented-control--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md
@@ -245,7 +245,3 @@ Selects are used to choose one or more items from a list of options.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/single-select--with-options-and-on-change" target="_blank">Demo</a>
diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md
@@ -52,7 +52,3 @@ Switches are used to toggle something between an on and off state.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/switch--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md
@@ -82,7 +82,3 @@ In the example above you can see the 3rd tab is disabled.
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/tab-bar--default-fluid" target="_blank">Demo</a>
diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md
@@ -140,7 +140,3 @@ Tags are used to label items by a set of shared properties, like category or sta
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/tag--default" target="_blank">Demo</a>
diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md
@@ -98,7 +98,3 @@ A tooltip is used to show contextual information when triggered by clicking, foc
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/tooltip--default-placement-top" target="_blank">Demo</a>
diff --git a/docs/docs/components/transfer.md b/docs/docs/components/transfer.md
@@ -155,7 +155,3 @@ The footer component is as follows:
 ## API Reference
 
 <API />
-
-## Links
-
--   <a href="/demo/?path=/story/transfer--multiple" target="_blank">Demo</a>
diff --git a/docs/src/components/DemoComponent.jsx b/docs/src/components/DemoComponent.jsx
@@ -16,12 +16,12 @@ export const Demo = ({ path, args, height }) => {
         if (!path) {
             return false
         }
-        return path.startsWith('/story/') ? path : `/story/${path}`
+        return path.replace('/story/', '')
     }
 
     const handleShowFullDemo = () => {
         const formattedPath = formatPath(path)
-        const fullDemoUrl = `${DEMO_URL}/?path=${encodeURIComponent(
+        const fullDemoUrl = `${DEMO_URL}/?path=/story/${encodeURIComponent(
             formattedPath
         )}${
             args
@@ -33,7 +33,7 @@ export const Demo = ({ path, args, height }) => {
         window.open(fullDemoUrl, '_blank', 'noopener,noreferrer')
     }
 
-    const iframeSrc = `${DEMO_URL}/iframe.html?path=${encodeURIComponent(
+    const iframeSrc = `${DEMO_URL}/iframe.html?path=/story/${encodeURIComponent(
         formatPath(path)
     )}&full=1&shortcuts=false&singleStory=true${
         args ? `&args=${encodeURIComponent(args)}` : ''