@pingux/astro 2.7.0-alpha.2 → 2.7.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 (69) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/NOTICE.html +12804 -0
  3. package/lib/cjs/components/IconButton/IconButton.js +38 -2
  4. package/lib/cjs/components/IconButton/IconButton.stories.js +34 -2
  5. package/lib/cjs/components/ListView/ListView.js +9 -0
  6. package/lib/cjs/components/ListView/ListView.stories.js +80 -34
  7. package/lib/cjs/components/ListViewItem/ListViewItem.styles.js +1 -6
  8. package/lib/cjs/components/Menu/Menu.js +60 -7
  9. package/lib/cjs/components/Menu/Menu.stories.js +56 -2
  10. package/lib/cjs/components/SwitchField/SwitchField.js +54 -12
  11. package/lib/cjs/components/SwitchField/SwitchField.stories.js +34 -2
  12. package/lib/cjs/components/SwitchField/SwitchField.test.js +5 -4
  13. package/lib/cjs/index.js +1 -33
  14. package/lib/cjs/utils/docUtils/ariaAttributes.js +1 -2
  15. package/lib/cjs/utils/docUtils/hoverProps.js +2 -7
  16. package/lib/components/IconButton/IconButton.js +38 -2
  17. package/lib/components/IconButton/IconButton.stories.js +34 -2
  18. package/lib/components/ListView/ListView.js +9 -0
  19. package/lib/components/ListView/ListView.stories.js +82 -35
  20. package/lib/components/ListViewItem/ListViewItem.styles.js +1 -6
  21. package/lib/components/Menu/Menu.js +60 -7
  22. package/lib/components/Menu/Menu.stories.js +57 -2
  23. package/lib/components/SwitchField/SwitchField.js +55 -14
  24. package/lib/components/SwitchField/SwitchField.stories.js +34 -2
  25. package/lib/components/SwitchField/SwitchField.test.js +5 -4
  26. package/lib/index.js +1 -7
  27. package/lib/utils/docUtils/ariaAttributes.js +1 -1
  28. package/lib/utils/docUtils/hoverProps.js +2 -7
  29. package/package.json +1 -1
  30. package/lib/cjs/components/IconButton/iconButtonAttributes.js +0 -100
  31. package/lib/cjs/components/Menu/menuAttributes.js +0 -104
  32. package/lib/cjs/components/SwitchField/switchFieldAttributes.js +0 -191
  33. package/lib/cjs/experimental/StyledListItem/StyledListItem.js +0 -159
  34. package/lib/cjs/experimental/StyledListItem/StyledListItem.stories.js +0 -155
  35. package/lib/cjs/experimental/StyledListItem/StyledListItem.test.js +0 -83
  36. package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.js +0 -34
  37. package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.stories.js +0 -31
  38. package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.test.js +0 -25
  39. package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.js +0 -37
  40. package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.stories.js +0 -36
  41. package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.test.js +0 -59
  42. package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.js +0 -32
  43. package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +0 -41
  44. package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.test.js +0 -25
  45. package/lib/cjs/experimental/StyledListItem/styledListItemAttributes.js +0 -81
  46. package/lib/cjs/experimental/recipes/ListAndPanel.stories.js +0 -370
  47. package/lib/cjs/experimental/recipes/ScrollableListView.stories.js +0 -108
  48. package/lib/cjs/experimental/recipes/items.js +0 -126
  49. package/lib/cjs/utils/docUtils/docArgTypes.js +0 -41
  50. package/lib/components/IconButton/iconButtonAttributes.js +0 -91
  51. package/lib/components/Menu/menuAttributes.js +0 -95
  52. package/lib/components/SwitchField/switchFieldAttributes.js +0 -182
  53. package/lib/experimental/StyledListItem/StyledListItem.js +0 -146
  54. package/lib/experimental/StyledListItem/StyledListItem.stories.js +0 -140
  55. package/lib/experimental/StyledListItem/StyledListItem.test.js +0 -74
  56. package/lib/experimental/StyledListItem/controls/ListItemEditButton.js +0 -25
  57. package/lib/experimental/StyledListItem/controls/ListItemEditButton.stories.js +0 -21
  58. package/lib/experimental/StyledListItem/controls/ListItemEditButton.test.js +0 -22
  59. package/lib/experimental/StyledListItem/controls/ListItemMenu.js +0 -28
  60. package/lib/experimental/StyledListItem/controls/ListItemMenu.stories.js +0 -26
  61. package/lib/experimental/StyledListItem/controls/ListItemMenu.test.js +0 -56
  62. package/lib/experimental/StyledListItem/controls/ListItemSwitchField.js +0 -23
  63. package/lib/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +0 -32
  64. package/lib/experimental/StyledListItem/controls/ListItemSwitchField.test.js +0 -22
  65. package/lib/experimental/StyledListItem/styledListItemAttributes.js +0 -72
  66. package/lib/experimental/recipes/ListAndPanel.stories.js +0 -353
  67. package/lib/experimental/recipes/ScrollableListView.stories.js +0 -93
  68. package/lib/experimental/recipes/items.js +0 -117
  69. package/lib/utils/docUtils/docArgTypes.js +0 -29
