@purpurds/icon 5.34.1 → 5.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/icon",
-  "version": "5.34.1",
+  "version": "5.34.3",
   "license": "AGPL-3.0-only",
   "main": "./dist/icon.cjs.js",
   "types": "./dist/icon.d.ts",
@@ -17,13 +17,12 @@
   "source": "src/icon.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "5.34.1"
+    "@purpurds/tokens": "5.34.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
     "@storybook/blocks": "^8.3.5",
     "@storybook/react": "^8.3.5",
-    "storybook": "^8.3.5",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
@@ -35,6 +34,7 @@
     "@types/react": "^18.3.3",
     "@types/styled-components": "^5.1.4",
     "change-case": "~4.1.2",
+    "dedent": "~1.5.1",
     "esbuild": "~0.14.23",
     "eslint-plugin-testing-library": "~6.2.0",
     "eslint": "^8.57.0",
@@ -45,14 +45,19 @@
     "prettier": "~2.8.8",
     "react-dom": "^18.3.1",
     "react": "^18.3.1",
+    "storybook": "^8.3.5",
     "svgo": "3.2.0",
+    "tsx": "~4.7.0",
     "typescript": "^5.6.3",
     "vite": "5.4.8",
-    "vitest": "^2.1.2",
-    "dedent": "~1.5.1",
     "vitest-axe": "~0.1.0",
-    "tsx": "~4.7.0",
-    "@purpurds/component-rig": "1.0.0"
+    "vitest": "^2.1.2",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/autocomplete": "5.34.3",
+    "@purpurds/heading": "5.34.3",
+    "@purpurds/paragraph": "5.34.3",
+    "@purpurds/text-field": "5.34.3",
+    "@purpurds/listbox": "5.34.3"
   },
   "scripts": {
     "build:dev": "vite",

package/src/icon.stories.css

@@ -0,0 +1,181 @@
+@keyframes discoScale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes discoSlide {
+  0% {
+    transform: translateX(6px);
+  }
+  50% {
+    transform: translatex(0);
+  }
+  100% {
+    transform: translateX(-6px);
+  }
+}
+
+@keyframes discoWiggle {
+  0% {
+    transform: rotate(12deg);
+  }
+  50% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(-12deg);
+  }
+}
+
+@keyframes discoJump {
+  0% {
+    transform: translateY(8px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-2px);
+  }
+}
+
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes spin {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+
+.wrapper,
+.disco-wrapper {
+  padding: var(--purpur-spacing-600) var(--purpur-spacing-400);
+  border-radius: var(--purpur-border-radius-md);
+}
+
+.disco-wrapper {
+  position: relative;
+  background: black;
+  cursor: pointer;
+}
+
+.disco-wrapper::before {
+  content: "";
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border-radius: calc(var(--purpur-border-radius-md) * 1.5);
+  background-image: linear-gradient(
+    var(--rotate),
+    red,
+    orange,
+    yellow,
+    green,
+    blue,
+    indigo,
+    violet
+  );
+  position: absolute;
+  z-index: -1;
+  top: -4px;
+  left: -4px;
+  animation: spin 8s linear infinite;
+}
+
+.disco-wrapper::after {
+  position: absolute;
+  content: "";
+  top: -15%;
+  left: -15%;
+  z-index: -1;
+  height: 130%;
+  width: 130%;
+  margin: 0 auto;
+  transform: scale(0.8);
+  filter: blur(16vh);
+  background-image: linear-gradient(
+    var(--rotate),
+    red,
+    orange,
+    yellow,
+    green,
+    blue,
+    indigo,
+    violet
+  );
+  opacity: 1;
+  transition: opacity 0.5s;
+  animation: spin 8s linear infinite;
+}
+
+.icon-grid,
+.disco-icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 20px;
+}
+
+.disco-icon-grid {
+  gap: 30px;
+  margin-top: 48px;
+}
+
+.icon-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon-box {
+  display: flex;
+  flex-shrink: 0;
+  padding: var(--purpur-spacing-50);
+  background-color: white;
+  border: var(--purpur-border-width-xs) solid var(--purpur-color-border-medium);
+  border-radius: var(--purpur-border-radius-sm);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+}
+
+.disco-icon-wrapper {
+  transform-origin: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.top-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-items: center;
+  gap: var(--purpur-spacing-250);
+  flex-direction: column;
+}
+
+.input-wrapper {
+  max-width: 300px;
+  width: 100%;
+}
+
+.disco-heading {
+  text-align: center;
+  margin-bottom: 24px;
+  cursor: pointer;
+  transition: color 200ms ease;
+}

package/src/icon.stories.tsx

@@ -1,7 +1,16 @@
-import React from "react";
+import { ReactNode, useLayoutEffect, useState } from "react";
+import { Autocomplete } from "@purpurds/autocomplete";
+import { Heading, HeadingProps } from "@purpurds/heading";
+import { Paragraph } from "@purpurds/paragraph";
+import { TextField } from "@purpurds/text-field";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Heading } from "../../heading";
+import "@purpurds/text-field/styles";
+import "@purpurds/autocomplete/styles";
+import "@purpurds/listbox/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/tokens";
+import "./icon.stories.css";
 import { Icon, sizes } from "./icon";
 import { iconList } from "./icon-imports";
 
@@ -71,61 +80,143 @@ const result = Object.entries(iconList).reduce((acc, cur) => {
 }, [] as unknown as Acc);
 const sortedResult = result.sort((a, b) => a.name.localeCompare(b.name));
 
