@purpurds/icon 5.11.0 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/icon",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/icon.cjs.js",
   "types": "./dist/icon.d.ts",
@@ -16,12 +16,13 @@
   "source": "src/icon.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "5.11.0"
+    "@purpurds/tokens": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "storybook": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
@@ -29,23 +30,23 @@
     "@testing-library/react": "~14.3.0",
     "@types/fs-extra": "9",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "@types/styled-components": "^5.1.4",
     "change-case": "~4.1.2",
     "esbuild": "~0.14.23",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "glob": "^7.1.6",
-    "globby": "~13.2.2",
+    "globby": "^14.0.2",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
     "svgo": "3.2.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
     "dedent": "~1.5.1",
     "vitest-axe": "~0.1.0",

package/src/icon.stories.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { IconGallery, IconItem } from "@storybook/blocks";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Heading } from "../../heading";
 import { Icon, sizes } from "./icon";
 import { iconList } from "./icon-imports";
-import { Heading } from "../../heading";
 
-const meta: Meta<typeof Icon> = {
+const meta = {
   title: "Components/Icon",
   component: Icon,
   parameters: {
@@ -27,6 +26,11 @@ const meta: Meta<typeof Icon> = {
     ["data-testid"]: { control: { type: "text" } },
     className: { control: { type: "text" } },
     size: {
+      table: {
+        type: {
+          summary: sizes.map((x) => `"${x}"`).join(" | "),
+        },
+      },
       options: sizes,
       control: { type: "select" },
     },
@@ -38,7 +42,8 @@ const meta: Meta<typeof Icon> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Icon>;
+
 export default meta;
 
 type Story = StoryObj<typeof Icon>;
@@ -51,21 +56,18 @@ export const Showcase: Story = {
 };
 
 type Acc = [
-  { name: string; entries: [{ name: string; svg: string; keywords: string[]; category: string }] },
+  { name: string; entries: [{ name: string; svg: string; keywords: string[]; category: string }] }
 ];
 
-const result = Object.entries(iconList).reduce(
-  (acc, cur) => {
-    const category = cur[1].category;
-    if (acc.some((x) => x.name === category)) {
-      acc.find((y) => y.name === category)?.entries.push(cur[1]);
-    } else {
-      acc.push({ name: category, entries: [cur[1]] });
-    }
-    return acc;
-  },
-  [] as unknown as Acc
-);
+const result = Object.entries(iconList).reduce((acc, cur) => {
+  const category = cur[1].category;
+  if (acc.some((x) => x.name === category)) {
+    acc.find((y) => y.name === category)?.entries.push(cur[1]);
+  } else {
+    acc.push({ name: category, entries: [cur[1]] });
+  }
+  return acc;
+}, [] as unknown as Acc);
 const sortedResult = result.sort((a, b) => a.name.localeCompare(b.name));
 
 const Categories = () => (
@@ -75,13 +77,50 @@ const Categories = () => (
         <Heading variant="title-100" tag="h2" style={{ margin: "24px 0" }}>
           {z.name.charAt(0).toUpperCase() + z.name.slice(1)}
         </Heading>
-        <IconGallery>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+            gap: 20,
+          }}
+        >
           {z.entries.map((icon) => (
-            <IconItem name={icon.name} key={icon.name}>
-              <Icon svg={icon} size="lg" />
-            </IconItem>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 12,
+              }}
+              key={icon.name}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexShrink: 0,
+                  padding: 4,
+                  background: "#fff",
+                  borderRadius: 4,
+                  border: "1px solid hsla(203, 50%, 30%, 0.15)",
+                  boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
+                }}
+              >
+                <Icon svg={icon} size="lg" />
+              </div>
+              <p
+                style={{
+                  margin: 0,
+                  color: "#2E3438",
+                  fontSize: 14,
+                  lineHeight: 1.2,
+                  fontFamily: "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif",
+                }}
+              >
+                {icon.name}
+              </p>
+            </div>
           ))}
-        </IconGallery>
+        </div>
       </span>
     ))}
   </>
@@ -93,6 +132,11 @@ export const AllIcons: Story = {
     options: {
       showPanel: false,
     },
+    docs: {
+      source: {
+        code: null,
+      },
+    },
   },
   render: () => <Categories />,
 };

package/src/icon.test.tsx

@@ -5,7 +5,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { axe } from "vitest-axe";
 import * as axeMatchers from "vitest-axe/matchers";
 
-import { Icon, IconProps, sizes } from "./icon";
+import { Icon, sizes } from "./icon";
 
 expect.extend(matchers);
 expect.extend(axeMatchers);
@@ -43,6 +43,7 @@ describe("Icon", () => {
   it("is accessible", async () => {
     const { container } = render(<Icon svg={svg} />);
     const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     expect(results).toHaveNoViolations();
   });

package/src/icon.tsx

@@ -60,7 +60,7 @@ export const Icon = ({
   ["data-testid"]: dataTestid,
   svg,
   allyTitle,
-  className = "",
+  className,
   size = DEFAULT_SIZE,
   ...props
 }: IconProps) => {