docs: update routing library guidelines

strapi · Jun 11, 2024 · f623e78 · f623e78
1 parent 7d1be2f
commit f623e78
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 118 deletions.
diff --git a/docs/stories/04-components/IconButton.mdx b/docs/stories/04-components/IconButton.mdx
@@ -15,8 +15,8 @@ import * as IconButtonStories from './IconButton.stories';
 
 ## Overview
 
-A type of button that does not have a visible label but instead an icon to denote its action. The component does
-require a label for accessibility & by default, will show a tooltip with that label.
+A type of button that does not have a visible label but instead an icon to denote its action. The component does require
+a label for accessibility & by default, will show a tooltip with that label.
 
 <ViewSource path="components/IconButton" />
 

diff --git a/docs/stories/04-components/LinkButton.mdx b/docs/stories/04-components/LinkButton.mdx
@@ -32,32 +32,19 @@ import { LinkButton } from '@strapi/design-system';
 
 ### React Router
 
-To use the LinkButton component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink`
-component to the `tag` prop in order to replace the default HTML anchor `<a />`. You'll now be able to pass all
-`NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
 
 ```jsx
 import { LinkButton } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
 
 <LinkButton tag={NavLink} to="/home">
   Home
 </LinkButton>;
 ```
 
-### NextJS
-
-For NextJS, you'll need to wrap the `LinkButton` with the `NextLink` component
-
-```jsx
-import { LinkButton } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-<NextLink href="/home" passHref>
-  <LinkButton>Home</LinkButton>
-</NextLink>;
-```
-
 ## Props
 
 <TypeTable of={LinkButton} />
diff --git a/docs/stories/04-components/TextButton.mdx b/docs/stories/04-components/TextButton.mdx
@@ -54,28 +54,15 @@ import { TextButton } from '@strapi/design-system';
 
 ### React Router
 
-To use the LinkButton component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink`
-component to the `tag` prop in order to replace the default HTML anchor `<a />`. You'll now be able to pass all
-`NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
 
 ```jsx
 import { TextButton } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
 
 <TextButton tag={NavLink} to="/home">
   Home
 </TextButton>;
 ```
-
-### NextJS
-
-For NextJS, you'll need to wrap the `LinkButton` with the `NextLink` component
-
-```jsx
-import { TextButton } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-<NextLink href="/home" passHref>
-  <TextButton>Home</TextButton>
-</NextLink>;
-```
diff --git a/docs/stories/Breadcrumbs.mdx b/docs/stories/Breadcrumbs.mdx
@@ -47,35 +47,21 @@ Breadcrumbs with Crumb are visual information only and cannot be navigated. They
 
 ### Usage with other routing libraries
 
-To use the Link component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to
-the `as` prop in order to replace the default HTML anchor `<a />`. You'll now be able to pass all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
 
 ```jsx
 import { Breadcrumbs, CrumbLink } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
 
 <Breadcrumbs label="Folder navigatation" tag="nav">
-  <CrumbLink as={NavLink} to="/">
+  <CrumbLink tag={NavLink} to="/">
     Media Library
   </CrumbLink>
 </Breadcrumbs>;
 ```
 
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `CrumbLink` with the `NextLink` component
-
-```jsx
-import { Breadcrumbs, CrumbLink } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-<Breadcrumbs label="Folder navigatation" tag="nav">
-  <NextLink href="/home" passHref>
-    <CrumbLink>Media Library</CrumbLink>
-  </NextLink>
-</Breadcrumbs>;
-```
-
 ## Props
 
 <TypeTable of={Breadcrumbs} />
diff --git a/docs/stories/Link.mdx b/docs/stories/Link.mdx
@@ -50,31 +50,19 @@ Display icons on the left or right side.
 
 ### Usage with other routing libraries
 
-To use the Link component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to
-the `as` prop in order to replace the default HTML anchor `<a />`. You'll now be able to pass all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
 
 ```jsx
 import { Link } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
 
 <Link as={NavLink} to="/home">
   Home
 </Link>;
 ```
 
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `Link` with the `NextLink` component
-
-```jsx
-import { Link } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-<NextLink href="/home" passHref>
-  <Link>Home</Link>
-</NextLink>;
-```
-
 ## Props
 
 <TypeTable of={Link} />
diff --git a/docs/stories/Pagination.mdx b/docs/stories/Pagination.mdx
@@ -23,13 +23,13 @@ import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/desi
 
 ### Usage with routing libraries
 
-To use the PreviousLink/PageLink/NextLink component with a routing library (e.g. react-router-dom), you'll need to pass
-the `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`. You'll now be able to pass
-all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
 
 ```jsx
 import { PreviousLink, PageLink, NextLink } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
 
 <Pagination>
   <PreviousLink as={NavLink} to="/1">
@@ -47,30 +47,6 @@ import { NavLink } from 'react-router-dom';
 </Pagination>;
 ```
 
-#### Usage with NextJS
-
-For NextJS, you'll need to wrap the `Link` with the `NextLink` component
-
-```jsx
-import { PreviousLink, PageLink, NextLink } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-<Pagination>
-  <NextLink href="/home" passHref>
-    <PreviousLink>Previous</PreviousLink>
-  </NextLink>
-  <NextLink href="/1" passHref>
-    <PageLink>1</PageLink>
-  </NextLink>
-  <NextLink href="/2" passHref>
-    <PageLink>2</PageLink>
-  </NextLink>
-  <NextLink href="/2" passHref>
-    <NextLink>Next page</NextLink>
-  </NextLink>
-</Pagination>;
-```
-
 ## Props
 
 <TypeTable of={Pagination} />
diff --git a/docs/stories/SimpleMenu.mdx b/docs/stories/SimpleMenu.mdx
@@ -32,7 +32,7 @@ internal link so specific defaults may be different to what you expect.
 <Canvas of={SimpleMenuStories.WithLinks} />
 
 If you're using a framework e.g. `react-router-dom` or `nextjs` you'll probably want to use their `Link` component as a
-base. This is completely possible by using the `as` prop:
+base. This is completely possible by using the `tag` prop:
 
 ```jsx
 import { SimpleMenu, MenuItem } from '@strapi/design-system';

diff --git a/docs/stories/SubNav.mdx b/docs/stories/SubNav.mdx
@@ -52,32 +52,19 @@ import {
 
 ### Usage with other routing libraries
 
-To use the Strapi design system SubNavLink component with a routing library (e.g. react-router-dom), you'll need to pass
-the react-router-dom `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`. You'll
-now be able to pass all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
 
 ```jsx
 import { SubNavLink } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
 
-<SubNavLink as={NavLink} to="/home">
+<SubNavLink tag={NavLink} to="/home">
   Home
 </SubNavLink>;
 ```
 
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `NavLink` with the `NextLink` component
-
-```jsx
-import { SubNavLink } from '@strapi/design-system/SubNavLink';
-import NextLink from 'next/link';
-
-<NextLink href="/home" passHref>
-  <SubNavLink>Home</SubNavLink>
-</NextLink>;
-```
-
 ## SubNav Props
 
 <TypeTable of={SubNav} />