doc: sync view source to the correct path (#1840)

### What does it do? sync view source to the correct path ### Why is it needed? to redirect to the correct path when the user clicked the "ViewSource"
strapi · Jan 13, 2025 · e74a33d · e74a33d
2 parents c5600e0 + cbf07ea
commit e74a33d
Show file tree

Hide file tree

Showing 25 changed files with 33 additions and 24 deletions.
diff --git a/.changeset/new-cobras-flash.md b/.changeset/new-cobras-flash.md
@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+sync view source to the correct path
diff --git a/docs/stories/01-foundations/typography.mdx b/docs/stories/01-foundations/typography.mdx
@@ -16,7 +16,7 @@ import { Typography } from '@strapi/design-system';
 Typography is an important part of the Design System that brings consistency across experiences and platforms. Good
 typography rules help present content clearly and efficiently.
 
-<ViewSource path="components/Typography" />
+<ViewSource path="primitives/Typography" />
 
 ## Usage
 

diff --git a/docs/stories/03-inputs/Toggle.mdx b/docs/stories/03-inputs/Toggle.mdx
@@ -15,7 +15,7 @@ import * as ToggleStories from './Toggle.stories';
 
 Enable users to switch a single option between on and off states
 
-<ViewSource path="components/ToggleInput" />
+<ViewSource path="components/Toggle" />
 
 ## Usage
 

diff --git a/docs/stories/04-components/LinkButton.mdx b/docs/stories/04-components/LinkButton.mdx
@@ -18,7 +18,7 @@ A useful wrapper around the [`Button`](../?path=/docs/components-button--docs) c
 to a different location. By default, the `tag` prop is the [`BaseLink`](../?path=/docs/primitives-baselink--docs)
 component, but can be changed to integrate with routing libraries.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/LinkButton)
+<ViewSource path="components/LinkButton" />
 
 ## Usage
 

diff --git a/docs/stories/Alert.mdx b/docs/stories/Alert.mdx
@@ -19,7 +19,7 @@ multiple purposes and provide context.
 - Alerts should be used thoughtfully and occasionally not to overwhelmed the users.
 - Should not be used for marketing purposes.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Alert)
+<ViewSource path="components/Alert" />
 
 ## Imports
 

diff --git a/docs/stories/Badge.mdx b/docs/stories/Badge.mdx
@@ -16,7 +16,7 @@ Badges are used to give a quick visual indication to the users.
 - Use the active state only with a label.
 - Use Tag component if the information given needs to be related to a performed action.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Badge)
+<ViewSource path="components/Badge" />
 
 ## Imports
 

diff --git a/docs/stories/Box.mdx b/docs/stories/Box.mdx
@@ -9,7 +9,7 @@ import * as BoxStories from './Box.stories';
 
 This is the doc of the `Box` component
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Box)
+<ViewSource path="primitives/Box" />
 
 ## Imports
 

diff --git a/docs/stories/Breadcrumbs.mdx b/docs/stories/Breadcrumbs.mdx
@@ -14,7 +14,7 @@ Breadcrumbs are a list of hierarchical links that inform users about their possi
 - Use breadcrumbs in modal's headers.
 - Using breadcrumbs in a page or a form is _not_ a consistent experience.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Breadcrumbs)
+<ViewSource path="components/Breadcrumbs" />
 
 ## Imports
 

diff --git a/docs/stories/Card.mdx b/docs/stories/Card.mdx
@@ -16,7 +16,7 @@ Cards are used to gather a set of information that needs to stand out from the r
 - Prioritize content within the Card so users know exactly what are the main information.
 - If Call-to-Actions are used, they should be placed at the bottom of the Card.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Card)
+<ViewSource path="components/Card" />
 
 ## Imports
 

diff --git a/docs/stories/Carousel.mdx b/docs/stories/Carousel.mdx
@@ -17,7 +17,7 @@ Carousels are slideshow components for navigating through a set of assets.
 - Carousels should at least give the possibility to remove an asset from it.
 - Carousels don't have any caption but can have a description line.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/CarouselInput)
+<ViewSource path="components/CarouselInput" />
 
 ## Imports
 

diff --git a/docs/stories/Divider.mdx b/docs/stories/Divider.mdx
@@ -13,7 +13,7 @@ Dividers are used to separate two pieces of content. They have a generic style i
 - Depending on what is about to be made, a small spacing left and right can be added.
 - Dividers should not be bolder.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Divider)
+<ViewSource path="components/Divider" />
 
 ## Imports
 

diff --git a/docs/stories/EmptyStateLayout.mdx b/docs/stories/EmptyStateLayout.mdx
@@ -15,7 +15,7 @@ EmptyStates are a pattern used to indicate a page or a table is empty.
 - Use the most appropriate illustration for the usecase. If related to permissions, choose the eye one.
 - Use the button to help redirecting the user to a more relevant place.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/EmptyStateLayout)
+<ViewSource path="components/EmptyStateLayout" />
 
 ## Imports
 

