CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Informational and text templates

Browse Source
This commit is contained in:
adilallo
2026-02-08 22:04:36 -07:00
parent c43f74f345
commit 2e1538770c
24 changed files with 852 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/controls/TextInput/TextInput.container.tsx
+17 -8
View File
@@ -4,12 +4,13 @@ import { memo, forwardRef, useState, useRef } from "react";
import { useComponentId, useFormField } from "../../../hooks";
import { TextInputView } from "./TextInput.view";
import type { TextInputProps } from "./TextInput.types";
import { normalizeInputState } from "../../../../lib/propNormalization";
import { normalizeInputState, normalizeTextInputSize } from "../../../../lib/propNormalization";
const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
(
{
state: externalStateProp = "default",
inputSize: inputSizeProp = "medium",
disabled = false,
error = false,
label,
@@ -31,6 +32,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
) => {
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
const externalState = normalizeInputState(externalStateProp);
const inputSize = normalizeTextInputSize(inputSizeProp);
// Generate unique ID for accessibility if not provided
const { id: inputId, labelId } = useComponentId("text-input", id);
@@ -59,13 +61,20 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
// Determine if input is filled (has value)
const isFilled = Boolean(value && value.trim().length > 0);
// Fixed size styles (medium only per Figma designs)
const sizeStyles = {
input: "h-[40px] px-[12px] py-[8px] text-[16px]",
label: "text-[14px] leading-[20px] font-medium",
container: "gap-[8px]",
radius: "var(--measures-radius-200,8px)",
};
// Size styles based on inputSize prop
const sizeStyles = inputSize === "small"
? {
input: "h-[32px] px-[10px] py-[6px] text-[14px]",
label: "text-[12px] leading-[16px] font-medium",
container: "gap-[6px]",
radius: "var(--measures-radius-200,8px)",
}
: {
input: "h-[40px] px-[12px] py-[8px] text-[16px]",
label: "text-[14px] leading-[20px] font-medium",
container: "gap-[8px]",
radius: "var(--measures-radius-200,8px)",
};
// State styles based on Figma designs
const getStateStyles = (): {
app/components/controls/TextInput/TextInput.types.ts
+11 -2
View File
@@ -1,5 +1,7 @@
import type { InputStateValue } from "../../../../lib/propNormalization";
export type TextInputSizeValue = "small" | "medium" | "Small" | "Medium";
export interface TextInputProps extends Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"size" | "onChange" | "onFocus" | "onBlur"
@@ -9,6 +11,12 @@ export interface TextInputProps extends Omit<
* Figma uses PascalCase, codebase uses lowercase - both are supported.
*/
state?: InputStateValue;
/**
* Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
* Figma uses PascalCase, codebase uses lowercase - both are supported.
* @default "medium"
*/
inputSize?: TextInputSizeValue;
disabled?: boolean;
error?: boolean;
label?: string;
@@ -21,9 +29,10 @@ export interface TextInputProps extends Omit<
showHelpIcon?: boolean;
/**
* Whether to show hint text below input (Figma prop).
* Can be a boolean or a string to display custom text (e.g., character count).
* @default false
*/
textHint?: boolean;
textHint?: boolean | string;
/**
* Whether to show form header (label and help icon) above input (Figma prop).
* @default true
@@ -55,6 +64,6 @@ export interface TextInputViewProps {
isFilled?: boolean;
inputWrapperClasses?: string;
focusRingClasses?: string;
textHint?: boolean;
textHint?: boolean | string;
formHeader?: boolean;
}
app/components/controls/TextInput/TextInput.view.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
{textHint && (
<div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
Hint text here
{typeof textHint === "string" ? textHint : "Hint text here"}
</p>
</div>
)}
app/components/type/HeaderLockup/HeaderLockup.container.tsx
+35
View File
@@ -0,0 +1,35 @@
"use client";
import { memo } from "react";
import HeaderLockupView from "./HeaderLockup.view";
import type { HeaderLockupProps } from "./HeaderLockup.types";
import {
normalizeHeaderLockupJustification,
normalizeHeaderLockupSize,
} from "../../../../lib/propNormalization";
const HeaderLockupContainer = memo<HeaderLockupProps>(
({
title,
description,
justification: justificationProp = "left",
size: sizeProp = "L",
}) => {
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
const justification = normalizeHeaderLockupJustification(justificationProp);
const size = normalizeHeaderLockupSize(sizeProp);
return (
<HeaderLockupView
title={title}
description={description}
justification={justification}
size={size}
/>
);
},
);
HeaderLockupContainer.displayName = "HeaderLockup";
export default HeaderLockupContainer;
app/components/type/HeaderLockup/HeaderLockup.types.ts
+30
View File
@@ -0,0 +1,30 @@
export type HeaderLockupJustificationValue = "left" | "center" | "Left" | "Center";
export type HeaderLockupSizeValue = "L" | "M" | "l" | "m";
export interface HeaderLockupProps {
/**
* Title text (required)
*/
title: string;
/**
* Description text (optional)
*/
description?: string;
/**
* Text justification. Accepts both PascalCase (Figma) and lowercase (codebase).
* Figma uses PascalCase, codebase uses lowercase - both are supported.
*/
justification?: HeaderLockupJustificationValue;
/**
* Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
* Figma uses PascalCase, codebase uses lowercase - both are supported.
*/
size?: HeaderLockupSizeValue;
}
export interface HeaderLockupViewProps {
title: string;
description?: string;
justification: "left" | "center";
size: "L" | "M";
}
app/components/type/HeaderLockup/HeaderLockup.view.tsx
+56
View File
@@ -0,0 +1,56 @@
"use client";
import { memo } from "react";
import type { HeaderLockupViewProps } from "./HeaderLockup.types";
function HeaderLockupView({
title,
description,
justification,
size,
}: HeaderLockupViewProps) {
const isL = size === "L";
const isLeft = justification === "left";
return (
<div
className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
isLeft ? "items-start" : "items-center"
}`}
>
{/* Title */}
<div className="flex items-center relative shrink-0 w-full">
<h1
className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
isLeft ? "text-left" : "text-center"
} ${
isL
? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
: "font-bricolage-grotesque font-bold text-[28px] leading-[36px]"
}`}
>
{title}
</h1>
</div>
{/* Description */}
{description && (
<p
className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
isLeft ? "" : "text-center"
} ${
isL
? "text-[18px] leading-[1.3]"
: "text-[14px] leading-[20px]"
}`}
>
{description}
</p>
)}
</div>
);
}
HeaderLockupView.displayName = "HeaderLockupView";
export default memo(HeaderLockupView);
app/components/type/HeaderLockup/index.tsx
+1
View File
@@ -0,0 +1 @@
export { default } from "./HeaderLockup.container";
app/components/type/NumberedList/NumberedList.container.tsx
+19
View File
@@ -0,0 +1,19 @@
"use client";
import { memo } from "react";
import NumberedListView from "./NumberedList.view";
import type { NumberedListProps } from "./NumberedList.types";
import { normalizeNumberedListSize } from "../../../../lib/propNormalization";
const NumberedListContainer = memo<NumberedListProps>(
({ items, size: sizeProp = "M" }) => {
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
const size = normalizeNumberedListSize(sizeProp);
return <NumberedListView items={items} size={size} />;
},
);
NumberedListContainer.displayName = "NumberedList";
export default NumberedListContainer;
app/components/type/NumberedList/NumberedList.types.ts
+23
View File
@@ -0,0 +1,23 @@
export type NumberedListSizeValue = "M" | "S" | "m" | "s";
export interface NumberedListItem {
title: string;
description: string;
}
export interface NumberedListProps {
/**
* Array of list items, each with title and description
*/
items: NumberedListItem[];
/**
* Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
* Figma uses PascalCase, codebase uses lowercase - both are supported.
*/
size?: NumberedListSizeValue;
}
export interface NumberedListViewProps {
items: NumberedListItem[];
size: "M" | "S";
}
app/components/type/NumberedList/NumberedList.view.tsx
+67
View File
@@ -0,0 +1,67 @@
"use client";
import { memo } from "react";
import type { NumberedListViewProps } from "./NumberedList.types";
function NumberedListView({ items, size }: NumberedListViewProps) {
const isM = size === "M";
return (
<ol className="flex flex-col gap-[var(--measures-spacing-600,24px)] items-start relative w-full list-none">
{items.map((item, index) => (
<li
key={index}
className="flex gap-[12px] items-center relative shrink-0 w-full"
>
{/* Number Indicator */}
<div
className={`bg-[var(--color-surface-inverse-primary,white)] flex flex-col items-center justify-center px-[11.2px] py-[4px] relative rounded-full shrink-0 ${
isM ? "size-[32px]" : "size-[24px]"
}`}
>
<div
className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-inverse-primary,black)] text-ellipsis whitespace-nowrap ${
isM
? "font-inter font-bold text-[20px] leading-[28px]"
: "font-bricolage-grotesque font-bold text-[16px] leading-[22px]"
}`}
>
<span>{index + 1}</span>
</div>
</div>
{/* Content */}
<div className="flex flex-[1_0_0] flex-col gap-[var(--measures-spacing-100,4px)] items-start justify-center min-h-px min-w-px">
{/* Title */}
<div className="flex items-center relative shrink-0 w-full">
<h3
className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
isM
? "font-inter font-bold text-[20px] leading-[28px]"
: "font-bricolage-grotesque font-bold text-[16px] leading-[22px]"
}`}
>
{item.title}
</h3>
</div>
{/* Description */}
<p
className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
isM
? "text-[14px] leading-[20px]"
: "text-[12px] leading-[16px]"
}`}
>
{item.description}
</p>
</div>
</li>
))}
</ol>
);
}
NumberedListView.displayName = "NumberedListView";
export default memo(NumberedListView);
app/components/type/NumberedList/index.tsx
+1
View File
@@ -0,0 +1 @@
export { default } from "./NumberedList.container";
app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
+2 -1
View File
@@ -5,11 +5,12 @@ import { CreateFlowFooterView } from "./CreateFlowFooter.view";
import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
({ secondButton, progressBar = true, className = "" }) => {
({ secondButton, progressBar = true, onBackClick, className = "" }) => {
return (
<CreateFlowFooterView
secondButton={secondButton}
progressBar={progressBar}
onBackClick={onBackClick}
className={className}
/>
);
app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts
+4
View File
@@ -13,6 +13,10 @@ export interface CreateFlowFooterProps {
* @default true
*/
progressBar?: boolean;
/**
* Callback function for Back button click
*/
onBackClick?: () => void;
/**
* Additional CSS classes
*/
app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
+4 -1
View File
@@ -5,11 +5,12 @@ import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
export function CreateFlowFooterView({
secondButton,
progressBar = true,
onBackClick,
className = "",
}: CreateFlowFooterProps) {
return (
<footer
className={`sticky bottom-0 z-50 bg-black w-full ${className}`}
className={`bg-black w-full ${className}`}
role="contentinfo"
aria-label="Create Flow Footer"
>
@@ -28,6 +29,8 @@ export function CreateFlowFooterView({
palette="default"
size="xsmall"
className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
onClick={onBackClick}
disabled={!onBackClick}
>
Back
</Button>