@pingux/astro 2.183.0-alpha.0 → 2.185.0-alpha.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/lib/cjs/components/Avatar/Avatar.js +1 -1
- package/lib/cjs/components/Avatar/Avatar.test.js +21 -17
- package/lib/cjs/components/PanelHeader/PanelHeader.js +0 -1
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts +8 -8
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js +2 -2
- package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +21 -21
- package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts +4 -4
- package/lib/cjs/styles/themes/next-gen/variants/button.d.ts +19 -19
- package/lib/cjs/styles/themes/next-gen/variants/button.js +2 -2
- package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +2 -2
- package/lib/components/Avatar/Avatar.js +1 -1
- package/lib/components/Avatar/Avatar.test.js +21 -17
- package/lib/components/PanelHeader/PanelHeader.js +0 -1
- package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js +2 -2
- package/lib/styles/themes/next-gen/variants/button.js +2 -2
- package/package.json +1 -1
|
@@ -44,7 +44,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
44
44
|
isSquare = props.isSquare,
|
|
45
45
|
isLogo = props.isLogo,
|
|
46
46
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
47
|
-
var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
|
|
47
|
+
var safeColorId = colorId || (defaultText && defaultText !== 'AA' ? defaultText : '_INTERNAL_DEFAULT_ID_');
|
|
48
48
|
if (process.env.NODE_ENV !== 'production') {
|
|
49
49
|
if (!src && !color && !colorId) {
|
|
50
50
|
console.warn("[Astro] Avatar: No 'src', 'color', or 'colorId' provided. " + 'The component is falling back to a default generated color.');
|
|
@@ -25,7 +25,6 @@ var getComponent = function getComponent() {
|
|
|
25
25
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
26
26
|
return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
|
|
27
27
|
};
|
|
28
|
-
// Needs to be added to each components test file
|
|
29
28
|
(0, _universalComponentTest.universalComponentTests)({
|
|
30
29
|
renderComponent: function renderComponent(props) {
|
|
31
30
|
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
|
|
@@ -45,7 +44,7 @@ test('an avatar is rendered with custom alt', function () {
|
|
|
45
44
|
var img = _testWrapper.screen.getByRole('img');
|
|
46
45
|
expect(img).toHaveAttribute('alt', 'Custom Alt');
|
|
47
46
|
});
|
|
48
|
-
test('an avatar is rendered with
|
|
47
|
+
test('an avatar is rendered with initials', function () {
|
|
49
48
|
var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
|
|
50
49
|
getComponent({
|
|
51
50
|
src: undefined,
|
|
@@ -70,9 +69,6 @@ describe('getColorFromUUID', function () {
|
|
|
70
69
|
test('distributes colors differently for different UUIDs', function () {
|
|
71
70
|
var colorA = (0, _getColorFromUuid["default"])('id-1', _constants.avatarColors);
|
|
72
71
|
var colorB = (0, _getColorFromUuid["default"])('id-2', _constants.avatarColors);
|
|
73
|
-
|
|
74
|
-
// While collisions are mathematically possible, for 2 items in a 10-item list,
|
|
75
|
-
// these specific IDs yield different results in FNV-1a.
|
|
76
72
|
expect(colorA).not.toBe(colorB);
|
|
77
73
|
});
|
|
78
74
|
test('throws error if color array is empty', function () {
|
|
@@ -86,8 +82,6 @@ describe('getColorFromUUID', function () {
|
|
|
86
82
|
colorId: 'some-id'
|
|
87
83
|
});
|
|
88
84
|
var avatar = _testWrapper.screen.getByTestId(datatestId);
|
|
89
|
-
|
|
90
|
-
// Checking for 'is-blue'
|
|
91
85
|
expect(avatar).toHaveClass('is-blue');
|
|
92
86
|
});
|
|
93
87
|
test('applies a hashed color class from colorId', function () {
|
|
@@ -96,9 +90,6 @@ describe('getColorFromUUID', function () {
|
|
|
96
90
|
colorId: uuid
|
|
97
91
|
});
|
|
98
92
|
var avatar = _testWrapper.screen.getByTestId(datatestId);
|
|
99
|
-
|
|
100
|
-
// We check that it has *a* class starting with 'is-'
|
|
101
|
-
// and specifically isn't the default 'is-green'
|
|
102
93
|
var classList = (0, _from["default"])(avatar.classList);
|
|
103
94
|
var colorClass = (0, _find["default"])(classList).call(classList, function (cls) {
|
|
104
95
|
return (0, _startsWith["default"])(cls).call(cls, 'is-');
|
|
@@ -171,27 +162,40 @@ describe('getColorFromUUID Distribution', function () {
|
|
|
171
162
|
test('distributes 10,000 UUIDs evenly across 10 colors', function () {
|
|
172
163
|
var iterations = 10000;
|
|
173
164
|
var distribution = {};
|
|
174
|
-
|
|
175
|
-
// Initialize counts
|
|
176
165
|
(0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (c) {
|
|
177
166
|
distribution[c] = 0;
|
|
178
167
|
});
|
|
179
|
-
|
|
180
|
-
// Generate and hash
|
|
181
168
|
for (var i = 0; i < iterations; i += 1) {
|
|
182
|
-
// Use the imported randomUUID function directly
|
|
183
169
|
var uuid = (0, _nodeCrypto.randomUUID)();
|
|
184
170
|
var selectedColor = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
|
|
185
171
|
distribution[selectedColor] += 1;
|
|
186
172
|
}
|
|
187
173
|
var expectedMean = iterations / _constants.avatarColors.length;
|
|
188
|
-
// 15% variance is a safe threshold for 10k iterations
|
|
189
174
|
var allowedVariance = 0.15;
|
|
190
175
|
(0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (color) {
|
|
191
176
|
var count = distribution[color];
|
|
192
|
-
// Assert that each color is roughly 10% of the total
|
|
193
177
|
expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
|
|
194
178
|
expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
|
|
195
179
|
});
|
|
196
180
|
});
|
|
181
|
+
});
|
|
182
|
+
describe('Color Selection Logic', function () {
|
|
183
|
+
var getResolvedId = function getResolvedId(colorId, defaultText) {
|
|
184
|
+
return colorId || (defaultText && defaultText !== 'AA' ? defaultText : '_INTERNAL_DEFAULT_ID_');
|
|
185
|
+
};
|
|
186
|
+
test('should use colorId if it is provided', function () {
|
|
187
|
+
expect(getResolvedId('custom-id', 'BB')).toBe('custom-id');
|
|
188
|
+
});
|
|
189
|
+
test('should use defaultText if colorId is missing and text is not "AA"', function () {
|
|
190
|
+
expect(getResolvedId(null, 'BB')).toBe('BB');
|
|
191
|
+
});
|
|
192
|
+
test('should use hardcoded string if colorId is missing and text is "AA"', function () {
|
|
193
|
+
expect(getResolvedId(undefined, 'AA')).toBe('_INTERNAL_DEFAULT_ID_');
|
|
194
|
+
});
|
|
195
|
+
test('should use hardcoded string if both colorId and defaultText are null', function () {
|
|
196
|
+
expect(getResolvedId(null, null)).toBe('_INTERNAL_DEFAULT_ID_');
|
|
197
|
+
});
|
|
198
|
+
test('should use hardcoded string if colorId is missing and defaultText is empty string', function () {
|
|
199
|
+
expect(getResolvedId(null, '')).toBe('_INTERNAL_DEFAULT_ID_');
|
|
200
|
+
});
|
|
197
201
|
});
|
|
@@ -61,7 +61,6 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
61
61
|
}
|
|
62
62
|
}));
|
|
63
63
|
var renderAvatar = (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({
|
|
64
|
-
color: image !== null && image !== void 0 && image.src ? false : 'green',
|
|
65
64
|
src: image === null || image === void 0 ? void 0 : image.src,
|
|
66
65
|
isSquare: !!(image !== null && image !== void 0 && image.src),
|
|
67
66
|
size: "avatar.lg",
|
|
@@ -201,7 +201,7 @@ declare const buttons: {
|
|
|
201
201
|
backgroundColor: string;
|
|
202
202
|
};
|
|
203
203
|
'&.is-pressed': {
|
|
204
|
-
backgroundColor:
|
|
204
|
+
backgroundColor: string;
|
|
205
205
|
borderColor: any;
|
|
206
206
|
path: {
|
|
207
207
|
fill: any;
|
|
@@ -238,7 +238,7 @@ declare const buttons: {
|
|
|
238
238
|
backgroundColor: string;
|
|
239
239
|
};
|
|
240
240
|
'&.is-pressed': {
|
|
241
|
-
backgroundColor:
|
|
241
|
+
backgroundColor: string;
|
|
242
242
|
borderColor: any;
|
|
243
243
|
path: {
|
|
244
244
|
fill: any;
|
|
@@ -260,7 +260,7 @@ declare const buttons: {
|
|
|
260
260
|
fill: string;
|
|
261
261
|
};
|
|
262
262
|
'&.is-pressed': {
|
|
263
|
-
backgroundColor:
|
|
263
|
+
backgroundColor: string;
|
|
264
264
|
borderColor: any;
|
|
265
265
|
path: {
|
|
266
266
|
fill: any;
|
|
@@ -278,7 +278,7 @@ declare const buttons: {
|
|
|
278
278
|
backgroundColor: string;
|
|
279
279
|
};
|
|
280
280
|
'&.is-pressed': {
|
|
281
|
-
backgroundColor:
|
|
281
|
+
backgroundColor: string;
|
|
282
282
|
borderColor: any;
|
|
283
283
|
path: {
|
|
284
284
|
fill: any;
|
|
@@ -296,7 +296,7 @@ declare const buttons: {
|
|
|
296
296
|
backgroundColor: string;
|
|
297
297
|
};
|
|
298
298
|
'&.is-pressed': {
|
|
299
|
-
backgroundColor:
|
|
299
|
+
backgroundColor: string;
|
|
300
300
|
borderColor: any;
|
|
301
301
|
path: {
|
|
302
302
|
fill: any;
|
|
@@ -311,7 +311,7 @@ declare const buttons: {
|
|
|
311
311
|
fill: string;
|
|
312
312
|
};
|
|
313
313
|
'&.is-pressed': {
|
|
314
|
-
backgroundColor:
|
|
314
|
+
backgroundColor: string;
|
|
315
315
|
borderColor: any;
|
|
316
316
|
path: {
|
|
317
317
|
fill: any;
|
|
@@ -330,7 +330,7 @@ declare const buttons: {
|
|
|
330
330
|
fill: string;
|
|
331
331
|
};
|
|
332
332
|
'&.is-pressed': {
|
|
333
|
-
backgroundColor:
|
|
333
|
+
backgroundColor: string;
|
|
334
334
|
borderColor: any;
|
|
335
335
|
path: {
|
|
336
336
|
fill: any;
|
|
@@ -359,7 +359,7 @@ declare const buttons: {
|
|
|
359
359
|
backgroundColor: string;
|
|
360
360
|
};
|
|
361
361
|
'&.is-pressed': {
|
|
362
|
-
backgroundColor:
|
|
362
|
+
backgroundColor: string;
|
|
363
363
|
borderColor: any;
|
|
364
364
|
path: {
|
|
365
365
|
fill: any;
|
|
@@ -26,10 +26,10 @@ var baseIconButton = {
|
|
|
26
26
|
path: {
|
|
27
27
|
fill: _onyxTokens.astroTokensDark.color.gray[400]
|
|
28
28
|
},
|
|
29
|
-
backgroundColor: '
|
|
29
|
+
backgroundColor: 'light'
|
|
30
30
|
},
|
|
31
31
|
'&.is-pressed': {
|
|
32
|
-
backgroundColor:
|
|
32
|
+
backgroundColor: 'light',
|
|
33
33
|
borderColor: _onyxTokens.astroTokensDark.color.gray[900],
|
|
34
34
|
path: {
|
|
35
35
|
fill: _onyxTokens.astroTokensDark.color.gray[400]
|
|
@@ -1149,13 +1149,13 @@ declare const _default: {
|
|
|
1149
1149
|
fill: string;
|
|
1150
1150
|
};
|
|
1151
1151
|
'&.is-hovered': {
|
|
1152
|
-
backgroundColor:
|
|
1152
|
+
backgroundColor: any;
|
|
1153
1153
|
path: {
|
|
1154
1154
|
fill: string;
|
|
1155
1155
|
};
|
|
1156
1156
|
};
|
|
1157
1157
|
'&.is-pressed': {
|
|
1158
|
-
backgroundColor:
|
|
1158
|
+
backgroundColor: any;
|
|
1159
1159
|
path: {
|
|
1160
1160
|
fill: string;
|
|
1161
1161
|
};
|
|
@@ -1216,13 +1216,13 @@ declare const _default: {
|
|
|
1216
1216
|
fill: string;
|
|
1217
1217
|
};
|
|
1218
1218
|
'&.is-hovered': {
|
|
1219
|
-
backgroundColor:
|
|
1219
|
+
backgroundColor: any;
|
|
1220
1220
|
path: {
|
|
1221
1221
|
fill: string;
|
|
1222
1222
|
};
|
|
1223
1223
|
};
|
|
1224
1224
|
'&.is-pressed': {
|
|
1225
|
-
backgroundColor:
|
|
1225
|
+
backgroundColor: any;
|
|
1226
1226
|
path: {
|
|
1227
1227
|
fill: string;
|
|
1228
1228
|
};
|
|
@@ -1246,13 +1246,13 @@ declare const _default: {
|
|
|
1246
1246
|
fill: string;
|
|
1247
1247
|
};
|
|
1248
1248
|
'&.is-hovered': {
|
|
1249
|
-
backgroundColor:
|
|
1249
|
+
backgroundColor: any;
|
|
1250
1250
|
path: {
|
|
1251
1251
|
fill: string;
|
|
1252
1252
|
};
|
|
1253
1253
|
};
|
|
1254
1254
|
'&.is-pressed': {
|
|
1255
|
-
backgroundColor:
|
|
1255
|
+
backgroundColor: any;
|
|
1256
1256
|
path: {
|
|
1257
1257
|
fill: string;
|
|
1258
1258
|
};
|
|
@@ -1279,13 +1279,13 @@ declare const _default: {
|
|
|
1279
1279
|
fill: string;
|
|
1280
1280
|
};
|
|
1281
1281
|
'&.is-hovered': {
|
|
1282
|
-
backgroundColor:
|
|
1282
|
+
backgroundColor: any;
|
|
1283
1283
|
path: {
|
|
1284
1284
|
fill: string;
|
|
1285
1285
|
};
|
|
1286
1286
|
};
|
|
1287
1287
|
'&.is-pressed': {
|
|
1288
|
-
backgroundColor:
|
|
1288
|
+
backgroundColor: any;
|
|
1289
1289
|
path: {
|
|
1290
1290
|
fill: string;
|
|
1291
1291
|
};
|
|
@@ -1328,7 +1328,7 @@ declare const _default: {
|
|
|
1328
1328
|
fill: string;
|
|
1329
1329
|
};
|
|
1330
1330
|
'&.is-hovered': {
|
|
1331
|
-
backgroundColor:
|
|
1331
|
+
backgroundColor: any;
|
|
1332
1332
|
path: {
|
|
1333
1333
|
fill: string;
|
|
1334
1334
|
};
|
|
@@ -1355,13 +1355,13 @@ declare const _default: {
|
|
|
1355
1355
|
fill: string;
|
|
1356
1356
|
};
|
|
1357
1357
|
'&.is-hovered': {
|
|
1358
|
-
backgroundColor:
|
|
1358
|
+
backgroundColor: any;
|
|
1359
1359
|
path: {
|
|
1360
1360
|
fill: string;
|
|
1361
1361
|
};
|
|
1362
1362
|
};
|
|
1363
1363
|
'&.is-pressed': {
|
|
1364
|
-
backgroundColor:
|
|
1364
|
+
backgroundColor: any;
|
|
1365
1365
|
path: {
|
|
1366
1366
|
fill: string;
|
|
1367
1367
|
};
|
|
@@ -1385,13 +1385,13 @@ declare const _default: {
|
|
|
1385
1385
|
fill: string;
|
|
1386
1386
|
};
|
|
1387
1387
|
'&.is-hovered': {
|
|
1388
|
-
backgroundColor:
|
|
1388
|
+
backgroundColor: any;
|
|
1389
1389
|
path: {
|
|
1390
1390
|
fill: string;
|
|
1391
1391
|
};
|
|
1392
1392
|
};
|
|
1393
1393
|
'&.is-pressed': {
|
|
1394
|
-
backgroundColor:
|
|
1394
|
+
backgroundColor: any;
|
|
1395
1395
|
path: {
|
|
1396
1396
|
fill: string;
|
|
1397
1397
|
};
|
|
@@ -1436,7 +1436,7 @@ declare const _default: {
|
|
|
1436
1436
|
fill: string;
|
|
1437
1437
|
};
|
|
1438
1438
|
'&.is-pressed': {
|
|
1439
|
-
backgroundColor:
|
|
1439
|
+
backgroundColor: any;
|
|
1440
1440
|
path: {
|
|
1441
1441
|
fill: string;
|
|
1442
1442
|
};
|
|
@@ -1578,13 +1578,13 @@ declare const _default: {
|
|
|
1578
1578
|
fill: string;
|
|
1579
1579
|
};
|
|
1580
1580
|
'&.is-hovered': {
|
|
1581
|
-
backgroundColor:
|
|
1581
|
+
backgroundColor: any;
|
|
1582
1582
|
path: {
|
|
1583
1583
|
fill: string;
|
|
1584
1584
|
};
|
|
1585
1585
|
};
|
|
1586
1586
|
'&.is-pressed': {
|
|
1587
|
-
backgroundColor:
|
|
1587
|
+
backgroundColor: any;
|
|
1588
1588
|
path: {
|
|
1589
1589
|
fill: string;
|
|
1590
1590
|
};
|
|
@@ -1609,7 +1609,7 @@ declare const _default: {
|
|
|
1609
1609
|
fill: string;
|
|
1610
1610
|
};
|
|
1611
1611
|
'&.is-pressed': {
|
|
1612
|
-
backgroundColor:
|
|
1612
|
+
backgroundColor: any;
|
|
1613
1613
|
path: {
|
|
1614
1614
|
fill: string;
|
|
1615
1615
|
};
|
|
@@ -1635,13 +1635,13 @@ declare const _default: {
|
|
|
1635
1635
|
fill: string;
|
|
1636
1636
|
};
|
|
1637
1637
|
'&.is-hovered': {
|
|
1638
|
-
backgroundColor:
|
|
1638
|
+
backgroundColor: any;
|
|
1639
1639
|
path: {
|
|
1640
1640
|
fill: string;
|
|
1641
1641
|
};
|
|
1642
1642
|
};
|
|
1643
1643
|
'&.is-pressed': {
|
|
1644
|
-
backgroundColor:
|
|
1644
|
+
backgroundColor: any;
|
|
1645
1645
|
path: {
|
|
1646
1646
|
fill: string;
|
|
1647
1647
|
};
|
|
@@ -3876,13 +3876,13 @@ declare const _default: {
|
|
|
3876
3876
|
fill: string;
|
|
3877
3877
|
};
|
|
3878
3878
|
'&.is-hovered': {
|
|
3879
|
-
backgroundColor:
|
|
3879
|
+
backgroundColor: any;
|
|
3880
3880
|
path: {
|
|
3881
3881
|
fill: string;
|
|
3882
3882
|
};
|
|
3883
3883
|
};
|
|
3884
3884
|
'&.is-pressed': {
|
|
3885
|
-
backgroundColor:
|
|
3885
|
+
backgroundColor: any;
|
|
3886
3886
|
path: {
|
|
3887
3887
|
fill: string;
|
|
3888
3888
|
};
|
|
@@ -8,13 +8,13 @@ export declare const badgeDeleteButton: {
|
|
|
8
8
|
fill: string;
|
|
9
9
|
};
|
|
10
10
|
'&.is-hovered': {
|
|
11
|
-
backgroundColor:
|
|
11
|
+
backgroundColor: any;
|
|
12
12
|
path: {
|
|
13
13
|
fill: string;
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
16
|
'&.is-pressed': {
|
|
17
|
-
backgroundColor:
|
|
17
|
+
backgroundColor: any;
|
|
18
18
|
path: {
|
|
19
19
|
fill: string;
|
|
20
20
|
};
|
|
@@ -687,13 +687,13 @@ export declare const badges: {
|
|
|
687
687
|
fill: string;
|
|
688
688
|
};
|
|
689
689
|
'&.is-hovered': {
|
|
690
|
-
backgroundColor:
|
|
690
|
+
backgroundColor: any;
|
|
691
691
|
path: {
|
|
692
692
|
fill: string;
|
|
693
693
|
};
|
|
694
694
|
};
|
|
695
695
|
'&.is-pressed': {
|
|
696
|
-
backgroundColor:
|
|
696
|
+
backgroundColor: any;
|
|
697
697
|
path: {
|
|
698
698
|
fill: string;
|
|
699
699
|
};
|
|
@@ -850,13 +850,13 @@ declare const buttons: {
|
|
|
850
850
|
fill: string;
|
|
851
851
|
};
|
|
852
852
|
'&.is-hovered': {
|
|
853
|
-
backgroundColor:
|
|
853
|
+
backgroundColor: any;
|
|
854
854
|
path: {
|
|
855
855
|
fill: string;
|
|
856
856
|
};
|
|
857
857
|
};
|
|
858
858
|
'&.is-pressed': {
|
|
859
|
-
backgroundColor:
|
|
859
|
+
backgroundColor: any;
|
|
860
860
|
path: {
|
|
861
861
|
fill: string;
|
|
862
862
|
};
|
|
@@ -917,13 +917,13 @@ declare const buttons: {
|
|
|
917
917
|
fill: string;
|
|
918
918
|
};
|
|
919
919
|
'&.is-hovered': {
|
|
920
|
-
backgroundColor:
|
|
920
|
+
backgroundColor: any;
|
|
921
921
|
path: {
|
|
922
922
|
fill: string;
|
|
923
923
|
};
|
|
924
924
|
};
|
|
925
925
|
'&.is-pressed': {
|
|
926
|
-
backgroundColor:
|
|
926
|
+
backgroundColor: any;
|
|
927
927
|
path: {
|
|
928
928
|
fill: string;
|
|
929
929
|
};
|
|
@@ -947,13 +947,13 @@ declare const buttons: {
|
|
|
947
947
|
fill: string;
|
|
948
948
|
};
|
|
949
949
|
'&.is-hovered': {
|
|
950
|
-
backgroundColor:
|
|
950
|
+
backgroundColor: any;
|
|
951
951
|
path: {
|
|
952
952
|
fill: string;
|
|
953
953
|
};
|
|
954
954
|
};
|
|
955
955
|
'&.is-pressed': {
|
|
956
|
-
backgroundColor:
|
|
956
|
+
backgroundColor: any;
|
|
957
957
|
path: {
|
|
958
958
|
fill: string;
|
|
959
959
|
};
|
|
@@ -980,13 +980,13 @@ declare const buttons: {
|
|
|
980
980
|
fill: string;
|
|
981
981
|
};
|
|
982
982
|
'&.is-hovered': {
|
|
983
|
-
backgroundColor:
|
|
983
|
+
backgroundColor: any;
|
|
984
984
|
path: {
|
|
985
985
|
fill: string;
|
|
986
986
|
};
|
|
987
987
|
};
|
|
988
988
|
'&.is-pressed': {
|
|
989
|
-
backgroundColor:
|
|
989
|
+
backgroundColor: any;
|
|
990
990
|
path: {
|
|
991
991
|
fill: string;
|
|
992
992
|
};
|
|
@@ -1029,7 +1029,7 @@ declare const buttons: {
|
|
|
1029
1029
|
fill: string;
|
|
1030
1030
|
};
|
|
1031
1031
|
'&.is-hovered': {
|
|
1032
|
-
backgroundColor:
|
|
1032
|
+
backgroundColor: any;
|
|
1033
1033
|
path: {
|
|
1034
1034
|
fill: string;
|
|
1035
1035
|
};
|
|
@@ -1056,13 +1056,13 @@ declare const buttons: {
|
|
|
1056
1056
|
fill: string;
|
|
1057
1057
|
};
|
|
1058
1058
|
'&.is-hovered': {
|
|
1059
|
-
backgroundColor:
|
|
1059
|
+
backgroundColor: any;
|
|
1060
1060
|
path: {
|
|
1061
1061
|
fill: string;
|
|
1062
1062
|
};
|
|
1063
1063
|
};
|
|
1064
1064
|
'&.is-pressed': {
|
|
1065
|
-
backgroundColor:
|
|
1065
|
+
backgroundColor: any;
|
|
1066
1066
|
path: {
|
|
1067
1067
|
fill: string;
|
|
1068
1068
|
};
|
|
@@ -1086,13 +1086,13 @@ declare const buttons: {
|
|
|
1086
1086
|
fill: string;
|
|
1087
1087
|
};
|
|
1088
1088
|
'&.is-hovered': {
|
|
1089
|
-
backgroundColor:
|
|
1089
|
+
backgroundColor: any;
|
|
1090
1090
|
path: {
|
|
1091
1091
|
fill: string;
|
|
1092
1092
|
};
|
|
1093
1093
|
};
|
|
1094
1094
|
'&.is-pressed': {
|
|
1095
|
-
backgroundColor:
|
|
1095
|
+
backgroundColor: any;
|
|
1096
1096
|
path: {
|
|
1097
1097
|
fill: string;
|
|
1098
1098
|
};
|
|
@@ -1137,7 +1137,7 @@ declare const buttons: {
|
|
|
1137
1137
|
fill: string;
|
|
1138
1138
|
};
|
|
1139
1139
|
'&.is-pressed': {
|
|
1140
|
-
backgroundColor:
|
|
1140
|
+
backgroundColor: any;
|
|
1141
1141
|
path: {
|
|
1142
1142
|
fill: string;
|
|
1143
1143
|
};
|
|
@@ -1279,13 +1279,13 @@ declare const buttons: {
|
|
|
1279
1279
|
fill: string;
|
|
1280
1280
|
};
|
|
1281
1281
|
'&.is-hovered': {
|
|
1282
|
-
backgroundColor:
|
|
1282
|
+
backgroundColor: any;
|
|
1283
1283
|
path: {
|
|
1284
1284
|
fill: string;
|
|
1285
1285
|
};
|
|
1286
1286
|
};
|
|
1287
1287
|
'&.is-pressed': {
|
|
1288
|
-
backgroundColor:
|
|
1288
|
+
backgroundColor: any;
|
|
1289
1289
|
path: {
|
|
1290
1290
|
fill: string;
|
|
1291
1291
|
};
|
|
@@ -1310,7 +1310,7 @@ declare const buttons: {
|
|
|
1310
1310
|
fill: string;
|
|
1311
1311
|
};
|
|
1312
1312
|
'&.is-pressed': {
|
|
1313
|
-
backgroundColor:
|
|
1313
|
+
backgroundColor: any;
|
|
1314
1314
|
path: {
|
|
1315
1315
|
fill: string;
|
|
1316
1316
|
};
|
|
@@ -1336,13 +1336,13 @@ declare const buttons: {
|
|
|
1336
1336
|
fill: string;
|
|
1337
1337
|
};
|
|
1338
1338
|
'&.is-hovered': {
|
|
1339
|
-
backgroundColor:
|
|
1339
|
+
backgroundColor: any;
|
|
1340
1340
|
path: {
|
|
1341
1341
|
fill: string;
|
|
1342
1342
|
};
|
|
1343
1343
|
};
|
|
1344
1344
|
'&.is-pressed': {
|
|
1345
|
-
backgroundColor:
|
|
1345
|
+
backgroundColor: any;
|
|
1346
1346
|
path: {
|
|
1347
1347
|
fill: string;
|
|
1348
1348
|
};
|
|
@@ -361,13 +361,13 @@ var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
|
|
|
361
361
|
fill: 'dark'
|
|
362
362
|
},
|
|
363
363
|
'&.is-hovered': {
|
|
364
|
-
backgroundColor:
|
|
364
|
+
backgroundColor: _onyxTokens.astroTokens.color.gray[100],
|
|
365
365
|
path: {
|
|
366
366
|
fill: 'dark'
|
|
367
367
|
}
|
|
368
368
|
},
|
|
369
369
|
'&.is-pressed': {
|
|
370
|
-
backgroundColor:
|
|
370
|
+
backgroundColor: _onyxTokens.astroTokens.color.gray[100],
|
|
371
371
|
path: {
|
|
372
372
|
fill: 'dark'
|
|
373
373
|
}
|
|
@@ -8,13 +8,13 @@ export declare const badgeDeleteButton: {
|
|
|
8
8
|
fill: string;
|
|
9
9
|
};
|
|
10
10
|
'&.is-hovered': {
|
|
11
|
-
backgroundColor:
|
|
11
|
+
backgroundColor: any;
|
|
12
12
|
path: {
|
|
13
13
|
fill: string;
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
16
|
'&.is-pressed': {
|
|
17
|
-
backgroundColor:
|
|
17
|
+
backgroundColor: any;
|
|
18
18
|
path: {
|
|
19
19
|
fill: string;
|
|
20
20
|
};
|
|
@@ -34,7 +34,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
34
34
|
isSquare = props.isSquare,
|
|
35
35
|
isLogo = props.isLogo,
|
|
36
36
|
others = _objectWithoutProperties(props, _excluded);
|
|
37
|
-
var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
|
|
37
|
+
var safeColorId = colorId || (defaultText && defaultText !== 'AA' ? defaultText : '_INTERNAL_DEFAULT_ID_');
|
|
38
38
|
if (process.env.NODE_ENV !== 'production') {
|
|
39
39
|
if (!src && !color && !colorId) {
|
|
40
40
|
console.warn("[Astro] Avatar: No 'src', 'color', or 'colorId' provided. " + 'The component is falling back to a default generated color.');
|
|
@@ -22,7 +22,6 @@ var getComponent = function getComponent() {
|
|
|
22
22
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
23
23
|
return render(___EmotionJSX(Avatar, _extends({}, defaultProps, props)));
|
|
24
24
|
};
|
|
25
|
-
// Needs to be added to each components test file
|
|
26
25
|
universalComponentTests({
|
|
27
26
|
renderComponent: function renderComponent(props) {
|
|
28
27
|
return ___EmotionJSX(Avatar, _extends({}, defaultProps, props));
|
|
@@ -42,7 +41,7 @@ test('an avatar is rendered with custom alt', function () {
|
|
|
42
41
|
var img = screen.getByRole('img');
|
|
43
42
|
expect(img).toHaveAttribute('alt', 'Custom Alt');
|
|
44
43
|
});
|
|
45
|
-
test('an avatar is rendered with
|
|
44
|
+
test('an avatar is rendered with initials', function () {
|
|
46
45
|
var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
|
|
47
46
|
getComponent({
|
|
48
47
|
src: undefined,
|
|
@@ -67,9 +66,6 @@ describe('getColorFromUUID', function () {
|
|
|
67
66
|
test('distributes colors differently for different UUIDs', function () {
|
|
68
67
|
var colorA = getColorFromUUID('id-1', colors);
|
|
69
68
|
var colorB = getColorFromUUID('id-2', colors);
|
|
70
|
-
|
|
71
|
-
// While collisions are mathematically possible, for 2 items in a 10-item list,
|
|
72
|
-
// these specific IDs yield different results in FNV-1a.
|
|
73
69
|
expect(colorA).not.toBe(colorB);
|
|
74
70
|
});
|
|
75
71
|
test('throws error if color array is empty', function () {
|
|
@@ -83,8 +79,6 @@ describe('getColorFromUUID', function () {
|
|
|
83
79
|
colorId: 'some-id'
|
|
84
80
|
});
|
|
85
81
|
var avatar = screen.getByTestId(datatestId);
|
|
86
|
-
|
|
87
|
-
// Checking for 'is-blue'
|
|
88
82
|
expect(avatar).toHaveClass('is-blue');
|
|
89
83
|
});
|
|
90
84
|
test('applies a hashed color class from colorId', function () {
|
|
@@ -93,9 +87,6 @@ describe('getColorFromUUID', function () {
|
|
|
93
87
|
colorId: uuid
|
|
94
88
|
});
|
|
95
89
|
var avatar = screen.getByTestId(datatestId);
|
|
96
|
-
|
|
97
|
-
// We check that it has *a* class starting with 'is-'
|
|
98
|
-
// and specifically isn't the default 'is-green'
|
|
99
90
|
var classList = _Array$from(avatar.classList);
|
|
100
91
|
var colorClass = _findInstanceProperty(classList).call(classList, function (cls) {
|
|
101
92
|
return _startsWithInstanceProperty(cls).call(cls, 'is-');
|
|
@@ -168,27 +159,40 @@ describe('getColorFromUUID Distribution', function () {
|
|
|
168
159
|
test('distributes 10,000 UUIDs evenly across 10 colors', function () {
|
|
169
160
|
var iterations = 10000;
|
|
170
161
|
var distribution = {};
|
|
171
|
-
|
|
172
|
-
// Initialize counts
|
|
173
162
|
_forEachInstanceProperty(colors).call(colors, function (c) {
|
|
174
163
|
distribution[c] = 0;
|
|
175
164
|
});
|
|
176
|
-
|
|
177
|
-
// Generate and hash
|
|
178
165
|
for (var i = 0; i < iterations; i += 1) {
|
|
179
|
-
// Use the imported randomUUID function directly
|
|
180
166
|
var uuid = randomUUID();
|
|
181
167
|
var selectedColor = getColorFromUUID(uuid, colors);
|
|
182
168
|
distribution[selectedColor] += 1;
|
|
183
169
|
}
|
|
184
170
|
var expectedMean = iterations / colors.length;
|
|
185
|
-
// 15% variance is a safe threshold for 10k iterations
|
|
186
171
|
var allowedVariance = 0.15;
|
|
187
172
|
_forEachInstanceProperty(colors).call(colors, function (color) {
|
|
188
173
|
var count = distribution[color];
|
|
189
|
-
// Assert that each color is roughly 10% of the total
|
|
190
174
|
expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
|
|
191
175
|
expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
|
|
192
176
|
});
|
|
193
177
|
});
|
|
178
|
+
});
|
|
179
|
+
describe('Color Selection Logic', function () {
|
|
180
|
+
var getResolvedId = function getResolvedId(colorId, defaultText) {
|
|
181
|
+
return colorId || (defaultText && defaultText !== 'AA' ? defaultText : '_INTERNAL_DEFAULT_ID_');
|
|
182
|
+
};
|
|
183
|
+
test('should use colorId if it is provided', function () {
|
|
184
|
+
expect(getResolvedId('custom-id', 'BB')).toBe('custom-id');
|
|
185
|
+
});
|
|
186
|
+
test('should use defaultText if colorId is missing and text is not "AA"', function () {
|
|
187
|
+
expect(getResolvedId(null, 'BB')).toBe('BB');
|
|
188
|
+
});
|
|
189
|
+
test('should use hardcoded string if colorId is missing and text is "AA"', function () {
|
|
190
|
+
expect(getResolvedId(undefined, 'AA')).toBe('_INTERNAL_DEFAULT_ID_');
|
|
191
|
+
});
|
|
192
|
+
test('should use hardcoded string if both colorId and defaultText are null', function () {
|
|
193
|
+
expect(getResolvedId(null, null)).toBe('_INTERNAL_DEFAULT_ID_');
|
|
194
|
+
});
|
|
195
|
+
test('should use hardcoded string if colorId is missing and defaultText is empty string', function () {
|
|
196
|
+
expect(getResolvedId(null, '')).toBe('_INTERNAL_DEFAULT_ID_');
|
|
197
|
+
});
|
|
194
198
|
});
|
|
@@ -51,7 +51,6 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
51
51
|
}
|
|
52
52
|
}));
|
|
53
53
|
var renderAvatar = ___EmotionJSX(Avatar, _extends({
|
|
54
|
-
color: image !== null && image !== void 0 && image.src ? false : 'green',
|
|
55
54
|
src: image === null || image === void 0 ? void 0 : image.src,
|
|
56
55
|
isSquare: !!(image !== null && image !== void 0 && image.src),
|
|
57
56
|
size: "avatar.lg",
|
|
@@ -19,10 +19,10 @@ var baseIconButton = {
|
|
|
19
19
|
path: {
|
|
20
20
|
fill: astroTokensDark.color.gray[400]
|
|
21
21
|
},
|
|
22
|
-
backgroundColor: '
|
|
22
|
+
backgroundColor: 'light'
|
|
23
23
|
},
|
|
24
24
|
'&.is-pressed': {
|
|
25
|
-
backgroundColor:
|
|
25
|
+
backgroundColor: 'light',
|
|
26
26
|
borderColor: astroTokensDark.color.gray[900],
|
|
27
27
|
path: {
|
|
28
28
|
fill: astroTokensDark.color.gray[400]
|
|
@@ -354,13 +354,13 @@ var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
|
|
|
354
354
|
fill: 'dark'
|
|
355
355
|
},
|
|
356
356
|
'&.is-hovered': {
|
|
357
|
-
backgroundColor:
|
|
357
|
+
backgroundColor: astroTokens.color.gray[100],
|
|
358
358
|
path: {
|
|
359
359
|
fill: 'dark'
|
|
360
360
|
}
|
|
361
361
|
},
|
|
362
362
|
'&.is-pressed': {
|
|
363
|
-
backgroundColor:
|
|
363
|
+
backgroundColor: astroTokens.color.gray[100],
|
|
364
364
|
path: {
|
|
365
365
|
fill: 'dark'
|
|
366
366
|
}
|