Skip to content

Commit 74b4f33

Browse files
devin-ai-integration[bot]kgowru
devin-ai-integration[bot]
and
kgowru
committed
Update component docs to new format with example-first structure
- Move visual examples to the top of each component page - Add Usage section with markdown code blocks - Convert sections to Variants subsections - Keep Properties section at the end - Remove Tabs wrappers around examples - Updated all 23 component pages in default-components directory Co-Authored-By: Kapil Gowru <[email protected]>
1 parent b5ccef1 commit 74b4f33

22 files changed

+889
-1182
lines changed

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

Lines changed: 22 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -6,46 +6,15 @@ description: Display expandable/collapsible options that reveal more information
66
Accordion Groups allow you to organize content into collapsible sections, making it easier for users to navigate through information. With recent updates, our Accordion component now supports improved search functionality using the browser's built-in search feature.
77

88
<AccordionGroup>
9-
<Accordion title="Basic usage">
10-
Accordion Groups can contain multiple Accordion items. Each Accordion has a title and content that can be expanded or collapsed. You can use the `defaultOpen` prop to expand specific accordions by default when the page loads.
11-
12-
```jsx
13-
<AccordionGroup>
14-
<Accordion title="Section 1" defaultOpen={true}>
15-
Content for section 1, expanded by default
16-
</Accordion>
17-
<Accordion title="Section 2">
18-
Content for section 2
19-
</Accordion>
20-
</AccordionGroup>
21-
```
22-
</Accordion>
23-
24-
<Accordion title="Searchable content">
25-
Accordion components use HTML5 `<details>` and `<summary>` elements, enabling browser search (Cmd+F / Ctrl+F) so users can find content within collapsed sections.
26-
27-
</Accordion>
28-
29-
<Accordion title="Accessibility">
30-
The Accordion component supports keyboard navigation and screen readers.
31-
</Accordion>
32-
</AccordionGroup>
33-
34-
35-
## Usage examples
36-
37-
<Tabs>
38-
<Tab title="Example">
39-
<AccordionGroup>
409
<Accordion title="Simple text content" defaultOpen={true}>
4110
This is a basic example with text content. It's open by default when the page loads.
4211
</Accordion>
4312
<Accordion title="Text content with multimedia">
44-
You can embed images, videos, and other media within accordions for rich interactive content.
13+
You can embed images, videos, and other media within accordions for rich interactive content.
4514

46-
<Frame caption="Sample image">
47-
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
48-
</Frame>
15+
<Frame caption="Sample image">
16+
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
17+
</Frame>
4918
</Accordion>
5019
<Accordion title="Nested components">
5120
Accordions can contain other components, such as code blocks and callouts.
@@ -59,41 +28,28 @@ Accordion Groups allow you to organize content into collapsible sections, making
5928
<Note>
6029
Here's a nested callout.
6130
</Note>
62-
6331
</Accordion>
64-
</AccordionGroup>
32+
</AccordionGroup>
6533

66-
</Tab>
67-
<Tab title="Markdown">
68-
<CodeBlock>
69-
````jsx
70-
<AccordionGroup>
71-
<Accordion title="Simple text content" defaultOpen={true}>
72-
This is a basic example with text content. It's open by default when the page loads.
73-
</Accordion>
74-
<Accordion title="Text content with multimedia">
75-
You can embed images, videos, and other media within accordions for rich interactive content.
34+
## Usage
7635

77-
<Frame caption="Sample image">
78-
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
79-
</Frame>
36+
```jsx
37+
<AccordionGroup>
38+
<Accordion title="Section 1" defaultOpen={true}>
39+
Content for section 1, expanded by default
8040
</Accordion>
81-
<Accordion title="Nested components">
82-
Accordions can contain other components, such as code blocks and callouts.
41+
<Accordion title="Section 2">
42+
Content for section 2
43+
</Accordion>
44+
</AccordionGroup>
45+
```
8346

84-
```ts
85-
export function greet(name: string) {
86-
return `Hello, ${name}!`;
87-
}
88-
```
47+
## Variants
8948

90-
<Note>
91-
Here's a nested callout.
92-
</Note>
49+
### Searchable content
9350

94-
</Accordion>
95-
</AccordionGroup>
96-
````
97-
</CodeBlock>
98-
</Tab>
99-
</Tabs>
51+
Accordion components use HTML5 `<details>` and `<summary>` elements, enabling browser search (Cmd+F / Ctrl+F) so users can find content within collapsed sections.
52+
53+
### Accessibility
54+
55+
The Accordion component supports keyboard navigation and screen readers.

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

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,31 @@ 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-
<Tabs>
9-
<Tab title="Examples">
10-
<Accordion title='Single Accordion'>
11-
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
12-
</Accordion>
13-
<Accordion title='Accordion open by default' defaultOpen={true}>
14-
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
15-
</Accordion>
16-
</Tab>
17-
<Tab title="Markdown">
18-
```jsx
19-
<Accordion title='Single Accordion'>
20-
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
21-
</Accordion>
22-
23-
<Accordion title='Accordion open by default' defaultOpen={true}>
24-
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
25-
</Accordion>
26-
```
27-
</Tab>
28-
</Tabs>
8+
<Accordion title='Single accordion'>
9+
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
10+
</Accordion>
11+
12+
## Usage
13+
14+
```jsx
15+
<Accordion title='Single accordion'>
16+
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
17+
</Accordion>
18+
```
19+
20+
## Variants
21+
22+
### Default open
23+
24+
<Accordion title='Accordion open by default' defaultOpen={true}>
25+
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
26+
</Accordion>
27+
28+
```jsx
29+
<Accordion title='Accordion open by default' defaultOpen={true}>
30+
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
31+
</Accordion>
32+
```
2933

