@pingux/astro 2.76.0-alpha.2 → 2.77.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/cjs/components/PanelHeader/PanelHeader.js +4 -1
  2. package/lib/cjs/components/PanelHeader/PanelHeader.stories.js +31 -10
  3. package/lib/cjs/components/PanelHeader/PanelHeader.styles.js +2 -0
  4. package/lib/cjs/recipes/PanelContent.stories.js +6 -6
  5. package/lib/components/PanelHeader/PanelHeader.js +4 -1
  6. package/lib/components/PanelHeader/PanelHeader.stories.js +30 -10
  7. package/lib/components/PanelHeader/PanelHeader.styles.js +2 -0
  8. package/lib/recipes/PanelContent.stories.js +6 -6
  9. package/package.json +1 -1
package/lib/cjs/components/PanelHeader/PanelHeader.js CHANGED
@@ -80,7 +80,10 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
80
80
  variant: "panelHeader.wrapper"
81
81
  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && (0, _react2.jsx)(_index.Box, {
82
82
  isRow: true,
83
- variant: "panelHeader.rightOfData"
83
+ variant: "panelHeader.rightOfData",
84
+ sx: {
85
+ width: '100%'
86
+ }
84
87
  }, slots.rightOfData), (0, _react2.jsx)(_index.Box, {
85
88
  isRow: true,
86
89
  variant: "panelHeader.controls"
package/lib/cjs/components/PanelHeader/PanelHeader.stories.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
5
5
  _Object$defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.WithSubtext = exports.WithImage = exports.WithExtraLongText = exports.WithControls = exports.WithBreadcrumbs = exports.Default = void 0;
8
+ exports["default"] = exports.WithSubtext = exports.WithImage = exports.WithExtraLongText = exports.WithControls = exports.WithBreadcrumbs = exports.Default = exports.BreadcrumbsWithExtraLongText = void 0;
9
9
  var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
11
  var _react = _interopRequireDefault(require("react"));
@@ -103,18 +103,22 @@ var WithImage = function WithImage() {
103
103
  });
104
104
  };
105
105
  exports.WithImage = WithImage;
