@heliosgraphics/ui 2.0.1-alpha.3 → 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/Dropdown/Dropdown.module.css

@@ -5,7 +5,9 @@
 	user-select: none;
 }
 
-.dropdownOpen [data-ui-component="Icon"] {
+.dropdownOpen .dropdown__activator [data-ui-icon="caret-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="arrow-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="chevron-down"] {
 	transition: transform 96ms ease-in-out;
 	transform: rotate(180deg);
 }
@@ -53,40 +55,19 @@
 	position: absolute;
 	z-index: var(--z-index-8);
 
-	display: none;
 	min-width: 240px;
 	opacity: 0;
 
 	transition:
-		display 96ms ease-in-out allow-discrete,
 		transform 96ms ease-in-out,
 		opacity 96ms ease-in-out;
 	pointer-events: none;
 }
 
-.dropdown__navActive {
-	display: block;
-	opacity: 1;
+.dropdown__nav.dropdown__navActive {
+	opacity: 1 !important;
 
-	transform: translateY(0);
+	transform: translateY(0) !important;
 
 	pointer-events: all;
-
-	@starting-style {
-		opacity: 0;
-	}
-}
-
-.dropdownBottomLeft .dropdown__navActive,
-.dropdownBottomRight .dropdown__navActive {
-	@starting-style {
-		transform: translateY(-6px);
-	}
-}
-
-.dropdownTopLeft .dropdown__navActive,
-.dropdownTopRight .dropdown__navActive {
-	@starting-style {
-		transform: translateY(6px);
-	}
 }

package/components/Dropdown/Dropdown.tsx

@@ -95,6 +95,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 			<div
 				role="button"
 				tabIndex={0}
+				className={styles.dropdown__activator}
 				onClick={onSetVisible}
 				onKeyDown={onKeyDown}
 				aria-expanded={isVisible}

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/Icon/Icon.tsx

@@ -24,6 +24,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			style={iconSizeStyle}
 			aria-hidden={true}
 			data-ui-component="Icon"
+			data-ui-icon={icon}
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)

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.3",
+	"version": "2.0.1-alpha.5",
 	"type": "module",
 	"sideEffects": [
 		"*.css",

package/{components/Markdown/Markdown.utils.spec.ts → utils/markdown.spec.ts}

@@ -1,5 +1,5 @@
 import { it, describe, expect } from "bun:test"
-import { renderMarkdown } from "./Markdown.utils"
+import { renderMarkdown } from "./markdown"
 
 describe("markdown", () => {
 	describe("renderMarkdown", () => {