@@ -1,91 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
12
- import CreateIcon from '@pingux/mdi-react/CreateIcon';
13
- import PropTypes from 'prop-types';
14
- import { descriptions as ariaDescriptions } from '../../utils/docUtils/ariaAttributes';
15
- import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
16
- var descriptions = {
17
- icon: 'The icon to render. List of icons at https://materialdesignicons.com/',
18
- isDisabled: 'Whether the icon is disabled.',
19
- onPress: 'Handler that is called when the press is released over the target. (e: PressEvent) => void',
20
- onPressChange: 'Handler that is called when the press state changes. (isPressed: boolean) => void',
21
- onPressEnd: 'Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. (e: PressEvent) => void',
22
- onPressStart: 'Handler that is called when a press interaction starts. (e: PressEvent) => void',
23
- onPressUp: 'Handler that is called when a press is released over the target, regardless of whether it started on the target or not. (e: PressEvent) => void',
24
- title: 'Content will be displayed in a tooltip on hover or focus.',
25
- variant: 'Styling to apply to the IconButton.'
26
- };
27
- export var iconButtonArgTypes = {
28
- icon: {
29
- control: {
30
- type: 'none'
31
- },
32
- defaultValue: CreateIcon,
33
- description: descriptions.icon
34
- },
35
- title: {
36
- control: {
37
- type: 'text'
38
- },
39
- description: descriptions.title
40
- },
41
- 'aria-label': {
42
- control: {
43
- type: 'text'
44
- },
45
- description: ariaDescriptions.ariaLabel
46
- },
47
- isDisabled: _objectSpread({
48
- description: descriptions.isDisabled
49
- }, booleanArg),
50
- variant: {
51
- control: {
52
- type: 'select',
53
- options: ['base', 'inverted', 'invertedSquare', 'square']
54
- },
55
- defaultValue: 'base',
56
- description: descriptions.variant
57
- },
58
- size: {
59
- control: {
60
- type: 'select',
61
- options: ['xs', 'sm', 'md']
62
- },
63
- defaultValue: 'sm'
64
- },
65
- onPress: _objectSpread({
66
- description: descriptions.onPress
67
- }, funcArg),
68
- onPressStart: _objectSpread({
69
- description: descriptions.onPressStart
70
- }, funcArg),
71
- onPressEnd: _objectSpread({
72
- description: descriptions.onPressEnd
73
- }, funcArg),
74
- onPressChange: _objectSpread({
75
- description: descriptions.onPressChange
76
- }, funcArg),
77
- onPressUp: _objectSpread({
78
- description: descriptions.onPressUp
79
- }, funcArg)
80
- };
81
- export var iconButtonPropTypes = {
82
- variant: PropTypes.string,
83
- 'aria-label': PropTypes.string,
84
- title: PropTypes.string,
85
- onPress: PropTypes.func,
86
- onPressStart: PropTypes.func,
87
- onPressEnd: PropTypes.func,
88
- onPressChange: PropTypes.func,
89
- onPressUp: PropTypes.func,
90
- isDisabled: PropTypes.bool
91
- };
@@ -1,95 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
12
- import PropTypes from 'prop-types';
13
- import { ariaAttributeBaseArgTypes, ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
14
- import { booleanArg, funcArg, stringOrStringArray } from '../../utils/docUtils/docArgTypes';
15
- import { onHoverArgTypes, onHoverPropTypes } from '../../utils/docUtils/hoverProps';
16
- var descriptions = {
17
- selectionMode: 'The type of selection that is allowed.',
18
- disabledKeys: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.',
19
- defaultSelectedKeys: "\n The initial selected keys in the collection (uncontrolled).\n `defaultSelectedKeys=\"all\"` can be used to select every key.\n ",
20
- selectedKeys: "\n The currently selected keys in the collection (controlled).\n `selectedKeys=\"all\"` can be used to select every key.\n ",
21
- isDisabled: 'Whether the item is disabled. ',
22
- isSelected: 'Whether the menu item is selected.',
23
- isNotFocusedOnHover: 'Whether menu item should receive focus state on hover.',
24
- onAction: 'Handler that is called when an item is selected. `(key: Key) => void`',
25
- onSelectionChange: "Handler that is called when the selection changes. Does not fire when `selectionMode=\"none\"`.\n `(keys: Selection) => any`\n "
26
- };
27
- export var menuArgTypes = _objectSpread(_objectSpread({
28
- onAction: _objectSpread({
29
- description: descriptions.onAction
30
- }, funcArg),
31
- onSelectionChange: _objectSpread({
32
- description: descriptions.onSelectionChange
33
- }, funcArg),
34
- selectionMode: {
35
- description: descriptions.selectionMode,
36
- control: {
37
- type: 'radio',
38
- options: ['none', 'single', 'multiple'],
39
- defaultValue: 'none'
40
- },
41
- type: {
42
- summary: 'none, single, multiple'
43
- }
44
- },
45
- isDisabled: _objectSpread({
46
- description: descriptions.isDisabled
47
- }, booleanArg),
48
- isNotFocusedOnHover: _objectSpread({
49
- description: descriptions.isNotFocusedOnHover
50
- }, booleanArg),
51
- isSelected: _objectSpread(_objectSpread({}, booleanArg), {}, {
52
- control: {
53
- type: 'none'
54
- },
55
- description: descriptions.isSelected
56
- }),
57
- disabledKeys: {
58
- control: {
59
- type: 'none'
60
- },
61
- description: descriptions.disabledKeys,
62
- type: {
63
- summary: stringOrStringArray
64
- }
65
- },
66
- defaultSelectedKeys: {
67
- control: {
68
- type: 'none'
69
- },
70
- description: descriptions.defaultSelectedKeys,
71
- type: {
72
- summary: stringOrStringArray
73
- }
74
- },
75
- selectedKeys: {
76
- control: {
77
- type: 'none'
78
- },
79
- type: {
80
- summary: stringOrStringArray
81
- },
82
- description: descriptions.selectedKeys
83
- }
84
- }, ariaAttributeBaseArgTypes), onHoverArgTypes);
85
- export var menuPropTypes = _objectSpread(_objectSpread({
86
- selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
87
- disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
88
- defaultSelectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
89
- selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
90
- isDisabled: PropTypes.bool,
91
- isSelected: PropTypes.bool,
92
- isNotFocusedOnHover: PropTypes.bool,
93
- onAction: PropTypes.func,
94
- onSelectionChange: PropTypes.func
95
- }, ariaAttributesBasePropTypes), onHoverPropTypes);
@@ -1,182 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
- var _context;
11
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
13
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
14
- import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
15
- import PropTypes from 'prop-types';
16
- import statuses from '../../utils/devUtils/constants/statuses';
17
- import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
18
- import { booleanArg, docArgTypes, funcArg } from '../../utils/docUtils/docArgTypes';
19
- import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
20
- import { statusPropTypes } from '../../utils/docUtils/statusProp';
21
- var descriptions = {
22
- className: 'A list of class names to apply to the input element.',
23
- hasAutoFocus: 'Whether the element should receive focus on render.',
24
- helperText: 'Text rendered below the input.',
25
- hintText: 'If present this prop will cause a help hint to render in the label of the field.',
26
- id: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
27
- isDefaultSelected: 'Whether the element should be selected (uncontrolled).',
28
- isDisabled: 'Whether the field is disabled.',
29
- isReadOnly: 'Whether the input can be selected, but not changed by the user.',
30
- isRequired: 'Whether user input is required on the input before form submission.',
31
- isSelected: 'Whether the element should be selected (controlled).',
32
- label: 'The rendered label for the field.',
33
- name: 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).',
34
- onBlur: 'Handler that is called when the element loses focus.',
35
- onChange: "Handler that is called when the element's selection state changes.",
36
- onFocus: 'Handler that is called when the element receives focus.',
37
- onFocusChange: "Handler that is called when the element's focus status changes.",
38
- onKeyDown: 'Handler that is called when a key is pressed.',
39
- onKeyUp: 'Handler that is called when a key is released.',
40
- status: 'Determines the textarea status indicator and helper text styling.',
41
- value: 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).'
42
- };
43
- var string = docArgTypes.string,
44
- stringArray = docArgTypes.stringArray,
45
- text = docArgTypes.text,
46
- node = docArgTypes.node;
47
- export var switchFieldArgTypes = {
48
- className: {
49
- type: {
50
- summary: _concatInstanceProperty(_context = "".concat(string, " | ")).call(_context, stringArray)
51
- },
52
- description: descriptions.className
53
- },
54
- hasAutoFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
55
- description: descriptions.hasAutoFocus
56
- }),
57
- helperText: {
58
- control: {
59
- type: text
60
- },
61
- type: {
62
- summary: node
63
- },
64
- description: descriptions.helperText
65
- },
66
- hintText: {
67
- control: {
68
- type: text
69
- },
70
- type: {
71
- summary: string
72
- },
73
- description: descriptions.hintText
74
- },
75
- id: {
76
- control: {
77
- type: text
78
- },
79
- type: {
80
- summary: string
81
- },
82
- description: descriptions.id
83
- },
84
- isDefaultSelected: _objectSpread(_objectSpread({}, booleanArg), {}, {
85
- description: descriptions.isDefaultSelected
86
- }),
87
- isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
88
- description: descriptions.isDisabled
89
- }),
90
- isReadOnly: _objectSpread(_objectSpread({}, booleanArg), {}, {
91
- description: descriptions.isReadOnly
92
- }),
93
- isRequired: _objectSpread(_objectSpread({}, booleanArg), {}, {
94
- description: descriptions.isRequired
95
- }),
96
- isSelected: {
97
- control: {
98
- type: 'none'
99
- },
100
- type: {
101
- summary: string
102
- },
103
- description: descriptions.isSelected
104
- },
105
- label: {
106
- control: {
107
- type: text
108
- },
109
- type: {
110
- summary: string
111
- },
112
- defaultValue: 'Example Label',
113
- description: descriptions.label
114
- },
115
- name: {
116
- control: {
117
- type: text
118
- },
119
- type: {
120
- summary: string
121
- },
122
- description: descriptions.name
123
- },
124
- onBlur: _objectSpread(_objectSpread({}, funcArg), {}, {
125
- description: descriptions.onBlur
126
- }),
127
- onChange: _objectSpread(_objectSpread({}, funcArg), {}, {
128
- description: descriptions.onChange
129
- }),
130
- onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
131
- description: descriptions.onFocus
132
- }),
133
- onFocusChange: _objectSpread(_objectSpread({}, funcArg), {}, {
134
- description: descriptions.onFocusChange
135
- }),
136
- onKeyDown: _objectSpread(_objectSpread({}, funcArg), {}, {
137
- description: descriptions.onKeyDown
138
- }),
139
- onKeyUp: _objectSpread(_objectSpread({}, funcArg), {}, {
140
- description: descriptions.onKeyUp
141
- }),
142
- value: {
143
- defaultValue: 'my-switch',
144
- control: {
145
- type: text
146
- },
147
- type: {
148
- summary: string
149
- },
150
- description: descriptions.value
151
- },
152
- status: {
153
- control: {
154
- type: 'select',
155
- options: statuses
156
- },
157
- defaultValue: statuses.DEFAULT,
158
- description: descriptions.status
159
- }
160
- };
161
- export var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
162
- className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
163
- hasAutoFocus: PropTypes.bool,
164
- helperText: PropTypes.node,
165
- hintText: PropTypes.string,
166
- id: PropTypes.string,
167
- isDefaultSelected: PropTypes.bool,
168
- isDisabled: PropTypes.bool,
169
- isReadOnly: PropTypes.bool,
170
- isRequired: PropTypes.bool,
171
- isSelected: PropTypes.bool,
172
- label: PropTypes.node,
173
- name: PropTypes.string,
174
- onBlur: PropTypes.func,
175
- onChange: PropTypes.func,
176
- onFocus: PropTypes.func,
177
- onFocusChange: PropTypes.func,
178
- onKeyDown: PropTypes.func,
179
- onKeyUp: PropTypes.func,
180
- status: PropTypes.oneOf(_Object$values(statuses)),
181
- value: PropTypes.string
182
- }, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes), statusPropTypes);
@@ -1,146 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
10
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
11
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
12
- var _excluded = ["children", "className", "details", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
13
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
14
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
16
- import React, { forwardRef } from 'react';
17
- import { useHover } from '@react-aria/interactions';
18
- import { useStatusClasses } from '../../hooks';
19
- import { Box, Icon, Text } from '../../index';
20
- import { styledListItemPropTypes } from './styledListItemAttributes';
21
- import { jsx as ___EmotionJSX } from "@emotion/react";
22
- var sx = {
23
- container: {
24
- m: 1,
25
- minHeight: 72,
26
- '&.is-hovered': {
27
- bg: 'white',
28
- cursor: 'pointer'
29
- }
30
- },
31
- controls: {
32
- alignSelf: 'center',
33
- ml: 'auto',
34
- pr: 'sm'
35
- },
36
- details: {
37
- alignItems: 'center'
38
- },
39
- icon: {
40
- width: 25,
41
- color: 'accent.40'
42
- },
43
- rightOfDetails: {
44
- alignSelf: 'center',
45
- ml: 'sm'
46
- },
47
- subtitle: {
48
- alignSelf: 'start',
49
- fontSize: 'sm',
50
- lineHeight: '16px',
51
- my: '1px'
52
- },
53
- text: {
54
- ml: 'md'
55
- },
56
- title: {
57
- alignSelf: 'start',
58
- fontSize: 'md'
59
- },
60
- wrapper: {
61
- cursor: 'pointer',
62
- display: 'flex',
63
- flex: '1 1 0px',
64
- ml: 'md'
65
- }
66
- };
67
- export var LIST_ITEM_ICON = '-list-item-icon';
68
- var StyledListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
69
- var _context, _context2;
70
- var children = _ref.children,
71
- className = _ref.className,
72
- _ref$details = _ref.details,
73
- details = _ref$details === void 0 ? {} : _ref$details,
74
- isHovered = _ref.isHovered,
75
- isSelected = _ref.isSelected,
76
- linkProps = _ref.linkProps,
77
- onHoverChange = _ref.onHoverChange,
78
- onHoverEnd = _ref.onHoverEnd,
79
- onHoverStart = _ref.onHoverStart,
80
- slots = _ref.slots,
81
- others = _objectWithoutProperties(_ref, _excluded);
82
- var icon = details.icon,
83
- subtext = details.subtext,
84
- text = details.text;
85
- var shouldUseDefaultHover = isHovered === undefined;
86
- var _useHover = useHover({
87
- onHoverChange: onHoverChange,
88
- onHoverEnd: onHoverEnd,
89
- onHoverStart: onHoverStart
90
- }),
91
- hoverProps = _useHover.hoverProps,
92
- defaultIsHovered = _useHover.isHovered;
93
- var _useStatusClasses = useStatusClasses(className, {
94
- isHovered: shouldUseDefaultHover ? defaultIsHovered : isHovered,
95
- isSelected: isSelected
96
- }),
97
- classNames = _useStatusClasses.classNames;
98
- var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfDetails ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
99
- ml: 0
100
- }) : sx.wrapper;
101
- var textStyles = slots !== null && slots !== void 0 && slots.leftOfDetails ? _objectSpread(_objectSpread({}, sx.text), {}, {
102
- ml: 0
103
- }) : sx.text;
104
- var renderIcon = ___EmotionJSX(Box, {
105
- sx: sx.icon
106
- }, icon && ___EmotionJSX(Icon, {
107
- icon: icon,
108
- size: "md",
109
- title: {
110
- id: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON),
111
- name: _concatInstanceProperty(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
112
- }
113
- }));
114
- var renderDetails = ___EmotionJSX(Box, {
115
- isRow: true,
116
- sx: sx.details
117
- }, (slots === null || slots === void 0 ? void 0 : slots.leftOfDetails) || renderIcon, ___EmotionJSX(Box, {
118
- sx: textStyles
119
- }, text && ___EmotionJSX(Text, {
120
- variant: "bodyStrong",
121
- sx: sx.title
122
- }, text), subtext && ___EmotionJSX(Text, {
123
- variant: "subtitle",
124
- sx: sx.subtitle
125
- }, subtext)));
126
- return ___EmotionJSX(Box, _extends({
127
- className: classNames,
128
- ref: ref,
129
- sx: sx.container
130
- }, hoverProps, others), ___EmotionJSX(Box, {
131
- isRow: true,
132
- sx: wrapperStyles
133
- }, renderDetails, (slots === null || slots === void 0 ? void 0 : slots.rightOfDetails) && ___EmotionJSX(Box, {
134
- isRow: true,
135
- alignSelf: "center",
136
- ml: "md"
137
- }, slots.rightOfDetails), ___EmotionJSX(Box, {
138
- isRow: true,
139
- gap: "sm",
140
- alignItems: "center",
141
- sx: sx.controls
142
- }, children)));
143
- });
144
- StyledListItem.propTypes = styledListItemPropTypes;
145
- StyledListItem.displayName = 'StyledListItem';
146
- export default StyledListItem;
@@ -1,140 +0,0 @@
1
- import React from 'react';
2
- import { Item } from 'react-stately';
3
- import AccountIcon from '@pingux/mdi-react/AccountIcon';
4
- import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
5
- import DocsLayout from '../../../.storybook/storybookDocsLayout';
6
- import { Badge, Box, ListItemEditButton, ListItemMenu, ListItemSwitchField, Separator, StyledListItem, Text } from '../../index';
7
- import StyledListItemReadme from './StyledListItem.mdx';
8
- import { styledListItemArgTypes } from './styledListItemAttributes';
9
- import { jsx as ___EmotionJSX } from "@emotion/react";
10
- export default {
11
- title: 'Experimental/StyledListItem',
12
- component: StyledListItem,
13
- parameters: {
14
- docs: {
15
- page: function page() {
16
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(StyledListItemReadme, null), ___EmotionJSX(DocsLayout, null));
17
- },
18
- source: {
19
- type: 'code'
20
- }
21
- }
22
- },
23
- argTypes: styledListItemArgTypes
24
- };
25
- var Wrapper = function Wrapper(_ref) {
26
- var children = _ref.children;
27
- return ___EmotionJSX(Box, {
28
- sx: {
29
- bg: 'accent.99'
30
- }
31
- }, ___EmotionJSX(Separator, {
32
- margin: 0
33
- }), children, ___EmotionJSX(Separator, {
34
- margin: 0
35
- }));
36
- };
37
- export var Default = function Default() {
38
- return ___EmotionJSX(Wrapper, null, ___EmotionJSX(StyledListItem, {
39
- details: {
40
- icon: AccountIcon,
41
- text: 'Fons Vernall'
42
- }
43
- }));
44
- };
45
- export var WithSubtext = function WithSubtext() {
46
- return ___EmotionJSX(Wrapper, null, ___EmotionJSX(StyledListItem, {
47
- details: {
48
- icon: AccountIcon,
49
- subtext: 'rad_developer@pingidentity.com',
50
- text: 'Fons Vernall'
51
- }
52
- }));
53
- };
54
- export var WithControls = function WithControls() {
55
- return ___EmotionJSX(Wrapper, null, ___EmotionJSX(StyledListItem, {
56
- details: {
57
- icon: FormSelectIcon,
58
- text: 'Fons Vernall'
59
- }
60
- }, ___EmotionJSX(ListItemEditButton, null), ___EmotionJSX(ListItemSwitchField, null), ___EmotionJSX(ListItemMenu, null, ___EmotionJSX(Item, {
61
- key: "enable"
62
- }, "Enable user"), ___EmotionJSX(Item, {
63
- key: "disable"
64
- }, "Disable user"), ___EmotionJSX(Item, {
65
- key: "delete"
66
- }, "Delete user"))));
67
- };
68
- export var WithRightOfDetailsSlot = function WithRightOfDetailsSlot() {
69
- var renderRightOfDetails = ___EmotionJSX(Box, {
70
- isRow: true,
71
- gap: "md"
72
- }, ___EmotionJSX(Badge, {
73
- label: "Label"
74
- }), ___EmotionJSX(Badge, {
75
- label: "Label",
76
- bg: "active"
77
- }));
78
- return ___EmotionJSX(Wrapper, null, ___EmotionJSX(StyledListItem, {
79
- details: {
80
- icon: AccountIcon,
81
- text: 'Fons Vernall',
82
- subtext: 'verylongemailaddress@email.com'
83
- },
84
- slots: {
85
- rightOfDetails: renderRightOfDetails
86
- }
87
- }, ___EmotionJSX(ListItemMenu, null, ___EmotionJSX(Item, {
88
- key: "enable"
89
- }, "Enable user"), ___EmotionJSX(Item, {
90
- key: "disable"
91
- }, "Disable user"), ___EmotionJSX(Item, {
92
- key: "delete"
93
- }, "Delete user"))));
94
- };
95
- export var WithLeftOfDetailsSlot = function WithLeftOfDetailsSlot() {
96
- var renderLeftOfDetails = ___EmotionJSX(Box, {
97
- mx: "sm"
98
- }, ___EmotionJSX(Text, {
99
- pr: 3,
100
- variant: "H3"
101
- }, "Ping"));
102
- return ___EmotionJSX(Wrapper, null, ___EmotionJSX(StyledListItem, {
103
- details: {
104
- icon: AccountIcon,
105
- text: 'Fons Vernall',
106
- subtext: 'verylongemailaddress@email.com'
107
- }
108
- // Note that when the leftOfDetails slot is used, it overrides the provided icon and
109
- // removes all margins and padding on the left of details
110
- ,
111
- slots: {
112
- leftOfDetails: renderLeftOfDetails
113
- }
114
- }, ___EmotionJSX(ListItemMenu, null, ___EmotionJSX(Item, {
115
- key: "enable"
116
- }, "Enable user"), ___EmotionJSX(Item, {
117
- key: "disable"
118
- }, "Disable user"), ___EmotionJSX(Item, {
119
- key: "delete"
120
- }, "Delete user"))));
121
- };
122
- export var WithLinkProps = function WithLinkProps() {
123
- return ___EmotionJSX(Wrapper, null, ___EmotionJSX(StyledListItem, {
124
- details: {
125
- icon: AccountIcon,
126
- text: 'Fons Vernall'
127
- }
128
- // With linkProps added, meta click functionality is enabled
129
- ,
130
- linkProps: {
131
- href: 'https://pingidentity.com/'
132
- }
133
- }, ___EmotionJSX(ListItemSwitchField, null), ___EmotionJSX(ListItemMenu, null, ___EmotionJSX(Item, {
134
- key: "enable"
135
- }, "Enable user"), ___EmotionJSX(Item, {
136
- key: "disable"
137
- }, "Disable user"), ___EmotionJSX(Item, {
138
- key: "delete"
139
- }, "Delete user"))));
140
- };