diff --git a/docs/stories/04-components/IconButton.mdx b/docs/stories/04-components/IconButton.mdx index 5eb41a81b..96e615e0a 100644 --- 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. diff --git a/docs/stories/04-components/LinkButton.mdx b/docs/stories/04-components/LinkButton.mdx index 713dfc5a4..ab37be6f9 100644 --- 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 ``. 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'; Home ; ``` -### 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'; - - - Home -; -``` - ## Props diff --git a/docs/stories/04-components/TextButton.mdx b/docs/stories/04-components/TextButton.mdx index 4500bd37c..f9915a800 100644 --- 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 ``. 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'; Home ; ``` - -### 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'; - - - Home -; -``` diff --git a/docs/stories/Breadcrumbs.mdx b/docs/stories/Breadcrumbs.mdx index 37ad81901..d3a83be2d 100644 --- 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 ``. 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'; - + Media Library ; ``` -#### 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'; - - - - Media Library - -; -``` - ## Props diff --git a/docs/stories/Link.mdx b/docs/stories/Link.mdx index 83c15b550..fc1095431 100644 --- 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 ``. 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'; Home ; ``` -#### 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'; - - - Home -; -``` - ## Props diff --git a/docs/stories/Pagination.mdx b/docs/stories/Pagination.mdx index 1cd007660..eb0ab420e 100644 --- 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 ``. 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'; @@ -47,30 +47,6 @@ import { NavLink } from 'react-router-dom'; ; ``` -#### 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'; - - - - Previous - - - 1 - - - 2 - - - Next page - -; -``` - ## Props diff --git a/docs/stories/SimpleMenu.mdx b/docs/stories/SimpleMenu.mdx index 13f5c8571..1b4b671a7 100644 --- 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. 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 index 8bb521fa8..87219623c 100644 --- 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 ``. 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'; - + Home ; ``` -#### 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'; - - - Home -; -``` - ## SubNav Props