feat: #5969 Add custom button for MDX usage (#6487)

* Add custom button for MDX usage * Update defaults
prisma · Dec 4, 2024 · 9002550 · 9002550
1 parent 194399d
commit 9002550
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -0,0 +1,63 @@
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import React, { CSSProperties } from 'react';
+import styles from "./styles.module.scss";
+import { Icon } from '../Icon';
+
+// Define the Button type to control the props that can be passed to the Button component.
+type Button = {
+    // The variant prop is a string that determines the color of the button.
+    // It can be one of the following values: 'primary', 'secondary', 'danger', 'warning', 'success', 'info', 'link', or any other string.
+    // The default value is 'primary'.
+    variant: 'primary' | 'secondary' | 'link';
+
+    color: 'indigo' | 'teal' | null;
+    // The disabled prop is a boolean that determines if the button should be disabled.
+    disabled?: boolean;
+    leftIcon?: string;
+    // The className prop is a string that allows you to add custom classes to the button.
+    className?: string;
+    // The style prop is an object that allows you to add custom styles to the button.
+    style?: CSSProperties;
+    // The link prop is a string that determines the URL the button should link to.
+    link: string;
+    // The label prop is a string that determines the text of the button.
+    label: string;
+}
+
+// Button component that accepts the specified props.
+export default function Button ({ 
+    variant = 'primary', 
+    disabled = false, 
+    color = 'indigo',
+    leftIcon,
+    className, 
+    style, 
+    link, 
+    label 
+}: Button) {
+    const colorClass = color ? styles[`button--${color}`] : '';
+    const variantClass = variant ? styles[`button--${variant}`] : '';
+    const disabledClass = disabled ? styles['disabled'] : '';
+    // If the button is disabled, set the destination to null.
+    return (
+        <Link to={link}>
+            <button
+                className={clsx(
+                    styles['custom-button'],
+                    colorClass,
+                    variantClass,
+                    disabledClass,
+                    className
+                )}
+                style={style}
+                role='button'
+                aria-disabled={disabled}
+            >
+                {leftIcon && <Icon className={styles.leftIcon} icon={leftIcon} size='inherit' color='inherit' /> }
+                {label}
+                {(link || variant == 'link') && <Icon className={styles['fa-arrow-right']} icon='fa-regular fa-arrow-right' size='inherit' color='inherit' /> }
+            </button>
+        </Link>
+    );
+}
diff --git a/src/components/button/styles.module.scss b/src/components/button/styles.module.scss
@@ -0,0 +1,122 @@
+.custom-button {
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+  white-space: nowrap;
+  font-family: Barlow;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: center;
+  .leftIcon {
+    margin-right: 4px;
+  }
+  .fa-arrow-right {
+    transition: all 150ms ease-in-out;
+    transition: translateX(4px);
+    margin-left: 4px;
+  }
+  &:hover:not(&.disabled) {
+    .fa-arrow-right {
+      transform: translateX(4px);
+    }
+  }
+
+  &.button--indigo {
+    &.button--primary {
+      border-color: var(--indigo-600);
+      background-color: var(--indigo-600);
+      color: var(--white-color);
+      &:hover {
+        background-color: var(--indigo-700);
+      }
+      &:focus {
+        background-color: var(--indigo-600);
+        border-color: var(--indigo-100);
+      }
+    }
+    &.button--secondary {
+      background-color: var(--white-color);
+      border-color: var(--indigo-600);
+      color: var(--indigo-600);
+      border-width: 2px;
+      &:hover {
+        color: var(--indigo-700);
+        border-color: var(--indigo-700);
+      }
+      &:focus {
+        border-color: var(--indigo-600);
+        color: var(--indigo-600);
+      }
+    }
+    &.button--link {
+      background-color: transparent;
+      padding: 0;
+      text-decoration: underline;
+      color: var(--indigo-600);
+      text-underline-offset: 2px;
+      &:hover {
+        color: var(--indigo-700);
+      }
+      > *:not(i) {
+        text-decoration: underline;
+      }
+    }
+  }
+  &.button--teal {
+    &.button--primary {
+      border-color: var(--teal-600);
+      background-color: var(--teal-600);
+      color: var(--white-color);
+      &:hover {
+        background-color: var(--teal-700);
+      }
+      &:focus {
+        background-color: var(--teal-600);
+        border-color: var(--teal-100);
+      }
+    }
+    &.button--secondary {
+      background-color: var(--white-color);
+      border-color: var(--teal-600);
+      color: var(--teal-600);
+      border-width: 2px;
+      &:hover {
+        color: var(--teal-700);
+        border-color: var(--teal-700);
+      }
+      &:focus {
+        border-color: var(--teal-600);
+        color: var(--teal-600);
+      }
+    }
+    &.button--link {
+      background-color: transparent;
+      padding: 0;
+      text-decoration: underline;
+      color: var(--teal-600);
+      text-underline-offset: 2px;
+      &:hover {
+        color: var(--teal-700);
+      }
+      > *:not(i) {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: #CBD5E0 !important;
+    &.button--primary {
+      background: #F7FAFC !important;
+      border-color: #F7FAFC !important;
+    }
+    &.button--secondary {
+      border-color: #E2E8F0 !important;
+      background-color: var(--white) !important;
+    }
+  }
+}
diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx
@@ -16,6 +16,7 @@ import TopSection from "@site/src/components/topSection";
 import { useLocation } from "@docusaurus/router";
 import styles from "./styles.module.scss";
 import clsx from "clsx";
+import Button from "../components/button/Button";
 
 // TODO: do we want to fix this?
 const TopBlock: React.FC<React.PropsWithChildren> = ({
@@ -193,5 +194,6 @@ export default {
   table: (p: any) => <div className="mdx-table"><table {...p}>{p.children}</table></div>,
   ParallelBlocks,
   ButtonLink,
+  Button,
   NavigationLinksContainer,
 };