@tui/design-system 0.1.1-MR-211.12 → 0.2.0

package/types/components.ts

@@ -7,6 +7,18 @@ export type IconPosition = 'none' | 'leading' | 'trailing';
 export type ButtonVariantBase = 'primary' | 'secondary' | 'promotion' | 'search';
 export type HeadingLevel = '2' | '3' | '4' | '5' | '6';
 
+// ─── Form Row ────────────────────────────────────────────
+export interface FormRowProps {
+	labelText?: string;
+	reduced?: boolean;
+	hint?: boolean;
+	hintText?: string;
+	error?: boolean;
+	errorText?: string;
+	group?: boolean;
+	theme?: Theme;
+}
+
 // ─── Icon ────────────────────────────────────────────────
 export interface IconProps {
 	type?: 'standard' | 'color' | 'bullet';
@@ -229,13 +241,8 @@ export interface InputSwitchProps {
 
 // ─── Input Select ──────────────────────────────────────
 export interface InputSelectProps {
-	labelText?: string;
 	inputText?: string;
 	icon?: string;
-	error?: boolean;
-	errorText?: string;
-	hint?: boolean;
-	hintText?: string;
 	disabled?: boolean;
 	theme?: Theme;
 }
@@ -246,7 +253,6 @@ export interface InputTextProps {
 	icon?: string;
 	disabled?: boolean;
 	valid?: boolean;
-	error?: boolean;
 	theme?: Theme;
 }
 
@@ -261,14 +267,9 @@ export interface PaginationProps {
 
 // ─── Textarea ──────────────────────────────────────────
 export interface TextareaProps {
-	textareaLabelText?: string;
-	hint?: boolean;
-	hintText?: string;
 	textareaValue?: string;
 	charCount?: number;
 	disabled?: boolean;
-	error?: boolean;
-	errorText?: string;
 	theme?: Theme;
 }
 
@@ -355,3 +356,265 @@ export interface RangeIconsGroupProps {
 	items?: RangeIconsGroupItem[];
 	theme?: Theme;
 }
+
+// ─── Accordion ─────────────────────────────────────────
+export interface AccordionProps {
+	hasImage?: 'none' | 'logo' | 'icon';
+	logoUrl?: string;
+	icon?: string;
+	headingLevel?: number;
+	headingText: string;
+	subTitle?: string;
+	content: string;
+	openState?: boolean;
+}
+
+export interface AccordionGroupProps extends AccordionProps {
+	group?: 'none' | 'default' | 'divider';
+	groupLength?: number;
+	intro?: string;
+	toggleOpen?: string;
+	toggleClose?: string;
+}
+
+// ─── Breadcrumb ────────────────────────────────────────
+export interface BreadcrumbItem {
+	label: string;
+	href: string;
+	isCurrent?: boolean;
+}
+
+export interface BreadcrumbProps {
+	breadcrumbItems: BreadcrumbItem[];
+	ariaLabel?: string;
+}
+
+// ─── Image ─────────────────────────────────────────────
+export interface ImageSrcItem {
+	url: string;
+	size: string;
+}
+
+export type ImageFocalPoint =
+	| 'top-left'
+	| 'top-center'
+	| 'top-right'
+	| 'center-left'
+	| 'center'
+	| 'center-right'
+	| 'bottom-left'
+	| 'bottom-center'
+	| 'bottom-right';
+
+export interface ImageProps {
+	altText: string;
+	imageUrl: string;
+	srcset?: ImageSrcItem[];
+	ratio?: 'landscape' | 'panoramic' | 'portrait' | 'square' | 'wide';
+	shape?: 'rectangle' | 'rounded';
+	focalPoint?: ImageFocalPoint;
+}
+
+// ─── Rich Text ─────────────────────────────────────────
+export interface RichTextProps {
+	content?: string;
+	isComponent?: boolean;
+	isInverse?: boolean;
+}
+
+// ─── Media Button ──────────────────────────────────────
+export interface MediaButtonProps {
+	element?: 'a' | 'button';
+	label?: string;
+	accessibleLabel?: string;
+	icon?: IconPosition;
+	iconAsset?: string;
+}
+
+// ─── Price ─────────────────────────────────────────────
+export interface PriceProps {
+	size?: 'small' | 'medium' | 'large';
+	currency?: 'GBP' | 'EUR' | 'USD' | 'SEK' | 'NOK' | 'DKK';
+	mainUnit?: string;
+	subUnit?: string;
+	suffix?: string;
+	prefix?: boolean;
+	totalPrice?: boolean;
+	totalPriceValue?: string;
+	promo?: boolean;
+	originalPrice?: string;
+	discount?: string;
+	showDecimal?: boolean;
+}
+
+// ─── Input Checkbox ────────────────────────────────────
+export interface InputCheckboxProps {
+	isIndividual?: boolean;
+	variant?: 'default' | 'strong' | 'title';
+	state?: 'unchecked' | 'checked' | 'indeterminate';
+	disabled?: boolean;
+}
+
+// ─── Input Radio ───────────────────────────────────────
+export interface InputRadioProps {
+	variant?: 'default' | 'strong' | 'title';
+	disabled?: boolean;
+}
+
+// ─── Input Slider ──────────────────────────────────────
+export interface InputSliderProps {
+	min?: number;
+	max?: number;
+	step?: number;
+	value?: number | null;
+	minLabel?: string;
+	maxLabel?: string;
+	disabled?: boolean;
+}
+
+// ─── Input Stepper ─────────────────────────────────────
+export interface InputStepperProps {
+	value?: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	incLabel?: string;
+	decLabel?: string;
+	disabled?: boolean;
+}
+
+// ─── Datepicker ────────────────────────────────────────
+export interface DatepickerProps {
+	rangeSelection?: boolean;
+	dualView?: boolean;
+	scrollableMobile?: boolean;
+	weekNumbers?: boolean;
+	weekLabel?: string;
+	weekLabelFull?: string;
+	hideInput?: boolean;
+	separateCal?: boolean;
+	value?: string;
+	minDate?: string;
+	maxDate?: string;
+	previousLabel?: string;
+	nextLabel?: string;
+	locale?: string;
+}
+
+// ─── Modal ─────────────────────────────────────────────
+export interface ModalProps {
+	header?: string;
+	size?: 'small' | 'medium' | 'large';
+	primaryButtonLabel?: string;
+	secondaryButtonLabel?: string;
+	closeButtonLabel?: string;
+}
+
+// ─── Hero ──────────────────────────────────────────────
+export interface HeroProps {
+	alignment?: 'left' | 'right' | 'center';
+	reduced?: boolean;
+	variant?: 'default' | 'default slim' | 'flagship' | 'flagship slim' | 'illustration';
+	heading?: string;
+	content?: string;
+	hideButton?: boolean;
+	buttonLabel?: string;
+	caveat?: string;
+	imageUrl?: string;
+	altText?: string;
+}
+
+// ─── Scroller ──────────────────────────────────────────
+export interface ScrollerProps {
+	isHorizontal?: boolean;
+	hasFade?: boolean;
+	isInverse?: boolean;
+	label?: string;
+}
+
+// ─── Flyout Dropdown ───────────────────────────────────
+export interface FlyoutDropdownProps {
+	variant?: 'variable-height' | 'menu-flyout';
+	arrowPosition?: 'centre' | 'left' | 'right';
+	hasHeader?: boolean;
+	hasHeaderDivider?: boolean;
+	hasFooter?: boolean;
+	label?: string;
+}
+
+// ─── Card Article ──────────────────────────────────────
+export interface CardArticleProps {
+	type?: 'static' | 'link' | 'multi-link';
+	elementType?: 'anchor' | 'button';
+	content?: 'short' | 'medium' | 'long' | 'rich';
+	headingText?: string;
+}
+
+// ─── Card Icon ─────────────────────────────────────────
+export interface CardIconProps {
+	type?: 'static' | 'link';
+	size?: 'small' | 'large';
+	elementType?: 'anchor' | 'button';
+	hasLabel?: boolean;
+	labelText?: string;
+	cardText?: string;
+}
+
+// ─── Card Selectable ───────────────────────────────────
+export interface CardSelectableProps {
+	disabled?: boolean;
+	dashed?: boolean;
+	cardType?: 'card' | 'radio' | 'checkbox';
+	cardCount?: number;
+	showVisibleInput?: boolean;
+	visibleInputLocation?: 'top' | 'bottom';
+	cardLabelText?: string;
+	cardContentText?: string;
+	contentLayout?: 'content only' | 'title only' | 'title and content';
+	selectedIndex?: number;
+	clickableArea?: 'input' | 'card';
+}
+
+// ─── Search Card ───────────────────────────────────────
+export interface SearchCardProps {
+	flagship?: boolean;
+	productLabel?: boolean;
+	gallery?: boolean;
+	quickview?: boolean;
+	promoArea?: boolean;
+	highlightsArea?: boolean;
+	toggleOpen?: string;
+	toggleClose?: string;
+}
+
+// ─── In-Page Tabs ──────────────────────────────────────
+export interface InPageTab {
+	label: string;
+	content?: string;
+	icon?: string;
+	disabled?: boolean;
+}
+
+export interface InPageTabsProps {
+	variant?: 'left-aligned' | 'full-width';
+	icon?: string;
+	active?: string;
+	ariaLabelledby?: string;
+	tabs?: InPageTab[];
+}
+
+// ─── Anchor Tabs ───────────────────────────────────────
+export interface AnchorTab {
+	label: string;
+	href: string;
+	icon?: string;
+	disabled?: boolean;
+	sectionContent?: string;
+}
+
+export interface AnchorTabsProps {
+	icon?: string;
+	ariaLabelledby?: string;
+	tabs?: AnchorTab[];
+	sticky?: boolean;
+}