Skip to content

Commit 3710c0e

Browse files
devalogdevalog
authored
Add additional properties to Cards page, restructure various component pages (Docs) (#602)
1 parent 66fb880 commit 3710c0e

File tree

8 files changed

+193
-183
lines changed

8 files changed

+193
-183
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/cards.mdx‎

Lines changed: 69 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,96 @@ description: 'Use cards to display content in a box'
55

66
Cards are container components that group related content and actions together. They provide a flexible way to present information with optional elements like icons, titles, and links in a visually distinct box.
77

8-
## Properties
9-
10-
| Property | Type | Description |
11-
|----------|------|-------------|
12-
| `title` | `string` | The title text to display in the card |
13-
| `icon` | `string \| img` | Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image |
14-
| `href` | `string` | Optional URL that makes the entire card clickable |
15-
16-
### Basic
178

9+
<Tabs>
10+
<Tab title="Basic card">
1811
<Card
1912
title="Python"
2013
icon="brands python"
2114
href="https://github.com/fern-api/fern/tree/main/generators/python"
2215
>
2316
The icon field references a Font Awesome icon.
2417
</Card>
18+
</Tab>
19+
<Tab title="Markdown">
20+
```jsx
21+
<Card
22+
title="Python"
23+
icon="brands python"
24+
href="https://github.com/fern-api/fern/tree/main/generators/python"
25+
>
26+
The icon field references a Font Awesome icon.
27+
</Card>
28+
```
29+
</Tab>
30+
</Tabs>
2531

26-
### Custom icon
27-
32+
<Tabs>
33+
<Tab title="Card with custom icon">
2834
<Card
2935
title="Python"
3036
icon={<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo"/>}
3137
href="https://github.com/fern-api/fern/tree/main/generators/python"
3238
>
3339
Pass in an image tag to use a custom icon.
3440
</Card>
41+
</Tab>
42+
<Tab title="Markdown">
43+
```jsx
44+
<Card
45+
title="Python"
46+
icon={<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo"/>}
47+
href="https://github.com/fern-api/fern/tree/main/generators/python"
48+
>
49+
Pass in an image tag to use a custom icon.
50+
</Card>
51+
```
52+
</Tab>
53+
</Tabs>
3554

36-
### Icon position
37-
55+
<Tabs>
56+
<Tab title="Card with icon in left position">
3857
<Card
3958
title="Location"
4059
icon="regular globe"
4160
iconPosition="left"
4261
>
43-
You can set the icon position as `left` or `top`. Default is `top`.
62+
You can set the icon position as `left` or `top`.
4463
</Card>
64+
</Tab>
65+
<Tab title="Markdown">
66+
```jsx
67+
<Card
68+
title="Location"
69+
icon="regular globe"
70+
iconPosition="left"
71+
>
72+
You can set the icon position as `left` or `top`.
73+
</Card>
74+
```
75+
</Tab>
76+
</Tabs>
77+
78+
## Properties
4579

46-
<Aside>
47-
<CodeBlocks>
48-
<CodeBlock title="Basic">
49-
```jsx
50-
<Card
51-
title="Python"
52-
icon="brands python"
53-
href="https://github.com/fern-api/fern/tree/main/generators/python"
54-
>
55-
View Fern's Python SDK generator.
56-
</Card>
57-
```
58-
</CodeBlock>
59-
<CodeBlock title="Custom Icon">
60-
```jsx
61-
<Card
62-
title="Python"
63-
icon={<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo"/>}
64-
href="https://github.com/fern-api/fern/tree/main/generators/python"
65-
>
66-
View Fern's Python SDK generator.
67-
</Card>
68-
```
69-
</CodeBlock>
70-
<CodeBlock title="Icon Position">
71-
```jsx
72-
<Card
73-
title="Location"
74-
icon="regular globe"
75-
iconPosition="left"
76-
>
77-
You can set the icon position as `left` or `top`. Default is `top`.
78-
</Card>
79-
```
80-
</CodeBlock>
81-
</CodeBlocks>
82-
</Aside>
80+
<ParamField path="title" type="string">
81+
The title text to display in the card
82+
</ParamField>
83+
<ParamField path="icon" type="string | img">
84+
Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image
85+
</ParamField>
86+
<ParamField path="href" type="string">
87+
Optional URL that makes the entire card clickable
88+
</ParamField>
89+
<ParamField path="iconPosition" type="'top' | 'left'" default="top">
90+
The position of icon relative to the text.
91+
</ParamField>
92+
<ParamField path="color" type="string">
93+
Hex color value for the icon (e.g. `#FF0F00`). Ignored if `lightModeColor` and `darkModeColor` are both set
94+
</ParamField>
95+
<ParamField path="darkModeColor" type="string">
96+
Hex color value for the icon in dark mode (e.g. `#FF0F00`)
97+
</ParamField>
98+
<ParamField path="lightModeColor" type="string">
99+
Hex color value for the icon in light mode (e.g. `#FF0F00`)
100+
</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' }}>

0 commit comments

Comments
 (0)