Skip to content

Commit c150c98

Browse files
lawrekahahnbeelee
lawreka
and
hahnbeelee
authored
Components pages docs offsite overhaul (#633)
* update accordions examples and add new page for custom components info * update callouts boxes examples * cards and callouts * update icons and tabs * fix tab example syntax * add response fields and move reusable snippets components to components section * Update content/components/cards.mdx Co-authored-by: Hahnbee Lee <[email protected]> * Update content/components/responses.mdx Co-authored-by: Hahnbee Lee <[email protected]> * Update content/components/responses.mdx Co-authored-by: Hahnbee Lee <[email protected]> * move accordiongroups link below props * add props header for accordion groups * nits --------- Co-authored-by: Hahnbee Lee <[email protected]>
1 parent ffd2d62 commit c150c98

File tree

11 files changed

+190
-94
lines changed

11 files changed

+190
-94
lines changed

‎content/components/accordion-groups.mdx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
1818
}
1919
```
2020

21+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
22+
2123
</Accordion>
2224

2325
<Accordion title="FAQ with Icon" icon="alien-8bit">
@@ -44,6 +46,7 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
4446
}
4547
```
4648

49+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
4750
</Accordion>
4851

4952
<Accordion title="FAQ with Icon" icon="alien-8bit">
@@ -58,4 +61,6 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
5861

5962
</RequestExample>
6063

61-
`AccordionGroup` does not have any props.
64+
## Props
65+
66+
`<AccordionGroup>` does not have any props.

‎content/components/accordions.mdx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,35 @@
11
---
22
title: "Accordions"
3-
description: "A dropdown component to toggle content"
3+
description: "A dropdown component to toggle content visibility"
44
icon: "square-caret-down"
55
---
66

77
<Accordion title="I am an Accordion.">
8-
You can put any content in here. Check out
9-
[AccordionGroup](/content/components/accordion-groups) if you want to group
10-
multiple Accordions into a single display.
8+
You can put any content in here, including other components, like code:
9+
```java HelloWorld.java
10+
class HelloWorld {
11+
public static void main(String[] args) {
12+
System.out.println("Hello, World!");
13+
}
14+
}
15+
```
1116
</Accordion>
1217

1318
<RequestExample>
1419

15-
```jsx Accordion Example
20+
````jsx Accordion Example
1621
<Accordion title="I am an Accordion.">
17-
You can put any content in here.
22+
You can put any content in here, including other components, like code:
23+
24+
```java HelloWorld.java
25+
class HelloWorld {
26+
public static void main(String[] args) {
27+
System.out.println("Hello, World!");
28+
}
29+
}
30+
```
1831
</Accordion>
19-
```
32+
````
2033

2134
</RequestExample>
2235

@@ -35,10 +48,13 @@ icon: "square-caret-down"
3548
</ResponseField>
3649

