diff --git a/@stellar/design-system-website/docs/components/accents/tooltip.mdx b/@stellar/design-system-website/docs/components/accents/tooltip.mdx
new file mode 100644
index 00000000..cd4d70f5
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/accents/tooltip.mdx
@@ -0,0 +1,21 @@
+---
+slug: /tooltip
+---
+
+# Tooltip
+
+
+
+## Example
+
+```tsx live
+
+ Tooltip trigger}>
+ Lorem ipsum dolor sit
+
+
+```
+
+## Props
+
+
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..1b03f732
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx
@@ -0,0 +1,131 @@
+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: "disabled",
+ label: "Disabled",
+ },
+ {
+ 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/componentPreview/tooltipPreview.tsx b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx
new file mode 100644
index 00000000..88bcfb78
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx
@@ -0,0 +1,94 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const tooltipPreview: ComponentPreview = {
+ options: [
+ {
+ type: "select",
+ prop: "placement",
+ options: [
+ {
+ value: "",
+ label: "Placement",
+ },
+ {
+ value: "bottom",
+ label: "Bottom",
+ },
+ {
+ value: "bottom-start",
+ label: "Bottom start",
+ },
+ {
+ value: "bottom-end",
+ label: "Bottom end",
+ },
+ {
+ value: "left",
+ label: "Left",
+ },
+ {
+ value: "left-start",
+ label: "Left start",
+ },
+ {
+ value: "left-end",
+ label: "Left end",
+ },
+ {
+ value: "right",
+ label: "Right",
+ },
+ {
+ value: "right-start",
+ label: "Right start",
+ },
+ {
+ value: "right-end",
+ label: "Right end",
+ },
+ {
+ value: "top",
+ label: "Top",
+ },
+ {
+ value: "top-start",
+ label: "Top start",
+ },
+ {
+ value: "top-end",
+ label: "Top end",
+ },
+ ],
+ },
+ {
+ type: "select",
+ prop: "isVisible",
+ customValue: false,
+ options: [
+ {
+ value: "",
+ label: "Visible",
+ },
+ {
+ value: "hidden",
+ label: "Hidden",
+ },
+ ],
+ },
+ {
+ type: "select",
+ prop: "isContrast",
+ customValue: false,
+ options: [
+ {
+ value: "",
+ label: "Contrast",
+ },
+ {
+ value: "noContrast",
+ label: "No contrast",
+ },
+ ],
+ },
+ ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
index 2476a422..fbfb92ca 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 ";
@@ -21,6 +22,7 @@ import { profilePreview } from "@site/src/componentPreview/profilePreview";
import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
import { selectPreview } from "@site/src/componentPreview/selectPreview";
import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
// =============================================================================
// Component previews
@@ -33,6 +35,7 @@ const previews: { [key: string]: ComponentPreview } = {
Button: buttonPreview,
Caption: captionPreview,
Heading: headingPreview,
+ Input: inputPreview,
Link: linkPreview,
Loader: loaderPreview,
Notification: notificationPreview,
@@ -41,6 +44,7 @@ const previews: { [key: string]: ComponentPreview } = {
ProjectLogo: projectLogoPreview,
Select: selectPreview,
Title: titlePreview,
+ Tooltip: tooltipPreview,
};
type Theme = "sds-theme-light" | "sds-theme-dark";
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css
index 89a9093d..2c314621 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/styles.css
+++ b/@stellar/design-system-website/src/components/PreviewBlock/styles.css
@@ -85,6 +85,7 @@
margin: 0 !important;
}
-.PreviewBlock .Select {
+.PreviewBlock .Select,
+.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);
diff --git a/@stellar/design-system/src/components/Tooltip/index.tsx b/@stellar/design-system/src/components/Tooltip/index.tsx
index b62e29d4..e28247e3 100644
--- a/@stellar/design-system/src/components/Tooltip/index.tsx
+++ b/@stellar/design-system/src/components/Tooltip/index.tsx
@@ -1,14 +1,35 @@
-import { Floater, FloaterPlacement } from "../Floater";
+import { Floater } from "../Floater";
import "./styles.scss";
-interface TooltipProps {
+/** */
+export interface TooltipProps {
+ /** Element that shows/hides tooltip */
triggerEl: JSX.Element;
+ /** Content of the tooltip */
children: React.ReactNode;
- placement?: FloaterPlacement;
+ /** Placement of tooltip relative to the trigger element @defaultValue `right` */
+ placement?:
+ | "top"
+ | "right"
+ | "bottom"
+ | "left"
+ | "top-start"
+ | "top-end"
+ | "right-start"
+ | "right-end"
+ | "bottom-start"
+ | "bottom-end"
+ | "left-start"
+ | "left-end";
+ /** Manually show/hide tooltip */
isVisible?: boolean;
+ /** Use contrast theme color @defaultValue `true` */
isContrast?: boolean;
}
+/**
+ * Tooltip is used to display info in a bubble. We are using [Floating UI](https://floating-ui.com/) for tooltip positioning.
+ */
export const Tooltip: React.FC = ({
triggerEl,
children,