@pingux/astro 1.37.2 → 1.38.0-alpha.1

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 (132) hide show
  1. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +1 -1
  2. package/lib/cjs/components/AccordionGroup/AccordionGroup.stories.js +1 -1
  3. package/lib/cjs/components/AstroWrapper/AstroWrapper.js +3 -3
  4. package/lib/cjs/components/AstroWrapper/AstroWrapper.stories.js +1 -1
  5. package/lib/cjs/components/Avatar/Avatar.stories.js +1 -1
  6. package/lib/cjs/components/Box/Box.stories.js +1 -1
  7. package/lib/cjs/components/Bracket/Bracket.stories.js +1 -1
  8. package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +1 -1
  9. package/lib/cjs/components/Button/Button.stories.js +1 -1
  10. package/lib/cjs/components/Card/Card.stories.js +1 -1
  11. package/lib/cjs/components/Chip/Badge.js +146 -0
  12. package/lib/cjs/components/Chip/{Chip.stories.js → Badge.stories.js} +63 -14
  13. package/lib/cjs/components/Chip/{Chip.test.js → Badge.test.js} +17 -0
  14. package/lib/cjs/components/Chip/Chip.js +11 -72
  15. package/lib/cjs/components/CodeView/CodeView.stories.js +1 -1
  16. package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.stories.js +1 -1
  17. package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js +1 -1
  18. package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +54 -12
  19. package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +59 -16
  20. package/lib/cjs/components/CopyText/CopyText.stories.js +1 -1
  21. package/lib/cjs/components/DataTable/DataTable.stories.js +1 -1
  22. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +11 -11
  23. package/lib/cjs/components/HelpHint/HelpHint.stories.js +1 -1
  24. package/lib/cjs/components/Icon/Icon.stories.js +1 -1
  25. package/lib/cjs/components/IconBadge/IconBadge.stories.js +1 -1
  26. package/lib/cjs/components/IconButton/IconButton.js +2 -2
  27. package/lib/cjs/components/IconButton/IconButton.stories.js +1 -1
  28. package/lib/cjs/components/IconButtonToggle/IconButtonToggle.stories.js +1 -1
  29. package/lib/cjs/components/Image/Image.stories.js +1 -1
  30. package/lib/cjs/components/Link/Link.stories.js +1 -1
  31. package/lib/cjs/components/ListItem/ListItem.stories.js +1 -1
  32. package/lib/cjs/components/ListView/ListView.stories.js +1 -1
  33. package/lib/cjs/components/Loader/Loader.stories.js +1 -1
  34. package/lib/cjs/components/Menu/Menu.stories.js +1 -1
  35. package/lib/cjs/components/Messages/Messages.stories.js +1 -1
  36. package/lib/cjs/components/Modal/Modal.stories.js +1 -1
  37. package/lib/cjs/components/MultivaluesField/MultivaluesField.js +24 -18
  38. package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js +236 -65
  39. package/lib/cjs/components/NavBar/NavBar.stories.js +1 -1
  40. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +273 -3
  41. package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.js +1 -1
  42. package/lib/cjs/components/RequirementsList/RequirementsList.stories.js +1 -1
  43. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +1 -1
  44. package/lib/cjs/components/ScrollBox/ScrollBox.stories.js +1 -1
  45. package/lib/cjs/components/Separator/Separator.stories.js +1 -1
  46. package/lib/cjs/components/Stepper/Stepper.stories.js +1 -1
  47. package/lib/cjs/components/Table/Table.stories.js +1 -1
  48. package/lib/cjs/components/Tabs/Tabs.stories.js +1 -1
  49. package/lib/cjs/components/Text/Text.stories.js +1 -1
  50. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +1 -1
  51. package/lib/cjs/context/BadgeContext/index.js +15 -0
  52. package/lib/cjs/{styles → docs/design}/ColorDocumentation.stories.js +3 -3
  53. package/lib/cjs/{styles → docs/design}/ContainerSizes.stories.js +2 -2
  54. package/lib/cjs/{styles → docs/design}/Spacing.stories.js +4 -4
  55. package/lib/cjs/{styles → docs/design}/Typography.stories.js +4 -4
  56. package/lib/cjs/{styles → docs/theme}/ThemeDocumentation.js +1 -1
  57. package/lib/cjs/index.js +41 -8
  58. package/lib/cjs/recipes/ListAndPanel.stories.js +2 -1
  59. package/lib/cjs/styles/colors.js +1 -1
  60. package/lib/cjs/{templates → styles/templates}/Nav/HeaderBar.js +2 -2
  61. package/lib/cjs/{templates → styles/templates}/Nav/Nav.stories.js +1 -1
  62. package/lib/cjs/{templates → styles/templates}/Nav/NavData.js +1 -1
  63. package/lib/cjs/styles/variants/boxes.js +17 -1
  64. package/lib/cjs/styles/variants/buttons.js +26 -3
  65. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +1 -1
  66. package/lib/components/AccordionGroup/AccordionGroup.stories.js +1 -1
  67. package/lib/components/AstroWrapper/AstroWrapper.js +3 -3
  68. package/lib/components/AstroWrapper/AstroWrapper.stories.js +1 -1
  69. package/lib/components/Avatar/Avatar.stories.js +1 -1
  70. package/lib/components/Box/Box.stories.js +1 -1
  71. package/lib/components/Bracket/Bracket.stories.js +1 -1
  72. package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +1 -1
  73. package/lib/components/Button/Button.stories.js +1 -1
  74. package/lib/components/Card/Card.stories.js +1 -1
  75. package/lib/components/Chip/Badge.js +109 -0
  76. package/lib/components/Chip/{Chip.stories.js → Badge.stories.js} +51 -4
  77. package/lib/components/Chip/{Chip.test.js → Badge.test.js} +15 -0
  78. package/lib/components/Chip/Chip.js +11 -56
  79. package/lib/components/CodeView/CodeView.stories.js +1 -1
  80. package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js +1 -1
  81. package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js +1 -1
  82. package/lib/components/ComboBoxField/ComboBoxField.stories.js +56 -13
  83. package/lib/components/ComboBoxField/ComboBoxField.test.js +61 -17
  84. package/lib/components/CopyText/CopyText.stories.js +1 -1
  85. package/lib/components/DataTable/DataTable.stories.js +1 -1
  86. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +11 -11
  87. package/lib/components/HelpHint/HelpHint.stories.js +1 -1
  88. package/lib/components/Icon/Icon.stories.js +1 -1
  89. package/lib/components/IconBadge/IconBadge.stories.js +1 -1
  90. package/lib/components/IconButton/IconButton.js +2 -2
  91. package/lib/components/IconButton/IconButton.stories.js +1 -1
  92. package/lib/components/IconButtonToggle/IconButtonToggle.stories.js +1 -1
  93. package/lib/components/Image/Image.stories.js +1 -1
  94. package/lib/components/Link/Link.stories.js +1 -1
  95. package/lib/components/ListItem/ListItem.stories.js +1 -1
  96. package/lib/components/ListView/ListView.stories.js +1 -1
  97. package/lib/components/Loader/Loader.stories.js +1 -1
  98. package/lib/components/Menu/Menu.stories.js +1 -1
  99. package/lib/components/Messages/Messages.stories.js +1 -1
  100. package/lib/components/Modal/Modal.stories.js +1 -1
  101. package/lib/components/MultivaluesField/MultivaluesField.js +23 -18
  102. package/lib/components/MultivaluesField/MultivaluesField.stories.js +224 -56
  103. package/lib/components/NavBar/NavBar.stories.js +1 -1
  104. package/lib/components/OverlayPanel/OverlayPanel.stories.js +268 -2
  105. package/lib/components/PopoverMenu/PopoverMenu.stories.js +1 -1
  106. package/lib/components/RequirementsList/RequirementsList.stories.js +1 -1
  107. package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +1 -1
  108. package/lib/components/ScrollBox/ScrollBox.stories.js +1 -1
  109. package/lib/components/Separator/Separator.stories.js +1 -1
  110. package/lib/components/Stepper/Stepper.stories.js +1 -1
  111. package/lib/components/Table/Table.stories.js +1 -1
  112. package/lib/components/Tabs/Tabs.stories.js +1 -1
  113. package/lib/components/Text/Text.stories.js +1 -1
  114. package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +1 -1
  115. package/lib/context/BadgeContext/index.js +3 -0
  116. package/lib/{styles → docs/design}/ColorDocumentation.stories.js +3 -3
  117. package/lib/{styles → docs/design}/ContainerSizes.stories.js +2 -2
  118. package/lib/{styles → docs/design}/Spacing.stories.js +4 -4
  119. package/lib/{styles → docs/design}/Typography.stories.js +4 -4
  120. package/lib/{styles → docs/theme}/ThemeDocumentation.js +1 -1
  121. package/lib/index.js +3 -0
  122. package/lib/recipes/ListAndPanel.stories.js +2 -1
  123. package/lib/styles/colors.js +1 -1
  124. package/lib/{templates → styles/templates}/Nav/HeaderBar.js +2 -2
  125. package/lib/{templates → styles/templates}/Nav/Nav.stories.js +1 -1
  126. package/lib/{templates → styles/templates}/Nav/NavData.js +1 -1
  127. package/lib/styles/variants/boxes.js +17 -1
  128. package/lib/styles/variants/buttons.js +26 -3
  129. package/package.json +1 -1
  130. package/NOTICE.html +0 -4665
  131. package/lib/cjs/components/Chip/ChipContext.js +0 -19
  132. package/lib/components/Chip/ChipContext.js +0 -3
