chore: refactor LinkButton to be an abstraction of Button

docs/stories/BaseLink.mdx → docs/stories/02-primitives/BaseLink.mdx

@@ -7,19 +7,23 @@ import * as BaseLinkStories from './BaseLink.stories';
 
 # BaseLink
 
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+
+## Overview
+
 BaseLink allow users to navigate to a different location. This is a very basic implementation of the native HTML anchor
-`<a />` element.
+`<a />` element but with some presets to handle disabling & other quality of life tweaks.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/BaseLink)
+<ViewSource path="components/BaseLink" />
 
-## Imports
+## Usage
 
 ```js
 import { BaseLink } from '@strapi/design-system';
 ```
 
-## Usage
-
 <Canvas of={BaseLinkStories.Base} />
 
 ## Props

docs/stories/02-primitives/BaseLink.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BaseLink } from '@strapi/design-system';
+
+const meta: Meta<typeof BaseLink> = {
+  title: 'Primitives/BaseLink',
+  component: BaseLink,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  args: {
+    children: 'Strapi.io',
+    disabled: false,
+    href: 'https://strapi.io',
+    isExternal: true,
+  },
+  render: (args) => <BaseLink {...args} />,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BaseLink>;
+
+export const Base = {
+  name: 'base',
+} satisfies Story;
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+  name: 'disabled',
+} satisfies Story;

docs/stories/04-components/LinkButton.mdx

@@ -0,0 +1,63 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import { LinkButton } from '@strapi/design-system';
+
+import * as LinkButtonStories from './LinkButton.stories';
+
+<Meta of={LinkButtonStories} />
+
+# LinkButton
+
+- [Overview](#overview)
+- [Usage](#usage)
+- [Usage with other routing libraries](#usage-with-other-routing-libraries)
+- [Props](#props)
+
+## Overview
+
+A useful wrapper around the [`Button`](../?path=/docs/components-button--docs) component that allows users to navigate
+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)
+
+## Usage
+
+```js
+import { LinkButton } from '@strapi/design-system';
+```
+
+<Canvas of={LinkButtonStories.Base} />
+
+## Usage with other routing libraries
+
+### 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.
+
+```jsx
+import { LinkButton } from '@strapi/design-system';
+import { NavLink } from 'react-router-dom';
+
+<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} />

docs/stories/04-components/LinkButton.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LinkButton } from '@strapi/design-system';
+
+const BUTTON_VARIANTS = [
+  'default',
+  'secondary',
+  'tertiary',
+  'success',
+  'success-light',
+  'danger',
+  'danger-light',
+  'ghost',
+] as const;
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Components/LinkButton',
+  component: LinkButton,
+  args: {
+    children: 'strapi.io',
+    disabled: false,
+    href: 'https://strapi.io',
+    isExternal: true,
+    size: 'M',
+    variant: 'default',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['S', 'M', 'L'],
+    },
+    variant: {
+      control: 'select',
+      options: BUTTON_VARIANTS,
+    },
+  },
+  render: (args) => <LinkButton {...args} />,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkButton>;
+
+export const Base = {
+  name: 'base',
+} satisfies Story;

docs/stories/IconButton.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import { IconButton } from '@strapi/design-system';
+
+import * as IconButtonStories from './IconButton.stories';
+
+<Meta of={IconButtonStories} />
+
+# IconButton
+
+Icon Buttons are a way to perform actions within a page, a table or another object. They help interact with its content
+via a single click in small page portion. According to their minimal style, they help understand the most important
+actions to take.
+
+**Best practices**
+
+- Icon Buttons do not have labels.
+- A Tooltip should be displayed at hover.
+- Icon Buttons can be used within a group form whenever the action are related.
+- Icon Buttons can be displayed next to each others whenever the actions are distinct.
+- In Table component, avoid using a border.
+- The icon chosen to represent the action should be perfectly explicit.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/IconButton)
+
+## Imports
+
+```js
+import { IconButton, IconButtonGroup } from '@strapi/design-system';
+```
+
+## Usage
+
+Icon Buttons are used to perform actions within a page, a table or another object. They have the advantage of being
+minimal and by so, efficient in small areas. Icon Buttons should be associated with Tooltips.
+
+<Canvas of={IconButtonStories.Base} />
+
+### IconButton Disabled
+
+Depending on the status of an action or the permissions, an IconButton can be unaccessible or unreachable yet.
+
+<Canvas of={IconButtonStories.Disabled} />
+
+### IconButton Disabled
+
+An Icon button without the tooltip. It can be interesting to rely on this component to avoid showing a tooltip when
+focusing the modals close button. **However, when not using a label, the developer should add an explicit aria-label to
+the button.**
+
+<Canvas of={IconButtonStories.WithoutTooltip} />
+
+### IconButtonGroup
+
+IconButtons can be used within another component is a Group shape.
+
+<Canvas of={IconButtonStories.Group} />
+
+### Icons as Children & aria-label
+
+IconButtons can take Icons as their children and can be fully accessible without a tooltip.
+
+<Canvas of={IconButtonStories.Children} />
+
+## Props
+
+<TypeTable of={IconButton} />