Skip to content

Commit 9002550

Browse files
carlagncarlagn
authored
feat: #5969 Add custom button for MDX usage (#6487)
* Add custom button for MDX usage * Update defaults
1 parent 194399d commit 9002550

File tree

3 files changed

+187
-0
lines changed

3 files changed

+187
-0
lines changed

‎src/components/button/Button.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import Link from '@docusaurus/Link';
2+
import clsx from 'clsx';
3+
import React, { CSSProperties } from 'react';
4+
import styles from "./styles.module.scss";
5+
import { Icon } from '../Icon';
6+
7+
// Define the Button type to control the props that can be passed to the Button component.
8+
type Button = {
9+
// The variant prop is a string that determines the color of the button.
10+
// It can be one of the following values: 'primary', 'secondary', 'danger', 'warning', 'success', 'info', 'link', or any other string.
11+
// The default value is 'primary'.
12+
variant: 'primary' | 'secondary' | 'link';
13+
14+
color: 'indigo' | 'teal' | null;
15+
// The disabled prop is a boolean that determines if the button should be disabled.
16+
disabled?: boolean;
17+
leftIcon?: string;
18+
// The className prop is a string that allows you to add custom classes to the button.
19+
className?: string;
20+
// The style prop is an object that allows you to add custom styles to the button.
21+
style?: CSSProperties;
22+
// The link prop is a string that determines the URL the button should link to.
23+
link: string;
24+
// The label prop is a string that determines the text of the button.
25+
label: string;
26+
}
27+
28+
// Button component that accepts the specified props.
29+
export default function Button ({
30+
variant = 'primary',
31+
disabled = false,
32+
color = 'indigo',
33+
leftIcon,
34+
className,
35+
style,
36+
link,
37+
label
38+
}: Button) {
39+
const colorClass = color ? styles[`button--${color}`] : '';
40+
const variantClass = variant ? styles[`button--${variant}`] : '';
41+
const disabledClass = disabled ? styles['disabled'] : '';
42+
// If the button is disabled, set the destination to null.
43+
return (
44+
<Link to={link}>
45+
<button
46+
className={clsx(
47+
styles['custom-button'],
48+
colorClass,
49+
variantClass,
50+
disabledClass,
51+
className
52+
)}
53+
style={style}
54+
role='button'
55+
aria-disabled={disabled}
56+
>
57+
{leftIcon && <Icon className={styles.leftIcon} icon={leftIcon} size='inherit' color='inherit' /> }
58+
{label}
59+
{(link || variant == 'link') && <Icon className={styles['fa-arrow-right']} icon='fa-regular fa-arrow-right' size='inherit' color='inherit' /> }
60+
</button>
61+
</Link>
62+
);
63+
}

‎src/components/button/styles.module.scss

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
.custom-button {
2+
padding: 6px 12px;
3+
border: 1px solid transparent;
4+
border-radius: 4px;
5+
cursor: pointer;
6+
transition: all 150ms ease-in-out;
7+
white-space: nowrap;
8+
font-family: Barlow;
9+
font-size: 12px;
10+
font-weight: 700;
11+
line-height: 20px;
12+
text-align: center;
13+
.leftIcon {
14+
margin-right: 4px;
15+
}
16+
.fa-arrow-right {
17+
transition: all 150ms ease-in-out;
18+
transition: translateX(4px);
19+
margin-left: 4px;
20+
}
21+
&:hover:not(&.disabled) {
22+
.fa-arrow-right {
23+
transform: translateX(4px);
24+
}
25+
}
26+
27+
&.button--indigo {
28+
&.button--primary {
29+
border-color: var(--indigo-600);
30+
background-color: var(--indigo-600);
31+
color: var(--white-color);
32+
&:hover {
33+
background-color: var(--indigo-700);
34+
}
35+
&:focus {
36+
background-color: var(--indigo-600);
37+
border-color: var(--indigo-100);
38+
}
39+
}
40+
&.button--secondary {
41+
background-color: var(--white-color);
42+
border-color: var(--indigo-600);
43+
color: var(--indigo-600);
44+
border-width: 2px;
45+
&:hover {
46+
color: var(--indigo-700);
47+
border-color: var(--indigo-700);
48+
}
49+
&:focus {
50+
border-color: var(--indigo-600);
51+
color: var(--indigo-600);
52+
}
53+
}
54+
&.button--link {
55+
background-color: transparent;
56+
padding: 0;
57+
text-decoration: underline;
58+
color: var(--indigo-600);
59+
text-underline-offset: 2px;
60+
&:hover {
61+
color: var(--indigo-700);
62+
}
63+
> *:not(i) {
64+
text-decoration: underline;
65+
}
66+
}
67+
}
68+
&.button--teal {
69+
&.button--primary {
70+
border-color: var(--teal-600);
71+
background-color: var(--teal-600);
72+
color: var(--white-color);
73+
&:hover {
74+
background-color: var(--teal-700);
75+
}
76+
&:focus {
77+
background-color: var(--teal-600);
78+
border-color: var(--teal-100);
79+
}
80+
}
81+
&.button--secondary {
82+
background-color: var(--white-color);
83+
border-color: var(--teal-600);
84+
color: var(--teal-600);
85+
border-width: 2px;
86+
&:hover {
87+
color: var(--teal-700);
88+
border-color: var(--teal-700);
89+
}
90+
&:focus {
91+
border-color: var(--teal-600);
92+
color: var(--teal-600);
93+
}
94+
}
95+
&.button--link {
96+
background-color: transparent;
97+
padding: 0;
98+
text-decoration: underline;
99+
color: var(--teal-600);
100+
text-underline-offset: 2px;
101+
&:hover {
102+
color: var(--teal-700);
103+
}
104+
> *:not(i) {
105+
text-decoration: underline;
106+
}
107+
}
108+
}
109+
110+
&.disabled {
111+
cursor: not-allowed;
112+
color: #CBD5E0 !important;
113+
&.button--primary {
114+
background: #F7FAFC !important;
115+
border-color: #F7FAFC !important;
116+
}
117+
&.button--secondary {
118+
border-color: #E2E8F0 !important;
119+
background-color: var(--white) !important;
120+
}
121+
}
122+
}

‎src/theme/MDXComponents.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import TopSection from "@site/src/components/topSection";
1616
import { useLocation } from "@docusaurus/router";
1717
import styles from "./styles.module.scss";
1818
import clsx from "clsx";
19+
import Button from "../components/button/Button";
1920

2021
// TODO: do we want to fix this?
2122
const TopBlock: React.FC<React.PropsWithChildren> = ({
@@ -193,5 +194,6 @@ export default {
193194
table: (p: any) => <div className="mdx-table"><table {...p}>{p.children}</table></div>,
194195
ParallelBlocks,
195196
ButtonLink,
197+
Button,
196198
NavigationLinksContainer,
197199
};

0 commit comments

Comments
 (0)