@skbkontur/icons 1.0.1 → 1.0.2
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/CHANGELOG.md +8 -0
- package/README.md +337 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.0.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/icons@1.0.1...@skbkontur/icons@1.0.2) (2023-06-16)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @skbkontur/icons
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [1.0.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/icons@1.0.0...@skbkontur/icons@1.0.1) (2023-06-14)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @skbkontur/icons
|
package/README.md
CHANGED
|
@@ -53,10 +53,89 @@ type IconProps = {
|
|
|
53
53
|
Выстраивание иконок относительно текста
|
|
54
54
|
|
|
55
55
|
```jsx
|
|
56
|
-
import {
|
|
56
|
+
import React, { useState } from 'react';
|
|
57
|
+
|
|
58
|
+
import * as allIcons from '../icons/index';
|
|
59
|
+
import { IconProps, weights } from './internal/Icon';
|
|
57
60
|
import { completeIcons } from './__stories__/constant';
|
|
58
61
|
|
|
59
|
-
|
|
62
|
+
import { ColorPicker } from './__stories__/ColorPicker';
|
|
63
|
+
import { ControlsWrapper, ControlsWrapperProps } from './__stories__/ControlsWrapper';
|
|
64
|
+
import { TemplateProps } from './__stories__/ModernIcons.stories';
|
|
65
|
+
import { WeightRange } from './__stories__/WeightRange';
|
|
66
|
+
|
|
67
|
+
const textWeights = [100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
68
|
+
|
|
69
|
+
const [align, setAlign] = React.useState('center');
|
|
70
|
+
const [fontSize, setFontSize] = React.useState(32);
|
|
71
|
+
const [iconWeight, setIconWeight] = React.useState(1);
|
|
72
|
+
const [textWeight, setTextWeight] = React.useState(3);
|
|
73
|
+
const [color, setColor] = React.useState('#222');
|
|
74
|
+
|
|
75
|
+
const [currentIcon, setCurrentIcon] = React.useState(completeIcons[0]);
|
|
76
|
+
const Icon = allIcons[currentIcon];
|
|
77
|
+
|
|
78
|
+
<div style={{ display: 'flex' }}>
|
|
79
|
+
<div style={{ display: 'flex', flexDirection: 'column', width: '100vw', padding: '24px' }}>
|
|
80
|
+
<span style={{ fontSize: fontSize, color, fontWeight: textWeights[textWeight] }}>
|
|
81
|
+
<Icon size={fontSize} weight={weights[iconWeight]} align={align} />
|
|
82
|
+
Текст слева
|
|
83
|
+
<Icon size={fontSize} weight={weights[iconWeight]} align={align} />
|
|
84
|
+
Текст справа
|
|
85
|
+
<Icon size={fontSize} weight={weights[iconWeight]} align={align} />
|
|
86
|
+
</span>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<ControlsWrapper popupTopPos={ '-430px'}>
|
|
90
|
+
<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', marginBottom: '15px' }}>
|
|
91
|
+
Выравнивание:{' '}
|
|
92
|
+
<select
|
|
93
|
+
defaultValue={align}
|
|
94
|
+
onChange={(e) => setAlign(e.target.value)}
|
|
95
|
+
style={{ marginLeft: '10px' }}
|
|
96
|
+
>
|
|
97
|
+
<option value="center">по центру</option>
|
|
98
|
+
<option value="baseline">по базовой линии текста</option>
|
|
99
|
+
<option value="none">без выравнивания</option>
|
|
100
|
+
</select>
|
|
101
|
+
</label>
|
|
102
|
+
|
|
103
|
+
<label>
|
|
104
|
+
<span>Иконка:</span>
|
|
105
|
+
<select
|
|
106
|
+
onChange={(e) => {
|
|
107
|
+
setCurrentIcon(e.target.value);
|
|
108
|
+
}}
|
|
109
|
+
style={{ marginLeft: '5px' }}
|
|
110
|
+
>
|
|
111
|
+
{completeIcons.map((icon) => {
|
|
112
|
+
return <option key={icon}>{icon}</option>;
|
|
113
|
+
})}
|
|
114
|
+
</select>
|
|
115
|
+
</label>
|
|
116
|
+
|
|
117
|
+
<label style={{ display: 'flex', flexDirection: 'column' }}>
|
|
118
|
+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
119
|
+
<p>Размер текста и иконки:</p>
|
|
120
|
+
<p>{fontSize}px</p>
|
|
121
|
+
</div>
|
|
122
|
+
<input
|
|
123
|
+
type="range"
|
|
124
|
+
style={{ width: '100%' }}
|
|
125
|
+
min={12}
|
|
126
|
+
max={60}
|
|
127
|
+
value={fontSize}
|
|
128
|
+
onChange={(e) => setFontSize(+e.target.value)}
|
|
129
|
+
/>
|
|
130
|
+
</label>
|
|
131
|
+
|
|
132
|
+
<WeightRange weight={iconWeight} setWeight={setIconWeight} label="Вес иконки:" />
|
|
133
|
+
|
|
134
|
+
<WeightRange weight={textWeight} setWeight={setTextWeight} label="Вес текста:" weightsArray={textWeights} />
|
|
135
|
+
|
|
136
|
+
<ColorPicker color={color} setColor={setColor} label="Цвет текста и иконки:" />
|
|
137
|
+
</ControlsWrapper>
|
|
138
|
+
</div>
|
|
60
139
|
```
|
|
61
140
|
|
|
62
141
|
Соотнесение названий старых и новых иконок
|
|
@@ -70,8 +149,262 @@ import { OldNewIconsCorrelation } from './__stories__/OldNewIconsCorrelation';
|
|
|
70
149
|
Шоу-кейс всех иконок
|
|
71
150
|
|
|
72
151
|
```jsx
|
|
73
|
-
import {
|
|
152
|
+
import React, { useState, useEffect } from 'react';
|
|
153
|
+
import * as allIcons from '../icons/index';
|
|
154
|
+
import { weights, breakpoints } from './internal/Icon';
|
|
155
|
+
|
|
74
156
|
import { completeIcons } from './__stories__/constant';
|
|
157
|
+
import { ColorPicker } from './__stories__/ColorPicker';
|
|
158
|
+
import { ControlsWrapper, ControlsWrapperProps } from './__stories__/ControlsWrapper';
|
|
159
|
+
import { TemplateProps } from './__stories__/ModernIcons.stories';
|
|
160
|
+
import { WeightRange } from './__stories__/WeightRange';
|
|
161
|
+
|
|
162
|
+
const CheckAIcon = allIcons['CheckAIcon']
|
|
163
|
+
const CopyIcon = allIcons['CopyIcon']
|
|
164
|
+
|
|
165
|
+
const DEFAULT_ICON_BREAKPOINT = 3;
|
|
166
|
+
const DEFAULT_ICON_SIZE = breakpoints[DEFAULT_ICON_BREAKPOINT];
|
|
167
|
+
|
|
168
|
+
const capitalize = (string) => {
|
|
169
|
+
return string[0].toUpperCase() + string.slice(1);
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
const generateAdditionalItems = (totalNumberOfItems, numberOfItemsInRow) => {
|
|
173
|
+
const difference = Math.abs((totalNumberOfItems % numberOfItemsInRow) - numberOfItemsInRow);
|
|
174
|
+
|
|
175
|
+
return [...new Array(difference)].fill(undefined).map((_val, index) => {
|
|
176
|
+
return <div style={{ width: '13vw' }} key={index} />;
|
|
177
|
+
});
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
const [areHelpersEnabled, setAreHelpersEnabled] = React.useState(false);
|
|
181
|
+
const [isCustomSize, setIsCustomSize] = React.useState(false);
|
|
182
|
+
const [isInitialLoad, setIsInitialLoad] = React.useState(true);
|
|
75
183
|
|
|
76
|
-
|
|
184
|
+
const [copied, setCopied] = React.useState('');
|
|
185
|
+
React.useEffect(() => {
|
|
186
|
+
const timeout = setTimeout(() => {
|
|
187
|
+
setCopied('');
|
|
188
|
+
}, 2000);
|
|
189
|
+
|
|
190
|
+
return () => clearTimeout(timeout);
|
|
191
|
+
}, [copied]);
|
|
192
|
+
|
|
193
|
+
const [searchQuery, setSearchQuery] = React.useState('');
|
|
194
|
+
const filteredIcons = completeIcons.filter((icon) => {
|
|
195
|
+
return icon.toLowerCase().includes(searchQuery);
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
React.useEffect(() => {
|
|
199
|
+
setIsInitialLoad(false);
|
|
200
|
+
}, [isCustomSize]);
|
|
201
|
+
|
|
202
|
+
const ICONS_DEFAULT_VALUES = {
|
|
203
|
+
size: isCustomSize ? DEFAULT_ICON_BREAKPOINT : DEFAULT_ICON_SIZE,
|
|
204
|
+
weight: 1,
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
const iconSize = isInitialLoad ? DEFAULT_ICON_BREAKPOINT : ICONS_DEFAULT_VALUES.size;
|
|
208
|
+
|
|
209
|
+
const [size, setSize] = React.useState(iconSize);
|
|
210
|
+
const [weight, setWeight] = React.useState(ICONS_DEFAULT_VALUES.weight);
|
|
211
|
+
const [color, setColor] = React.useState('');
|
|
212
|
+
|
|
213
|
+
<>
|
|
214
|
+
<p style={{ fontWeight: 'bold', fontSize: '20px', margin: 0, padding: '20px 10px' }}>
|
|
215
|
+
Всего иконок: {completeIcons.length}
|
|
216
|
+
</p>
|
|
217
|
+
|
|
218
|
+
<div style={{ display: 'flex' }}>
|
|
219
|
+
<div
|
|
220
|
+
style={{
|
|
221
|
+
position: 'relative',
|
|
222
|
+
display: 'flex',
|
|
223
|
+
justifyContent: 'space-between',
|
|
224
|
+
padding: '24px',
|
|
225
|
+
width: '100vw',
|
|
226
|
+
}}
|
|
227
|
+
>
|
|
228
|
+
<div
|
|
229
|
+
style={{
|
|
230
|
+
display: 'grid',
|
|
231
|
+
gridTemplateColumns: 'repeat(4, auto)',
|
|
232
|
+
gap: '15px',
|
|
233
|
+
justifyContent: 'space-between',
|
|
234
|
+
padding: '24px',
|
|
235
|
+
}}
|
|
236
|
+
>
|
|
237
|
+
<div
|
|
238
|
+
style={{
|
|
239
|
+
display: 'flex',
|
|
240
|
+
flexWrap: 'wrap',
|
|
241
|
+
justifyContent: 'space-between',
|
|
242
|
+
maxWidth: '100vw',
|
|
243
|
+
gap: '10px',
|
|
244
|
+
}}
|
|
245
|
+
>
|
|
246
|
+
{!filteredIcons.length && <p>Попробуйте задать другой поисковой запрос</p>}
|
|
247
|
+
|
|
248
|
+
{filteredIcons.map((name) => {
|
|
249
|
+
const Icon = allIcons[name];
|
|
250
|
+
|
|
251
|
+
return (
|
|
252
|
+
<React.Fragment key={name}>
|
|
253
|
+
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
254
|
+
<div
|
|
255
|
+
style={{
|
|
256
|
+
display: 'flex',
|
|
257
|
+
alignItems: 'center',
|
|
258
|
+
justifyContent: 'center',
|
|
259
|
+
flexDirection: 'column',
|
|
260
|
+
borderRadius: '8px',
|
|
261
|
+
marginBottom: '10px',
|
|
262
|
+
background: '#fff',
|
|
263
|
+
boxShadow: 'rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px',
|
|
264
|
+
width: '13vw',
|
|
265
|
+
height: '150px',
|
|
266
|
+
}}
|
|
267
|
+
key={name}
|
|
268
|
+
>
|
|
269
|
+
<div
|
|
270
|
+
style={{
|
|
271
|
+
position: 'relative',
|
|
272
|
+
display: 'flex',
|
|
273
|
+
flexDirection: 'column',
|
|
274
|
+
alignItems: 'center',
|
|
275
|
+
justifyContent: 'center',
|
|
276
|
+
height: '100%',
|
|
277
|
+
}}
|
|
278
|
+
>
|
|
279
|
+
{areHelpersEnabled && (
|
|
280
|
+
<div
|
|
281
|
+
style={{
|
|
282
|
+
position: 'absolute',
|
|
283
|
+
width: '4px',
|
|
284
|
+
height: '4px',
|
|
285
|
+
backgroundColor: 'red',
|
|
286
|
+
borderRadius: '9999px',
|
|
287
|
+
}}
|
|
288
|
+
/>
|
|
289
|
+
)}
|
|
290
|
+
<Icon
|
|
291
|
+
style={{ outline: areHelpersEnabled ? '1px solid black' : undefined }}
|
|
292
|
+
size={isCustomSize ? size : breakpoints[size]}
|
|
293
|
+
weight={weights[weight]}
|
|
294
|
+
color={color}
|
|
295
|
+
/>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div
|
|
299
|
+
onClick={() => {
|
|
300
|
+
const iconColor = color ? `color={'${color}'}` : '';
|
|
301
|
+
const customSizeIconName = `<${name} size={${size}} weight={'${weights[weight]}'} ${iconColor} />`;
|
|
302
|
+
const iconName = `<${name}${breakpoints[size]}${capitalize(
|
|
303
|
+
weights[weight]
|
|
304
|
+
)} ${iconColor} />`;
|
|
305
|
+
|
|
306
|
+
navigator.clipboard.writeText(isCustomSize ? customSizeIconName : iconName);
|
|
307
|
+
setCopied(name);
|
|
308
|
+
}}
|
|
309
|
+
style={{ display: 'flex', alignItems: 'baseline', cursor: 'pointer' }}
|
|
310
|
+
>
|
|
311
|
+
<p style={{ margin: '7px 0 14px', paddingRight: '5px', fontWeight: 'bold' }}>
|
|
312
|
+
{name === copied ? 'Название скопировано' : name}
|
|
313
|
+
</p>
|
|
314
|
+
|
|
315
|
+
<button style={{ background: 'none', border: 'none', height: '18px', padding: 0 }}>
|
|
316
|
+
{name === copied ? <CheckAIcon /> : <CopyIcon style={{ cursor: 'pointer' }} />}
|
|
317
|
+
</button>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</React.Fragment>
|
|
322
|
+
);
|
|
323
|
+
})}
|
|
324
|
+
|
|
325
|
+
{generateAdditionalItems(completeIcons.length, 5)}
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<ControlsWrapper
|
|
330
|
+
title="Кастомизация"
|
|
331
|
+
popupTopPos={'-365px'}
|
|
332
|
+
titleChildren={
|
|
333
|
+
<button
|
|
334
|
+
style={{
|
|
335
|
+
background: '#fff',
|
|
336
|
+
borderRadius: '8px',
|
|
337
|
+
cursor: 'pointer',
|
|
338
|
+
padding: '4px 6px',
|
|
339
|
+
border: 'none',
|
|
340
|
+
boxShadow: 'inset 0 0 0 1px var(--theme-ui-colors-border,#d1d5da)',
|
|
341
|
+
}}
|
|
342
|
+
onClick={() => {
|
|
343
|
+
setAreHelpersEnabled(false);
|
|
344
|
+
setSize(isCustomSize ? iconSize : DEFAULT_ICON_BREAKPOINT);
|
|
345
|
+
setWeight(ICONS_DEFAULT_VALUES.weight);
|
|
346
|
+
setIsCustomSize(false);
|
|
347
|
+
}}
|
|
348
|
+
>
|
|
349
|
+
Сбросить
|
|
350
|
+
</button>
|
|
351
|
+
}
|
|
352
|
+
>
|
|
353
|
+
<input
|
|
354
|
+
value={searchQuery}
|
|
355
|
+
onChange={(e) => setSearchQuery(e.target.value)}
|
|
356
|
+
style={{ marginBottom: '10px' }}
|
|
357
|
+
placeholder="Поиск по иконкам"
|
|
358
|
+
/>
|
|
359
|
+
|
|
360
|
+
<label
|
|
361
|
+
style={{
|
|
362
|
+
display: 'flex',
|
|
363
|
+
alignItems: 'center',
|
|
364
|
+
cursor: 'pointer',
|
|
365
|
+
fontWeight: 'bold',
|
|
366
|
+
}}
|
|
367
|
+
>
|
|
368
|
+
<input
|
|
369
|
+
type="checkbox"
|
|
370
|
+
checked={areHelpersEnabled}
|
|
371
|
+
onChange={() => setAreHelpersEnabled(!areHelpersEnabled)}
|
|
372
|
+
/>
|
|
373
|
+
Вспомогательные элементы
|
|
374
|
+
</label>
|
|
375
|
+
|
|
376
|
+
<label style={{ display: 'flex', flexDirection: 'column' }}>
|
|
377
|
+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
378
|
+
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
379
|
+
<p style={{ marginRight: '5px' }}>Размер</p>
|
|
380
|
+
<label style={{ display: 'flex', alignItems: 'center' }}>
|
|
381
|
+
<input
|
|
382
|
+
type="checkbox"
|
|
383
|
+
checked={isCustomSize}
|
|
384
|
+
onChange={() => {
|
|
385
|
+
setIsCustomSize(!isCustomSize);
|
|
386
|
+
setSize(ICONS_DEFAULT_VALUES.size);
|
|
387
|
+
}}
|
|
388
|
+
/>
|
|
389
|
+
Кастомный
|
|
390
|
+
</label>
|
|
391
|
+
</div>
|
|
392
|
+
<p style={{ fontWeight: 'bold' }}>{isCustomSize ? size : breakpoints[size]}px</p>
|
|
393
|
+
</div>
|
|
394
|
+
<input
|
|
395
|
+
type="range"
|
|
396
|
+
min={isCustomSize ? 12 : 0}
|
|
397
|
+
max={isCustomSize ? 100 : breakpoints.length - 1}
|
|
398
|
+
value={size}
|
|
399
|
+
onChange={(e) => setSize(+e.target.value)}
|
|
400
|
+
/>
|
|
401
|
+
</label>
|
|
402
|
+
|
|
403
|
+
<WeightRange weight={weight} setWeight={setWeight} />
|
|
404
|
+
|
|
405
|
+
<ColorPicker color={color} setColor={setColor} />
|
|
406
|
+
</ControlsWrapper>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</>
|
|
77
410
|
```
|