Add Link page

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/app/(docs)/components/link/page.mdx

@@ -0,0 +1,84 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+  MenuSnippet,
+  ButtonSnippet,
+  LinkSnippet,
+} from '@/snippets/stories-snippets';
+import { linkPropDefs } from './props';
+
+# Link
+
+A link component that renders a `<a>` element.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<LinkSnippet story="Default" />}
+  code={`<Link href="https://backstage.io">Sign up for Backstage</Link>`}
+/>
+
+<Tabs.Root>
+  <Tabs.List>
+    <Tabs.Tab>Usage</Tabs.Tab>
+    <Tabs.Tab>Theming</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel>
+    <CodeBlock
+      code={`import { Link } from '@backstage/canon';
+
+<Link href="https://backstage.io">Sign up for Backstage</Link>`}
+    />
+  </Tabs.Panel>
+  <Tabs.Panel>
+    We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
+    your brand. For additional flexibility, you can use the provided class names for each element listed below.
+    - `canon-Link`
+    - `canon-Link[data-variant='body']`
+    - `canon-Link[data-variant='subtitle']`
+    - `canon-Link[data-variant='caption']`
+    - `canon-Link[data-variant='label']`
+    - `canon-Link[data-weight='regular']`
+    - `canon-Link[data-weight='bold']`
+  </Tabs.Panel>
+</Tabs.Root>
+
+## API reference
+
+<PropsTable data={linkPropDefs} />
+
+## Examples
+
+### Variants
+
+Here's a view when links have different variants.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<LinkSnippet story="AllVariants" />}
+  code={`<Flex gap="4" direction="column">
+    <Link href="https://canon.backstage.io" variant="subtitle" />
+    <Link href="https://canon.backstage.io" variant="body" />
+    <Link href="https://canon.backstage.io" variant="caption" />
+    <Link href="https://canon.backstage.io" variant="label" />
+  </Flex>`}
+/>
+
+### Weights
+
+Here's a view when links have different weights.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<LinkSnippet story="AllWeights" />}
+  code={`<Flex gap="4" direction="column">
+    <Link href="https://canon.backstage.io" weight="regular" />
+    <Link href="https://canon.backstage.io" weight="bold" />
+  </Flex>`}
+/>

canon-docs/src/app/(docs)/components/link/props.ts

@@ -0,0 +1,26 @@
+import {
+  classNamePropDefs,
+  stylePropDefs,
+  renderPropDefs,
+} from '@/utils/propDefs';
+import type { PropDef } from '@/utils/propDefs';
+
+export const linkPropDefs: Record<string, PropDef> = {
+  to: {
+    type: 'string',
+  },
+  variant: {
+    type: 'enum',
+    values: ['subtitle', 'body', 'caption', 'label'],
+    default: 'body',
+    responsive: true,
+  },
+  weight: {
+    type: 'enum',
+    values: ['regular', 'bold'],
+    default: 'regular',
+    responsive: true,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};

canon-docs/src/app/(docs)/components/menu/page.mdx

@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { MenuSnippet, ButtonSnippet } from '@/snippets/stories-snippets';
+import { MenuSnippet } from '@/snippets/stories-snippets';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import {
   menuRootPropDefs,
@@ -69,10 +69,21 @@ A list of actions in a dropdown, enhanced with keyboard navigation.
   <Tabs.Panel>
     We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
     your brand. For additional flexibility, you can use the provided class names for each element listed below.
-    <CodeBlock
-      code={`<Button className="button" />`}
-    />
-
+    - `canon-MenuTrigger`
+    - `canon-MenuBackdrop`
+    - `canon-MenuPositioner`
+    - `canon-MenuPopup`
+    - `canon-MenuArrow`
+    - `canon-MenuItem`
+    - `canon-MenuGroup`
+    - `canon-MenuGroupLabel`
+    - `canon-MenuRadioGroup`
+    - `canon-MenuRadioItem`
+    - `canon-MenuRadioItemIndicator`
+    - `canon-MenuCheckboxItem`
+    - `canon-MenuCheckboxItemIndicator`
+    - `canon-MenuSubmenuTrigger`
+    - `canon-MenuSeparator`
   </Tabs.Panel>
 </Tabs.Root>
 

canon-docs/src/snippets/stories-snippets.tsx

@@ -14,6 +14,7 @@ import * as TextStories from '../../../packages/canon/src/components/Text/Text.s
 import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
 import * as SelectStories from '../../../packages/canon/src/components/Select/Select.stories';
 import * as MenuStories from '../../../packages/canon/src/components/Menu/Menu.stories';
+import * as LinkStories from '../../../packages/canon/src/components/Link/Link.stories';
 
 export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
   const stories = composeStories(BoxStories);
@@ -133,3 +134,10 @@ export const MenuSnippet = ({ story }: { story: keyof typeof MenuStories }) => {
 
   return StoryComponent ? <StoryComponent /> : null;
 };
+
+export const LinkSnippet = ({ story }: { story: keyof typeof LinkStories }) => {
+  const stories = composeStories(LinkStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};

canon-docs/src/utils/data.ts

@@ -91,6 +91,11 @@ export const components: Page[] = [
     slug: 'icon-button',
     status: 'alpha',
   },
+  {
+    title: 'Link',
+    slug: 'link',
+    status: 'alpha',
+  },
   {
     title: 'Menu',
     slug: 'menu',