From a0a836ae78558a2a28c14330691e8d78d77a6081 Mon Sep 17 00:00:00 2001 From: Iveta Date: Tue, 3 Oct 2023 10:19:42 -0400 Subject: [PATCH] IconButton and ButtonPreset docs + preview (#182) * IconButton docs + preview * ButtonPreset docs + preview --- .../docs/components/buttons/button-preset.mdx | 19 ++++ .../docs/components/buttons/icon-button.mdx | 19 ++++ .../componentPreview/buttonPresetPreview.tsx | 89 +++++++++++++++ .../componentPreview/iconButtonPreview.tsx | 87 +++++++++++++++ .../src/components/PreviewBlock/index.tsx | 4 + .../src/components/ButtonPreset/index.tsx | 71 ++++++++++++ .../src/components/IconButton/index.tsx | 101 +++++------------- .../design-system/src/components/index.ts | 1 + 8 files changed, 315 insertions(+), 76 deletions(-) create mode 100644 @stellar/design-system-website/docs/components/buttons/button-preset.mdx create mode 100644 @stellar/design-system-website/docs/components/buttons/icon-button.mdx create mode 100644 @stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx create mode 100644 @stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx create mode 100644 @stellar/design-system/src/components/ButtonPreset/index.tsx diff --git a/@stellar/design-system-website/docs/components/buttons/button-preset.mdx b/@stellar/design-system-website/docs/components/buttons/button-preset.mdx new file mode 100644 index 00000000..2a98e185 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/button-preset.mdx @@ -0,0 +1,19 @@ +--- +slug: /button-preset +--- + +# Button preset + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/icon-button.mdx b/@stellar/design-system-website/docs/components/buttons/icon-button.mdx new file mode 100644 index 00000000..6bfb864d --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/icon-button.mdx @@ -0,0 +1,19 @@ +--- +slug: /icon-button +--- + +# Icon button + + + +## Example + +```tsx live + + } /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx b/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx new file mode 100644 index 00000000..28f6f574 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx @@ -0,0 +1,89 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const buttonPresetPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "preset", + options: [ + { + value: "copy", + label: "Copy", + }, + { + value: "download", + label: "Download", + }, + ], + }, + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "highlight", + label: "Highlight", + }, + ], + }, + { + type: "select", + prop: "label", + options: [ + { + value: "", + label: "Default label", + }, + { + value: "Label", + label: "Custom label", + }, + ], + }, + { + type: "select", + prop: "customSize", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + { + type: "select", + prop: "customColor", + options: [ + { + value: "", + label: "Default color", + }, + { + value: "var(--color-green-50)", + label: "Green", + }, + { + value: "var(--color-yellow-50)", + label: "Yellow", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx new file mode 100644 index 00000000..d4f7248f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx @@ -0,0 +1,87 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const iconButtonPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "error", + label: "Error", + }, + { + value: "success", + label: "Success", + }, + { + value: "warning", + label: "Warning", + }, + { + value: "highlight", + label: "Highlight", + }, + ], + }, + { + type: "select", + prop: "label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "Label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "customSize", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + { + type: "select", + prop: "customColor", + options: [ + { + value: "", + label: "Default color", + }, + { + value: "var(--color-purple-50)", + label: "Purple", + }, + { + value: "var(--color-yellow-50)", + label: "Yellow", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx index fec17223..70a41cb1 100644 --- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx +++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx @@ -11,9 +11,11 @@ import { avatarPreview } from "@site/src/componentPreview/avatarPreview"; import { badgePreview } from "@site/src/componentPreview/badgePreview"; import { bannerPreview } from "@site/src/componentPreview/bannerPreview"; import { buttonPreview } from "@site/src/componentPreview/buttonPreview"; +import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview"; import { captionPreview } from "@site/src/componentPreview/captionPreview"; import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview"; import { headingPreview } from "@site/src/componentPreview/headingPreview"; +import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview"; import { inputPreview } from "@site/src/componentPreview/inputPreview"; import { linkPreview } from "@site/src/componentPreview/linkPreview"; import { loaderPreview } from "@site/src/componentPreview/loaderPreview"; @@ -37,9 +39,11 @@ const previews: { [key: string]: ComponentPreview } = { Badge: badgePreview, Banner: bannerPreview, Button: buttonPreview, + ButtonPreset: buttonPresetPreview, Caption: captionPreview, Checkbox: checkboxPreview, Heading: headingPreview, + IconButton: iconButtonPreview, Input: inputPreview, Link: linkPreview, Loader: loaderPreview, diff --git a/@stellar/design-system/src/components/ButtonPreset/index.tsx b/@stellar/design-system/src/components/ButtonPreset/index.tsx new file mode 100644 index 00000000..a46749a7 --- /dev/null +++ b/@stellar/design-system/src/components/ButtonPreset/index.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import { Icon } from "../../icons"; + +/** Including all valid [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) */ +export interface ButtonPresetProps { + /** Button preset */ + preset: "copy" | "download"; + /** Button variant */ + variant?: "default" | "highlight"; + /** Button label */ + label?: string; + /** Alternative text to show on hover */ + altText?: string; + /** Set custom color */ + customColor?: string; + /** Set custom size */ + customSize?: string; +} + +interface Props + extends ButtonPresetProps, + React.ButtonHTMLAttributes {} + +const presetDetails = { + copy: { + label: "Copy", + altText: "Copy", + icon: , + }, + download: { + label: "Download", + altText: "Download", + icon: , + }, +}; + +/** + * `ButtonPreset` is similar to the {@button Button} component, and is used to trigger an action. There are two presets `copy` and `download`, and two variants for color: `default` and `highlight`. + */ +export const ButtonPreset: React.FC = ({ + altText, + label, + variant = "default", + preset, + customColor, + customSize, + ...props +}: Props) => { + const customStyle = { + ...(customColor ? { "--IconButton-color": customColor } : {}), + ...(customSize ? { "--IconButton-size": customSize } : {}), + } as React.CSSProperties; + + return ( + + ); +}; + +ButtonPreset.displayName = "ButtonPreset"; diff --git a/@stellar/design-system/src/components/IconButton/index.tsx b/@stellar/design-system/src/components/IconButton/index.tsx index 90184b67..8bc1d503 100644 --- a/@stellar/design-system/src/components/IconButton/index.tsx +++ b/@stellar/design-system/src/components/IconButton/index.tsx @@ -1,107 +1,56 @@ import React from "react"; -import { Icon } from "../../icons"; import "./styles.scss"; -enum IconButtonVariant { - default = "default", - error = "error", - success = "success", - warning = "warning", - highlight = "highlight", -} - -enum IconButtonPreset { - copy = "copy", - download = "download", -} - -interface IconButtonComponent { - variant: typeof IconButtonVariant; - preset: typeof IconButtonPreset; -} - -interface IconButtonBaseProps - extends React.ButtonHTMLAttributes { - variant?: IconButtonVariant; +/** Including all valid [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) */ +export interface IconButtonProps { + /** Icon element */ + icon: React.ReactNode; + /** Alternative text to show on hover */ + altText: string; + /** Variant of the button */ + variant?: "default" | "error" | "success" | "warning" | "highlight"; + /** Button label */ label?: string; + /** Set custom color */ customColor?: string; + /** Set custom size */ customSize?: string; } -interface IconButtonDefaultProps extends IconButtonBaseProps { - icon: React.ReactNode; - altText: string; - preset?: IconButtonPreset; -} - -interface IconButtonPresetProps extends IconButtonBaseProps { - preset: IconButtonPreset; - icon?: React.ReactNode; - altText?: string; -} - -type IconButtonProps = IconButtonDefaultProps | IconButtonPresetProps; - -const presetDetails = { - [IconButtonPreset.copy]: { - label: "Copy", - altText: "Copy", - icon: , - }, - [IconButtonPreset.download]: { - label: "Download", - altText: "Download", - icon: , - }, -}; +interface Props + extends IconButtonProps, + React.ButtonHTMLAttributes {} -export const IconButton: React.FC & IconButtonComponent = ({ +/** + * `IconButton` is similar to the {@button Button} component, and is used to trigger an action. There are five variants (color is the only difference): `default`, `error`, `success`, `warning`, and `highlight`. + */ +export const IconButton: React.FC = ({ icon, altText, label, - variant = IconButtonVariant.default, - preset, + variant = "default", customColor, customSize, ...props -}: IconButtonProps) => { +}: Props) => { const customStyle = { ...(customColor ? { "--IconButton-color": customColor } : {}), ...(customSize ? { "--IconButton-size": customSize } : {}), } as React.CSSProperties; - const renderContent = () => { - if (preset) { - return ( - <> - - {label ?? presetDetails[preset].label} - - {presetDetails[preset].icon} - - ); - } - - return ( - <> - {label ? {label} : null} - {icon} - - ); - }; - return ( ); }; IconButton.displayName = "IconButton"; -IconButton.variant = IconButtonVariant; -IconButton.preset = IconButtonPreset; diff --git a/@stellar/design-system/src/components/index.ts b/@stellar/design-system/src/components/index.ts index 755b0b92..310fba56 100644 --- a/@stellar/design-system/src/components/index.ts +++ b/@stellar/design-system/src/components/index.ts @@ -3,6 +3,7 @@ export * from "./Avatar"; export * from "./Badge"; export * from "./Banner"; export * from "./Button"; +export * from "./ButtonPreset"; export * from "./Card"; export * from "./Checkbox"; export * from "./CopyText";