diff --git a/docs/stories/Flex.mdx b/docs/stories/Flex.mdx
@@ -9,7 +9,7 @@ import * as FlexStories from './Flex.stories';
 
 This is the doc of the `Flex` component
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Flex)
+<ViewSource path="primitives/Flex" />
 
 ## Imports
 

diff --git a/docs/stories/Grid.mdx b/docs/stories/Grid.mdx
@@ -15,7 +15,7 @@ system, which includes icons, components, and layout dimensions. Always try to a
 necessary use good judgement to fine tune your designs to 4px. The 4px baseline is there to allow more flexibility for
 line heights and smaller adjustments.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Grid)
+<ViewSource path="primitives/Grid" />
 
 ## Imports
 

diff --git a/docs/stories/Link.mdx b/docs/stories/Link.mdx
@@ -17,7 +17,7 @@ Links are used to send users to another page or an anchor. They are used for ext
 - Links text should be concise and describe their purpose. Users need to know exactly what they are about to do.
 - Use capital letters.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Link)
+<ViewSource path="components/Link" />
 
 ## Imports
 

diff --git a/docs/stories/LiveRegions.mdx b/docs/stories/LiveRegions.mdx
@@ -8,7 +8,7 @@ import * as LiveRegionsStories from './LiveRegions.stories';
 
 This is the doc of the `LiveRegions` component.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/LiveRegions)
+<ViewSource path="components/LiveRegions" />
 
 ## Imports
 

diff --git a/docs/stories/Loader.mdx b/docs/stories/Loader.mdx
@@ -15,7 +15,7 @@ loading is ongoing.
 - Once the content appears, the loader disappears.
 - If the trigger only concerns a portion of a page, the loader should be placed in that part.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Loader)
+<ViewSource path="components/Loader" />
 
 ## Imports
 

diff --git a/docs/stories/Pagination.mdx b/docs/stories/Pagination.mdx
@@ -9,7 +9,7 @@ import * as PaginationStories from './Pagination.stories';
 
 The Pagination component is used to navigate multipage content.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Pagination)
+<ViewSource path="components/Pagination" />
 
 ## Imports
 

diff --git a/docs/stories/RawTable.mdx b/docs/stories/RawTable.mdx
@@ -9,7 +9,7 @@ import * as RawTableStories from './RawTable.stories';
 
 This is the doc of the `RawTable` component
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/RawTable)
+<ViewSource path="components/RawTable" />
 
 ## Imports
 

diff --git a/docs/stories/Searchbar.mdx b/docs/stories/Searchbar.mdx
@@ -17,7 +17,8 @@ SearchBars are used to search and navigate through specific content.
 - SearchBar should be placed above the content to search into.
 - SearchBar do not have a visual label but hidden details should be provided for accessibility matters.
 - If adding a SearchBar, make sure to add a "No results found" state.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Searchbar)
+
+<ViewSource path="components/Searchbar" />
 
 ## Imports
 

diff --git a/docs/stories/SimpleMenu.mdx b/docs/stories/SimpleMenu.mdx
@@ -12,7 +12,7 @@ built on top of the [RadixUI Dropdown Menu](https://www.radix-ui.com/docs/primit
 component. This component exports an easy to use `SimpleMenu` component but if you need more fine-grained control you
 can use it's styled primitives countpart `Menu`.
 
-[View source](https://github.com/strapi/design-system-experiments/tree/main/packages/design-system/src/SimpleMenu)
+<ViewSource path="components/SimpleMenu" />
 
 ## Usage
 

diff --git a/docs/stories/Status.mdx b/docs/stories/Status.mdx
@@ -17,7 +17,8 @@ Status are used to give an important visual indication to the users on a page le
 - Status should not be used if there are no state change possible.
 - Use colors of the theme if a new colors is required.
 - Status should not be clickable. They are visual information only.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Status)
+
+<ViewSource path="components/Status" />
 
 ## Imports
 

diff --git a/docs/stories/SubNav.mdx b/docs/stories/SubNav.mdx
@@ -31,7 +31,7 @@ A Text Button component can be found at the bottom of a pages gathering in the S
 Related pages are gathered under specific headers within the Sub Navigation. These headers are helpful to understand the
 section hierarchy. Moreover, each page gets its very own icon to make it distinctive.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/SubNav)
+<ViewSource path="components/SubNav" />
 
 ## Imports
 

diff --git a/docs/stories/Table.mdx b/docs/stories/Table.mdx
@@ -21,7 +21,8 @@ Several type of data can be included within tables such as: plain text, Select,
 - Checkboxes (i.e. a bulk action) are optional.
 - If the Table is empty, make sure to use the EmptyStateLayout component to fill it.
 - Tables can be associated with a Search bar and/or a filter button.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Table)
+
+<ViewSource path="components/Table" />
 
 ## Imports
 

diff --git a/docs/stories/Tag.mdx b/docs/stories/Tag.mdx
@@ -16,7 +16,8 @@ component. They are also used as a filter.
 - Tags text should be explicit and indicate its purpose.
 - Tags should be very close to or within the performed action.
 - Use Badge component if the information given is not related to a performed action.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Tag)
+
+<ViewSource path="components/Tag" />
 
 ## Imports