Skip to content

Commit 49ef8f2

Browse files
dsinghvidsinghvi
authored
Merge branch 'main' into dsinghvi/incrementally-process-only-md-edits
2 parents bab78be + 5e296be commit 49ef8f2

17 files changed

+317
-205
lines changed

‎fern/pages/docs/components/accordion-groups.mdx

+63-34
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,81 @@
11
---
22
title: 'Accordion Groups'
3-
description: Display expandable/collapsible options that can reveal more information
4-
icon: 'table-rows'
3+
description: 'Display expandable/collapsible options that can reveal more information'
54
---
6-
<AccordionGroup>
7-
<Accordion title="Option 1">
8-
You can put other components inside Accordions.
95

10-
```ts index.ts
11-
export function generateRandomNumber() {
12-
return Math.random();
13-
}
14-
```
6+
Accordion Groups combine multiple accordions into a single collapsible interface. They maintain consistent styling and behavior while organizing related content into manageable sections.
157

16-
</Accordion>
8+
## Examples
179

18-
<Accordion title="Option 2">
19-
This is a second option.
10+
<AccordionGroup>
11+
<Accordion title="Text Example">
12+
This is a basic example of an accordion group.
2013
</Accordion>
21-
22-
<Accordion title="Option 3">
23-
This is a third option.
14+
15+
<Accordion title="Multimedia Example">
16+
You can embed photos, videos, and other media within accordions for rich interactive content.
17+
18+
<embed
19+
src="./growing-fern.mp4"
20+
type="video/mp4"
21+
width="640"
22+
height="360"
23+
/>
2424
</Accordion>
25-
</AccordionGroup>
2625

27-
<Aside>
28-
<CodeBlock title="Markdown">
29-
````jsx
30-
<AccordionGroup>
31-
<Accordion title="Option 1">
32-
You can put other components inside Accordions.
26+
<Accordion title="Rich Content Support">
27+
Accordions can contain rich content including code blocks, callouts, and other components.
3328

3429
```ts
35-
export function generateRandomNumber() {
36-
return Math.random();
30+
// Example of code inside an accordion
31+
export function greet(name: string) {
32+
return `Hello, ${name}!`;
3733
}
3834
```
39-
40-
</Accordion>
41-
42-
<Accordion title="Option 2">
43-
This is a second option.
4435
</Accordion>
4536

46-
<Accordion title="Option 3">
47-
This is a third option.
37+
<Accordion title="Best Practices Using Accordion Groups">
38+
- Use accordion groups when you have multiple related sections
39+
- Each accordion should have a clear, descriptive title
40+
- Keep content concise and focused
4841
</Accordion>
4942
</AccordionGroup>
50-
````
51-
</CodeBlock>
43+
44+
<Aside>
45+
<CodeBlock title="Example Usage">
46+
````jsx
47+
<AccordionGroup>
48+
<Accordion title="Text Example">
49+
This is a basic example of an accordion group.
50+
</Accordion>
51+
52+
<Accordion title="Multimedia Example">
53+
You can embed photos, videos, and other media within accordions for rich interactive content.
54+
55+
<embed
56+
src="./growing-fern.mp4"
57+
type="video/mp4"
58+
width="640"
59+
height="360"
60+
/>
61+
</Accordion>
62+
63+
<Accordion title="Rich Content Support">
64+
Accordions can contain rich content including code blocks, callouts, and other components.
65+
66+
```ts
67+
export function greet(name: string) {
68+
return `Hello, ${name}!`;
69+
}
70+
```
71+
</Accordion>
72+
73+
<Accordion title="Best Practices Using Accordion Groups">
74+
- Use accordion groups when you have multiple related sections
75+
- Each accordion should have a clear title
76+
- Keep content concise and focused
77+
</Accordion>
78+
</AccordionGroup>
79+
````
80+
</CodeBlock>
5281
</Aside>

‎fern/pages/docs/components/accordions.mdx

+28-14
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
---
22
title: 'Accordions'
3-
description: Expand or collapse to reveal more information
4-
icon: 'square-caret-down'
3+
description: 'Expand or collapse to reveal more information'
54
---
65

7-
<Accordion title='Single Accordion'>
8-
Standalone content
9-
</Accordion>
6+
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.
107

11-
<Aside>
12-
<CodeBlock title="Markdown">
13-
```jsx
14-
<Accordion title='Single Accordion'>
15-
Standalone content
16-
</Accordion>
17-
```
18-
</CodeBlock>
19-
</Aside>
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+
20+
<Tabs>
21+
<Tab title="Example">
22+
<Accordion title='Single Accordion'>
23+
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
24+
</Accordion>
25+
</Tab>
26+
<Tab title="Markdown">
27+
```jsx
28+
<Accordion title='Single Accordion'>
29+
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
30+
</Accordion>
31+
```
32+
</Tab>
33+
</Tabs>

‎fern/pages/docs/components/asides.mdx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
---
22
title: 'Aside'
3-
description: Push any content inside the Aside component to the right of the page in a sticky container
4-
icon: 'align-right'
3+
description: 'Push any content inside the Aside component to the right of the page in a sticky container'
54
---
65