@@ -2,13 +2,19 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
3
3
  import React, { useState, useRef } from 'react';
4
4
  import { Item } from '@react-stately/collections';
5
+ import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
6
+ import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
7
+ import CloseIcon from 'mdi-react/CloseIcon';
8
+ import CogIcon from 'mdi-react/CogIcon';
9
+ import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
5
10
  import { useOverlayPanelState } from '../../hooks';
6
11
  import OverlayPanel from './OverlayPanel';
7
- import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button } from '../../index';
12
+ import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, Avatar, IconButton, Breadcrumbs, Tabs, Tab, TextField, MultivaluesField, SwitchField, ColorField } from '../../index';
8
13
  import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
14
+ import { pingImg } from '../../utils/devUtils/constants/images';
9
15
  import { jsx as ___EmotionJSX } from "@emotion/react";
10
16
  export default {
11
- title: 'OverlayPanel',
17
+ title: 'Components/OverlayPanel',
12
18
  component: OverlayPanel,
13
19
  argTypes: {
14
20
  children: {
@@ -196,4 +202,264 @@ export var CustomWidth = function CustomWidth() {
196
202
  pt: "md"
197
203
  }, "Children render here."))))
198
204
  );
205
+ };
206
+ export var Expandable = function Expandable() {
207
+ var _useOverlayPanelState5 = useOverlayPanelState(),
208
+ state = _useOverlayPanelState5.state,
209
+ onClose = _useOverlayPanelState5.onClose;
210
+
211
+ var triggerRef = useRef();
212
+
213
+ var _useState3 = useState(false),
214
+ _useState4 = _slicedToArray(_useState3, 2),
215
+ isExpanded = _useState4[0],
216
+ setIsExpanded = _useState4[1];
217
+
218
+ var sx = {
219
+ overlayPanel: {
220
+ padding: 0,
221
+ transition: 'width 500ms, right 500ms'
222
+ },
223
+ header: {
224
+ height: '110px',
225
+ bg: '#F7F8FD',
226
+ infoAndButtonsContainer: {
227
+ justifyContent: 'space-between',
228
+ padding: '20px 20px 0 20px'
229
+ },
230
+ pingOneAuthorizeContainer: {
231
+ gap: '18px',
232
+ alignItems: 'center',
233
+ width: 'fit-content'
234
+ },
235
+ breadcrumbsContainer: {
236
+ marginLeft: '78px',
237
+ fontSize: 'md',
238
+ fontWeight: 500
239
+ }
240
+ },
241
+ contentContainer: {
242
+ padding: '15px 25px 0 25px'
243
+ },
244
+ tabs: {
245
+ justifyContent: 'center'
246
+ },
247
+ tabPanel: {
248
+ height: 'calc(100vh - 255px)',
249
+ overflow: 'scroll'
250
+ },
251
+ switchField: {
252
+ rowGap: 'xs',
253
+ display: 'grid !important',
254
+ gridTemplateColumns: 'max-content auto',
255
+ fontSize: 'sm',
256
+ fontWeight: 500,
257
+ color: 'text.secondary',
258
+ '> div': {
259
+ order: 2
260
+ }
261
+ },
262
+ colorField: {
263
+ width: '30px',
264
+ height: '20px'
265
+ },
266
+ tabContent: {
267
+ gap: 'md',
268
+ width: isExpanded ? '100%' : '400px',
269
+ transition: 'width 500ms'
270
+ },
271
+ footer: {
272
+ marginTop: 'auto',
273
+ padding: '15px 25px',
274
+ button: {
275
+ width: '65px',
276
+ height: '38px',
277
+ border: '0 !important'
278
+ }
279
+ }
280
+ };
281
+ var multivaluesFieldItems = [{
282
+ id: 1,
283
+ name: 'node 1',
284
+ key: 'node1'
285
+ }, {
286
+ id: 2,
287
+ name: 'node 2',
288
+ key: 'node2'
289
+ }];
290
+
291
+ var onCloseHandler = function onCloseHandler() {
292
+ return onClose(state, triggerRef);
293
+ };
294
+
295
+ var header = ___EmotionJSX(Box, {
296
+ sx: sx.header
297
+ }, ___EmotionJSX(Box, {
298
+ isRow: true,
299
+ sx: sx.header.infoAndButtonsContainer
300
+ }, ___EmotionJSX(Box, {
301
+ isRow: true,
302
+ sx: sx.header.pingOneAuthorizeContainer
303
+ }, ___EmotionJSX(Avatar, {
304
+ src: pingImg,
305
+ sx: {
306
+ width: '40px',
307
+ height: '40px'
308
+ }
309
+ }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
310
+ variant: "bodyStrong",
311
+ fontSize: "md"
312
+ }, "PingOne Authorize"), ___EmotionJSX(Text, {
313
+ variant: "subtitle",
314
+ fontSize: "sm"
315
+ }, "ID: kcdhaweyf2d"), ___EmotionJSX(Text, {
316
+ variant: "subtitle",
317
+ fontSize: "sm"
318
+ }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), ___EmotionJSX(Box, {
319
+ isRow: true
320
+ }, ___EmotionJSX(IconButton, {
321
+ "aria-label": "settings-icon",
322
+ size: 20
323
+ }, ___EmotionJSX(CogIcon, null)), ___EmotionJSX(IconButton, {
324
+ "aria-label": "expand-icon",
325
+ size: 20,
326
+ onPress: function onPress() {
327
+ return setIsExpanded(!isExpanded);
328
+ }
329
+ }, isExpanded ? ___EmotionJSX(ArrowCollapse, null) : ___EmotionJSX(ArrowTopRightBottomLeft, null)), ___EmotionJSX(IconButton, {
330
+ "aria-label": "close-icon",
331
+ size: 20,
332
+ onPress: onCloseHandler
333
+ }, ___EmotionJSX(CloseIcon, null)))), ___EmotionJSX(Box, {
334
+ sx: sx.header.breadcrumbsContainer
335
+ }, ___EmotionJSX(Breadcrumbs, {
336
+ icon: ChevronRightIcon
337
+ }, ___EmotionJSX(Item, {
338
+ key: "home",
339
+ "data-id": "home"
340
+ }, "Capability"), ___EmotionJSX(Item, {
341
+ key: "editGroups",
342
+ variant: "neutralText",
343
+ "data-id": "editGroups"
344
+ }, "Make Decision Request"))));
345
+
346
+ var generalTabContent = ___EmotionJSX(Box, {
347
+ sx: sx.tabContent
348
+ }, ___EmotionJSX(TextField, {
349
+ label: "Node Title",
350
+ defaultValue: "The Value of the Text Input"
351
+ }), ___EmotionJSX(TextField, {
352
+ label: "Node Description",
353
+ defaultValue: "The Value of the Text Input"
354
+ }), ___EmotionJSX(ColorField, {
355
+ value: "#EACE91",
356
+ label: "Node Background Color",
357
+ buttonProps: {
358
+ sx: sx.colorField
359
+ }
360
+ }), ___EmotionJSX(SwitchField, {
361
+ hintText: "Example Hint",
362
+ labelProps: {
363
+ sx: sx.switchField
364
+ },
365
+ label: "Expire Authentication Token",
366
+ value: "expire-authentication-token"
367
+ }), ___EmotionJSX(SwitchField, {
368
+ hintText: "Example Hint",
369
+ labelProps: {
370
+ sx: sx.switchField
371
+ },
372
+ label: "Expire Flow Instance Cache",
373
+ value: "expire-flow-instance-cache"
374
+ }), ___EmotionJSX(MultivaluesField, {
375
+ items: multivaluesFieldItems,
376
+ label: "Expire Node Instance Cache List",
377
+ inputProps: {
378
+ hintText: 'Example Hint'
379
+ }
380
+ }, function (item) {
381
+ return ___EmotionJSX(Item, {
382
+ key: item.key,
383
+ "data-id": item.name
384
+ }, item.name);
385
+ }));
386
+
387
+ var settingsTabContent = ___EmotionJSX(Box, {
388
+ sx: sx.tabContent
389
+ }, ___EmotionJSX(SwitchField, {
390
+ hintText: "Example Hint",
391
+ labelProps: {
392
+ sx: sx.switchField
393
+ },
394
+ label: "Expire Authentication Token",
395
+ value: "expire-authentication-token"
396
+ }), ___EmotionJSX(SwitchField, {
397
+ hintText: "Example Hint",
398
+ labelProps: {
399
+ sx: sx.switchField
400
+ },
401
+ label: "Expire Flow Instance Cache",
402
+ value: "expire-flow-instance-cache"
403
+ }), ___EmotionJSX(SwitchField, {
404
+ hintText: "Example Hint",
405
+ labelProps: {
406
+ sx: sx.switchField
407
+ },
408
+ label: "Expire Node Instance Cache",
409
+ value: "expire-node-instance-cache"
410
+ }));
411
+
412
+ var schemaTabContent = ___EmotionJSX(Box, {
413
+ sx: sx.tabContent
414
+ }, ___EmotionJSX(TextField, {
415
+ hintText: "Example Hint",
416
+ label: "Log field Title",
417
+ defaultValue: "The Value of the Text Input"
418
+ }), ___EmotionJSX(TextField, {
419
+ hintText: "Example Hint",
420
+ label: "Log field Description",
421
+ defaultValue: "The Value of the Text Input"
422
+ }));
423
+
424
+ var footer = ___EmotionJSX(Box, {
425
+ isRow: true,
426
+ sx: sx.footer
427
+ }, ___EmotionJSX(Button, {
428
+ onPress: onCloseHandler,
429
+ sx: sx.footer.button,
430
+ variant: "primary"
431
+ }, "Save"), ___EmotionJSX(Button, {
432
+ onPress: onCloseHandler,
433
+ sx: sx.footer.button,
434
+ variant: "text"
435
+ }, "Cancel"));
436
+
437
+ return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
438
+ // readers when an overlay opens.
439
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
440
+ ref: triggerRef,
441
+ onPress: state.open,
442
+ "aria-expanded": state.isOpen
443
+ }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, {
444
+ isOpen: state.isOpen,
445
+ state: state,
446
+ triggerRef: triggerRef,
447
+ sx: sx.overlayPanel,
448
+ size: isExpanded ? 'full' : 'medium'
449
+ }, header, ___EmotionJSX(Box, {
450
+ sx: sx.contentContainer
451
+ }, ___EmotionJSX(Tabs, {
452
+ tabListProps: sx.tabs,
453
+ tabPanelProps: sx.tabPanel
454
+ }, ___EmotionJSX(Tab, {
455
+ key: "tab1",
456
+ title: "General"
457
+ }, generalTabContent), ___EmotionJSX(Tab, {
458
+ key: "tab2",
459
+ title: "Settings"
460
+ }, settingsTabContent), ___EmotionJSX(Tab, {
461
+ key: "tab3",
462
+ title: "Schema"
463
+ }, schemaTabContent))), footer))
464
+ );
199
465
  };
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
4
4
  import { OverlayProvider, PopoverMenu, Button, Menu, Item, Text } from '../../index';
