From b960496deaa49e85a32ae877e36e7f1ead55cee9 Mon Sep 17 00:00:00 2001 From: Iveta Date: Fri, 29 Sep 2023 10:15:43 -0400 Subject: [PATCH 1/2] Input docs + preview --- .../docs/components/inputs/_category_.json | 6 + .../docs/components/inputs/input.mdx | 19 +++ .../src/componentPreview/inputPreview.tsx | 126 ++++++++++++++++++ .../src/components/PreviewBlock/index.tsx | 2 + .../src/components/PreviewBlock/styles.css | 6 +- .../src/components/Input/index.tsx | 28 +++- 6 files changed, 183 insertions(+), 4 deletions(-) create mode 100644 @stellar/design-system-website/docs/components/inputs/_category_.json create mode 100644 @stellar/design-system-website/docs/components/inputs/input.mdx create mode 100644 @stellar/design-system-website/src/componentPreview/inputPreview.tsx diff --git a/@stellar/design-system-website/docs/components/inputs/_category_.json b/@stellar/design-system-website/docs/components/inputs/_category_.json new file mode 100644 index 00000000..8127ad62 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Inputs", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/inputs/input.mdx b/@stellar/design-system-website/docs/components/inputs/input.mdx new file mode 100644 index 00000000..2200cef6 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/input.mdx @@ -0,0 +1,19 @@ +--- +slug: /input +--- + +# Input + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/src/componentPreview/inputPreview.tsx b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx new file mode 100644 index 00000000..811080d2 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx @@ -0,0 +1,126 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const inputPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "placeholder", + customValue: "Placeholder", + options: [ + { + value: "", + label: "No placeholder", + }, + { + value: "placeholder", + label: "Placeholder", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "checkbox", + prop: "isPassword", + label: "Password", + }, + { + type: "select", + prop: "rightElement", + customValue: , + options: [ + { + value: "", + label: "No element", + }, + { + value: "element", + label: "Element", + }, + ], + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx index 39cafd8a..928fcd7c 100644 --- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx +++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx @@ -13,6 +13,7 @@ import { bannerPreview } from "@site/src/componentPreview/bannerPreview"; import { buttonPreview } from "@site/src/componentPreview/buttonPreview"; import { captionPreview } from "@site/src/componentPreview/captionPreview"; import { headingPreview } from "@site/src/componentPreview/headingPreview"; +import { inputPreview } from "@site/src/componentPreview/inputPreview"; import { linkPreview } from "@site/src/componentPreview/linkPreview"; import { loaderPreview } from "@site/src/componentPreview/loaderPreview"; import { notificationPreview } from "@site/src/componentPreview/notificationPreview "; @@ -32,6 +33,7 @@ const previews: { [key: string]: ComponentPreview } = { Button: buttonPreview, Caption: captionPreview, Heading: headingPreview, + Input: inputPreview, Link: linkPreview, Loader: loaderPreview, Notification: notificationPreview, diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css index b9d84b32..84a28cae 100644 --- a/@stellar/design-system-website/src/components/PreviewBlock/styles.css +++ b/@stellar/design-system-website/src/components/PreviewBlock/styles.css @@ -29,7 +29,7 @@ } .PreviewBlock__selects__content .Select { - width: 8rem; + width: 9rem; } /* Checkboxes */ @@ -84,3 +84,7 @@ .PreviewBlock .Heading { margin: 0 !important; } + +.PreviewBlock .Input { + max-width: 24rem; +} diff --git a/@stellar/design-system/src/components/Input/index.tsx b/@stellar/design-system/src/components/Input/index.tsx index daed1aa7..d7425ed4 100644 --- a/@stellar/design-system/src/components/Input/index.tsx +++ b/@stellar/design-system/src/components/Input/index.tsx @@ -4,23 +4,45 @@ import { Icon } from "../../icons"; import { FieldNote } from "../utils/FieldNote"; import "./styles.scss"; -interface InputProps extends React.InputHTMLAttributes { +/** Including all valid [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) */ +export interface InputProps { + /** ID of the input should be unique */ id: string; // Note: cannot use "size" here because it's input's native property + /** Size of the input */ fieldSize: "md" | "sm" | "xs"; + /** Label of the input */ label?: string | React.ReactNode; + /** Make label uppercase */ isLabelUppercase?: boolean; + /** Pill shaped input */ isPill?: boolean; + /** Input error without a message */ isError?: boolean; + /** Input with extra padding */ isExtraPadding?: boolean; + /** Password input preset with show/hide button */ isPassword?: boolean; + /** Right side element of the input */ rightElement?: string | React.ReactNode; + /** Note message of the input */ note?: string | React.ReactNode; + /** Error message of the input */ error?: string | React.ReactNode; + /** Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs) */ customInput?: React.ReactElement; } -export const Input: React.FC = ({ +interface Props + extends InputProps, + React.InputHTMLAttributes { + id: string; +} + +/** + * `Input` component is a form input element, which inherits all native HTML `input` element attributes. + */ +export const Input: React.FC = ({ customInput, id, label, @@ -34,7 +56,7 @@ export const Input: React.FC = ({ note, error, ...props -}: InputProps) => { +}: Props) => { const [sideElWidthRem, setSideElWidthRem] = useState(0); const [isPasswordMasked, setIsPasswordMasked] = useState(true); const sideEl = useRef(null); From 4c6e35428494a42dab38d03e8bc4891d2b777c07 Mon Sep 17 00:00:00 2001 From: Iveta Date: Fri, 29 Sep 2023 14:22:48 -0400 Subject: [PATCH 2/2] Disabled preview --- .../src/componentPreview/inputPreview.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/@stellar/design-system-website/src/componentPreview/inputPreview.tsx b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx index 811080d2..1b03f732 100644 --- a/@stellar/design-system-website/src/componentPreview/inputPreview.tsx +++ b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx @@ -52,6 +52,11 @@ export const inputPreview: ComponentPreview = { }, ], }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, { type: "checkbox", prop: "isLabelUppercase",