6+
The Aside component creates a sticky container that floats content to the right of your page. Use it to showcase code examples, API snippets, or any supplementary content that should stay visible as users scroll.
7+
78
<CodeBlock title="Markdown">
89
```jsx
910
<Aside>
10-
<EndpointRequestSnippet endpoint='POST /snippets' />
11+
<EndpointRequestSnippet endpoint='POST /snippets' />
1112
</Aside>
1213
```
1314
</CodeBlock>
1415

1516
<Aside>
16-
<EndpointRequestSnippet endpoint='POST /snippets' />
17-
</Aside>
17+
<EndpointRequestSnippet endpoint='POST /snippets' />
18+
</Aside>

‎fern/pages/docs/components/callouts.mdx

+40-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
11
---
22
title: 'Callouts'
3-
subtitle: 'A built-in component to show important information to the reader'
4-
icon: 'circle-exclamation'
3+
description: 'Highlight important information, warnings, or tips in your documentation.'
54
---
65

7-
## Callout properties
6+
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.
87

9-
Customize your Callouts using the `title` and `icon` properties.
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>
1015

1116
<ParamField path="title" type="string" required={false}>
12-
The title of your Callout
17+
The title of your Callout
1318
</ParamField>
14-
<ParamField path="icon" type="string | element" required={false}>
15-
The icon of your Callout. Can be a [Font Awesome](https://fontawesome.com/icons) icon name or an HTML element.
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
1633
</ParamField>
1734

1835
<br />
@@ -50,6 +67,14 @@ This Callout uses a title and a custom icon.
5067
<Warning>This raises a warning to watch out for</Warning>
5168
```
5269

70+
### Success callouts
71+
72+
<Success>This indicates a successful operation or positive outcome</Success>
73+
74+
```jsx
75+
<Success>This indicates a successful operation or positive outcome</Success>
76+
```
77+
5378
### Error callouts
5479

5580
<Error>This indicates a potential error</Error>
@@ -66,6 +91,14 @@ This Callout uses a title and a custom icon.
6691
<Info>This draws attention to important information</Info>
6792
```
6893

94+
### Launch callouts
95+
96+
<Launch>This highlights new features or launches</Launch>
97+
98+
```jsx
99+
<Launch>This highlights new features or launches</Launch>
100+
```
101+
69102
### Tip callouts
70103

71104
<Tip>This suggests a helpful tip</Tip>

‎fern/pages/docs/components/card-groups.mdx

+43-37
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,50 @@
11
---
22
title: 'Card Groups'
3-
description: Show cards side by side in a grid format
3+
description: 'Show cards side by side in a grid format'
44
---
55

6-
The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards on the same column.
6+
The `CardGroup` component lets you organize multiple `Card` components in a responsive grid layout.
77

8-
<CardGroup cols={2}>
9-
<Card title="First Card" icon="circle-1">
10-
This is the first card.
11-
</Card>
12-
<Card title="Second Card" icon="circle-2">
13-
This is the second card.
14-
</Card>
15-
<Card title="Third Card" icon="circle-3">
16-
This is the third card.
17-
</Card>
18-
<Card title="Fourth Card" icon="circle-4">
19-
This is the fourth and final card.
20-
</Card>
21-
</CardGroup>
8+
## Properties
229

23-
<Aside>
10+
<ParamField path="cols" type="number" required={false} default="2">
11+
The number of columns to display in the grid
12+
</ParamField>
2413

25-
<CodeBlock title="Markdown">
26-
```jsx
27-
<CardGroup cols={2}>
28-
<Card title="First Card" icon="circle-1">
29-
This is the first card.
30-
</Card>
31-
<Card title="Second Card" icon="circle-2">
32-
This is the second card.
33-
</Card>
34-
<Card title="Third Card" icon="circle-3">
35-
This is the third card.
36-
</Card>
37-
<Card title="Fourth Card" icon="circle-4">
38-
This is the fourth and final card.
39-
</Card>
40-
</CardGroup>
41-
```
42-
</CodeBlock>
43-
44-
</Aside>
14+
<br />
15+
<Tabs>
16+
<Tab title="Example">
17+
<CardGroup cols={2}>
18+
<Card title="First Card" icon="circle-1">
19+
This is the first card.
20+
</Card>
21+
<Card title="Second Card" icon="circle-2">
22+
This is the second card.
23+
</Card>
24+
<Card title="Third Card" icon="circle-3">
25+
This is the third card.
26+
</Card>
27+
<Card title="Fourth Card" icon="circle-4">
28+
This is the fourth and final card.
29+
</Card>
30+
</CardGroup>
31+
</Tab>
32+
<Tab title="Markdown">
33+
```jsx
34+
<CardGroup cols={2}>
35+
<Card title="First Card" icon="circle-1">
36+
This is the first card.
37+
</Card>
38+
<Card title="Second Card" icon="circle-2">
39+
This is the second card.
40+
</Card>
41+
<Card title="Third Card" icon="circle-3">
42+
This is the third card.
43+
</Card>
44+
<Card title="Fourth Card" icon="circle-4">
45+
This is the fourth and final card.
46+
</Card>
47+
</CardGroup>
48+
```
49+
</Tab>
50+
</Tabs>

0 commit comments

Comments
 (0)