5
5
  import { jsx as ___EmotionJSX } from "@emotion/react";
6
6
  export default {
7
- title: 'PopoverMenu',
7
+ title: 'Components/PopoverMenu',
8
8
  component: PopoverMenu,
9
9
  parameters: {
10
10
  docs: {
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import RequirementsList from '.';
3
3
  import { jsx as ___EmotionJSX } from "@emotion/react";
4
4
  export default {
5
- title: 'RequirementsList',
5
+ title: 'Components/RequirementsList',
6
6
  component: RequirementsList,
7
7
  argTypes: {
8
8
  requirements: {
@@ -5,7 +5,7 @@ import RockerButtonGroup from '../RockerButtonGroup';
5
5
  import RockerButton from '../RockerButton';
6
6
  import { jsx as ___EmotionJSX } from "@emotion/react";
7
7
  export default {
8
- title: 'RockerButtonGroup',
8
+ title: 'Components/RockerButtonGroup',
9
9
  component: RockerButtonGroup,
10
10
  parameters: {
11
11
  docs: {
@@ -4,7 +4,7 @@ import ScrollBox from './ScrollBox';
4
4
  import Box from '../Box';
5
5
  import { jsx as ___EmotionJSX } from "@emotion/react";
6
6
  export default {
7
- title: 'ScrollBox',
7
+ title: 'Components/ScrollBox',
8
8
  component: ScrollBox,
9
9
  argTypes: {
10
10
  maxHeight: {
@@ -4,7 +4,7 @@ import Separator from './Separator';
4
4
  import Box from '../Box/Box';
5
5
  import { jsx as ___EmotionJSX } from "@emotion/react";
6
6
  export default {
7
- title: 'Separator',
7
+ title: 'Components/Separator',
8
8
  component: Separator
9
9
  };
10
10
  export var Default = function Default(_ref) {
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
3
3
  import { Stepper, Step, Text } from '../../index';
4
4
  import { jsx as ___EmotionJSX } from "@emotion/react";
5
5
  export default {
6
- title: 'Stepper',
6
+ title: 'Components/Stepper',
7
7
  component: Stepper,
8
8
  args: {
9
9
  items: undefined,
@@ -10,7 +10,7 @@ import TableCaption from '../TableCaption';
10
10
  import { Text } from '../../index';
11
11
  import { jsx as ___EmotionJSX } from "@emotion/react";
12
12
  export default {
13
- title: 'Table',
13
+ title: 'Components/Table',
14
14
  component: Table
15
15
  };
16
16
  var caption = 'Populations of Countries';
@@ -11,7 +11,7 @@ import Text from '../Text';
11
11
  import { Chip } from '../../index';
12
12
  import { jsx as ___EmotionJSX } from "@emotion/react";
13
13
  export default {
14
- title: 'Tabs',
14
+ title: 'Components/Tabs',
15
15
  component: Tabs,
16
16
  argTypes: {
17
17
  isDisabled: {},
@@ -5,7 +5,7 @@ import React from 'react';
5
5
  import { Box, Separator, Table, TableCell, TableBody, TableHead, TableRow, Text } from '../../index';
6
6
  import { jsx as ___EmotionJSX } from "@emotion/react";
7
7
  export default {
8
- title: 'Text',
8
+ title: 'Components/Text',
9
9
  component: Text,
10
10
  argTypes: {
11
11
  variant: {
@@ -6,7 +6,7 @@ import IconButton from '../IconButton';
6
6
  import Text from '../Text';
7
7
  import { jsx as ___EmotionJSX } from "@emotion/react";
8
8
  export default {
9
- title: 'TooltipTrigger',
9
+ title: 'Components/TooltipTrigger',
10
10
  component: TooltipTrigger
11
11
  };
12
12
  export var Default = function Default(args) {
@@ -0,0 +1,3 @@
1
+ import { createContext } from 'react';
2
+ var defaultValue = 'inherit';
3
+ export var BadgeContext = /*#__PURE__*/createContext(defaultValue);
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
- import { ColorSchema } from './ColorDocumentation';
3
- import Box from '../components/Box';
2
+ import { ColorSchema } from '../../styles/ColorDocumentation';
3
+ import Box from '../../components/Box';
4
4
  import { jsx as ___EmotionJSX } from "@emotion/react";
5
5
  export default {
6
- title: 'Color Schema',
6
+ title: 'Docs/Design/Color Schema',
7
7
  component: ColorSchema
8
8
  };
9
9
  export var Colors = function Colors() {
@@ -1,9 +1,9 @@
1
1
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
2
2
  import React from 'react';
3
- import { Box, Text } from '../index';
3
+ import { Box, Text } from '../../index';
4
4
  import { jsx as ___EmotionJSX } from "@emotion/react";
5
5
  export default {
6
- title: 'Design/Container Sizes'
6
+ title: 'Docs/Design/Container Sizes'
7
7
  };
8
8
  var containerArray = [{
9
9
  key: 'xs',
@@ -2,12 +2,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
3
  import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
4
4
  import React from 'react';
5
- import Text from '../components/Text';
6
- import scale from './spacing';
7
- import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '..';
5
+ import Text from '../../components/Text';
6
+ import scale from '../../styles/spacing';
7
+ import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '../..';
8
8
  import { jsx as ___EmotionJSX } from "@emotion/react";
9
9
  export default {
10
- title: 'Design/Spacing'
10
+ title: 'Docs/Design/Spacing'
11
11
  };
12
12
  var tableBodyStyles = {
13
13
  border: 'unset'
@@ -2,12 +2,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
3
  import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
4
4
  import React from 'react';
5
- import Text from '../components/Text';
6
- import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '..';
7
- import { fontWeights, fontSizes } from './text';
5
+ import Text from '../../components/Text';
6
+ import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '../..';
7
+ import { fontWeights, fontSizes } from '../../styles/text';
8
8
  import { jsx as ___EmotionJSX } from "@emotion/react";
9
9
  export default {
10
- title: 'Design/Typography'
10
+ title: 'Docs/Design/Typography'
11
11
  };
12
12
  var tableBodyStyles = {
13
13
  border: 'unset'
@@ -1,6 +1,6 @@
1
1
  import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
2
2
  import React from 'react';
3
- import theme from './theme';
3
+ import theme from '../../styles/theme';
4
4
  import { jsx as ___EmotionJSX } from "@emotion/react";
5
5
  export default (function () {
6
6
  return ___EmotionJSX("pre", null, _JSON$stringify(theme, null, ' '));
package/lib/index.js CHANGED
@@ -15,6 +15,7 @@ export { default as ArrayField } from './components/ArrayField';
15
15
  export * from './components/ArrayField';
16
16
  export { default as Avatar } from './components/Avatar';
17
17
  export * from './components/Avatar';
18
+ export { default as Badge } from './components/Chip/Badge';
18
19
  export { default as Box } from './components/Box';
19
20
  export * from './components/Box';
20
21
  export { default as Bracket } from './components/Bracket';
@@ -136,6 +137,8 @@ export { default as TableHead } from './components/TableHead';
136
137
  export * from './components/TableHead';
137
138
  export { default as TableRow } from './components/TableRow';
138
139
  export * from './components/TableRow';
140
+ export { default as TableCaption } from './components/TableCaption';
141
+ export * from './components/TableCaption';
139
142
  export { default as Tabs } from './components/Tabs';
140
143
  export * from './components/Tabs';
141
144
  export { default as Text } from './components/Text';
@@ -306,7 +306,8 @@ export var Default = function Default() {
306
306
  isOpen: panelState.isOpen,
307
307
  state: panelState,
308
308
  triggerRef: panelTriggerRef,
309
- p: 0
309
+ p: 0,
310
+ size: "large"
310
311
  }, panelState.isOpen && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FocusScope, {
311
312
  contain: true,
312
313
  restoreFocus: true,
@@ -76,7 +76,7 @@ var getDecorativeColor = function getDecorativeColor(index) {
76
76
  };
77
77
 
78
78
  export var decorative = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(11)).call(_context2, 0)).call(_context, function (_v, index) {
79
- return getDecorativeColor(index);
79
+ return index !== 4 ? getDecorativeColor(index) : '#e30080';
80
80
  });
81
81
  export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, function (color) {
82
82
  return chroma(color).darken(2).hex();
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
3
3
  import HelpCircleOutlineIcon from 'mdi-react/HelpCircleOutlineIcon';
4
4
  import MenuDownIcon from 'mdi-react/MenuDownIcon';
5
5
  import ExploreIcon from 'mdi-react/CompassOutlineIcon';
6
- import { WithSections as EnvironmentBreadcrumb } from '../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories';
7
- import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
6
+ import { WithSections as EnvironmentBreadcrumb } from '../../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories';
7
+ import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../../index';
8
8
  import { PersonIcon } from './NavData';
9
9
  import { jsx as ___EmotionJSX } from "@emotion/react";
10
10
 
@@ -1,7 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import React, { useState } from 'react';
3
3
  import GlobeIcon from 'mdi-react/GlobeIcon';
4
- import { Box, Link, NavBar, NavBarItem, NavBarSection, Separator, Text } from '../../index';
4
+ import { Box, Link, NavBar, NavBarItem, NavBarSection, Separator, Text } from '../../../index';
5
5
  import { logo, data, secondData, thirdData } from './NavData';
6
6
  import HeaderBar from './HeaderBar';
7
7
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -7,7 +7,7 @@ import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
7
7
  import Fingerprint from 'mdi-react/FingerprintIcon';
8
8
  import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
9
9
  import Earth from 'mdi-react/EarthIcon';
10
- import { NavBarItemButton } from '../../components/NavBarSection';
10
+ import { NavBarItemButton } from '../../../components/NavBarSection';
11
11
  import { jsx as ___EmotionJSX } from "@emotion/react";
12
12
 
13
13
  var Credentials = function Credentials(props) {
@@ -173,7 +173,10 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
173
173
  cursor: 'default',
174
174
  m: 5,
175
175
  mr: 10,
176
- ml: 0
176
+ ml: 0,
177
+ '& span': {
178
+ mr: '2px'
179
+ }
177
180
  });
178
181
 
179
182
  var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
@@ -188,6 +191,18 @@ var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
188
191
  borderColor: 'neutral.80'
189
192
  });
190
193
 
194
+ var itemChipWithSlot = _objectSpread(_objectSpread({}, readOnlyChip), {}, {
195
+ p: 3,
196
+ my: 0,
197
+ backgroundColor: 'white',
198
+ '& span': {
199
+ color: 'text.primary',
200
+ mr: '2px',
201
+ lineHeight: '16px'
202
+ },
203
+ maxHeight: '22px'
204
+ });
205
+
191
206
  var inputInContainerSlot = {
192
207
  position: 'absolute',
193
208
  bg: 'transparent',
@@ -386,6 +401,7 @@ export default {
386
401
  environmentChip: environmentChip,
387
402
  expandableRow: expandableRow,
388
403
  inputInContainerSlot: inputInContainerSlot,
404
+ itemChipWithSlot: itemChipWithSlot,
389
405
  textFieldInContainerSlot: textFieldInContainerSlot,
390
406
  fileInputFieldWrapper: fileInputFieldWrapper,
391
407
  listItem: listItem,
@@ -413,13 +413,16 @@ var quiet = {
413
413
  all: 'unset',
414
414
  display: 'flex'
415
415
  };
416
- var chipDeleteButton = {
416
+ var chipDeleteStandard = {
417
417
  borderRadius: '50%',
418
418
  cursor: 'pointer',
419
419
  height: 14,
420
- mx: '3px !important',
421
420
  p: 0,
422
421
  width: 14,
422
+ mx: '3px !important'
423
+ };
424
+
425
+ var chipDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
423
426
  '&.is-focused, &.is-hovered': _objectSpread({
424
427
  bg: 'accent.40'
425
428
  }, focusWithCroppedOutline),
@@ -427,7 +430,26 @@ var chipDeleteButton = {
427
430
  bg: 'accent.20',
428
431
  borderColor: 'accent.20'
429
432
  }
430
- };
433
+ });
434
+
435
+ var chipWithSlotDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
436
+ path: {
437
+ fill: 'neutral.40'
438
+ },
439
+ '&.is-focused': _objectSpread({}, defaultFocus),
440
+ '&.is-hovered': {
441
+ backgroundColor: '#e5e9f8 !important',
442
+ path: {
443
+ fill: 'neutral.40'
444
+ }
445
+ },
446
+ '&.is-pressed': {
447
+ 'path': {
448
+ fill: 'white'
449
+ },
450
+ bg: '#4462ED !important'
451
+ }
452
+ });
431
453
 
432
454
  var rocker = _objectSpread(_objectSpread({}, base), {}, {
433
455
  border: '0',
@@ -719,6 +741,7 @@ var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
719
741
  export default {
720
742
  accordionHeader: accordionHeader,
721
743
  chipDeleteButton: chipDeleteButton,
744
+ chipWithSlotDeleteButton: chipWithSlotDeleteButton,
722
745
  close: close,
723
746
  colorField: colorField,
724
747
  comboBox: comboBox,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.37.2",
3
+ "version": "1.38.0-alpha.1",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",