106
+ WithImage.parameters = {
107
+ design: {
108
+ type: 'figma',
109
+ url: _figmaLinks.FIGMA_LINKS.panelHeader.withImage
110
+ }
111
+ };
106
112
  var WithBreadcrumbs = function WithBreadcrumbs() {
107
113
  var breadcrumbs = (0, _react2.jsx)(_index.Breadcrumbs, {
108
114
  icon: _ChevronRightIcon["default"]
109
115
  }, (0, _react2.jsx)(_index.Item, {
110
116
  "aria-label": "Fons Vernall",
111
117
  href: "https://www.pingidentity.com",
112
- key: "fonsVernallKey",
113
- variant: "buttons.link"
118
+ key: "fonsVernallKey"
114
119
  }, "Fons Vernall"), (0, _react2.jsx)(_index.Item, {
115
120
  "aria-label": "Edit",
116
- key: "editKey",
117
- variant: "buttons.link"
121
+ key: "editKey"
118
122
  }, "Edit"));
119
123
  return (0, _react2.jsx)(_index.PanelHeader, {
120
124
  data: {
@@ -126,12 +130,29 @@ var WithBreadcrumbs = function WithBreadcrumbs() {
126
130
  });
127
131
  };
128
132
  exports.WithBreadcrumbs = WithBreadcrumbs;
129
- WithImage.parameters = {
130
- design: {
131
- type: 'figma',
132
- url: _figmaLinks.FIGMA_LINKS.panelHeader.withImage
133
- }
133
+ var BreadcrumbsWithExtraLongText = function BreadcrumbsWithExtraLongText() {
134
+ var breadcrumbs = (0, _react2.jsx)(_index.Box, {
135
+ width: "100%"
136
+ }, (0, _react2.jsx)(_index.Breadcrumbs, {
137
+ icon: _ChevronRightIcon["default"]
138
+ }, (0, _react2.jsx)(_index.Item, {
139
+ "aria-label": "Lorem Text",
140
+ href: "https://www.pingidentity.com",
141
+ key: "Item1Key"
142
+ }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Item, {
143
+ "aria-label": "Lorem Ut",
144
+ key: "Item2Key"
145
+ }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco, laboris nisi ut aliquip ex ea commodo consequat incididunt et dolore.")));
146
+ return (0, _react2.jsx)(_index.PanelHeader, {
147
+ data: {
148
+ icon: _AccountIcon["default"]
149
+ },
150
+ slots: {
151
+ rightOfData: breadcrumbs
152
+ }
153
+ });
134
154
  };
155
+ exports.BreadcrumbsWithExtraLongText = BreadcrumbsWithExtraLongText;
135
156
  var WithExtraLongText = function WithExtraLongText(_ref4) {
136
157
  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
137
158
  return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
package/lib/cjs/components/PanelHeader/PanelHeader.styles.js CHANGED
@@ -25,9 +25,11 @@ var container = {
25
25
  minHeight: 60
26
26
  };
27
27
  var emptyData = {
28
+ flexShrink: 0,
28
29
  alignItems: 'center'
29
30
  };
30
31
  var data = _objectSpread(_objectSpread({}, emptyData), {}, {
32
+ flexShrink: 1,
31
33
  mr: 'sm'
32
34
  });
33
35
  var controls = {
package/lib/cjs/recipes/PanelContent.stories.js CHANGED
@@ -48,18 +48,18 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
48
48
  var triggerRef = (0, _react.useRef)();
49
49
  var personalInfo = _items.personalData.personalInfo;
50
50
  var fields = personalInfo.fields;
51
- var renderBreadcrumbs = (0, _react2.jsx)(_index.Breadcrumbs, {
51
+ var renderBreadcrumbs = (0, _react2.jsx)(_index.Box, {
52
+ width: "100%"
53
+ }, (0, _react2.jsx)(_index.Breadcrumbs, {
52
54
  icon: _ChevronRightIcon["default"]
53
55
  }, (0, _react2.jsx)(_index.Item, {
54
56
  "aria-label": personalInfo.label,
55
57
  href: "https://www.pingidentity.com",
56
- key: personalInfo.key,
57
- variant: "buttons.link"
58
+ key: personalInfo.key
58
59
  }, (0, _concat["default"])(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), (0, _react2.jsx)(_index.Item, {
59
60
  "aria-label": "Edit",
60
- key: "editKey",
61
- variant: "buttons.link"
62
- }, "Edit"));
61
+ key: "editKey"
62
+ }, "Edit")));
63
63
  var image = {
64
64
  src: _UserImage["default"],
65
65
  alt: 'user image'
package/lib/components/PanelHeader/PanelHeader.js CHANGED
@@ -68,7 +68,10 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
68
68
  variant: "panelHeader.wrapper"
69
69
  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
70
70
  isRow: true,
71
- variant: "panelHeader.rightOfData"
71
+ variant: "panelHeader.rightOfData",
72
+ sx: {
73
+ width: '100%'
74
+ }
72
75
  }, slots.rightOfData), ___EmotionJSX(Box, {
73
76
  isRow: true,
74
77
  variant: "panelHeader.controls"
package/lib/components/PanelHeader/PanelHeader.stories.js CHANGED
@@ -4,7 +4,7 @@ import React from 'react';
4
4
  import AccountIcon from '@pingux/mdi-react/AccountIcon';
5
5
  import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
6
6
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
7
- import { Breadcrumbs, Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../index';
7
+ import { Box, Breadcrumbs, Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../index';
8
8
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
9
9
  import { pingImg } from '../../utils/devUtils/constants/images';
10
10
  import { SharedItemArgTypes } from '../ListViewItem/listViewItemAttributes';
@@ -90,18 +90,22 @@ export var WithImage = function WithImage() {
90
90
  }
91
91
  });
92
92
  };
93
+ WithImage.parameters = {
94
+ design: {
95
+ type: 'figma',
96
+ url: FIGMA_LINKS.panelHeader.withImage
97
+ }
98
+ };
93
99
  export var WithBreadcrumbs = function WithBreadcrumbs() {
94
100
  var breadcrumbs = ___EmotionJSX(Breadcrumbs, {
95
101
  icon: ChevronRightIcon
96
102
  }, ___EmotionJSX(Item, {
97
103
  "aria-label": "Fons Vernall",
98
104
  href: "https://www.pingidentity.com",
99
- key: "fonsVernallKey",
100
- variant: "buttons.link"
105
+ key: "fonsVernallKey"
101
106
  }, "Fons Vernall"), ___EmotionJSX(Item, {
102
107
  "aria-label": "Edit",
103
- key: "editKey",
104
- variant: "buttons.link"
108
+ key: "editKey"
105
109
  }, "Edit"));
106
110
  return ___EmotionJSX(PanelHeader, {
107
111
  data: {
@@ -112,11 +116,27 @@ export var WithBreadcrumbs = function WithBreadcrumbs() {
112
116
  }
113
117
  });
114
118
  };
115
- WithImage.parameters = {
116
- design: {
117
- type: 'figma',
118
- url: FIGMA_LINKS.panelHeader.withImage
119
- }
119
+ export var BreadcrumbsWithExtraLongText = function BreadcrumbsWithExtraLongText() {
120
+ var breadcrumbs = ___EmotionJSX(Box, {
121
+ width: "100%"
122
+ }, ___EmotionJSX(Breadcrumbs, {
123
+ icon: ChevronRightIcon
124
+ }, ___EmotionJSX(Item, {
125
+ "aria-label": "Lorem Text",
126
+ href: "https://www.pingidentity.com",
127
+ key: "Item1Key"
128
+ }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Item, {
129
+ "aria-label": "Lorem Ut",
130
+ key: "Item2Key"
131
+ }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco, laboris nisi ut aliquip ex ea commodo consequat incididunt et dolore.")));
132
+ return ___EmotionJSX(PanelHeader, {
133
+ data: {
134
+ icon: AccountIcon
135
+ },
136
+ slots: {
137
+ rightOfData: breadcrumbs
138
+ }
139
+ });
120
140
  };
121
141
  export var WithExtraLongText = function WithExtraLongText(_ref4) {
122
142
  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
package/lib/components/PanelHeader/PanelHeader.styles.js CHANGED
@@ -18,9 +18,11 @@ var container = {
18
18
  minHeight: 60
19
19
  };
20
20
  var emptyData = {
21
+ flexShrink: 0,
21
22
  alignItems: 'center'
22
23
  };
23
24
  var data = _objectSpread(_objectSpread({}, emptyData), {}, {
25
+ flexShrink: 1,
24
26
  mr: 'sm'
25
27
  });
26
28
  var controls = {
package/lib/recipes/PanelContent.stories.js CHANGED
@@ -34,18 +34,18 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
34
34
  var triggerRef = useRef();
35
35
  var personalInfo = personalData.personalInfo;
36
36
  var fields = personalInfo.fields;
37
- var renderBreadcrumbs = ___EmotionJSX(Breadcrumbs, {
37
+ var renderBreadcrumbs = ___EmotionJSX(Box, {
38
+ width: "100%"
39
+ }, ___EmotionJSX(Breadcrumbs, {
38
40
  icon: ChevronRightIcon
39
41
  }, ___EmotionJSX(Item, {
40
42
  "aria-label": personalInfo.label,
41
43
  href: "https://www.pingidentity.com",
42
- key: personalInfo.key,
43
- variant: "buttons.link"
44
+ key: personalInfo.key
44
45
  }, _concatInstanceProperty(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), ___EmotionJSX(Item, {
45
46
  "aria-label": "Edit",
46
- key: "editKey",
47
- variant: "buttons.link"
48
- }, "Edit"));
47
+ key: "editKey"
48
+ }, "Edit")));
49
49
  var image = {
50
50
  src: UserImage,
51
51
  alt: 'user image'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.76.0-alpha.2",
3
+ "version": "2.77.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",