@heliosgraphics/ui 2.0.1-alpha.4 → 2.0.1-alpha.5

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Helios Graphics
+Copyright (c) 2016 Helios Graphics
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { getTypographyUtility } from "../Text/Text.utils"
+import { getTypographyUtility, stripTypographyProps } from "../Text/Text.utils"
 import { getClasses } from "@heliosgraphics/utils"
 import { H0 } from "./components/H0"
 import { H1 } from "./components/H1"
@@ -9,7 +9,7 @@ import { H5 } from "./components/H5"
 import { H6 } from "./components/H6"
 import styles from "./Heading.module.css"
 import type { HeadingProps } from "./Heading.types"
-import type { FC, CSSProperties } from "react"
+import type { FC, CSSProperties, HTMLAttributes } from "react"
 
 export const Heading: FC<HeadingProps> = (props) => {
 	const { level, lineClamp, lineHeight, style, className, ...rest } = props
@@ -19,10 +19,7 @@ export const Heading: FC<HeadingProps> = (props) => {
 		[styles.headingSecondary]: props.emphasis === "secondary",
 		[styles.headingTertiary]: props.emphasis === "tertiary",
 	})
-	const utility: string = getTypographyUtility({
-		...props,
-		className: headingClasses,
-	})
+	const utility: string = getTypographyUtility(props, headingClasses)
 	const lineClampStyle: CSSProperties | undefined = lineClamp
 		? {
 				display: "-webkit-box",
@@ -38,9 +35,11 @@ export const Heading: FC<HeadingProps> = (props) => {
 		style || lineClampStyle || lineHeightStyle
 			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
 			: undefined
+	const safeHeadingProps: Omit<HeadingProps, "level" | "lineClamp" | "lineHeight" | "className" | "style"> =
+		stripTypographyProps(rest)
 
-	const allProps: Omit<HeadingProps, "level"> = {
-		...rest,
+	const allProps: HTMLAttributes<HTMLHeadingElement> = {
+		...safeHeadingProps,
 		children: props.children,
 		style: mergedStyle,
 		className: utility,

package/components/Text/Text.tsx

@@ -17,10 +17,7 @@ export const Text: FC<TextProps> = (props) => {
 		[styles.textInherit]: props.emphasis === "inherit",
 	})
 
-	const utility: string = getTypographyUtility({
-		...props,
-		className: textClasses,
-	})
+	const utility: string = getTypographyUtility(props, textClasses)
 	const lineClampStyle: object | undefined = props.lineClamp
 		? {
 				display: "-webkit-box",

package/components/Text/Text.utils.ts

@@ -1,7 +1,54 @@
-import type { TextProps } from "./Text.types"
+import type { TextBaseProps, TextProps } from "./Text.types"
 import type { HeadingProps } from "../Heading/Heading.types"
 
-export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
+export interface TypographyUtilityInput {
+	emphasis?: TextBaseProps["emphasis"] | undefined
+	fontFamily?: TextBaseProps["fontFamily"] | undefined
+	fontStyle?: TextBaseProps["fontStyle"] | undefined
+	fontWeight?: TextBaseProps["fontWeight"] | undefined
+	isBalanced?: TextBaseProps["isBalanced"] | undefined
+	isEllipsis?: TextBaseProps["isEllipsis"] | undefined
+	isNonSelectable?: TextBaseProps["isNonSelectable"] | undefined
+	textAlign?: TextBaseProps["textAlign"] | undefined
+	textDecoration?: TextBaseProps["textDecoration"] | undefined
+	whiteSpace?: TextBaseProps["whiteSpace"] | undefined
+	wordWrap?: TextBaseProps["wordWrap"] | undefined
+}
+
+export const stripTypographyProps = <T extends TypographyUtilityInput>(
+	props: T,
+): Omit<T, keyof TypographyUtilityInput> => {
+	const {
+		emphasis,
+		fontFamily,
+		fontStyle,
+		fontWeight,
+		isBalanced,
+		isEllipsis,
+		isNonSelectable,
+		textAlign,
+		textDecoration,
+		whiteSpace,
+		wordWrap,
+		...rest
+	} = props
+
+	void emphasis
+	void fontFamily
+	void fontStyle
+	void fontWeight
+	void isBalanced
+	void isEllipsis
+	void isNonSelectable
+	void textAlign
+	void textDecoration
+	void whiteSpace
+	void wordWrap
+
+	return rest
+}
+
+export const _getFontWeight = (fw: TextBaseProps["fontWeight"]): string => {
 	switch (fw) {
 		case "thin":
 			return "fw-thin"
@@ -27,7 +74,10 @@ export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
 	}
 }
 
-export const getTypographyUtility = (props: TextProps | HeadingProps): string => {
+export const getTypographyUtility = (
+	props: TextProps | HeadingProps | TypographyUtilityInput,
+	className?: string,
+): string => {
 	const typoClasses: Array<string> = []
 
 	const fontFamily = props.fontFamily ? props.fontFamily : "sans"
@@ -36,7 +86,7 @@ export const getTypographyUtility = (props: TextProps | HeadingProps): string =>
 	typoClasses.push(fontFamily)
 	typoClasses.push(fontWeight)
 
-	if (props.className) typoClasses.push(props.className)
+	if (className) typoClasses.push(className)
 	if (props.fontStyle) typoClasses.push(props.fontStyle)
 	if (props.isBalanced) typoClasses.push("text-balanced")
 	if (props.isEllipsis) typoClasses.push("ellipsis")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.4",
+	"version": "2.0.1-alpha.5",
 	"type": "module",
 	"sideEffects": [
 		"*.css",