Skip to content

Commit 9997118

Browse files
hahnbeeleehahnbeelee
committed
Merge branch 'main' into mayank/search-page
2 parents 0211af5 + a719d31 commit 9997118

File tree

15 files changed

+1514
-1
lines changed

15 files changed

+1514
-1
lines changed

‎content/components/accordion-groups.mdx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: "Accordion Groups"
3+
description: "Group multiple accordions into a single display."
4+
icon: "table-rows"
5+
---
6+
7+
Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
8+
9+
<AccordionGroup>
10+
<Accordion title="FAQ without Icon">
11+
You can put other components inside Accordions.
12+
13+
```java HelloWorld.java
14+
class HelloWorld {
15+
public static void main(String[] args) {
16+
System.out.println("Hello, World!");
17+
}
18+
}
19+
```
20+
21+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
22+
23+
</Accordion>
24+
25+
<Accordion title="FAQ with Icon" icon="alien-8bit">
26+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
27+
</Accordion>
28+
29+
<Accordion title="FAQ without Icon">
30+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
31+
</Accordion>
32+
</AccordionGroup>
33+
34+
<RequestExample>
35+
36+
````jsx Accordion Group Example
37+
<AccordionGroup>
38+
<Accordion title="FAQ without Icon">
39+
You can put other components inside Accordions.
40+
41+
```java HelloWorld.java
42+
class HelloWorld {
43+
public static void main(String[] args) {
44+
System.out.println("Hello, World!");
45+
}
46+
}
47+
```
48+
49+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
50+
</Accordion>
51+
52+
<Accordion title="FAQ with Icon" icon="alien-8bit">
53+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
54+
</Accordion>
55+
56+
<Accordion title="FAQ without Icon">
57+
Check out the [Accordion](/content/components/accordions) docs for all the supported props.
58+
</Accordion>
59+
</AccordionGroup>
60+
````
61+
62+
</RequestExample>
63+
64+
## Props
65+
66+
`<AccordionGroup>` does not have any props.

