From aafb0dbb5c5a50a7a9fff15bc9218b5e38e9ab7d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 14 Apr 2025 13:25:10 +0200 Subject: [PATCH] Add Link page Signed-off-by: Charles de Dreuille --- .../src/app/(docs)/components/link/page.mdx | 84 +++++++++++++++++++ .../src/app/(docs)/components/link/props.ts | 26 ++++++ .../src/app/(docs)/components/menu/page.mdx | 21 +++-- canon-docs/src/snippets/stories-snippets.tsx | 8 ++ canon-docs/src/utils/data.ts | 5 ++ 5 files changed, 139 insertions(+), 5 deletions(-) create mode 100644 canon-docs/src/app/(docs)/components/link/page.mdx create mode 100644 canon-docs/src/app/(docs)/components/link/props.ts diff --git a/canon-docs/src/app/(docs)/components/link/page.mdx b/canon-docs/src/app/(docs)/components/link/page.mdx new file mode 100644 index 0000000000..64a3261590 --- /dev/null +++ b/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 `` element. + +} + code={`Sign up for Backstage`} +/> + + + + Usage + Theming + + + Sign up for Backstage`} + /> + + + 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']` + + + +## API reference + + + +## Examples + +### Variants + +Here's a view when links have different variants. + +} + code={` + + + + + `} +/> + +### Weights + +Here's a view when links have different weights. + +} + code={` + + + `} +/> diff --git a/canon-docs/src/app/(docs)/components/link/props.ts b/canon-docs/src/app/(docs)/components/link/props.ts new file mode 100644 index 0000000000..d0b15808e9 --- /dev/null +++ b/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 = { + 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, +}; diff --git a/canon-docs/src/app/(docs)/components/menu/page.mdx b/canon-docs/src/app/(docs)/components/menu/page.mdx index aca381da18..98c4949438 100644 --- a/canon-docs/src/app/(docs)/components/menu/page.mdx +++ b/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. 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-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` diff --git a/canon-docs/src/snippets/stories-snippets.tsx b/canon-docs/src/snippets/stories-snippets.tsx index 9536ba16a2..6b54f5dc4d 100644 --- a/canon-docs/src/snippets/stories-snippets.tsx +++ b/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 ? : null; }; + +export const LinkSnippet = ({ story }: { story: keyof typeof LinkStories }) => { + const stories = composeStories(LinkStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; diff --git a/canon-docs/src/utils/data.ts b/canon-docs/src/utils/data.ts index 43a457d268..48274ea1a2 100644 --- a/canon-docs/src/utils/data.ts +++ b/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',