@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.
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +1 -1
- package/lib/cjs/components/AccordionGroup/AccordionGroup.stories.js +1 -1
- package/lib/cjs/components/AstroWrapper/AstroWrapper.js +3 -3
- package/lib/cjs/components/AstroWrapper/AstroWrapper.stories.js +1 -1
- package/lib/cjs/components/Avatar/Avatar.stories.js +1 -1
- package/lib/cjs/components/Box/Box.stories.js +1 -1
- package/lib/cjs/components/Bracket/Bracket.stories.js +1 -1
- package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +1 -1
- package/lib/cjs/components/Button/Button.stories.js +1 -1
- package/lib/cjs/components/Card/Card.stories.js +1 -1
- package/lib/cjs/components/Chip/Badge.js +146 -0
- package/lib/cjs/components/Chip/{Chip.stories.js → Badge.stories.js} +63 -14
- package/lib/cjs/components/Chip/{Chip.test.js → Badge.test.js} +17 -0
- package/lib/cjs/components/Chip/Chip.js +11 -72
- package/lib/cjs/components/CodeView/CodeView.stories.js +1 -1
- package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.stories.js +1 -1
- package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js +1 -1
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +54 -12
- package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +59 -16
- package/lib/cjs/components/CopyText/CopyText.stories.js +1 -1
- package/lib/cjs/components/DataTable/DataTable.stories.js +1 -1
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +11 -11
- package/lib/cjs/components/HelpHint/HelpHint.stories.js +1 -1
- package/lib/cjs/components/Icon/Icon.stories.js +1 -1
- package/lib/cjs/components/IconBadge/IconBadge.stories.js +1 -1
- package/lib/cjs/components/IconButton/IconButton.js +2 -2
- package/lib/cjs/components/IconButton/IconButton.stories.js +1 -1
- package/lib/cjs/components/IconButtonToggle/IconButtonToggle.stories.js +1 -1
- package/lib/cjs/components/Image/Image.stories.js +1 -1
- package/lib/cjs/components/Link/Link.stories.js +1 -1
- package/lib/cjs/components/ListItem/ListItem.stories.js +1 -1
- package/lib/cjs/components/ListView/ListView.stories.js +1 -1
- package/lib/cjs/components/Loader/Loader.stories.js +1 -1
- package/lib/cjs/components/Menu/Menu.stories.js +1 -1
- package/lib/cjs/components/Messages/Messages.stories.js +1 -1
- package/lib/cjs/components/Modal/Modal.stories.js +1 -1
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +24 -18
- package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js +236 -65
- package/lib/cjs/components/NavBar/NavBar.stories.js +1 -1
- package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +273 -3
- package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.js +1 -1
- package/lib/cjs/components/RequirementsList/RequirementsList.stories.js +1 -1
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +1 -1
- package/lib/cjs/components/ScrollBox/ScrollBox.stories.js +1 -1
- package/lib/cjs/components/Separator/Separator.stories.js +1 -1
- package/lib/cjs/components/Stepper/Stepper.stories.js +1 -1
- package/lib/cjs/components/Table/Table.stories.js +1 -1
- package/lib/cjs/components/Tabs/Tabs.stories.js +1 -1
- package/lib/cjs/components/Text/Text.stories.js +1 -1
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +1 -1
- package/lib/cjs/context/BadgeContext/index.js +15 -0
- package/lib/cjs/{styles → docs/design}/ColorDocumentation.stories.js +3 -3
- package/lib/cjs/{styles → docs/design}/ContainerSizes.stories.js +2 -2
- package/lib/cjs/{styles → docs/design}/Spacing.stories.js +4 -4
- package/lib/cjs/{styles → docs/design}/Typography.stories.js +4 -4
- package/lib/cjs/{styles → docs/theme}/ThemeDocumentation.js +1 -1
- package/lib/cjs/index.js +41 -8
- package/lib/cjs/recipes/ListAndPanel.stories.js +2 -1
- package/lib/cjs/styles/colors.js +1 -1
- package/lib/cjs/{templates → styles/templates}/Nav/HeaderBar.js +2 -2
- package/lib/cjs/{templates → styles/templates}/Nav/Nav.stories.js +1 -1
- package/lib/cjs/{templates → styles/templates}/Nav/NavData.js +1 -1
- package/lib/cjs/styles/variants/boxes.js +17 -1
- package/lib/cjs/styles/variants/buttons.js +26 -3
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +1 -1
- package/lib/components/AccordionGroup/AccordionGroup.stories.js +1 -1
- package/lib/components/AstroWrapper/AstroWrapper.js +3 -3
- package/lib/components/AstroWrapper/AstroWrapper.stories.js +1 -1
- package/lib/components/Avatar/Avatar.stories.js +1 -1
- package/lib/components/Box/Box.stories.js +1 -1
- package/lib/components/Bracket/Bracket.stories.js +1 -1
- package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +1 -1
- package/lib/components/Button/Button.stories.js +1 -1
- package/lib/components/Card/Card.stories.js +1 -1
- package/lib/components/Chip/Badge.js +109 -0
- package/lib/components/Chip/{Chip.stories.js → Badge.stories.js} +51 -4
- package/lib/components/Chip/{Chip.test.js → Badge.test.js} +15 -0
- package/lib/components/Chip/Chip.js +11 -56
- package/lib/components/CodeView/CodeView.stories.js +1 -1
- package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js +1 -1
- package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js +1 -1
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +56 -13
- package/lib/components/ComboBoxField/ComboBoxField.test.js +61 -17
- package/lib/components/CopyText/CopyText.stories.js +1 -1
- package/lib/components/DataTable/DataTable.stories.js +1 -1
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +11 -11
- package/lib/components/HelpHint/HelpHint.stories.js +1 -1
- package/lib/components/Icon/Icon.stories.js +1 -1
- package/lib/components/IconBadge/IconBadge.stories.js +1 -1
- package/lib/components/IconButton/IconButton.js +2 -2
- package/lib/components/IconButton/IconButton.stories.js +1 -1
- package/lib/components/IconButtonToggle/IconButtonToggle.stories.js +1 -1
- package/lib/components/Image/Image.stories.js +1 -1
- package/lib/components/Link/Link.stories.js +1 -1
- package/lib/components/ListItem/ListItem.stories.js +1 -1
- package/lib/components/ListView/ListView.stories.js +1 -1
- package/lib/components/Loader/Loader.stories.js +1 -1
- package/lib/components/Menu/Menu.stories.js +1 -1
- package/lib/components/Messages/Messages.stories.js +1 -1
- package/lib/components/Modal/Modal.stories.js +1 -1
- package/lib/components/MultivaluesField/MultivaluesField.js +23 -18
- package/lib/components/MultivaluesField/MultivaluesField.stories.js +224 -56
- package/lib/components/NavBar/NavBar.stories.js +1 -1
- package/lib/components/OverlayPanel/OverlayPanel.stories.js +268 -2
- package/lib/components/PopoverMenu/PopoverMenu.stories.js +1 -1
- package/lib/components/RequirementsList/RequirementsList.stories.js +1 -1
- package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +1 -1
- package/lib/components/ScrollBox/ScrollBox.stories.js +1 -1
- package/lib/components/Separator/Separator.stories.js +1 -1
- package/lib/components/Stepper/Stepper.stories.js +1 -1
- package/lib/components/Table/Table.stories.js +1 -1
- package/lib/components/Tabs/Tabs.stories.js +1 -1
- package/lib/components/Text/Text.stories.js +1 -1
- package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +1 -1
- package/lib/context/BadgeContext/index.js +3 -0
- package/lib/{styles → docs/design}/ColorDocumentation.stories.js +3 -3
- package/lib/{styles → docs/design}/ContainerSizes.stories.js +2 -2
- package/lib/{styles → docs/design}/Spacing.stories.js +4 -4
- package/lib/{styles → docs/design}/Typography.stories.js +4 -4
- package/lib/{styles → docs/theme}/ThemeDocumentation.js +1 -1
- package/lib/index.js +3 -0
- package/lib/recipes/ListAndPanel.stories.js +2 -1
- package/lib/styles/colors.js +1 -1
- package/lib/{templates → styles/templates}/Nav/HeaderBar.js +2 -2
- package/lib/{templates → styles/templates}/Nav/Nav.stories.js +1 -1
- package/lib/{templates → styles/templates}/Nav/NavData.js +1 -1
- package/lib/styles/variants/boxes.js +17 -1
- package/lib/styles/variants/buttons.js +26 -3
- package/package.json +1 -1
- package/NOTICE.html +0 -4665
- package/lib/cjs/components/Chip/ChipContext.js +0 -19
- 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 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';
|
@@ -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) {
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { ColorSchema } from '
|
3
|
-
import Box from '
|
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 '
|
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 '
|
6
|
-
import scale from '
|
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 '
|
6
|
-
import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '
|
7
|
-
import { fontWeights, fontSizes } from '
|
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 '
|
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,
|
package/lib/styles/colors.js
CHANGED
@@ -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 '
|
7
|
-
import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '
|
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 '
|
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 '
|
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
|
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,
|