@pingux/astro 1.1.0-alpha.6 → 1.1.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 (76) hide show
  1. package/CHANGELOG.md +82 -0
  2. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -0
  3. package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +29 -0
  4. package/lib/cjs/components/AccordionItem/AccordionItem.js +4 -2
  5. package/lib/cjs/components/CodeView/CodeView.js +165 -0
  6. package/lib/cjs/components/CodeView/CodeView.stories.js +93 -0
  7. package/lib/cjs/components/CodeView/CodeView.test.js +211 -0
  8. package/lib/cjs/components/CodeView/index.js +18 -0
  9. package/lib/cjs/components/CopyText/CopyText.js +34 -11
  10. package/lib/cjs/components/FileInputField/FileItem.js +2 -1
  11. package/lib/cjs/components/List/List.js +3 -0
  12. package/lib/cjs/components/List/List.stories.js +7 -2
  13. package/lib/cjs/components/NavBar/NavBar.js +38 -0
  14. package/lib/cjs/components/NavBar/NavBar.stories.js +679 -0
  15. package/lib/cjs/components/NavBar/NavBar.test.js +116 -0
  16. package/lib/cjs/components/NavBar/index.js +18 -0
  17. package/lib/cjs/components/NavBarSection/NavBarItemBody.js +56 -0
  18. package/lib/cjs/components/NavBarSection/NavBarItemHeader.js +47 -0
  19. package/lib/cjs/components/NavBarSection/NavBarSection.js +82 -0
  20. package/lib/cjs/components/NavBarSection/index.js +18 -0
  21. package/lib/cjs/components/OverlayPanel/OverlayPanel.js +53 -6
  22. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +63 -50
  23. package/lib/cjs/components/OverlayPanel/OverlayPanel.test.js +84 -0
  24. package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js +15 -0
  25. package/lib/cjs/components/Separator/Separator.js +1 -1
  26. package/lib/cjs/components/TextArea/TextArea.js +5 -1
  27. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js +10 -5
  28. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.js +20 -1
  29. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.js +7 -3
  30. package/lib/cjs/index.js +84 -30
  31. package/lib/cjs/styles/variants/accordion.js +34 -3
  32. package/lib/cjs/styles/variants/boxes.js +24 -1
  33. package/lib/cjs/styles/variants/buttons.js +29 -1
  34. package/lib/cjs/styles/variants/codeView.js +80 -0
  35. package/lib/cjs/styles/variants/link.js +1 -1
  36. package/lib/cjs/styles/variants/separator.js +46 -3
  37. package/lib/cjs/styles/variants/text.js +15 -0
  38. package/lib/cjs/styles/variants/variants.js +3 -0
  39. package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +23 -1
  40. package/lib/components/AccordionGroup/AccordionGroup.test.js +26 -0
  41. package/lib/components/AccordionItem/AccordionItem.js +4 -2
  42. package/lib/components/CodeView/CodeView.js +130 -0
  43. package/lib/components/CodeView/CodeView.stories.js +67 -0
  44. package/lib/components/CodeView/CodeView.test.js +171 -0
  45. package/lib/components/CodeView/index.js +1 -0
  46. package/lib/components/CopyText/CopyText.js +35 -11
  47. package/lib/components/FileInputField/FileItem.js +2 -1
  48. package/lib/components/List/List.js +2 -0
  49. package/lib/components/List/List.stories.js +6 -2
  50. package/lib/components/NavBar/NavBar.js +24 -0
  51. package/lib/components/NavBar/NavBar.stories.js +650 -0
  52. package/lib/components/NavBar/NavBar.test.js +92 -0
  53. package/lib/components/NavBar/index.js +1 -0
  54. package/lib/components/NavBarSection/NavBarItemBody.js +37 -0
  55. package/lib/components/NavBarSection/NavBarItemHeader.js +31 -0
  56. package/lib/components/NavBarSection/NavBarSection.js +65 -0
  57. package/lib/components/NavBarSection/index.js +1 -0
  58. package/lib/components/OverlayPanel/OverlayPanel.js +52 -8
  59. package/lib/components/OverlayPanel/OverlayPanel.stories.js +56 -44
  60. package/lib/components/OverlayPanel/OverlayPanel.test.js +73 -1
  61. package/lib/components/PopoverContainer/PopoverContainer.test.js +16 -1
  62. package/lib/components/Separator/Separator.js +1 -1
  63. package/lib/components/TextArea/TextArea.js +5 -1
  64. package/lib/components/TooltipTrigger/TooltipTrigger.js +10 -5
  65. package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js +20 -1
  66. package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js +7 -3
  67. package/lib/index.js +5 -0
  68. package/lib/styles/variants/accordion.js +34 -3
  69. package/lib/styles/variants/boxes.js +24 -1
  70. package/lib/styles/variants/buttons.js +29 -1
  71. package/lib/styles/variants/codeView.js +68 -0
  72. package/lib/styles/variants/link.js +1 -1
  73. package/lib/styles/variants/separator.js +33 -1
  74. package/lib/styles/variants/text.js +15 -0
  75. package/lib/styles/variants/variants.js +2 -0
  76. package/package.json +4 -2
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+
7
+ _Object$defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+
11
+ _Object$defineProperty(exports, "default", {
12
+ enumerable: true,
13
+ get: function get() {
14
+ return _CodeView["default"];
15
+ }
16
+ });
17
+
18
+ var _CodeView = _interopRequireDefault(require("./CodeView"));
@@ -12,12 +12,12 @@ _Object$defineProperty(exports, "__esModule", {
12
12
 
13
13
  exports["default"] = void 0;
14
14
 
15
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
-
17
15
  var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
18
16
 
19
17
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
20
18
 
19
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
20
+
21
21
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
22
22
 
23
23
  var _react = _interopRequireWildcard(require("react"));
@@ -40,19 +40,19 @@ var _react2 = require("@emotion/react");
40
40
 
41
41
  var TooltipWrapper = function TooltipWrapper(_ref) {
42
42
  var children = _ref.children,
43
- isOpen = _ref.isOpen,
44
- tooltip = _ref.tooltip;
45
- return (0, _react2.jsx)(_index.TooltipTrigger, {
43
+ tooltip = _ref.tooltip,
44
+ others = (0, _objectWithoutProperties2["default"])(_ref, ["children", "tooltip"]);
45
+ return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({
46
46
  key: tooltip,
47
47
  direction: "top",
48
48
  isNotFlippable: true,
49
- isOpen: isOpen,
50
49
  offset: 5
51
- }, children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
50
+ }, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
52
51
  };
53
52
 
54
53
  TooltipWrapper.propTypes = {
55
54
  isOpen: _propTypes["default"].bool,
55
+ targetRef: _propTypes["default"].shape({}),
56
56
  tooltip: _propTypes["default"].string
57
57
  };
58
58
  /**
@@ -64,7 +64,9 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
64
64
  textToCopy = props.textToCopy,
65
65
  tooltipText = props.tooltipText,
66
66
  mode = props.mode,
67
- others = (0, _objectWithoutProperties2["default"])(props, ["children", "textToCopy", "tooltipText", "mode"]);
67
+ tooltipProps = props.tooltipProps,
68
+ wrapperProps = props.wrapperProps,
69
+ others = (0, _objectWithoutProperties2["default"])(props, ["children", "textToCopy", "tooltipText", "mode", "tooltipProps", "wrapperProps"]);
68
70
  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
69
71
 
70
72
  var _useState = (0, _react.useState)(false),
@@ -99,13 +101,28 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
99
101
  return undefined;
100
102
  }, [isCopied]);
101
103
  var copyToClipboard = (0, _useCopyToClipboard["default"])(value, setIsCopied);
102
- var content = mode === 'link' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
104
+ var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
103
105
  variant: "quiet",
104
106
  onPress: copyToClipboard,
105
107
  "aria-label": "copy-content"
106
108
  }, focusProps), children);
107
109
  var tooltip = isCopied ? 'Copied!' : tooltipText;
108
110
  var isTooltipOpen = isFocusVisible || isHovered || isCopied;
111
+ var wrapperRef = (0, _react.useRef)();
112
+
113
+ if (mode === 'nonClickableContent') {
114
+ return (0, _react2.jsx)(TooltipWrapper, (0, _extends2["default"])({
115
+ isOpen: isTooltipOpen,
116
+ tooltip: tooltip,
117
+ targetRef: wrapperRef
118
+ }, tooltipProps), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
119
+ ref: wrapperRef,
120
+ isRow: true,
121
+ tabIndex: 0
122
+ }, (0, _utils.mergeProps)(hoverProps, others), wrapperProps), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
123
+ onPress: copyToClipboard
124
+ }, focusProps))));
125
+ }
109
126
 
110
127
  if (mode === 'link') {
111
128
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -133,13 +150,19 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
133
150
  });
134
151
  CopyText.propTypes = {
135
152
  /** The behavioral pattern to apply to the component. */
136
- mode: _propTypes["default"].oneOf(['text', 'link']),
153
+ mode: _propTypes["default"].oneOf(['text', 'link', 'nonClickableContent']),
137
154
 
138
155
  /** The text to be copied instead of the text inside the child component. */
139
156
  textToCopy: _propTypes["default"].string,
140
157
 
141
158
  /** The text to be displayed in the tooltip. */
142
- tooltipText: _propTypes["default"].string
159
+ tooltipText: _propTypes["default"].string,
160
+
161
+ /** Props to apply to the tooltip in nonClickableContent mode. */
162
+ tooltipProps: _propTypes["default"].shape({}),
163
+
164
+ /** Props to apply to the wrapper in nonClickableContent mode. */
165
+ wrapperProps: _propTypes["default"].shape({})
143
166
  };
144
167
  CopyText.defaultProps = {
145
168
  mode: 'text',
@@ -61,7 +61,8 @@ var FileItem = function FileItem(props) {
61
61
 
62
62
  default:
63
63
  return {
64
- icon: _InsertDriveFileIcon["default"]
64
+ icon: _InsertDriveFileIcon["default"],
65
+ color: 'neutral.10'
65
66
  };
66
67
  }
67
68
  }, [status]);
@@ -20,6 +20,8 @@ var _react = _interopRequireWildcard(require("react"));
20
20
 
21
21
  var _Box = _interopRequireDefault(require("../Box/Box"));
22
22
 
23
+ var _hooks = require("../../hooks");
24
+
23
25
  var _react2 = require("@emotion/react");
24
26
 
25
27
  /**
@@ -29,6 +31,7 @@ var _react2 = require("@emotion/react");
29
31
  var List = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
30
32
  var children = props.children,
31
33
  others = (0, _objectWithoutProperties2["default"])(props, ["children"]);
34
+ (0, _hooks.useDeprecationWarning)('The List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
32
35
  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
33
36
  ref: ref,
34
37
  role: "list",
@@ -20,11 +20,16 @@ var _Text = _interopRequireDefault(require("../Text"));
20
20
 
21
21
  var _Separator = _interopRequireDefault(require("../Separator"));
22
22
 
23
+ var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
24
+
23
25
  var _react2 = require("@emotion/react");
24
26
 
25
27
  var _default = {
26
- title: 'List',
27
- component: [_["default"], _ListItem["default"]]
28
+ title: 'Deprecated/List',
29
+ component: [_["default"], _ListItem["default"]],
30
+ decorators: [function (Story, context) {
31
+ return (0, _withDeprecationWarning["default"])(Story, context, 'The `List` component will be deprecated in Astro-UI 2.0.0, use `ListView` instead.');
32
+ }]
28
33
  };
29
34
  exports["default"] = _default;
30
35
 
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+
7
+ _Object$defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+
11
+ exports["default"] = void 0;
12
+
13
+ var _react = _interopRequireDefault(require("react"));
14
+
15
+ var _Box = _interopRequireDefault(require("../Box/Box"));
16
+
17
+ var _react2 = require("@emotion/react");
18
+
19
+ /**
20
+ * Composed component that spreads children.
21
+ *
22
+ * This component is built to have the NavBarSection component passed into it.
23
+ *
24
+ * NavBarSection is an iterative component that
25
+ * will build an AccordionGridGroup using
26
+ * the array of objects that is passed into it.
27
+ *
28
+ */
29
+ var NavBar = function NavBar(props) {
30
+ return (0, _react2.jsx)(_Box["default"], {
31
+ variant: "boxes.navBar",
32
+ role: "navigation",
33
+ as: "nav"
34
+ }, props.children);
35
+ };
36
+
37
+ var _default = NavBar;
38
+ exports["default"] = _default;