feat(elements): add Link

src/elements/Link.tsx

@@ -0,0 +1,31 @@
+import { type AnchorHTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
+
+export const Link = styled.a<LinkProps>`
+  color: ${p => p.theme.color.slateGray};
+  text-decoration: underline;
+
+  &:hover,
+  &._hover {
+    color: ${p => p.theme.color.blueYonder};
+    svg {
+      color: ${p => p.theme.color.blueYonder};
+    }
+  }
+
+  &:active,
+  &._active {
+    color: ${p => p.theme.color.blueGray};
+    svg {
+      color: ${p => p.theme.color.blueGray};
+    }
+  }
+
+  &:visited {
+    color: ${p => p.theme.color.slateGray};
+  }
+`
+
+Link.displayName = 'LinkButton'

src/elements/LinkButton.tsx

@@ -24,15 +24,15 @@ const ICON_SIZE: Record<Size, number> = {
 }
 
 const StyledLinkButton = styled.button<LinkButtonProps>`
+  align-items: flex-end;
+  background: transparent;
+  color: ${p => p.theme.color.slateGray};
+  cursor: ${p => (p.disabled ? 'none' : 'pointer')};
   display: flex;
   flex-direction: row;
+  font-size: ${p => FONT_SIZE[p.size]};
   gap: 0.4rem;
-  align-items: flex-end;
-  background: transparent;
   text-decoration: underline;
-  cursor: ${({ disabled }: LinkButtonProps) => (disabled ? 'none' : 'pointer')}};
-  font-size: ${({ size }: LinkButtonProps) => FONT_SIZE[size]}};
-  color: ${p => p.theme.color.slateGray};
 
   &:hover,
   &._hover {
@@ -59,7 +59,7 @@ const StyledLinkButton = styled.button<LinkButtonProps>`
   }
 `
 
-function LinkButton({ children, Icon, ...props }: Readonly<LinkButtonProps>) {
+export function LinkButton({ children, Icon, ...props }: Readonly<LinkButtonProps>) {
   return (
     <StyledLinkButton {...props}>
       <>
@@ -71,5 +71,3 @@ function LinkButton({ children, Icon, ...props }: Readonly<LinkButtonProps>) {
 }
 
 LinkButton.displayName = 'LinkButton'
-
-export { LinkButton }

src/index.ts

@@ -36,6 +36,7 @@ export { IconButton } from './elements/IconButton'
 export { LinkButton } from './elements/LinkButton'
 export { Label } from './elements/Label'
 export { Legend } from './elements/Legend'
+export { Link } from './elements/Link'
 export { Tag } from './elements/Tag'
 export { TagGroup } from './elements/TagGroup'
 
@@ -209,6 +210,7 @@ export type { FigureProps } from './elements/Figure'
 export type { IconButtonProps } from './elements/IconButton'
 export type { LabelProps } from './elements/Label'
 export type { LegendProps } from './elements/Legend'
+export type { LinkProps } from './elements/Link'
 export type { LinkButtonProps } from './elements/LinkButton'
 export type { TagProps } from './elements/Tag'
 export type { TagGroupProps } from './elements/TagGroup'

stories/elements/Link.stories.tsx

@@ -0,0 +1,31 @@
+import { META_DEFAULTS } from '../../.storybook/constants'
+import { generateStoryDecorator } from '../../.storybook/utils/generateStoryDecorator'
+import { Link } from '../../src'
+
+import type { LinkProps } from '../../src'
+import type { Meta } from '@storybook/react'
+
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+const meta: Meta<LinkProps> = {
+  ...META_DEFAULTS,
+
+  title: 'Elements/Link',
+  component: Link,
+
+  decorators: [generateStoryDecorator()]
+}
+/* eslint-enable sort-keys-fix/sort-keys-fix */
+
+export default meta
+
+export function _Link(_props: LinkProps) {
+  return (
+    <p>
+      Here is{' '}
+      <Link href="https://beta.gouv.fr" target="_blank">
+        a simple link
+      </Link>
+      .
+    </p>
+  )
+}