Skip to content

Commit aab0e5c

Browse files
u12206050u12206050
committed
Add markdown support
1 parent ed4fb0b commit aab0e5c

17 files changed

Lines changed: 899 additions & 237 deletions

File tree

‎component-library/.storybook/main.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
import type { StorybookConfig } from '@storybook/vue3-vite';
2+
import remarkGfm from 'remark-gfm';
23

34
const config: StorybookConfig = {
4-
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5-
addons: ['@storybook/addon-docs'],
5+
stories: [
6+
'../docs/**/*.mdx',
7+
'../src/**/*.mdx',
8+
'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
9+
],
10+
addons: [
11+
{
12+
name: '@storybook/addon-docs',
13+
options: {
14+
mdxPluginOptions: {
15+
mdxCompileOptions: {
16+
remarkPlugins: [remarkGfm],
17+
},
18+
},
19+
},
20+
},
21+
],
622
framework: {
723
name: '@storybook/vue3-vite',
824
options: {},

docs/foundations/border.md renamed to component-library/docs/foundations/Border.mdx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Border
5-
order: 10
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Border" />
74

85
# Border
96

10-
Border width tokens. For border colors, see [Tokens](./tokens.md#border).
7+
Border width tokens. For border colors, see [Tokens](./Tokens#border).
118

129
## Width Tokens
1310

@@ -36,7 +33,4 @@ Border width tokens. For border colors, see [Tokens](./tokens.md#border).
3633

3734
## Figma
3835

39-
<!-- TODO: Replace with Figma embed URL -->
40-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
41-
4236
See the design specs in Figma (link coming soon).

docs/foundations/colors.md renamed to component-library/docs/foundations/Colors.mdx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Colors
5-
order: 4
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Colors" />
74

85
# Colors
96

@@ -14,7 +11,7 @@ The color system has two layers: semantic tokens for UI and primitive scales for
1411
| Semantic tokens | Convey meaning | Auto-adapts | All UI elements |
1512
| Primitive scales | Raw color values | Manual | Reference only |
1613

17-
**Always use semantic tokens** from [Tokens](./tokens.md). Primitives are in [Palette](./palette.md).
14+
**Always use semantic tokens** from [Tokens](./Tokens). Primitives are in [Palette](./Palette).
1815

1916
## Color Roles
2017

@@ -65,7 +62,4 @@ Accent colors categorize content without semantic meaning. Use for tags, labels,
6562

6663
## Figma
6764

68-
<!-- TODO: Replace with Figma embed URL -->
69-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
70-
7165
See the design specs in Figma (link coming soon).

docs/foundations/elevation.md renamed to component-library/docs/foundations/Elevation.mdx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Elevation
5-
order: 9
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Elevation" />
74

85
# Elevation
96

@@ -52,7 +49,4 @@ Surfaces and shadows create depth. Pair surface colors with shadows.
5249

5350
## Figma
5451

55-
<!-- TODO: Replace with Figma embed URL -->
56-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
57-
5852
See the design specs in Figma (link coming soon).

docs/foundations/icons.md renamed to component-library/docs/foundations/Icons.mdx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Icons
5-
order: 7
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Icons" />
74

85
# Icons
96

10-
::: warning Work in Progress
11-
The icons package is being updated for PrimeVue compatibility. The documentation below may not work as expected.
12-
:::
7+
> **Work in Progress** — The icons package is being updated for PrimeVue compatibility. The documentation below may not work as expected.
138
149
SVG icons based on [Material Symbols](https://fonts.google.com/icons) with **Weight 400**, **Grade 0**, **Size 24**.
1510

@@ -77,7 +72,4 @@ Import SVG files directly or copy from Figma.
7772

7873
## Figma
7974

80-
<!-- TODO: Replace with Figma embed URL -->
81-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
82-
8375
See the design specs in Figma (link coming soon).

docs/foundations/logos.md renamed to component-library/docs/foundations/Logos.mdx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Logos
5-
order: 8
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Logos" />
74

85
# Logos
96

‎component-library/docs/foundations/Overview.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Overview" />
4+
5+
# Foundations
6+
7+
> **Work in Progress** — This section is under development.
8+
9+
Design tokens and visual styles that form the base of the design system.
10+
11+
| Page | Description |
12+
| ---- | ----------- |
13+
| [Tokens](./Tokens) | Semantic color tokens |
14+
| [Spacing](./Spacing) | Padding, margin, gap |
15+
| [Colors](./Colors) | Color system overview |
16+
| [Palette](./Palette) | Primitive color scales |
17+
| [Typography](./Typography) | Font, sizes, weights, headings |
18+
| [Icons](./Icons) | Icon library |
19+
| [Logos](./Logos) | Logo assets |
20+
| [Elevation](./Elevation) | Surfaces and shadows |
21+
| [Border](./Border) | Border width |
22+
| [Radius](./Radius) | Border radius |

docs/foundations/palette.md renamed to component-library/docs/foundations/Palette.mdx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Palette
5-
order: 5
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Palette" />
74

85
# Palette
96

10-
Primitive color values. Use [Tokens](./tokens.md) for UI—primitives don't adapt to dark mode.
7+
Primitive color values. Use [Tokens](./Tokens) for UI—primitives don't adapt to dark mode.
118

129
## Neutral
1310

@@ -219,7 +216,4 @@ Semi-transparent neutrals for overlays and layered surfaces.
219216

220217
## Figma
221218

222-
<!-- TODO: Replace with Figma embed URL -->
223-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
224-
225219
See the design specs in Figma (link coming soon).

docs/foundations/radius.md renamed to component-library/docs/foundations/Radius.mdx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Radius
5-
order: 11
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Radius" />
74

85
# Radius
96

@@ -47,7 +44,4 @@ Border radius tokens for consistent corner roundness.
4744

4845
## Figma
4946

50-
<!-- TODO: Replace with Figma embed URL -->
51-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
52-
5347
See the design specs in Figma (link coming soon).

docs/foundations/spacing.md renamed to component-library/docs/foundations/Spacing.mdx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
---
2-
sectionTitle: Foundations
3-
sectionOrder: 20
4-
title: Spacing
5-
order: 3
6-
---
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Foundations/Spacing" />
74

85
# Spacing
96

@@ -64,7 +61,4 @@ Use negative values to pull elements closer or overlap containers.
6461

6562
## Figma
6663

67-
<!-- TODO: Replace with Figma embed URL -->
68-
<!-- <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="FIGMA_EMBED_URL" allowfullscreen></iframe> -->
69-
7064
See the design specs in Figma (link coming soon).

0 commit comments

Comments
 (0)