3034
## Properties
3135

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

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,88 +9,81 @@ Use the `<Anchor>` component to create links to specific paragraphs, tables, and
99
Headings automatically generate anchor links based on their text content, so you don't need to use the `<Anchor>` component for headings.
1010
</Note>
1111

12-
<Tabs>
13-
<Tab title="Basic anchor">
14-
1512
<Anchor id="data">This sentence has a custom anchor</Anchor>
1613

1714
You can link to it using `#data` in the URL.
18-
</Tab>
19-
<Tab title="Markdown">
15+
16+
## Usage
2017

2118
```jsx
2219
<Anchor id="data">This sentence has a custom anchor</Anchor>
2320

2421
You can link to it using `#data` in the URL.
2522
```
26-
</Tab>
27-
</Tabs>
2823

29-
<Tabs>
30-
<Tab title="Anchor a table">
24+
## Variants
25+
26+
### Anchor a table
27+
3128
<Anchor id="api-endpoints">
3229

3330
| Endpoint | Method | Description |
3431
|----------|--------|-------------|
35-
| `/users` | GET | Retrieve all users |
36-
| `/users/:id` | GET | Retrieve a specific user |
37-
| `/users` | POST | Create a new user |
32+
| `/plants` | GET | Retrieve all plants |
33+
| `/plants/:id` | GET | Retrieve a specific plant |
34+
| `/plants` | POST | Create a new plant |
3835

3936
</Anchor>
4037

4138
You can link directly to the [API endpoints table](#api-endpoints).
42-
</Tab>
43-
<Tab title="Markdown">
4439

4540
```jsx
4641
<Anchor id="api-endpoints">
4742

4843
| Endpoint | Method | Description |
4944
|----------|--------|-------------|
50-
| `/users` | GET | Retrieve all users |
51-
| `/users/:id` | GET | Retrieve a specific user |
52-
| `/users` | POST | Create a new user |
45+
| `/plants` | GET | Retrieve all plants |
46+
| `/plants/:id` | GET | Retrieve a specific plant |
47+
| `/plants` | POST | Create a new plant |
5348

5449
</Anchor>
5550

5651
You can link directly to the [API endpoints table](#api-endpoints).
5752
```
58-
</Tab>
59-
</Tabs>
6053

61-
<Tabs>
62-
<Tab title="Anchor a Code Block">
54+
### Anchor a code block
55+
6356
<Anchor id="example-code">
6457

6558
```python
66-
def authenticate(api_key):
67-
"""Authenticate using your API key"""
59+
def water_plant(plant_id, amount):
60+
"""Water a plant with specified amount"""
6861
headers = {"Authorization": f"Bearer {api_key}"}
69-
return requests.get("https://api.example.com/auth", headers=headers)
62+
return requests.post(f"https://api.example.com/plants/{plant_id}/water",
63+
json={"amount": amount},
64+
headers=headers)
7065
```
7166

7267
</Anchor>
7368

74-
Reference the [authentication code example](#example-code) in your implementation.
75-
</Tab>
76-
<Tab title="Markdown">
69+
Reference the [watering code example](#example-code) in your implementation.
7770

7871
````jsx
7972
<Anchor id="example-code">
8073

8174
```python
82-
def authenticate(api_key):
83-
"""Authenticate using your API key"""
75+
def water_plant(plant_id, amount):
76+
"""Water a plant with specified amount"""
8477
headers = {"Authorization": f"Bearer {api_key}"}
85-
return requests.get("https://api.example.com/auth", headers=headers)
78+
return requests.post(f"https://api.example.com/plants/{plant_id}/water",
79+
json={"amount": amount},
80+
headers=headers)
8681
```
8782

8883
</Anchor>
8984

90-
Reference the [authentication code example](#example-code) in your implementation.
85+
Reference the [watering code example](#example-code) in your implementation.
9186
````
92-
</Tab>
93-
</Tabs>
9487

9588
## Properties
9689

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ description: 'Push any content inside the Aside component to the right of the pa
55

66
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.
77

8-
<CodeBlock title="Markdown">
9-
```jsx
108
<Aside>
11-
<EndpointRequestSnippet endpoint='POST /snippets' />
9+
<EndpointRequestSnippet endpoint='POST /plants/{plantId}' />
1210
</Aside>
13-
```
14-
</CodeBlock>
1511

12+
## Usage
13+
14+
```jsx
1615
<Aside>
17-
<EndpointRequestSnippet endpoint='POST /snippets' />
16+
<EndpointRequestSnippet endpoint='POST /plants/{plantId}' />
1817
</Aside>
18+
```

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,15 @@ Use the `Badge` component to display small pieces of information, such as status
77

88
To display longer notes, use the [Callouts component](/docs/writing-content/components/callouts) instead.
99

10-
<Tabs>
11-
<Tab title="Badge example">
12-
1310
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
1411

15-
</Tab>
16-
<Tab title="Markdown">
12+
## Usage
1713

1814
```jsx
19-
### Plant Care API <Badge intent="success">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
15+
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
2016
```
2117

22-
</Tab>
23-
</Tabs>
24-
25-
## Badge varieties
18+
## Variants
2619

2720
### Success
2821

@@ -121,4 +114,4 @@ Customize your Badges using the following properties:
121114
<Badge intent="success" minimal outlined>Minimal and outlined</Badge>
122115
```
123116
</Tab>
124-
</Tabs>
117+
</Tabs>

0 commit comments

Comments
 (0)