‎content/components/accordions.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: "Accordions"
3+
description: "A dropdown component to toggle content visibility"
4+
icon: "square-caret-down"
5+
---
6+
7+
<Accordion title="I am an Accordion.">
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+
```
16+
</Accordion>
17+
18+
<RequestExample>
19+
20+
````jsx Accordion Example
21+
<Accordion title="I am an Accordion.">
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+
```
31+
</Accordion>
32+
````
33+
34+
</RequestExample>
35+
36+
## Props
37+
38+
<ResponseField name="title" type="string" required>
39+
Title in the Accordion preview.
40+
</ResponseField>
41+
42+
<ResponseField name="description" type="string">
43+
Detail below the title in the Accordion preview.
44+
</ResponseField>
45+
46+
<ResponseField name="defaultOpen" type="boolean" default="false">
47+
Whether the Accordion is open by default.
48+
</ResponseField>
49+
50+
<ResponseField name="icon" type="string or svg">
51+
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
52+
icon](https://lucide.dev/icons), or SVG code
53+
</ResponseField>
54+
55+
<ResponseField name="iconType" type="string">
56+
One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or
57+
"brands"
58+
</ResponseField>
59+
60+
Use [AccordionGroup](/content/components/accordion-groups) to create a group of Accordions.

‎content/components/callouts.mdx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: 'Callout Boxes'
3+
description: 'Use callouts to add eye-catching context to your content'
4+
icon: 'circle-exclamation'
5+
---
6+
7+
Callouts can be styled as a Note, Warning, Info, Tip, or Check:
8+
9+
### Note Callouts
10+
11+
<Note>This adds a note in the content</Note>
12+
13+
```jsx
14+
<Note>This adds a note in the content</Note>
15+
```
16+
17+
### Warning Callouts
18+
19+
<Warning>This raises a warning to watch out for</Warning>
20+
21+
```jsx
22+
<Warning>This raises a warning to watch out for</Warning>
23+
```
24+
25+
### Info Callouts
26+
27+
<Info>This draws attention to important information</Info>
28+
29+
```jsx
30+
<Info>This draws attention to important information</Info>
31+
```
32+
33+
### Tip Callouts
34+
35+
<Tip>This suggests a helpful tip</Tip>
36+
37+
```jsx
38+
<Tip>This suggests a helpful tip</Tip>
39+
```
40+
41+
### Check Callouts
42+
43+
<Check>This brings us a checked status</Check>
44+
45+
```jsx
46+
<Check>This brings us a checked status</Check>
47+
```

‎content/components/card-groups.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: 'Card Groups'
3+
description: 'Show cards side by side in a grid format'
4+
icon: 'rectangles-mixed'
5+
---
6+
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.
8+
9+
<CardGroup cols={2}>
10+
<Card title="First Card" icon="square-1">
11+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
12+
</Card>
13+
<Card title="Second Card" icon="square-2">
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
15+
</Card>
16+
<Card title="Third Card" icon="square-3">
17+
Ut enim ad minim veniam, quis nostrud exercitation ullamco
18+
</Card>
19+
<Card title="Fourth Card" icon="square-4">
20+
Excepteur sint occaecat cupidatat non proident
21+
</Card>
22+
</CardGroup>
23+
24+
<RequestExample>
25+
26+
```jsx Card Group Example
27+
<CardGroup cols={2}>
28+
<Card title="First Card" icon="square-1">
29+
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
30+
</Card>
31+
<Card title="Second Card" icon="square-2">
32+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
33+
</Card>
34+
<Card title="Third Card" icon="square-3">
35+
Ut enim ad minim veniam, quis nostrud exercitation ullamco
36+
</Card>
37+
<Card title="Fourth Card" icon="square-4">
38+
Excepteur sint occaecat cupidatat non proident
39+
</Card>
40+
</CardGroup>
41+
```
42+
43+
</RequestExample>
44+
45+
## Props
46+
47+
<ResponseField name="cols" default={2}>
48+
The number of columns per row
49+
</ResponseField>

‎content/components/cards.mdx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
title: "Cards"
3+
description: "Highlight main points or links with customizable icons"
4+
icon: "rectangle"
5+
---
6+
7+
<Card title="Card Title" icon="link" href="/content/components/card-groups">
8+
This is how you use a card with an icon and a link. Clicking on this card
9+
brings you to the Card Group page.
10+
</Card>
11+
12+
<RequestExample>
13+
```jsx Card Example
14+
<Card title="Click on me" icon="link" href="/content/components/card-group">
15+
This is how you use a card with an icon and a link. Clicking on this card
16+
brings you to the Card Group page.
17+
</Card>
18+
```
19+
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+
26+
</RequestExample>
27+
28+
### Horizontal Card
29+
30+
Add a `horizontal` property to make it horizontally displayed.
31+
32+
<Card title="Horizontal Card" icon="text-size" horizontal>
33+
Here is an example of a horizontal card
34+
</Card>
35+
36+
### Image Card
37+
38+
Add an `img` property to display an image on the top of the card.
39+
40+
<Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
41+
Here is an example of a card with an image
42+
</Card>
43+
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+
74+
## Props
75+
76+
<ResponseField name="title" type="string" required>
77+
The title of the card
78+
</ResponseField>
79+
80+
<ResponseField name="icon" type="string or svg">
81+
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
82+
icon](https://lucide.dev/icons), or SVG code in `icon={}`
83+
</ResponseField>
84+
85+
<ResponseField name="iconType" type="string">
86+
One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`
87+
</ResponseField>
88+
89+
<ResponseField name="color" type="string">
90+
The color of the icon as a hex code
91+
</ResponseField>
92+
93+
<ResponseField name="href" type="string">
94+
The url that clicking on the card would navigate the user to
95+
</ResponseField>
96+
97+
<ResponseField name="horizontal" type="boolean">
98+
Makes the card more compact and horizontal
99+
</ResponseField>
100+
101+
<ResponseField name="img" type="string">
102+
The url or local path to an image to display on the top of the card
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: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "Icons"
3+
description: "Use [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icons anywhere in the doc"
4+
icon: "icons"
5+
---
6+
7+
<Icon icon="check" size={32} />
8+
9+
<RequestExample>
10+
11+
```jsx Icon Example
12+
<Icon icon="check" size={32} />
13+
```
14+
</RequestExample>
15+
16+
## Inline Icons
17+
18+
The icon will be placed inline when used in a paragraph.
19+
20+
```markdown Inline Icon Example
21+
<Icon icon="check" iconType="solid" /> The documentation you want, effortlessly
22+
```
23+
24+
<Icon icon="check" iconType="solid" /> The documentation you want, effortlessly
25+
26+
## Props
27+
28+
<ResponseField name="icon" type="string" required>
29+
A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon
30+
</ResponseField>
31+
32+
<ResponseField name="iconType" type="string">
33+
One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands` (only for [Font Awesome](https://fontawesome.com/icons) icons).
34+
</ResponseField>
35+
36+
<ResponseField name="color" type="string">
37+
The color of the icon as a hex code (e.g., `#FF5733`)
38+
</ResponseField>
39+
40+
<ResponseField name="size" type="number">
41+
The size of the icon in pixels
42+
</ResponseField>

0 commit comments

Comments
 (0)