-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #202 from seqeralabs/api-overview
Improve API overview
- Loading branch information
Showing
8 changed files
with
193 additions
and
77 deletions.
There are no files selected for viewing
Binary file removed
BIN
-437 KB
platform_versioned_docs/version-23.4/api/_images/api_example_call.png
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file removed
BIN
-437 KB
platform_versioned_docs/version-24.1/api/_images/api_example_call.png
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,80 @@ | ||
| import React from "react"; | ||
| import clsx from "clsx"; | ||
| import Link from "@docusaurus/Link"; | ||
| import React, { ReactNode, CSSProperties } from 'react'; | ||
| import clsx from 'clsx'; | ||
| import Link from '@docusaurus/Link'; | ||
|
|
||
| import styles from "./styles.module.css"; | ||
| // Define the Button type to control the props that can be passed to the Button component. | ||
| type Button = { | ||
| // The size prop can be one of the following values: 'sm', 'lg', 'small', 'medium', 'large', or null. | ||
| // We'll convert 'small' to 'sm' and 'large' to 'lg' in the component. 'medium' will be considered null. | ||
| size?: 'sm' | 'lg' | 'small' | 'medium' | 'large' | null; | ||
| // The outline prop is a boolean that determines if the button should be an outline button. | ||
| outline?: boolean; | ||
| // 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' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string; | ||
| // The block prop is a boolean that determines if the button should be a block-level button. | ||
| block?: boolean; | ||
| // The disabled prop is a boolean that determines if the button should be disabled. | ||
| disabled?: boolean; | ||
| // 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; | ||
| } | ||
|
|
||
| import Arrow from "./arrow.inline.svg"; | ||
|
|
||
| type Props = { | ||
| to: string; | ||
| children: React.ReactNode; | ||
| cta?: boolean; | ||
| arrow?: boolean; | ||
| className?: string; | ||
| }; | ||
|
|
||
| const Button: React.FC<Props> = ({ to, children, cta, className, arrow }) => { | ||
| const isExternal = to?.startsWith("http"); | ||
|
|
||
| if (isExternal) | ||
| // Button component that accepts the specified props. | ||
| export default function Button ({ | ||
| size = null, | ||
| outline = false, | ||
| variant = 'primary', | ||
| block = false, | ||
| disabled = false, | ||
| className, | ||
| style, | ||
| link, | ||
| label | ||
| }: Button) { | ||
| // Map the size prop values to corresponding CSS classes. | ||
| const sizeMap = { | ||
| sm: 'sm', | ||
| small: 'sm', | ||
| lg: 'lg', | ||
| large: 'lg', | ||
| medium: null, | ||
| }; | ||
| const buttonSize = size ? sizeMap[size] : ''; | ||
| const sizeClass = buttonSize ? `button--${buttonSize}` : ''; | ||
| const outlineClass = outline ? 'button--outline' : ''; | ||
| const variantClass = variant ? `button--${variant}` : ''; | ||
| const blockClass = block ? 'button--block' : ''; | ||
| const disabledClass = disabled ? 'disabled' : ''; | ||
| // If the button is disabled, set the destination to null. | ||
| const destination = disabled ? null : link; | ||
| return ( | ||
| <a | ||
| href={to} | ||
| target="_blank" | ||
| className={clsx(styles.button, className, { [styles.cta]: cta })} | ||
| rel="noopener noreferrer" | ||
| > | ||
| {children} | ||
| {arrow && <Arrow />} | ||
| </a> | ||
| <p> | ||
| <Link to={destination}> | ||
| <button | ||
| className={clsx( | ||
| 'button', | ||
| sizeClass, | ||
| outlineClass, | ||
| variantClass, | ||
| blockClass, | ||
| disabledClass, | ||
| className | ||
| )} | ||
| style={style} | ||
| role='button' | ||
| aria-disabled={disabled} | ||
| > | ||
| {label} | ||
| </button> | ||
| </Link> | ||
| </p> | ||
| ); | ||
|
|
||
| return ( | ||
| <Link | ||
| to={to} | ||
| className={clsx(styles.button, className, { [styles.cta]: cta })} | ||
| > | ||
| {children} | ||
| {arrow && <Arrow />} | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| export default Button; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from "react"; | ||
| import clsx from "clsx"; | ||
| import Link from "@docusaurus/Link"; | ||
|
|
||
| import styles from "./styles.module.css"; | ||
|
|
||
| import Arrow from "./arrow.inline.svg"; | ||
|
|
||
| type Props = { | ||
| to: string; | ||
| children: React.ReactNode; | ||
| cta?: boolean; | ||
| arrow?: boolean; | ||
| className?: string; | ||
| }; | ||
|
|
||
| const Button: React.FC<Props> = ({ to, children, cta, className, arrow }) => { | ||
| const isExternal = to?.startsWith("http"); | ||
|
|
||
| if (isExternal) | ||
| return ( | ||
| <a | ||
| href={to} | ||
| target="_blank" | ||
| className={clsx(styles.button, className, { [styles.cta]: cta })} | ||
| rel="noopener noreferrer" | ||
| > | ||
| {children} | ||
| {arrow && <Arrow />} | ||
| </a> | ||
| ); | ||
|
|
||
| return ( | ||
| <Link | ||
| to={to} | ||
| className={clsx(styles.button, className, { [styles.cta]: cta })} | ||
| > | ||
| {children} | ||
| {arrow && <Arrow />} | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| export default Button; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters