@heliosgraphics/ui 2.0.0-alpha.69 → 2.0.0-alpha.70

package/components/Flex/Flex.meta.ts

@@ -37,7 +37,7 @@ export const meta: HeliosAttributeMeta<FlexBaseProps> = {
 	paddingX: { type: "HeliosScale", isOptional: true },
 	paddingY: { type: "HeliosScale", isOptional: true },
 	ref: { type: "RefObject<HTMLDivElement>", isOptional: true },
-	withBackground: { type: "boolean", isOptional: true },
+	withBackground: { type: "HeliosEmphasisType", isOptional: true },
 	withRadius: { type: "ResponsiveRadiusType", isOptional: true },
 	xAlign: { type: '"start" | "end" | "center"', isOptional: true },
 	yAlign: { type: '"start" | "end" | "baseline"', isOptional: true },

package/components/Flex/Flex.types.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, ForwardedRef } from "react"
-import type { HeliosScaleType, HeliosRadiusType } from "../.."
+import type { HeliosScaleType, HeliosRadiusType, HeliosEmphasisType } from "../.."
 
 export type ResponsiveScaleType = HeliosScaleType | [HeliosScaleType, HeliosScaleType, HeliosScaleType]
 export type ResponsiveRadiusType = HeliosRadiusType | [HeliosRadiusType, HeliosRadiusType, HeliosRadiusType]
