@pingux/astro 2.86.0 → 2.87.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.
Files changed (13) hide show
  1. package/lib/cjs/components/Icon/Icon.stories.js +11 -0
  2. package/lib/cjs/components/Icon/Icon.test.js +7 -0
  3. package/lib/cjs/components/IconButton/IconButton.stories.js +90 -0
  4. package/lib/cjs/hooks/useNavBarStyling/useNavBarStyling.d.ts +1 -1
  5. package/lib/cjs/types/shared/style.d.ts +1 -1
  6. package/lib/cjs/utils/devUtils/constants/tShirtSizes.js +1 -0
  7. package/lib/cjs/utils/docUtils/iconSizeProps.js +1 -1
  8. package/lib/components/Icon/Icon.stories.js +11 -0
  9. package/lib/components/Icon/Icon.test.js +7 -0
  10. package/lib/components/IconButton/IconButton.stories.js +90 -0
  11. package/lib/utils/devUtils/constants/tShirtSizes.js +1 -0
  12. package/lib/utils/docUtils/iconSizeProps.js +1 -1
  13. package/package.json +1 -1
package/lib/cjs/components/Icon/Icon.stories.js CHANGED
@@ -127,6 +127,17 @@ var Sizes = function Sizes() {
127
127
  }, (0, _react2.jsx)(_index.TableRow, {
128
128
  height: "45px",
129
129
  bg: "transparent !important"
130
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
131
+ fontFamily: "monospace"
132
+ }, '<Icon icon={SearchIcon}/> size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
133
+ icon: _SearchIcon["default"],
134
+ size: "xxs",
135
+ title: {
136
+ name: 'Search Icon'
137
+ }
138
+ }))), (0, _react2.jsx)(_index.TableRow, {
139
+ height: "45px",
140
+ bg: "transparent !important"
130
141
  }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
131
142
  fontFamily: "monospace"
132
143
  }, '<Icon icon={SearchIcon}/> size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
package/lib/cjs/components/Icon/Icon.test.js CHANGED
@@ -54,6 +54,13 @@ test('default icon', function () {
54
54
  expect(icon).toBeInstanceOf(SVGSVGElement);
55
55
  expect(icon).toBeInTheDocument();
56
56
  });
