Skip to content

Commit 04ded97

Browse files
devalogdevalog
committed
light reorganization of various component pages for consistency
1 parent c8c36c4 commit 04ded97

File tree

6 files changed

+82
-96
lines changed

6 files changed

+82
-96
lines changed

‎fern/products/docs/pages/component-library/default-components/accordions.mdx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,6 @@ description: 'Expand or collapse to reveal more information'
55

66
The Accordion component allows you to create expandable sections in your documentation. Content within accordions is searchable using browser search (cmd+f) even when collapsed. The component is optimized for SEO with server-side HTML generation, ensuring search engines can properly index all content within accordions.
77

8-
## Properties
9-
10-
<ParamField path="title" type="string" required={true}>
11-
The title shown in the accordion header
12-
</ParamField>
13-
14-
<ParamField path="children" type="string | JSX" required={true}>
15-
The content to be displayed when the accordion is expanded. Can include text, markdown, and components.
16-
</ParamField>
17-
18-
<br />
19-
208
<Tabs>
219
<Tab title="Example">
2210
<Accordion title='Single Accordion'>
@@ -32,3 +20,14 @@ The Accordion component allows you to create expandable sections in your documen
3220
</Tab>
3321
</Tabs>
3422

23+
## Properties
24+
25+
<ParamField path="title" type="string" required={true}>
26+
The title shown in the accordion header
27+
</ParamField>
28+
29+
<ParamField path="children" type="string | JSX" required={true}>
30+
The content to be displayed when the accordion is expanded. Can include text, markdown, and components.
31+
</ParamField>
32+
33+

‎fern/products/docs/pages/component-library/default-components/callouts.mdx‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,6 @@ description: 'Highlight important information, warnings, or tips in your documen
55

66
Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers.
77

