@purpurds/icon 6.8.2 → 6.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -7
- package/src/icon.stories.tsx +6 -19
- package/src/icon.story.css +13 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/icon",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.9.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/icon.cjs.js",
|
|
6
6
|
"types": "./dist/icon.d.ts",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"source": "src/icon.tsx",
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"classnames": "~2.5.0",
|
|
43
|
-
"@purpurds/tokens": "6.
|
|
43
|
+
"@purpurds/tokens": "6.9.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -75,12 +75,9 @@
|
|
|
75
75
|
"vitest-axe": "~0.1.0",
|
|
76
76
|
"vitest": "^2.1.2",
|
|
77
77
|
"vite-plugin-static-copy": "~2.2.0",
|
|
78
|
-
"@purpurds/
|
|
78
|
+
"@purpurds/heading": "6.9.0",
|
|
79
79
|
"@purpurds/component-rig": "1.0.0",
|
|
80
|
-
"@purpurds/
|
|
81
|
-
"@purpurds/paragraph": "6.8.2",
|
|
82
|
-
"@purpurds/text-field": "6.8.2",
|
|
83
|
-
"@purpurds/autocomplete": "6.8.2"
|
|
80
|
+
"@purpurds/paragraph": "6.9.0"
|
|
84
81
|
},
|
|
85
82
|
"peerDependencies": {
|
|
86
83
|
"@types/react": "^18 || ^19",
|
package/src/icon.stories.tsx
CHANGED
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
import React, { ReactNode, useLayoutEffect, useState } from "react";
|
|
2
|
-
import { Autocomplete } from "@purpurds/autocomplete";
|
|
3
2
|
import { Heading, HeadingProps } from "@purpurds/heading";
|
|
4
3
|
import { Paragraph } from "@purpurds/paragraph";
|
|
5
|
-
import { TextField } from "@purpurds/text-field";
|
|
6
4
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
7
5
|
|
|
8
|
-
import "@purpurds/text-field/styles";
|
|
9
|
-
import "@purpurds/autocomplete/styles";
|
|
10
|
-
import "@purpurds/listbox/styles";
|
|
11
6
|
import "@purpurds/heading/styles";
|
|
12
7
|
import "@purpurds/tokens";
|
|
13
8
|
// import "./icon.stories.css";
|
|
@@ -257,21 +252,13 @@ const AllIconsStory = () => {
|
|
|
257
252
|
Purpur icons
|
|
258
253
|
</HeadingComponent>
|
|
259
254
|
<div className="input-wrapper" style={{ display: disco ? "none" : "initial" }}>
|
|
260
|
-
<
|
|
255
|
+
<input
|
|
256
|
+
className="search-input"
|
|
257
|
+
value={searchValue}
|
|
258
|
+
onChange={(e) => setSearchValue(e.target.value)}
|
|
259
|
+
type="text"
|
|
261
260
|
id="icon-search"
|
|
262
|
-
|
|
263
|
-
options={optionsWithDisco}
|
|
264
|
-
onInputChange={setSearchValue}
|
|
265
|
-
inputValue={searchValue}
|
|
266
|
-
onSelect={(option) => {
|
|
267
|
-
option?.id === "disco" &&
|
|
268
|
-
setTimeout(() => {
|
|
269
|
-
document.getElementById("icons-story-wrapper")?.focus({ preventScroll: true });
|
|
270
|
-
}, 100);
|
|
271
|
-
}}
|
|
272
|
-
renderInput={(props) => (
|
|
273
|
-
<TextField {...props} type="text" id="icon-search" placeholder="Search..." />
|
|
274
|
-
)}
|
|
261
|
+
placeholder="Search..."
|
|
275
262
|
/>
|
|
276
263
|
</div>
|
|
277
264
|
</div>
|
package/src/icon.story.css
CHANGED
|
@@ -192,3 +192,16 @@
|
|
|
192
192
|
cursor: pointer;
|
|
193
193
|
transition: color 200ms ease;
|
|
194
194
|
}
|
|
195
|
+
|
|
196
|
+
.search-input {
|
|
197
|
+
border-radius: var(--purpur-border-radius-sm);
|
|
198
|
+
padding: calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-150);
|
|
199
|
+
border: var(--purpur-border-width-xs) solid var(--purpur-color-border-medium);
|
|
200
|
+
width: 100%;
|
|
201
|
+
font-family: var(--purpur-typography-family-default);
|
|
202
|
+
font-size: var(--purpur-typography-scale-100);
|
|
203
|
+
line-height: 150%;
|
|
204
|
+
outline: none;
|
|
205
|
+
background: transparent;
|
|
206
|
+
color: var(--purpur-color-text-default);
|
|
207
|
+
}
|