57
+ test('icon renders correct xxsmall tshirt size', function () {
58
+ getComponent({
59
+ size: 'xxs'
60
+ });
61
+ var xsIcon = _react2.screen.getByTestId(testId);
62
+ expect(xsIcon).toHaveStyleRule('width', '9px');
63
+ });
57
64
  test('icon renders correct xsmall tshirt size', function () {
58
65
  getComponent({
59
66
  size: 'xs'
package/lib/cjs/components/IconButton/IconButton.stories.js CHANGED
@@ -98,6 +98,28 @@ var Sizes = function Sizes() {
98
98
  bg: "transparent !important"
99
99
  }, (0, _react2.jsx)(_index.TableCell, {
100
100
  width: "40%"
101
+ }, (0, _react2.jsx)(_index.Text, null, "XXS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
102
+ fontFamily: "monospace"
103
+ }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
104
+ fontFamily: "monospace"
105
+ }, "<Icon icon={CreateIcon} size='xxs'/>"), (0, _react2.jsx)(_index.Text, {
106
+ fontFamily: "monospace"
107
+ }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
108
+ "aria-label": "create button",
109
+ variant: "inverted",
110
+ sx: {
111
+ width: 'unset'
112
+ }
113
+ }, (0, _react2.jsx)(_index.Icon, {
114
+ icon: _CreateIcon["default"],
115
+ size: "xxs",
116
+ title: {
117
+ name: 'Create Icon'
118
+ }
119
+ })))), (0, _react2.jsx)(_index.TableRow, {
120
+ bg: "transparent !important"
121
+ }, (0, _react2.jsx)(_index.TableCell, {
122
+ width: "40%"
101
123
  }, (0, _react2.jsx)(_index.Text, null, "XS | 21px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
102
124
  fontFamily: "monospace"
103
125
  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
@@ -175,6 +197,14 @@ var CommonlyUsed = function CommonlyUsed() {
175
197
  mb: "md"
176
198
  }, (0, _react2.jsx)(_index.IconButton, {
177
199
  "aria-label": "delete"
200
+ }, (0, _react2.jsx)(_index.Icon, {
201
+ icon: _DeleteIcon["default"],
202
+ size: "xxs",
203
+ title: {
204
+ name: 'Delete Icon'
205
+ }
206
+ })), (0, _react2.jsx)(_index.IconButton, {
207
+ "aria-label": "delete"
178
208
  }, (0, _react2.jsx)(_index.Icon, {
179
209
  icon: _DeleteIcon["default"],
180
210
  size: "xs",
@@ -204,6 +234,15 @@ var CommonlyUsed = function CommonlyUsed() {
204
234
  }, (0, _react2.jsx)(_index.IconButton, {
205
235
  "aria-label": "delete",
206
236
  variant: "inverted"
237
+ }, (0, _react2.jsx)(_index.Icon, {
238
+ icon: _DeleteIcon["default"],
239
+ size: "xxs",
240
+ title: {
241
+ name: 'Delete Icon'
242
+ }
243
+ })), (0, _react2.jsx)(_index.IconButton, {
244
+ "aria-label": "delete",
245
+ variant: "inverted"
207
246
  }, (0, _react2.jsx)(_index.Icon, {
208
247
  icon: _DeleteIcon["default"],
209
248
  size: "xs",
@@ -237,6 +276,14 @@ var CommonlyUsed = function CommonlyUsed() {
237
276
  mb: "md"
238
277
  }, (0, _react2.jsx)(_index.IconButton, {
239
278
  "aria-label": "more options"
279
+ }, (0, _react2.jsx)(_index.Icon, {
280
+ icon: _DotsVerticalIcon["default"],
281
+ size: "xxs",
282
+ title: {
283
+ name: 'Dots Vertical Icon'
284
+ }
285
+ })), (0, _react2.jsx)(_index.IconButton, {
286
+ "aria-label": "more options"
240
287
  }, (0, _react2.jsx)(_index.Icon, {
241
288
  icon: _DotsVerticalIcon["default"],
242
289
  size: "xs",
@@ -266,6 +313,15 @@ var CommonlyUsed = function CommonlyUsed() {
266
313
  }, (0, _react2.jsx)(_index.IconButton, {
267
314
  "aria-label": "more options",
268
315
  variant: "inverted"
316
+ }, (0, _react2.jsx)(_index.Icon, {
317
+ icon: _DotsVerticalIcon["default"],
318
+ size: "xxs",
319
+ title: {
320
+ name: 'Dots Vertical Icon'
321
+ }
322
+ })), (0, _react2.jsx)(_index.IconButton, {
323
+ "aria-label": "more options",
324
+ variant: "inverted"
269
325
  }, (0, _react2.jsx)(_index.Icon, {
270
326
  icon: _DotsVerticalIcon["default"],
271
327
  size: "xs",
@@ -299,6 +355,14 @@ var CommonlyUsed = function CommonlyUsed() {
299
355
  mb: "md"
300
356
  }, (0, _react2.jsx)(_index.IconButton, {
301
357
  "aria-label": "add"
358
+ }, (0, _react2.jsx)(_index.Icon, {
359
+ icon: _PlusIcon["default"],
360
+ size: "xxs",
361
+ title: {
362
+ name: 'Plus Icon'
363
+ }
364
+ })), (0, _react2.jsx)(_index.IconButton, {
365
+ "aria-label": "add"
302
366
  }, (0, _react2.jsx)(_index.Icon, {
303
367
  icon: _PlusIcon["default"],
304
368
  size: "xs",
@@ -328,6 +392,15 @@ var CommonlyUsed = function CommonlyUsed() {
328
392
  }, (0, _react2.jsx)(_index.IconButton, {
329
393
  "aria-label": "add",
330
394
  variant: "inverted"
395
+ }, (0, _react2.jsx)(_index.Icon, {
396
+ icon: _PlusIcon["default"],
397
+ size: "xxs",
398
+ title: {
399
+ name: 'Plus Icon'
400
+ }
401
+ })), (0, _react2.jsx)(_index.IconButton, {
402
+ "aria-label": "add",
403
+ variant: "inverted"
331
404
  }, (0, _react2.jsx)(_index.Icon, {
332
405
  icon: _PlusIcon["default"],
333
406
  size: "xs",
@@ -361,6 +434,14 @@ var CommonlyUsed = function CommonlyUsed() {
361
434
  mb: "md"
362
435
  }, (0, _react2.jsx)(_index.IconButton, {
363
436
  "aria-label": "create"
437
+ }, (0, _react2.jsx)(_index.Icon, {
438
+ icon: _PencilIcon["default"],
439
+ size: "xxs",
440
+ title: {
441
+ name: 'Pencil Icon'
442
+ }
443
+ })), (0, _react2.jsx)(_index.IconButton, {
444
+ "aria-label": "create"
364
445
  }, (0, _react2.jsx)(_index.Icon, {
365
446
  icon: _PencilIcon["default"],
366
447
  size: "xs",
@@ -390,6 +471,15 @@ var CommonlyUsed = function CommonlyUsed() {
390
471
  }, (0, _react2.jsx)(_index.IconButton, {
391
472
  "aria-label": "create",
392
473
  variant: "inverted"
474
+ }, (0, _react2.jsx)(_index.Icon, {
475
+ icon: _PencilIcon["default"],
476
+ size: "xxs",
477
+ title: {
478
+ name: 'Pencil Icon'
479
+ }
480
+ })), (0, _react2.jsx)(_index.IconButton, {
481
+ "aria-label": "create",
482
+ variant: "inverted"
393
483
  }, (0, _react2.jsx)(_index.Icon, {
394
484
  icon: _PencilIcon["default"],
395
485
  size: "xs",
package/lib/cjs/hooks/useNavBarStyling/useNavBarStyling.d.ts CHANGED
@@ -31,7 +31,7 @@ interface NavBarStyling {
31
31
  navBarItemText: string;
32
32
  navBarItemHeaderListItem: string | null;
33
33
  navBarItemBody: string;
34
- navBarItemHeaderIconSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xx';
34
+ navBarItemHeaderIconSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xx';
35
35
  navBarItemLinkButtonColor: string | null;
36
36
  };
37
37
  }
package/lib/cjs/types/shared/style.d.ts CHANGED
@@ -18,7 +18,7 @@ export type SizeAxis = 'width' | 'height';
18
18
  export type PlacementAxis = Axis | 'center';
19
19
  export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
20
20
  export type ModalSizeProps = 'extra-small' | 'small' | 'medium' | 'large' | 'full';
21
- type IconTShirtSize = 'xs' | 'sm' | 'md';
21
+ type IconTShirtSize = 'xxs' | 'xs' | 'sm' | 'md';
22
22
  type pixelSize = 'em' | 'px' | 'rem';
23
23
  export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
24
24
  export type overflowWrap = 'normal' | 'break-word' | 'anywhere' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
package/lib/cjs/utils/devUtils/constants/tShirtSizes.js CHANGED
@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.tShirtSizes = void 0;
8
8
  var tShirtSizes = {
9
+ xxs: 9,
9
10
  xs: 15,
10
11
  sm: 20,
11
12
  md: 25
package/lib/cjs/utils/docUtils/iconSizeProps.js CHANGED
@@ -12,7 +12,7 @@ var _tShirtSizes = require("../devUtils/constants/tShirtSizes");
12
12
  var sizeArgTypes = {
13
13
  size: {
14
14
  options: (0, _keys["default"])(_tShirtSizes.tShirtSizes),
15
- description: "The size of the icon container. If given a number value, it will be converted to pixels. \n Tshirt sizing is recommended and can be passed to the size prop as \"xs\", \"sm\" , \"md\" \n rendering 15, 20, and 25 pixel svg containers."
15
+ description: "The size of the icon container. If given a number value, it will be converted to pixels. \n Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n rendering 9, 15, 20, and 25 pixel svg containers."
16
16
  }
17
17
  };
18
18
  exports.sizeArgTypes = sizeArgTypes;
package/lib/components/Icon/Icon.stories.js CHANGED
@@ -117,6 +117,17 @@ export var Sizes = function Sizes() {
117
117
  }, ___EmotionJSX(TableRow, {
118
118
  height: "45px",
119
119
  bg: "transparent !important"
120
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
121
+ fontFamily: "monospace"
122
+ }, '<Icon icon={SearchIcon}/> size="xxs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
123
+ icon: SearchIcon,
124
+ size: "xxs",
125
+ title: {
126
+ name: 'Search Icon'
127
+ }
128
+ }))), ___EmotionJSX(TableRow, {
129
+ height: "45px",
130
+ bg: "transparent !important"
120
131
  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
121
132
  fontFamily: "monospace"
122
133
  }, '<Icon icon={SearchIcon}/> size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
package/lib/components/Icon/Icon.test.js CHANGED
@@ -45,6 +45,13 @@ test('default icon', function () {
45
45
  expect(icon).toBeInstanceOf(SVGSVGElement);
46
46
  expect(icon).toBeInTheDocument();
47
47
  });
48
+ test('icon renders correct xxsmall tshirt size', function () {
49
+ getComponent({
50
+ size: 'xxs'
51
+ });
52
+ var xsIcon = screen.getByTestId(testId);
53
+ expect(xsIcon).toHaveStyleRule('width', '9px');
54
+ });
48
55
  test('icon renders correct xsmall tshirt size', function () {
49
56
  getComponent({
50
57
  size: 'xs'
package/lib/components/IconButton/IconButton.stories.js CHANGED
@@ -86,6 +86,28 @@ export var Sizes = function Sizes() {
86
86
  bg: "transparent !important"
87
87
  }, ___EmotionJSX(TableCell, {
88
88
  width: "40%"
89
+ }, ___EmotionJSX(Text, null, "XXS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
90
+ fontFamily: "monospace"
91
+ }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
92
+ fontFamily: "monospace"
93
+ }, "<Icon icon={CreateIcon} size='xxs'/>"), ___EmotionJSX(Text, {
94
+ fontFamily: "monospace"
95
+ }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
96
+ "aria-label": "create button",
97
+ variant: "inverted",
98
+ sx: {
99
+ width: 'unset'
100
+ }
101
+ }, ___EmotionJSX(Icon, {
102
+ icon: CreateIcon,
103
+ size: "xxs",
104
+ title: {
105
+ name: 'Create Icon'
106
+ }
107
+ })))), ___EmotionJSX(TableRow, {
108
+ bg: "transparent !important"
109
+ }, ___EmotionJSX(TableCell, {
110
+ width: "40%"
89
111
  }, ___EmotionJSX(Text, null, "XS | 21px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
90
112
  fontFamily: "monospace"
91
113
  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
@@ -162,6 +184,14 @@ export var CommonlyUsed = function CommonlyUsed() {
162
184
  mb: "md"
163
185
  }, ___EmotionJSX(IconButton, {
164
186
  "aria-label": "delete"
187
+ }, ___EmotionJSX(Icon, {
188
+ icon: DeleteIcon,
189
+ size: "xxs",
190
+ title: {
191
+ name: 'Delete Icon'
192
+ }
193
+ })), ___EmotionJSX(IconButton, {
194
+ "aria-label": "delete"
165
195
  }, ___EmotionJSX(Icon, {
166
196
  icon: DeleteIcon,
167
197
  size: "xs",
@@ -191,6 +221,15 @@ export var CommonlyUsed = function CommonlyUsed() {
191
221
  }, ___EmotionJSX(IconButton, {
192
222
  "aria-label": "delete",
193
223
  variant: "inverted"
224
+ }, ___EmotionJSX(Icon, {
225
+ icon: DeleteIcon,
226
+ size: "xxs",
227
+ title: {
228
+ name: 'Delete Icon'
229
+ }
230
+ })), ___EmotionJSX(IconButton, {
231
+ "aria-label": "delete",
232
+ variant: "inverted"
194
233
  }, ___EmotionJSX(Icon, {
195
234
  icon: DeleteIcon,
196
235
  size: "xs",
@@ -224,6 +263,14 @@ export var CommonlyUsed = function CommonlyUsed() {
224
263
  mb: "md"
225
264
  }, ___EmotionJSX(IconButton, {
226
265
  "aria-label": "more options"
266
+ }, ___EmotionJSX(Icon, {
267
+ icon: DotsVerticalIcon,
268
+ size: "xxs",
269
+ title: {
270
+ name: 'Dots Vertical Icon'
271
+ }
272
+ })), ___EmotionJSX(IconButton, {
273
+ "aria-label": "more options"
227
274
  }, ___EmotionJSX(Icon, {
228
275
  icon: DotsVerticalIcon,
229
276
  size: "xs",
@@ -253,6 +300,15 @@ export var CommonlyUsed = function CommonlyUsed() {
253
300
  }, ___EmotionJSX(IconButton, {
254
301
  "aria-label": "more options",
255
302
  variant: "inverted"
303
+ }, ___EmotionJSX(Icon, {
304
+ icon: DotsVerticalIcon,
305
+ size: "xxs",
306
+ title: {
307
+ name: 'Dots Vertical Icon'
308
+ }
309
+ })), ___EmotionJSX(IconButton, {
310
+ "aria-label": "more options",
311
+ variant: "inverted"
256
312
  }, ___EmotionJSX(Icon, {
257
313
  icon: DotsVerticalIcon,
258
314
  size: "xs",
@@ -286,6 +342,14 @@ export var CommonlyUsed = function CommonlyUsed() {
286
342
  mb: "md"
287
343
  }, ___EmotionJSX(IconButton, {
288
344
  "aria-label": "add"
345
+ }, ___EmotionJSX(Icon, {
346
+ icon: PlusIcon,
347
+ size: "xxs",
348
+ title: {
349
+ name: 'Plus Icon'
350
+ }
351
+ })), ___EmotionJSX(IconButton, {
352
+ "aria-label": "add"
289
353
  }, ___EmotionJSX(Icon, {
290
354
  icon: PlusIcon,
291
355
  size: "xs",
@@ -315,6 +379,15 @@ export var CommonlyUsed = function CommonlyUsed() {
315
379
  }, ___EmotionJSX(IconButton, {
316
380
  "aria-label": "add",
317
381
  variant: "inverted"
382
+ }, ___EmotionJSX(Icon, {
383
+ icon: PlusIcon,
384
+ size: "xxs",
385
+ title: {
386
+ name: 'Plus Icon'
387
+ }
388
+ })), ___EmotionJSX(IconButton, {
389
+ "aria-label": "add",
390
+ variant: "inverted"
318
391
  }, ___EmotionJSX(Icon, {
319
392
  icon: PlusIcon,
320
393
  size: "xs",
@@ -348,6 +421,14 @@ export var CommonlyUsed = function CommonlyUsed() {
348
421
  mb: "md"
349
422
  }, ___EmotionJSX(IconButton, {
350
423
  "aria-label": "create"
424
+ }, ___EmotionJSX(Icon, {
425
+ icon: PencilIcon,
426
+ size: "xxs",
427
+ title: {
428
+ name: 'Pencil Icon'
429
+ }
430
+ })), ___EmotionJSX(IconButton, {
431
+ "aria-label": "create"
351
432
  }, ___EmotionJSX(Icon, {
352
433
  icon: PencilIcon,
353
434
  size: "xs",
@@ -377,6 +458,15 @@ export var CommonlyUsed = function CommonlyUsed() {
377
458
  }, ___EmotionJSX(IconButton, {
378
459
  "aria-label": "create",
379
460
  variant: "inverted"
461
+ }, ___EmotionJSX(Icon, {
462
+ icon: PencilIcon,
463
+ size: "xxs",
464
+ title: {
465
+ name: 'Pencil Icon'
466
+ }
467
+ })), ___EmotionJSX(IconButton, {
468
+ "aria-label": "create",
469
+ variant: "inverted"
380
470
  }, ___EmotionJSX(Icon, {
381
471
  icon: PencilIcon,
382
472
  size: "xs",
package/lib/utils/devUtils/constants/tShirtSizes.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export var tShirtSizes = {
2
+ xxs: 9,
2
3
  xs: 15,
3
4
  sm: 20,
4
5
  md: 25
package/lib/utils/docUtils/iconSizeProps.js CHANGED
@@ -4,7 +4,7 @@ import { tShirtSizes } from '../devUtils/constants/tShirtSizes';
4
4
  export var sizeArgTypes = {
5
5
  size: {
6
6
  options: _Object$keys(tShirtSizes),
7
- description: "The size of the icon container. If given a number value, it will be converted to pixels. \n Tshirt sizing is recommended and can be passed to the size prop as \"xs\", \"sm\" , \"md\" \n rendering 15, 20, and 25 pixel svg containers."
7
+ description: "The size of the icon container. If given a number value, it will be converted to pixels. \n Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n rendering 9, 15, 20, and 25 pixel svg containers."
8
8
  }
9
9
  };
10
10
  export var sizePropTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.86.0",
3
+ "version": "2.87.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",