@pingux/astro 2.22.0-alpha.3 → 2.23.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.
- package/lib/cjs/{experimental → components}/PageHeader/PageHeader.js +17 -33
- package/lib/cjs/components/PageHeader/PageHeader.mdx +18 -0
- package/lib/cjs/{experimental → components}/PageHeader/PageHeader.stories.js +15 -10
- package/lib/cjs/index.d.ts +1 -2
- package/lib/cjs/index.js +5 -16
- package/lib/{experimental → components}/PageHeader/PageHeader.js +14 -30
- package/lib/components/PageHeader/PageHeader.mdx +18 -0
- package/lib/{experimental → components}/PageHeader/PageHeader.stories.js +7 -2
- package/lib/index.js +1 -2
- package/package.json +1 -1
- package/lib/cjs/recipes/PageHeader.stories.js +0 -51
- package/lib/recipes/PageHeader.stories.js +0 -41
- /package/lib/cjs/{experimental → components}/PageHeader/PageHeader.test.js +0 -0
- /package/lib/cjs/{experimental → components}/PageHeader/index.js +0 -0
- /package/lib/{experimental → components}/PageHeader/PageHeader.test.js +0 -0
- /package/lib/{experimental → components}/PageHeader/index.js +0 -0
@@ -14,7 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
15
15
|
var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
|
16
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
17
|
-
var
|
17
|
+
var _index = require("../../index");
|
18
18
|
var _react2 = require("@emotion/react");
|
19
19
|
var _excluded = ["buttonProps", "children", "title"];
|
20
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -24,50 +24,34 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
24
24
|
children = _ref.children,
|
25
25
|
title = _ref.title,
|
26
26
|
other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
27
|
-
var
|
28
|
-
|
29
|
-
|
30
|
-
mb: 'xs'
|
31
|
-
},
|
32
|
-
titleText: {
|
33
|
-
fontSize: 'xx',
|
34
|
-
fontWeight: '3',
|
35
|
-
fontColor: 'text.primary'
|
36
|
-
},
|
37
|
-
description: {
|
38
|
-
fontSize: 'sm',
|
39
|
-
color: 'text.secondary',
|
40
|
-
fontWeight: '0',
|
41
|
-
width: '800px',
|
42
|
-
' > a': {
|
43
|
-
fontSize: 'sm'
|
44
|
-
}
|
27
|
+
var linkStyles = {
|
28
|
+
' > a': {
|
29
|
+
fontSize: 'sm'
|
45
30
|
}
|
46
31
|
};
|
47
|
-
var renderButton = buttonProps && (0, _react2.jsx)(
|
32
|
+
var renderButton = buttonProps && (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
|
48
33
|
"aria-label": "icon button",
|
49
34
|
ml: "sm",
|
50
35
|
variant: "inverted"
|
51
|
-
}, buttonProps), (0, _react2.jsx)(
|
36
|
+
}, buttonProps), (0, _react2.jsx)(_index.Icon, {
|
52
37
|
icon: _PlusIcon["default"],
|
53
38
|
size: "sm"
|
54
39
|
}));
|
55
|
-
return (0, _react2.jsx)(
|
56
|
-
isRow: true,
|
57
|
-
sx: sx.wrapper,
|
58
|
-
role: "heading",
|
59
|
-
"aria-level": "1"
|
60
|
-
}, other, {
|
40
|
+
return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
61
41
|
ref: ref
|
62
|
-
}), (0, _react2.jsx)(
|
63
|
-
|
64
|
-
|
65
|
-
},
|
66
|
-
|
42
|
+
}, other), (0, _react2.jsx)(_index.Box, {
|
43
|
+
isRow: true,
|
44
|
+
mb: "xs"
|
45
|
+
}, (0, _react2.jsx)(_index.Text, {
|
46
|
+
as: "h1",
|
47
|
+
variant: "H1"
|
48
|
+
}, title), renderButton), (0, _react2.jsx)(_index.Text, {
|
49
|
+
variant: "bodyWeak",
|
50
|
+
sx: linkStyles
|
67
51
|
}, children));
|
68
52
|
});
|
69
53
|
PageHeader.propTypes = {
|
70
|
-
/** If present, this string will
|
54
|
+
/** If present, this string will be rendered as the title */
|
71
55
|
title: _propTypes["default"].string,
|
72
56
|
/** Props object that is spread into the Button element. */
|
73
57
|
buttonProps: _propTypes["default"].shape({})
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { Meta } from '@storybook/addon-docs';
|
2
|
+
|
3
|
+
<Meta title="Components/PageHeader" />
|
4
|
+
|
5
|
+
# PageHeader
|
6
|
+
|
7
|
+
The PageHeader component allows for easy creation of page header content. It comes with pre-defined styles that match Ping specs.
|
8
|
+
|
9
|
+
### Recommended Use
|
10
|
+
The PageHeader is intended to be used at the top of a page.
|
11
|
+
|
12
|
+
Pass `buttonProps` to add actions and customizations to the '+' button. Omit `buttonProps` if the '+' button is not needed.
|
13
|
+
|
14
|
+
### Children
|
15
|
+
Text and Links passed as children will be styled to match Ping specs.
|
16
|
+
|
17
|
+
### Note:
|
18
|
+
Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.
|
@@ -8,13 +8,18 @@ _Object$defineProperty(exports, "__esModule", {
|
|
8
8
|
exports["default"] = exports.WithoutLink = exports.WithoutButton = exports.WithButtonProps = exports.Default = void 0;
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
11
|
-
var
|
11
|
+
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
12
|
+
var _index = require("../../index");
|
13
|
+
var _PageHeader = _interopRequireDefault(require("./PageHeader.mdx"));
|
12
14
|
var _react2 = require("@emotion/react");
|
13
15
|
var _default = {
|
14
|
-
title: '
|
15
|
-
component:
|
16
|
+
title: 'Components/PageHeader',
|
17
|
+
component: _index.PageHeader,
|
16
18
|
parameters: {
|
17
19
|
docs: {
|
20
|
+
page: function page() {
|
21
|
+
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PageHeader["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
|
22
|
+
},
|
18
23
|
source: {
|
19
24
|
type: 'code'
|
20
25
|
}
|
@@ -31,26 +36,26 @@ var _default = {
|
|
31
36
|
exports["default"] = _default;
|
32
37
|
var description = "The description of the page. The description of the page. The description of the page. The\n description of the page.The description of the page. The description of the page. The\n description of the page. The description of the page. The description of the page. ";
|
33
38
|
var Default = function Default(args) {
|
34
|
-
return (0, _react2.jsx)(
|
39
|
+
return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
|
35
40
|
buttonProps: {
|
36
41
|
onPress: function onPress() {}
|
37
42
|
},
|
38
43
|
title: "Title of the Page"
|
39
|
-
}, args), description, (0, _react2.jsx)(
|
44
|
+
}, args), description, (0, _react2.jsx)(_index.Link, {
|
40
45
|
href: "https://uilibrary.ping-eng.com/"
|
41
46
|
}, "Learn more"));
|
42
47
|
};
|
43
48
|
exports.Default = Default;
|
44
49
|
var WithoutButton = function WithoutButton() {
|
45
|
-
return (0, _react2.jsx)(
|
50
|
+
return (0, _react2.jsx)(_index.PageHeader, {
|
46
51
|
title: "Title of the Page"
|
47
|
-
}, description, (0, _react2.jsx)(
|
52
|
+
}, description, (0, _react2.jsx)(_index.Link, {
|
48
53
|
href: "https://uilibrary.ping-eng.com/"
|
49
54
|
}, "Learn more"));
|
50
55
|
};
|
51
56
|
exports.WithoutButton = WithoutButton;
|
52
57
|
var WithoutLink = function WithoutLink() {
|
53
|
-
return (0, _react2.jsx)(
|
58
|
+
return (0, _react2.jsx)(_index.PageHeader, {
|
54
59
|
buttonProps: {
|
55
60
|
onPress: function onPress() {}
|
56
61
|
},
|
@@ -59,12 +64,12 @@ var WithoutLink = function WithoutLink() {
|
|
59
64
|
};
|
60
65
|
exports.WithoutLink = WithoutLink;
|
61
66
|
var WithButtonProps = function WithButtonProps() {
|
62
|
-
return (0, _react2.jsx)(
|
67
|
+
return (0, _react2.jsx)(_index.PageHeader, {
|
63
68
|
buttonProps: {
|
64
69
|
bg: 'critical.bright'
|
65
70
|
},
|
66
71
|
title: "Title of the Page"
|
67
|
-
}, description, (0, _react2.jsx)(
|
72
|
+
}, description, (0, _react2.jsx)(_index.Link, {
|
68
73
|
href: "https://uilibrary.ping-eng.com/"
|
69
74
|
}, "Learn more"));
|
70
75
|
};
|
package/lib/cjs/index.d.ts
CHANGED
@@ -102,6 +102,7 @@ export { default as NumberField } from './components/NumberField';
|
|
102
102
|
export * from './components/NumberField';
|
103
103
|
export { default as OverlayPanel } from './components/OverlayPanel';
|
104
104
|
export * from './components/OverlayPanel';
|
105
|
+
export { default as PageHeader } from './components/PageHeader';
|
105
106
|
export { default as PanelHeader } from './components/PanelHeader';
|
106
107
|
export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
|
107
108
|
export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
|
@@ -166,8 +167,6 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
|
|
166
167
|
export * from './components/TooltipTrigger';
|
167
168
|
export { default as TreeView } from './components/TreeView';
|
168
169
|
export * from './components/TreeView';
|
169
|
-
export { default as PageHeader } from './experimental/PageHeader';
|
170
|
-
export * from './experimental/PageHeader';
|
171
170
|
export { default as DataTable } from './components/DataTable';
|
172
171
|
export * from './components/DataTable';
|
173
172
|
export * from './types';
|
package/lib/cjs/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74;
|
4
4
|
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
5
5
|
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
6
6
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
@@ -73,6 +73,7 @@ var _exportNames = {
|
|
73
73
|
NavBarSection: true,
|
74
74
|
NumberField: true,
|
75
75
|
OverlayPanel: true,
|
76
|
+
PageHeader: true,
|
76
77
|
PanelHeader: true,
|
77
78
|
PanelHeaderCloseButton: true,
|
78
79
|
PanelHeaderMenu: true,
|
@@ -109,7 +110,6 @@ var _exportNames = {
|
|
109
110
|
TimeZonePicker: true,
|
110
111
|
TooltipTrigger: true,
|
111
112
|
TreeView: true,
|
112
|
-
PageHeader: true,
|
113
113
|
DataTable: true,
|
114
114
|
OverlayProvider: true,
|
115
115
|
useOverlayPosition: true,
|
@@ -1323,6 +1323,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_OverlayPanel)).call(_context
|
|
1323
1323
|
}
|
1324
1324
|
});
|
1325
1325
|
});
|
1326
|
+
var _PageHeader = _interopRequireDefault(require("./components/PageHeader"));
|
1326
1327
|
var _PanelHeader = _interopRequireDefault(require("./components/PanelHeader"));
|
1327
1328
|
var _PanelHeaderCloseButton = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderCloseButton"));
|
1328
1329
|
var _PanelHeaderMenu = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderMenu"));
|
@@ -1677,20 +1678,8 @@ _forEachInstanceProperty(_context72 = _Object$keys(_TreeView)).call(_context72,
|
|
1677
1678
|
}
|
1678
1679
|
});
|
1679
1680
|
});
|
1680
|
-
var _PageHeader = _interopRequireWildcard(require("./experimental/PageHeader"));
|
1681
|
-
_forEachInstanceProperty(_context73 = _Object$keys(_PageHeader)).call(_context73, function (key) {
|
1682
|
-
if (key === "default" || key === "__esModule") return;
|
1683
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
1684
|
-
if (key in exports && exports[key] === _PageHeader[key]) return;
|
1685
|
-
_Object$defineProperty(exports, key, {
|
1686
|
-
enumerable: true,
|
1687
|
-
get: function get() {
|
1688
|
-
return _PageHeader[key];
|
1689
|
-
}
|
1690
|
-
});
|
1691
|
-
});
|
1692
1681
|
var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
|
1693
|
-
_forEachInstanceProperty(
|
1682
|
+
_forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73, function (key) {
|
1694
1683
|
if (key === "default" || key === "__esModule") return;
|
1695
1684
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
1696
1685
|
if (key in exports && exports[key] === _DataTable[key]) return;
|
@@ -1702,7 +1691,7 @@ _forEachInstanceProperty(_context74 = _Object$keys(_DataTable)).call(_context74,
|
|
1702
1691
|
});
|
1703
1692
|
});
|
1704
1693
|
var _types = require("./types");
|
1705
|
-
_forEachInstanceProperty(
|
1694
|
+
_forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, function (key) {
|
1706
1695
|
if (key === "default" || key === "__esModule") return;
|
1707
1696
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
1708
1697
|
if (key in exports && exports[key] === _types[key]) return;
|
@@ -4,31 +4,16 @@ var _excluded = ["buttonProps", "children", "title"];
|
|
4
4
|
import React, { forwardRef } from 'react';
|
5
5
|
import PlusIcon from '@pingux/mdi-react/PlusIcon';
|
6
6
|
import PropTypes from 'prop-types';
|
7
|
-
import { Box, Icon, IconButton, Text } from '
|
7
|
+
import { Box, Icon, IconButton, Text } from '../../index';
|
8
8
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
9
9
|
var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
10
10
|
var buttonProps = _ref.buttonProps,
|
11
11
|
children = _ref.children,
|
12
12
|
title = _ref.title,
|
13
13
|
other = _objectWithoutProperties(_ref, _excluded);
|
14
|
-
var
|
15
|
-
|
16
|
-
|
17
|
-
mb: 'xs'
|
18
|
-
},
|
19
|
-
titleText: {
|
20
|
-
fontSize: 'xx',
|
21
|
-
fontWeight: '3',
|
22
|
-
fontColor: 'text.primary'
|
23
|
-
},
|
24
|
-
description: {
|
25
|
-
fontSize: 'sm',
|
26
|
-
color: 'text.secondary',
|
27
|
-
fontWeight: '0',
|
28
|
-
width: '800px',
|
29
|
-
' > a': {
|
30
|
-
fontSize: 'sm'
|
31
|
-
}
|
14
|
+
var linkStyles = {
|
15
|
+
' > a': {
|
16
|
+
fontSize: 'sm'
|
32
17
|
}
|
33
18
|
};
|
34
19
|
var renderButton = buttonProps && ___EmotionJSX(IconButton, _extends({
|
@@ -39,22 +24,21 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
39
24
|
icon: PlusIcon,
|
40
25
|
size: "sm"
|
41
26
|
}));
|
42
|
-
return ___EmotionJSX(
|
43
|
-
isRow: true,
|
44
|
-
sx: sx.wrapper,
|
45
|
-
role: "heading",
|
46
|
-
"aria-level": "1"
|
47
|
-
}, other, {
|
27
|
+
return ___EmotionJSX(Box, _extends({
|
48
28
|
ref: ref
|
49
|
-
}), ___EmotionJSX(
|
50
|
-
|
51
|
-
|
29
|
+
}, other), ___EmotionJSX(Box, {
|
30
|
+
isRow: true,
|
31
|
+
mb: "xs"
|
32
|
+
}, ___EmotionJSX(Text, {
|
33
|
+
as: "h1",
|
34
|
+
variant: "H1"
|
52
35
|
}, title), renderButton), ___EmotionJSX(Text, {
|
53
|
-
|
36
|
+
variant: "bodyWeak",
|
37
|
+
sx: linkStyles
|
54
38
|
}, children));
|
55
39
|
});
|
56
40
|
PageHeader.propTypes = {
|
57
|
-
/** If present, this string will
|
41
|
+
/** If present, this string will be rendered as the title */
|
58
42
|
title: PropTypes.string,
|
59
43
|
/** Props object that is spread into the Button element. */
|
60
44
|
buttonProps: PropTypes.shape({})
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { Meta } from '@storybook/addon-docs';
|
2
|
+
|
3
|
+
<Meta title="Components/PageHeader" />
|
4
|
+
|
5
|
+
# PageHeader
|
6
|
+
|
7
|
+
The PageHeader component allows for easy creation of page header content. It comes with pre-defined styles that match Ping specs.
|
8
|
+
|
9
|
+
### Recommended Use
|
10
|
+
The PageHeader is intended to be used at the top of a page.
|
11
|
+
|
12
|
+
Pass `buttonProps` to add actions and customizations to the '+' button. Omit `buttonProps` if the '+' button is not needed.
|
13
|
+
|
14
|
+
### Children
|
15
|
+
Text and Links passed as children will be styled to match Ping specs.
|
16
|
+
|
17
|
+
### Note:
|
18
|
+
Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.
|
@@ -1,12 +1,17 @@
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
2
|
import React from 'react';
|
3
|
-
import
|
3
|
+
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
4
|
+
import { Link, PageHeader } from '../../index';
|
5
|
+
import PageHeaderReadMe from './PageHeader.mdx';
|
4
6
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
5
7
|
export default {
|
6
|
-
title: '
|
8
|
+
title: 'Components/PageHeader',
|
7
9
|
component: PageHeader,
|
8
10
|
parameters: {
|
9
11
|
docs: {
|
12
|
+
page: function page() {
|
13
|
+
return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PageHeaderReadMe, null), ___EmotionJSX(DocsLayout, null));
|
14
|
+
},
|
10
15
|
source: {
|
11
16
|
type: 'code'
|
12
17
|
}
|
package/lib/index.js
CHANGED
@@ -106,6 +106,7 @@ export { default as NumberField } from './components/NumberField';
|
|
106
106
|
export * from './components/NumberField';
|
107
107
|
export { default as OverlayPanel } from './components/OverlayPanel';
|
108
108
|
export * from './components/OverlayPanel';
|
109
|
+
export { default as PageHeader } from './components/PageHeader';
|
109
110
|
export { default as PanelHeader } from './components/PanelHeader';
|
110
111
|
export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
|
111
112
|
export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
|
@@ -170,8 +171,6 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
|
|
170
171
|
export * from './components/TooltipTrigger';
|
171
172
|
export { default as TreeView } from './components/TreeView';
|
172
173
|
export * from './components/TreeView';
|
173
|
-
export { default as PageHeader } from './experimental/PageHeader';
|
174
|
-
export * from './experimental/PageHeader';
|
175
174
|
|
176
175
|
/* eslint-enable import/export */
|
177
176
|
|
package/package.json
CHANGED
@@ -1,51 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
exports["default"] = exports.Default = void 0;
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
10
|
-
var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
|
11
|
-
var _index = require("../index");
|
12
|
-
var _react2 = require("@emotion/react");
|
13
|
-
var _default = {
|
14
|
-
title: 'Recipes/Page Header'
|
15
|
-
};
|
16
|
-
exports["default"] = _default;
|
17
|
-
var Default = function Default() {
|
18
|
-
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
|
19
|
-
align: "center",
|
20
|
-
isRow: true,
|
21
|
-
mb: "xs",
|
22
|
-
role: "heading",
|
23
|
-
"aria-level": "1"
|
24
|
-
}, (0, _react2.jsx)(_index.Text, {
|
25
|
-
fontSize: "xx",
|
26
|
-
fontWeight: "3",
|
27
|
-
fontColor: "text.primary",
|
28
|
-
as: "h1"
|
29
|
-
}, "Title of the Page"), (0, _react2.jsx)(_index.IconButton, {
|
30
|
-
"aria-label": "icon button",
|
31
|
-
ml: "sm",
|
32
|
-
variant: "inverted"
|
33
|
-
}, (0, _react2.jsx)(_index.Icon, {
|
34
|
-
icon: _PlusIcon["default"],
|
35
|
-
size: "sm",
|
36
|
-
title: {
|
37
|
-
name: 'Plus Icon'
|
38
|
-
}
|
39
|
-
}))), (0, _react2.jsx)(_index.Text, {
|
40
|
-
fontSize: "sm",
|
41
|
-
color: "text.secondary",
|
42
|
-
fontWeight: "0",
|
43
|
-
width: "800px"
|
44
|
-
}, "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", (0, _react2.jsx)(_index.Link, {
|
45
|
-
href: "https://uilibrary.ping-eng.com/",
|
46
|
-
sx: {
|
47
|
-
fontSize: 'sm'
|
48
|
-
}
|
49
|
-
}, "Learn more")));
|
50
|
-
};
|
51
|
-
exports.Default = Default;
|
@@ -1,41 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import PlusIcon from '@pingux/mdi-react/PlusIcon';
|
3
|
-
import { Box, Icon, IconButton, Link, Text } from '../index';
|
4
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
5
|
-
export default {
|
6
|
-
title: 'Recipes/Page Header'
|
7
|
-
};
|
8
|
-
export var Default = function Default() {
|
9
|
-
return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
|
10
|
-
align: "center",
|
11
|
-
isRow: true,
|
12
|
-
mb: "xs",
|
13
|
-
role: "heading",
|
14
|
-
"aria-level": "1"
|
15
|
-
}, ___EmotionJSX(Text, {
|
16
|
-
fontSize: "xx",
|
17
|
-
fontWeight: "3",
|
18
|
-
fontColor: "text.primary",
|
19
|
-
as: "h1"
|
20
|
-
}, "Title of the Page"), ___EmotionJSX(IconButton, {
|
21
|
-
"aria-label": "icon button",
|
22
|
-
ml: "sm",
|
23
|
-
variant: "inverted"
|
24
|
-
}, ___EmotionJSX(Icon, {
|
25
|
-
icon: PlusIcon,
|
26
|
-
size: "sm",
|
27
|
-
title: {
|
28
|
-
name: 'Plus Icon'
|
29
|
-
}
|
30
|
-
}))), ___EmotionJSX(Text, {
|
31
|
-
fontSize: "sm",
|
32
|
-
color: "text.secondary",
|
33
|
-
fontWeight: "0",
|
34
|
-
width: "800px"
|
35
|
-
}, "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", ___EmotionJSX(Link, {
|
36
|
-
href: "https://uilibrary.ping-eng.com/",
|
37
|
-
sx: {
|
38
|
-
fontSize: 'sm'
|
39
|
-
}
|
40
|
-
}, "Learn more")));
|
41
|
-
};
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|