3750
<ResponseField name="icon" type="string or svg">
38-
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code
51+
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
52+
icon](https://lucide.dev/icons), or SVG code
3953
</ResponseField>
4054

4155
<ResponseField name="iconType" type="string">
4256
One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or
4357
"brands"
4458
</ResponseField>
59+
60+
Use [AccordionGroup](/content/components/accordion-groups) to create a group of Accordions.

‎content/components/callouts.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ description: 'Use callouts to add eye-catching context to your content'
44
icon: 'circle-exclamation'
55
---
66

7+
Callouts can be styled as a Note, Warning, Info, Tip, or Check:
8+
79
### Note Callouts
810

911
<Note>This adds a note in the content</Note>

‎content/components/card-groups.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: 'Show cards side by side in a grid format'
44
icon: 'rectangles-mixed'
55
---
66

7-
The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards on the same column.
7+
The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards in a grid, by specifying the number of grid columns.
88

99
<CardGroup cols={2}>
1010
<Card title="First Card" icon="square-1">

‎content/components/cards.mdx‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,39 +17,69 @@ icon: "rectangle"
1717
</Card>
1818
```
1919

20-
```jsx Image Card Example
21-
<Card title="Image Card" img="/images/card-with-image.png">
22-
Here is an example of a card with an image
23-
</Card>
24-
```
25-
</RequestExample>
26-
20+
```jsx Image Card Example
21+
<Card title="Image Card" img="/images/card-with-image.png">
22+
Here is an example of a card with an image
23+
</Card>
24+
```
2725

26+
</RequestExample>
2827

2928
### Horizontal Card
3029

31-
Add a `horizontal` property to a card to make it horizontally displayed.
30+
Add a `horizontal` property to make it horizontally displayed.
3231

3332
<Card title="Horizontal Card" icon="text-size" horizontal>
3433
Here is an example of a horizontal card
3534
</Card>
3635

3736
### Image Card
3837

39-
Add an `img` property to a card to display an image on the top of the card.
38+
Add an `img` property to display an image on the top of the card.
4039

4140
<Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
4241
Here is an example of a card with an image
4342
</Card>
4443

44+
### Link Card
45+
46+
You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.
47+
48+
<Card
49+
title="Link card"
50+
icon="link"
51+
href="/content/components/card-groups"
52+
arrow="true"
53+
cta="Click here"
54+
>
55+
This is how you use a card with an icon and a link. Clicking on this card
56+
brings you to the Card Group page.
57+
</Card>
58+
59+
<RequestExample>
60+
```jsx Card Example
61+
<Card
62+
title="Link card"
63+
icon="link"
64+
href="/content/components/card-groups"
65+
arrow="true"
66+
cta="Click here"
67+
>
68+
This is how you use a card with an icon and a link. Clicking on this card
69+
brings you to the Card Group page.
70+
</Card>
71+
```
72+
</RequestExample>
73+
4574
## Props
4675

4776
<ResponseField name="title" type="string" required>
4877
The title of the card
4978
</ResponseField>
5079

5180
<ResponseField name="icon" type="string or svg">
52-
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code in `icon={}`
81+
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
82+
icon](https://lucide.dev/icons), or SVG code in `icon={}`
5383
</ResponseField>
5484

5585
<ResponseField name="iconType" type="string">
@@ -70,4 +100,12 @@ Add an `img` property to a card to display an image on the top of the card.
70100

71101
<ResponseField name="img" type="string">
72102
The url or local path to an image to display on the top of the card
73-
</ResponseField>
103+
</ResponseField>
104+
105+
<ResponseField name="cta" type="string">
106+
Label for the action button
107+
</ResponseField>
108+
109+
<ResponseField name="arrow" type="boolean">
110+
Enable or disable the link arrow icon
111+
</ResponseField>

‎content/components/icons.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ The icon will be placed inline when used in a paragraph.
2626
## Props
2727

2828
<ResponseField name="icon" type="string" required>
29-
A [Font Awesome](https://fontawesome.com/icons) icon
29+
A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon
3030
</ResponseField>
3131

3232
<ResponseField name="iconType" type="string">
33-
One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`
33+
One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands` (only for [Font Awesome](https://fontawesome.com/icons) icons).
3434
</ResponseField>
3535

3636
<ResponseField name="color" type="string">

‎content/components/responses.mdx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,20 @@ The `<ResponseField>` component is designed to define the return values of an AP
1010
A response field example
1111
</ResponseField>
1212

13-
<RequestExample>
14-
15-
```jsx ResponseField Example
13+
```jsx
1614
<ResponseField name="response" type="string" required>
1715
A response field example
1816
</ResponseField>
1917
```
2018

21-
</RequestExample>
22-
2319
## Props
2420

2521
<ResponseField name="name" type="string" required>
2622
The name of the response value.
2723
</ResponseField>
2824

2925
<ResponseField name="type" type="string" required>
30-
Expected type of the response value
26+
Expected type of the response value - this can be any arbitrary string.
3127
</ResponseField>
3228

3329
<ResponseField name="default" type="string">
@@ -37,3 +33,15 @@ The `<ResponseField>` component is designed to define the return values of an AP
3733
<ResponseField name="required" type="boolean">
3834
Show "required" beside the field name.
3935
</ResponseField>
36+
37+
<ResponseField name="deprecated" type="boolean">
38+
Whether a field is deprecated or not.
39+
</ResponseField>
40+
41+
<ResponseField name="pre" type="string[]">
42+
Labels that are shown before the name of the field
43+
</ResponseField>
44+
45+
<ResponseField name="post" type="string[]">
46+
Labels that are shown after the name of the field
47+
</ResponseField>

‎content/components/reusable-components.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: "Reusable Components"
3+
description: "Reusable, custom component snippets"
4+
icon: "recycle"
5+
---
6+
7+
Much like custom content [snippets](/reusable-snippets) that can be added in MDX files, you can add reusable components as snippets.
8+
9+
## Creating a reusable React component
10+
11+
1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.
12+
13+
```typescript snippets/custom-component.mdx
14+
export const MyComponent = ({ title }) => (
15+
<div>
16+
<h1>{title}</h1>
17+
<p>... snippet content ...</p>
18+
</div>
19+
);
20+
```
21+
22+
<Warning>
23+
MDX does not compile inside the body of an arrow function. Stick to HTML
24+
syntax when you can or use a default export if you need to use MDX inside of your component.
25+
</Warning>
26+
27+
2. Import the snippet into your destination file and pass in the props
28+
29+
```typescript destination-file.mdx
30+
---
31+
title: My title
32+
description: My Description
33+
---
34+
35+
import { MyComponent } from '/snippets/custom-component.mdx';
36+
37+
Lorem ipsum dolor sit amet.
38+
39+
<MyComponent title={'Custom title'} />
40+
```
41+
42+
43+
## Client-Side Content
44+
45+
By default, Mintlify employs server-side rendering, generating content
46+
at build time. For client-side content loading, ensure to verify the
47+
`document` object's availability before initiating the rendering process.
48+
49+
```typescript snippets/client-component.mdx
50+
{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */}
51+
export const ClientComponent = () => {
52+
if (typeof document === "undefined") {
53+
return null;
54+
} else {
55+
setTimeout(() => {
56+
const clientComponent = document.getElementById("client-component");
57+
if (clientComponent) {
58+
clientComponent.innerHTML = "Hello, client-side component!";
59+
}
60+
}, 1);
61+
62+
return <div id="client-component"></div>
63+
}
64+
}
65+
```

‎content/components/tabs.mdx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
---
2-
title: 'Tabs'
3-
description: 'Toggle content using the Tabs component'
4-
icon: 'window-restore'
2+
title: "Tabs"
3+
description: "Toggle content using the Tabs component"
4+
icon: "window-restore"
55
---
66

7-
You can add any number of tabs.
7+
You can add any number of tabs, and other components inside of tabs.
88

99
<Tabs>
1010
<Tab title="First Tab">
1111
☝️ Welcome to the content that you can only see inside the first Tab.
12+
You can add any number of components inside of tabs.
13+
```java HelloWorld.java
14+
class HelloWorld {
15+
public static void main(String[] args) {
16+
System.out.println("Hello, World!");
17+
}
18+
}
19+
```
1220
</Tab>
1321
<Tab title="Second Tab">
1422
✌️ Here's content that's only inside the second Tab.
@@ -20,10 +28,17 @@ You can add any number of tabs.
2028
2129
<RequestExample>
2230
23-
```jsx Tabs Example
31+
````jsx Tabs Example
2432
<Tabs>
2533
<Tab title="First Tab">
2634
☝️ Welcome to the content that you can only see inside the first Tab.
35+
```java HelloWorld.java
36+
class HelloWorld {
37+
public static void main(String[] args) {
38+
System.out.println("Hello, World!");
39+
}
40+
}
41+
```
2742
</Tab>
2843
<Tab title="Second Tab">
2944
✌️ Here's content that's only inside the second Tab.
@@ -32,7 +47,7 @@ You can add any number of tabs.
3247
💪 Here's content that's only inside the third Tab.
3348
</Tab>
3449
</Tabs>
35-
```
50+
````
3651
3752
</RequestExample>
3853

‎docs.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,12 @@
201201
"content/components/update"
202202
]
203203
},
204+
{
205+
"group": "Custom Components",
206+
"pages": [
207+
"content/components/reusable-components"
208+
]
209+
},
204210
{
205211
"group": "API Components",
206212
"pages": [

0 commit comments

Comments
 (0)