-const Categories = () => (
-  <>
-    {sortedResult.map((z) => (
-      <span key={z.name}>
-        <Heading variant="title-100" tag="h2" style={{ margin: "24px 0" }}>
-          {z.name.charAt(0).toUpperCase() + z.name.slice(1)}
-        </Heading>
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
-            gap: 20,
-          }}
-        >
-          {z.entries.map((icon) => (
-            <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>
+const defaultAnimation = "discoScale 1.5s ease-in-out 500ms infinite";
+
+const useDiscoProps = () => {
+  const [color, setColor] = useState("rgb(0, 0, 0)");
+  const [animation, setAnimation] = useState(defaultAnimation);
+
+  useLayoutEffect(() => {
+    const interval = setInterval(() => {
+      const r = Math.round(Math.random() * 255);
+      const g = Math.round(Math.random() * 255);
+      const b = Math.round(Math.random() * 255);
+      setColor(`rgb(${r}, ${g}, ${b})`);
+
+      if (animation === defaultAnimation) {
+        const animationNames = ["discoSlide", "discoScale", "discoWiggle", "discoJump"];
+        const animationName = animationNames[Math.floor(Math.random() * animationNames.length)];
+        const duration = Math.round(Math.random() * 200) + 200;
+        const delay = Math.round(Math.random() * 300);
+        setAnimation(`${animationName} ${duration}ms linear ${delay}ms infinite alternate`);
+      }
+    }, Math.round(Math.random() * 200) + 50);
+
+    return () => clearInterval(interval);
+  });
+  return { animation, color };
+};
+
+const DiscoIcon = ({ icon }: { icon: { name: string; svg: string } }) => {
+  const { color, animation } = useDiscoProps();
+
+  return (
+    <div className="disco-icon-wrapper" style={{ color, animation }}>
+      <Icon svg={icon} size="lg" />
+      <Paragraph style={{ color: color }}>{icon.name}</Paragraph>
+    </div>
+  );
+};
+
+const DiscoHeading = ({ children, ...headingProps }: { children: ReactNode } & HeadingProps) => {
+  const { color, animation } = useDiscoProps();
+
+  return (
+    <Heading style={{ color, animation }} className="disco-heading" {...headingProps}>
+      {children}
+    </Heading>
+  );
+};
+
+const Categories = () => {
+  const options = sortedResult.flatMap(({ entries }) =>
+    entries.map(({ name }) => ({ id: name, label: name }))
+  );
+  const optionsWithDisco = [
+    ...options.slice(0, 3),
+    { id: "disco", label: "disco" },
+    ...options.slice(3),
+  ];
+  const [searchValue, setSearchValue] = useState("");
+
+  const disco = searchValue === "disco";
+  const filteredResult = sortedResult
+    .map(({ name, entries }) => ({
+      name: name,
+      entries: entries.filter(
+        ({ name, keywords }) =>
+          name.toLowerCase().includes(searchValue.toLowerCase()) ||
+          keywords.some((y) => y.toLowerCase().includes(searchValue.toLowerCase()))
+      ),
+    }))
+    .filter(({ entries }) => entries.length > 0);
+
+  const allIcons = sortedResult.flatMap(({ entries }) => entries);
+  const HeadingComponent = disco ? DiscoHeading : Heading;
+  const interactiveProps = {
+    role: "button",
+    onKeyUp: (e: React.KeyboardEvent<HTMLDivElement>) =>
+      e.key === "Escape" && disco && setSearchValue(""),
+    onClick: () => disco && setSearchValue(""),
+    tabIndex: 0,
+  };
+  return (
+    <div
+      id="icons-story-wrapper"
+      className={disco ? "disco-wrapper" : "wrapper"}
+      {...(disco && interactiveProps)}
+    >
+      <div className="top-section">
+        <HeadingComponent id="purpur-icons-heading" variant="display-25" tag="h2">
+          Purpur icons
+        </HeadingComponent>
+        <div className="input-wrapper" style={{ display: disco ? "none" : "initial" }}>
+          <Autocomplete
+            id="icon-search"
+            listboxLabel="icons"
+            options={optionsWithDisco}
+            onInputChange={setSearchValue}
+            inputValue={searchValue}
+            onSelect={(option) => {
+              option?.id === "disco" &&
+                setTimeout(() => {
+                  document.getElementById("icons-story-wrapper")?.focus({ preventScroll: true });
+                }, 100);
+            }}
+            renderInput={(props) => (
+              <TextField {...props} type="text" id="icon-search" placeholder="Search..." />
+            )}
+          />
+        </div>
+      </div>
+      {disco ? (
+        <div className="disco-icon-grid">
+          {allIcons.map((icon) => (
+            <DiscoIcon icon={icon} key={icon.name} />
           ))}
         </div>
-      </span>
-    ))}
-  </>
-);
+      ) : (
+        filteredResult.map((z) => (
+          <span key={z.name}>
+            <Heading variant="title-100" tag="h2" style={{ margin: "24px 0" }}>
+              {z.name.charAt(0).toUpperCase() + z.name.slice(1)}
+            </Heading>
+            <div className="icon-grid">
+              {z.entries.map((icon) => (
+                <div className="icon-wrapper" key={icon.name}>
+                  <div className="icon-box">
+                    <Icon svg={icon} size="lg" />
+                  </div>
+                  <Paragraph>{icon.name}</Paragraph>
+                </div>
+              ))}
+            </div>
+          </span>
+        ))
+      )}
+    </div>
+  );
+};
 
 export const AllIcons: Story = {
   parameters: {