8-
## Properties
9-
10-
Customize your Callouts using the following properties:
11-
12-
<ParamField path="intent" type="string" required={true}>
13-
The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`
14-
</ParamField>
15-
16-
<ParamField path="title" type="string" required={false}>
17-
The title of your Callout
18-
</ParamField>
19-
20-
<ParamField path="icon" type="string | ReactElement" required={false}>
21-
The icon of your Callout. Can be:
22-
- A [Font Awesome](https://fontawesome.com/icons) icon name
23-
- A React element
24-
- If not specified, uses a default icon based on the intent:
25-
- info: InfoCircle
26-
- warning: Bell
27-
- success: CheckCircle
28-
- error: WarningTriangle
29-
- note: Pin
30-
- launch: Rocket
31-
- tip: Star
32-
- check: Check
33-
</ParamField>
34-
35-
<br />
36-
37-
<Tabs>
38-
<Tab title="Callout">
39-
<Tip title="Example Callout" icon="leaf">
40-
This Callout uses a title and a custom icon.
41-
</Tip>
42-
</Tab>
43-
<Tab title="Markdown">
44-
```markdown
45-
<Tip title="Example Callout" icon="leaf">
46-
This Callout uses a title and a custom icon.
47-
</Tip>
48-
```
49-
</Tab>
50-
</Tabs>
51-
528
## Callout varieties
539

5410
### Note callouts
@@ -115,3 +71,48 @@ This Callout uses a title and a custom icon.
11571
```jsx
11672
<Check>This brings us a checked status</Check>
11773
```
74+
75+
## Properties
76+
77+
Customize your Callouts using the following properties:
78+
79+
<ParamField path="intent" type="string" required={true}>
80+
The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`
81+
</ParamField>
82+
83+
<ParamField path="title" type="string" required={false}>
84+
The title of your Callout
85+
</ParamField>
86+
87+
<ParamField path="icon" type="string | ReactElement" required={false}>
88+
The icon of your Callout. Can be:
89+
- A [Font Awesome](https://fontawesome.com/icons) icon name
90+
- A React element
91+
- If not specified, uses a default icon based on the intent:
92+
- info: InfoCircle
93+
- warning: Bell
94+
- success: CheckCircle
95+
- error: WarningTriangle
96+
- note: Pin
97+
- launch: Rocket
98+
- tip: Star
99+
- check: Check
100+
</ParamField>
101+
102+
<br />
103+
104+
<Tabs>
105+
<Tab title="Callout">
106+
<Tip title="Example Callout" icon="leaf">
107+
This Callout uses a title and a custom icon.
108+
</Tip>
109+
</Tab>
110+
<Tab title="Markdown">
111+
```markdown
112+
<Tip title="Example Callout" icon="leaf">
113+
This Callout uses a title and a custom icon.
114+
</Tip>
115+
```
116+
</Tab>
117+
</Tabs>
118+

‎fern/products/docs/pages/component-library/default-components/card-groups.mdx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,6 @@ description: 'Show cards side by side in a grid format'
55

66
The `CardGroup` component lets you organize multiple `Card` components in a responsive grid layout.
77

8-
## Properties
9-
10-
<ParamField path="cols" type="number" required={false} default="2">
11-
The number of columns to display in the grid
12-
</ParamField>
13-
14-
<br />
158
<Tabs>
169
<Tab title="Example">
1710
<CardGroup cols={2}>
@@ -48,3 +41,9 @@ The `CardGroup` component lets you organize multiple `Card` components in a resp
4841
```
4942
</Tab>
5043
</Tabs>
44+
45+
## Properties
46+
47+
<ParamField path="cols" type="number" required={false} default="2">
48+
The number of columns to display in the grid
49+
</ParamField>

‎fern/products/docs/pages/component-library/default-components/frames.mdx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,8 @@ description: 'Wrap images in a container with the frame component'
55

66
The Frame component provides a container for images and other media with optional captions and backgrounds.
77

8-
## Properties
9-
10-
<ParamField path="caption" type="string" required={false}>
11-
Caption text to display below the frame
12-
</ParamField>
13-
14-
<ParamField path="background" type="'subtle' | undefined" required={false}>
15-
Adds a subtle background to the frame
16-
</ParamField>
17-
18-
<br />
198
<Tabs>
20-
<Tab title="Example">
9+
<Tab title="Basic frame">
2110
<Frame caption="Beautiful mountains">
2211
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="Sample photo of mountains"/>
2312
</Frame>
@@ -31,10 +20,8 @@ The Frame component provides a container for images and other media with optiona
3120
</Tab>
3221
</Tabs>
3322

34-
## With Subtle Background
35-
3623
<Tabs>
37-
<Tab title="Example">
24+
<Tab title="Frame with subtle background">
3825
<Frame caption="Beautiful mountains" background="subtle">
3926
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="Sample photo of mountains"/>
4027
</Frame>
@@ -47,3 +34,14 @@ The Frame component provides a container for images and other media with optiona
4734
```
4835
</Tab>
4936
</Tabs>
37+
38+
## Properties
39+
40+
<ParamField path="caption" type="string" required={false}>
41+
Caption text to display below the frame
42+
</ParamField>
43+
44+
<ParamField path="background" type="'subtle' | undefined" required={false}>
45+
Adds a subtle background to the frame
46+
</ParamField>
47+

‎fern/products/docs/pages/component-library/default-components/icons.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ description: 'Use Font Awesome icons in your documentation'
55

66
Add Font Awesome icons to your docs with customizable styles, colors and sizes using the `Icon` component. All Font Awesome Pro styles are supported.
77

8-
## Examples
9-
108
<Tabs>
119
<Tab title="Example">
1210
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>

‎fern/products/docs/pages/component-library/default-components/steps.mdx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 'Steps'
33
description: 'Display a sequence of instructions or tasks with automatic numbering and anchor links.'
44
---
55

6-
The Steps component helps organize sequential content with automatic numbering, anchor links, and copy-to-clipboard functionality. It's ideal for tutorials, walkthroughs, or any content that needs to be followed in order.
6+
The Steps component helps organize sequential content with automatic numbering, anchor links, and clickable step numbers that copy direct URLs to that step with visual feedback. Hover interactions reveal helpful link icons, making it ideal for tutorials, walkthroughs, or any content that needs to be followed in order.
77

88
<Tabs>
99
<Tab title="Single Step">
@@ -27,31 +27,31 @@ The Steps component helps organize sequential content with automatic numbering,
2727
<Tabs>
2828
<Tab title="Multiple Steps">
2929
<Steps>
30-
<Step title="Getting Started">
30+
<Step title="Getting Started" toc={true}>
3131
Initial instructions.
3232
</Step>
3333

34-
<Step title="Configuration">
34+
<Step title="Configuration" toc={true}>
3535
More instructions.
3636
</Step>
3737

38-
<Step title="Completion">
38+
<Step title="Completion" toc={true}>
3939
Final Instructions
4040
</Step>
4141
</Steps>
4242
</Tab>
4343
<Tab title="Markdown">
4444
```jsx
4545
<Steps>
46-
<Step title="Getting Started">
46+
<Step title="Getting Started" toc={true}>
4747
Initial instructions.
4848
</Step>
4949

50-
<Step title="Configuration">
50+
<Step title="Configuration" toc={true}>
5151
More instructions.
5252
</Step>
5353

54-
<Step title="Completion">
54+
<Step title="Completion" toc={true}>
5555
Final Instructions
5656
</Step>
5757
</Steps>
@@ -73,12 +73,3 @@ The Steps component helps organize sequential content with automatic numbering,
7373
Optional title for the step
7474
</ParamField>
7575

76-
<br />
77-
78-
## Features
79-
80-
- Each step is automatically numbered in sequence
81-
- Clicking the step number copies a direct URL to that step
82-
- Hovering over a step's title or number reveals a link icon
83-
- Visual feedback when step URL is copied
84-
- Steps can be added to the table of contents

0 commit comments

Comments
 (0)