chore: fixes

Author: zettca

apps/docs/src/components/Header.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react";
+
 import { ComponentDataParams, getComponentData } from "../utils/component";
 import { PlaygroundProps } from "./code/Playground";
 import { Description } from "./usage/Description";
@@ -17,7 +19,9 @@ export async function Header({ params, ...playgroundProps }: HeaderProps) {
   return (
     <div>
       <Description meta={meta} />
-      <Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />
+      <Suspense fallback={null}>
+        <Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />
+      </Suspense>
     </div>
   );
 }

apps/docs/src/components/home/HeroSection.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from "react";
-import { ArrowRight } from "@phosphor-icons/react/ArrowRight";
 import { clsx } from "clsx";
 import Link from "next/link";
 import { HvButton } from "@hitachivantara/uikit-react-core";
@@ -81,7 +80,7 @@ export const HeroSection = () => (
       variant="subtle"
       size="lg"
       className="mt-md max-sm:w-full hidden sm:inline-flex"
-      endIcon={<ArrowRight />}
+      endIcon={<div className="i-ph-arrow-right" />}
     >
       Explore components
     </HvButton>

apps/docs/src/components/home/Home.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { CardsSection } from "./CardsSection";
 import { HeroSection } from "./HeroSection";
 

apps/docs/src/components/home/cards/ApiUsage.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { HvLineChart } from "@hitachivantara/uikit-react-viz";
 
 import { Card } from "./Card";

apps/docs/src/components/home/cards/DataSecurity.tsx

@@ -1,5 +1,8 @@
-import { HvTag, HvTypography } from "@hitachivantara/uikit-react-core";
-import { SystemActivity } from "@hitachivantara/uikit-react-icons";
+import {
+  HvIconContainer,
+  HvTag,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
 
 import { Card } from "./Card";
 
@@ -14,7 +17,11 @@ export const DataSecurity = () => {
     <Card
       title="Data Security Overview"
       subtitle="Incidents from the last 30 days."
-      icon={<SystemActivity color="primary" />}
+      icon={
+        <HvIconContainer color="primary">
+          <div className="i-ph-presentation-chart" />
+        </HvIconContainer>
+      }
     >
       <div className="flex gap-xs justify-between">
         {securityData.map(({ title, count, color }) => (

apps/docs/src/components/home/cards/FinancialPerformance.tsx

@@ -1,5 +1,4 @@
 import { HvTypography } from "@hitachivantara/uikit-react-core";
-import { BottomXS, TopXS } from "@hitachivantara/uikit-react-icons";
 
 import { Card } from "./Card";
 
@@ -22,10 +21,10 @@ const Item = ({ title, value, percentage, isPositive }: ItemProps) => {
 
   return (
     <div>
-      <div className="flex items-center">
+      <div className="flex items-center gap-4px">
         <HvTypography variant="caption1">{title}</HvTypography>
-        {isPositive && <TopXS color="positive" />}
-        {!isPositive && <BottomXS color="negative" />}
+        {isPositive && <div className="i-ph-arrow-up text-positive" />}
+        {!isPositive && <div className="i-ph-arrow-down text-negative" />}
         <HvTypography className={percentageColor}>{percentage}%</HvTypography>
       </div>
       <HvTypography variant="title2">{value}</HvTypography>

apps/docs/src/components/home/cards/StorageOverview.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { HvBarChart } from "@hitachivantara/uikit-react-viz";
 
 import { Card } from "./Card";

apps/docs/src/components/home/cards/TeamOverview.tsx

@@ -3,7 +3,6 @@ import {
   HvButton,
   HvTypography,
 } from "@hitachivantara/uikit-react-core";
-import { Open } from "@hitachivantara/uikit-react-icons";
 
 import { Card } from "./Card";
 
@@ -50,7 +49,7 @@ export const TeamOverview = () => (
             variant="primaryGhost"
             aria-label={`View profile of ${name}`}
           >
-            <Open />
+            <div className="i-ph-arrow-square-out" />
           </HvButton>
         </div>
       ))}

apps/docs/src/components/icons.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { HvPanel } from "@hitachivantara/uikit-react-core";
+import { Alert, icons } from "@hitachivantara/uikit-react-icons";
+
+import { Playground } from "./code/Playground";
+
+export function IconLibrary() {
+  return (
+    <HvPanel className="flex flex-wrap gap-xs justify-around px-xs">
+      {Object.entries(icons).map(([name, Icon]) => (
+        <div
+          key={name}
+          className="flex flex-col items-center justify-center w-112px"
+        >
+          <Icon size="S" />
+          <code className="text-sm h-2em text-center break-all">{name}</code>
+        </div>
+      ))}
+    </HvPanel>
+  );
+}
+
+export function IconPlayground() {
+  return (
+    <Playground
+      Component={Alert}
+      componentName="Alert"
+      controls={{
+        color: { type: "color", defaultValue: "warning" },
+        size: {
+          type: "slider",
+          defaultValue: "md",
+          values: ["xs", "sm", "md", "lg", "xl"],
+        },
+      }}
+    />
+  );
+}

apps/docs/src/content/components/icon-container.mdx

@@ -1,4 +1,3 @@
-import { User } from "@phosphor-icons/react/User";
 import {
   iconContainerClasses as classes,
   HvIconContainer,
@@ -20,5 +19,5 @@ import { Header } from "../../components/Header";
     rotate: { defaultValue: false },
   }}
 >
-  <User />
+  <div className="i-ph-user" />
 </Header>

apps/docs/src/content/components/step-navigation.mdx

@@ -16,27 +16,9 @@ import { Header } from "../../components/Header";
   }}
   componentProps={{
     steps: [
-      {
-        title: "Completed",
-        state: "Completed",
-        onClick: () => {
-          alert("You clicked on 'Completed' step");
-        },
-      },
-      {
-        title: "Failed",
-        state: "Failed",
-        onClick: () => {
-          alert("You clicked on 'Failed' step");
-        },
-      },
-      {
-        title: "Pending",
-        state: "Pending",
-        onClick: () => {
-          alert("You clicked on 'Pending' step");
-        },
-      },
+      { title: "Completed", state: "Completed" },
+      { title: "Failed", state: "Failed" },
+      { title: "Pending", state: "Pending" },
     ],
   }}
 />
@@ -47,57 +29,15 @@ You can use the `width` prop to pass an array of custom breakpoints for the step
 
 ```tsx live
 <HvStepNavigation
+  width={{ xs: 200, sm: 400, md: 600, lg: 800, xl: 1000 }}
   steps={[
-    {
-      title: "Completed",
-      state: "Completed",
-      onClick: () => {
-        alert("You clicked on 'Completed' step");
-      },
-    },
-    {
-      title: "Failed",
-      state: "Failed",
-      onClick: () => {
-        alert("You clicked on 'Failed' step");
-      },
-    },
-    {
-      title: "Pending",
-      state: "Pending",
-      onClick: () => {
-        alert("You clicked on 'Pending' step");
-      },
-    },
-    {
-      title: "Current",
-      state: "Current",
-      onClick: () => {
-        alert("You clicked on 'Current' step");
-      },
-    },
-    {
-      title: "Enabled",
-      state: "Enabled",
-      onClick: () => {
-        alert("You clicked on 'Enabled' step");
-      },
-    },
-    {
-      title: "Disabled",
-      state: "Disabled",
-      onClick: () => {
-        alert("You clicked on 'Disabled' step");
-      },
-    },
+    { title: "Completed", state: "Completed" },
+    { title: "Failed", state: "Failed" },
+    { title: "Pending", state: "Pending" },
+    { title: "Current", state: "Current" },
+    { title: "Enabled", state: "Enabled" },
+    { title: "Disabled", state: "Disabled" },
   ]}
-  width={{
-    xs: 200,
-    sm: 400,
-    md: 600,
-    lg: 800,
-    xl: 1000,
-  }}
 />
 ```
 

apps/docs/src/content/components/vertical-navigation.mdx

@@ -1,5 +1,5 @@
 import { Callout } from "nextra/components";
-import { LogOut, User } from "@hitachivantara/uikit-react-icons";
+import { verticalNavigationClasses as classes } from "@hitachivantara/uikit-react-core";
 
 import { Header } from "../../components/Header";
 

apps/docs/src/content/docs/_meta.ts

@@ -1,3 +1,5 @@
+import type { MetaRecord } from "nextra";
+
 export default {
   "-- Overview": {
     type: "separator",
@@ -20,20 +22,19 @@ export default {
   theming: "Theming",
   "color-tokens": {
     title: "Color Tokens",
-    theme: {
-      toc: false,
-    },
+    theme: { layout: "full", toc: false },
   },
   "color-palette": {
     title: "Color Palette",
-    theme: {
-      toc: false,
-    },
+    theme: { layout: "full", toc: false },
+  },
+  icons: {
+    title: "Icons",
+    theme: { toc: false },
   },
-  icons: "Icons",
   "icon-library": {
     title: "Icon Library",
-    theme: { toc: false },
+    theme: { layout: "full", toc: false },
   },
   "-- Guides": {
     type: "separator",
@@ -43,4 +44,4 @@ export default {
   layout: "Layout",
   forms: "Forms",
   accessibility: "Accessibility",
-};
+} satisfies MetaRecord;

apps/docs/src/content/docs/get-started.mdx

@@ -1,4 +1,3 @@
-import { CodesandboxLogo, Lightning } from "@phosphor-icons/react";
 import { Card, Cards, Steps, Tabs } from "nextra/components";
 
 # Get Started
@@ -7,13 +6,13 @@ If you just want to try out **UI Kit** without setting up a local project, launc
 
 <Cards>
   <Cards.Card
-    icon={<Lightning />}
+    icon={<div className="i-ph-lightning" />}
     title="Open on StackBlitz"
     href="https://stackblitz.com/github.com/lumada-design/hv-uikit-react/tree/master/examples/uikit-vite-ts"
     target="_blank"
   />
   <Cards.Card
-    icon={<CodesandboxLogo />}
+    icon={<div className="i-ph-codesandbox-logo" />}
     title="Open on CodeSandbox"
     href="https://codesandbox.io/p/sandbox/github.com/lumada-design/hv-uikit-react/tree/master/examples/uikit-vite-ts"
     target="_blank"

apps/docs/src/content/docs/icon-library.mdx

@@ -1,7 +1,4 @@
-import { HvPanel } from "@hitachivantara/uikit-react-core";
-import { Alert, icons } from "@hitachivantara/uikit-react-icons";
-
-import { Playground } from "../../components/code/Playground";
+import { IconLibrary, IconPlayground } from "../../components/icons";
 
 # Icon Library
 
@@ -15,31 +12,10 @@ import { Alert } from "@hitachivantara/uikit-react-icons";
 
 <br />
 
-<Playground
-  Component={Alert}
-  componentName="Alert"
-  controls={{
-    color: { type: "color", defaultValue: "warning" },
-    size: {
-      type: "slider",
-      defaultValue: "md",
-      values: ["xs", "sm", "md", "lg", "xl"],
-    },
-  }}
-/>
+<IconPlayground />
 
 ## Library
 
 <br />
 
-<HvPanel className="flex flex-wrap gap-xs justify-around px-xs">
-  {Object.entries(icons).map(([name, Icon]) => (
-    <div
-      key={name}
-      className="flex flex-col items-center justify-center w-112px"
-    >
-      <Icon size="S" />
-      <code className="text-sm h-2em text-center break-all">{name}</code>
-    </div>
-  ))}
-</HvPanel>
+<IconLibrary />

packages/core/src/Badge/Badge.styles.tsx

@@ -8,7 +8,7 @@ export const { staticClasses, useClasses } = createClasses("HvBadge", {
     ":has($badgeIcon)": {
       width: "fit-content",
       height: "fit-content",
-      "&>div:first-child": {
+      "&>div:first-of-type": {
         minWidth: 32,
         minHeight: 32,
         "--icsize": "100%",