@@ -25,7 +25,7 @@ export interface FlexBaseProps {
 	paddingX?: HeliosScaleType
 	paddingY?: HeliosScaleType
 	ref?: ForwardedRef<HTMLDivElement>
-	withBackground?: boolean
+	withBackground?: HeliosEmphasisType
 	withRadius?: ResponsiveRadiusType
 	xAlign?: "start" | "end" | "center"
 	yAlign?: "start" | "end" | "baseline"

package/components/Flex/Flex.utils.spec.ts

@@ -29,12 +29,12 @@ describe("getFlexUtility", () => {
 	it("Generates empty flex without attrs", () => expect(getFlexUtility(MOCK_FLEX)).toEqual(MOCK_FLEX_CLASSES))
 	it("Generates empty flex with undefined", () => expect(getFlexUtility(undefined)).toEqual(MOCK_FLEX_CLASSES))
 
-	const MOCK_FLEX_DUPLICATE_CLASSES = `flex flex-center ui-bg`
+	const MOCK_FLEX_DUPLICATE_CLASSES = `flex flex-center ui-bg-primary`
 	const MOCK_FLEX_DUPLICATE: FlexProps = {
 		children: null,
 		isCentered: true,
 		className: "flex",
-		withBackground: true,
+		withBackground: "primary",
 	}
 
 	it("Generates without duplicated classes", () =>

package/components/Flex/Flex.utils.ts

@@ -47,7 +47,9 @@ export const getFlexUtility = (props?: FlexProps): string => {
 	if (props.paddingX) flexClasses.add(`px-${props.paddingX}`)
 
 	if (props.className) flexClasses.add(props.className)
-	if (props.withBackground) flexClasses.add("ui-bg")
+	if (props.withBackground === "primary") flexClasses.add("ui-bg-primary")
+	if (props.withBackground === "secondary") flexClasses.add("ui-bg-secondary")
+	if (props.withBackground === "tertiary") flexClasses.add("ui-bg-tertiary")
 
 	return Array.from(flexClasses).join(" ")
 }

package/components/Layout/Layout.types.ts

@@ -2,6 +2,7 @@ import type { FC, ReactElement, PropsWithChildren } from "react"
 import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
 import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
 import type { LayoutNavigationProps } from "./components/LayoutNavigation/LayoutNavigation.types"
+import type { LayoutSubNavigationProps } from "./components/LayoutSubNavigation/LayoutSubNavigation.types"
 
 export type LayoutBaseProps = {
 	isFullHeight?: boolean
@@ -14,4 +15,5 @@ export interface LayoutComposition {
 	Aside: LayoutAsideComposition
 	Main: LayoutMainComposition
 	Navigation: FC<LayoutNavigationProps>
+	SubNavigation: FC<LayoutSubNavigationProps>
 }

package/components/Layout/components/LayoutMain/LayoutMain.module.css

@@ -8,3 +8,8 @@
 	height: calc(100dvh - 64px);
 	margin-top: 64px;
 }
+
+.layoutMain:has(nav[data-ui-component="Layout.Navigation"]):has(nav[data-ui-component="Layout.SubNavigation"]) {
+	height: calc(100dvh - 120px);
+	margin-top: 120px;
+}

package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css

@@ -8,6 +8,5 @@
 	width: -webkit-fill-available;
 	width: stretch;
 
-	border-right: 1px solid var(--ui-border-secondary);
 	border-bottom: 1px solid var(--ui-border-secondary);
 }

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { LayoutSubNavigationBaseProps } from "./LayoutSubNavigation.types"
+
+export const meta: HeliosAttributeMeta<LayoutSubNavigationBaseProps> = {
+	_patterns: [
+		{
+			id: "ui-layout-sub-navigation-default",
+			description: "default",
+			content: `<Layout.SubNavigation>{CHILDREN}</Layout.SubNavigation>`,
+		},
+	],
+	_status: "internal",
+	_category: "layout",
+	_extends: ["FlexProps"],
+}

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.module.css

@@ -0,0 +1,12 @@
+.layoutNavigation {
+	position: fixed;
+	top: 64px;
+	z-index: var(--z-index-5);
+
+	height: 56px;
+	width: -moz-available;
+	width: -webkit-fill-available;
+	width: stretch;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.tsx

@@ -0,0 +1,22 @@
+import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./LayoutSubNavigation.module.css"
+import type { FC } from "react"
+import type { LayoutSubNavigationProps } from "./LayoutSubNavigation.types"
+
+export const LayoutSubNavigation: FC<LayoutSubNavigationProps> = (props) => {
+	const mainNavigationFlexClasses: string = getFlexUtility({
+		...props,
+		isYCentered: props.isYCentered ?? true,
+		paddingX: props.paddingX ?? 8,
+	})
+
+	const navigationClasses: string = getClasses(mainNavigationFlexClasses, styles.layoutNavigation)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<nav {...safeProps} className={navigationClasses} data-ui-component="Layout.SubNavigation">
+			{props.children}
+		</nav>
+	)
+}

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../.."
+
+export interface LayoutSubNavigationBaseProps {}
+
+export type LayoutSubNavigationProps = FlexProps & LayoutSubNavigationBaseProps

package/components/Layout/components/LayoutSubNavigation/index.ts

@@ -0,0 +1 @@
+export { LayoutSubNavigation } from "./LayoutSubNavigation"

package/components/Layout/index.ts

@@ -2,6 +2,7 @@ import type { LayoutComposition } from "./Layout.types"
 import { LayoutAside } from "./components/LayoutAside"
 import { LayoutMain } from "./components/LayoutMain"
 import { LayoutNavigation } from "./components/LayoutNavigation/LayoutNavigation"
+import { LayoutSubNavigation } from "./components/LayoutSubNavigation"
 import { Layout as LC } from "./Layout"
 import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
 import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
@@ -11,5 +12,6 @@ const LayoutComponent = LC as LayoutComposition
 LayoutComponent.Aside = LayoutAside as LayoutAsideComposition
 LayoutComponent.Main = LayoutMain as LayoutMainComposition
 LayoutComponent.Navigation = LayoutNavigation
+LayoutComponent.SubNavigation = LayoutSubNavigation
 
 export { LayoutComponent as Layout }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.69",
+	"version": "2.0.0-alpha.70",
 	"type": "module",
 	"author": "Chris Puska <chris@puska.org>",
 	"private": false,