@edux-design/chrome - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

 # @edux-design/chrome
 
+## 0.1.4
+
+### Patch Changes
+
+- Minor changes to z-indexes
+- Updated dependencies
+  - @edux-design/tooltips@0.1.1
+
 ## 0.1.3
@@ -4,0 +12,0 @@

package.json

 {
   "name": "@edux-design/chrome",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
@@ -5,0 +5,0 @@ "sideEffects": [

src/demos/Sidebar.stories.jsx

@@ -143,1 +143,36 @@ import React, { useState } from "react";
 };
+
+export const HoverableFooterProfile = () => {
+  const [active, setActive] = useState("home");
+
+  return (
+    <Sidebar defaultExpanded={true}>
+      <SidebarHeader logo={<Gologo className="w-[32px] h-[32px]" />} />
+
+      <SidebarSection title="Main">
+        <SidebarItem
+          icon={<Code />}
+          label="Home"
+          active={active === "home"}
+          onClick={() => setActive("home")}
+        />
+        <SidebarItem
+          icon={<Book />}
+          label="Library"
+          active={active === "library"}
+          onClick={() => setActive("library")}
+        />
+      </SidebarSection>
+
+      <SidebarFooter>
+        <SidebarFooterProfile
+          avatar={<Avatar name="Nova Ellis" size="small" />}
+          name="Nova Ellis"
+          hoverable
+          onClick={() => alert("Open profile")}
+        />
+        <SidebarItem icon={<Settings />} label="Settings" />
+      </SidebarFooter>
+    </Sidebar>
+  );
+};

src/elements/Sidebar.jsx

@@ -131,3 +131,3 @@ import React, {
             onClick={toggleExpanded}
-            className="p-2 rounded-md hover:bg-bg-subtle focus:shadow-focus transition focus:outline-none"
+            className="cursor-pointer p-2 rounded-md hover:bg-bg-subtle focus:shadow-focus transition focus:outline-none"
           >
@@ -279,3 +279,9 @@ <CollapseIcon
  */
-export function SidebarFooterProfile({ avatar, name, className, ...props }) {
+export function SidebarFooterProfile({
+  avatar,
+  name,
+  className,
+  hoverable = false,
+  ...props
+}) {
   const { isExpanded } = useSidebarContext();
@@ -288,2 +294,4 @@
         !isExpanded && "justify-center px-0",
+        hoverable &&
+          "cursor-pointer transition-colors duration-200 ease-in-out hover:bg-bg-primary-subtle",
         className
@@ -290,0 +298,0 @@ )}

src/elements/Sidebar.test.jsx

@@ -9,2 +9,3 @@ import React from "react";
   SidebarFooter,
+  SidebarFooterProfile,
 } from "./Sidebar";
@@ -96,2 +97,20 @@
   });
+
+  it("applies hoverable footer profile styles when enabled", () => {
+    render(
+      <Sidebar defaultExpanded>
+        <SidebarFooter>
+          <SidebarFooterProfile
+            avatar={<span>A</span>}
+            name="Nova Ellis"
+            hoverable
+          />
+        </SidebarFooter>
+      </Sidebar>
+    );
+
+    const profile = screen.getByText("Nova Ellis").parentElement;
+    expect(profile.className).toMatch(/cursor-pointer/);
+    expect(profile.className).toMatch(/hover:bg-bg-primary-subtle/);
+  });
 });

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

205221

423.38%

Lines of code

4752

388.89%

Worsened metrics

Number of low supply chain risk alerts

16

700%

No dependency changes