@cloudflare/component-page 11.0.0 → 11.0.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/CHANGELOG.md +11 -0
- package/es/Heading.js +1 -3
- package/es/Page.js +23 -47
- package/es/Page.stories.js +67 -170
- package/lib/Heading.js +1 -3
- package/lib/Page.js +23 -47
- package/lib/Page.stories.js +67 -170
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 11.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fc455fa761: Require explicit opt-in before injecting source-file debug attributes into package build artifacts.
|
|
8
|
+
- Updated dependencies [fc455fa761]
|
|
9
|
+
- @cloudflare/component-label@6.0.7
|
|
10
|
+
- @cloudflare/component-link@10.0.6
|
|
11
|
+
- @cloudflare/elements@4.0.7
|
|
12
|
+
- @cloudflare/util-cl1-compat-router@3.0.1
|
|
13
|
+
|
|
3
14
|
## 11.0.0
|
|
4
15
|
|
|
5
16
|
### Major Changes
|
package/es/Heading.js
CHANGED
package/es/Page.js
CHANGED
|
@@ -46,68 +46,55 @@ var PageHeader = _ref => {
|
|
|
46
46
|
var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
|
|
47
47
|
var isMobile = useIsMobile();
|
|
48
48
|
return /*#__PURE__*/React.createElement(React.Fragment, null, navigation && !isMobile && /*#__PURE__*/React.createElement(Div, {
|
|
49
|
-
mb: 4
|
|
50
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:72"
|
|
49
|
+
mb: 4
|
|
51
50
|
}, navigation), /*#__PURE__*/React.createElement(Div, {
|
|
52
51
|
display: control ? ['block', 'flex'] : 'block',
|
|
53
52
|
justifyContent: "space-between",
|
|
54
|
-
mb: headerVisible ? 3 : 0
|
|
55
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:73"
|
|
53
|
+
mb: headerVisible ? 3 : 0
|
|
56
54
|
}, /*#__PURE__*/React.createElement(Header, {
|
|
57
|
-
textAlign: centerHeader ? 'center' : undefined
|
|
58
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:78"
|
|
55
|
+
textAlign: centerHeader ? 'center' : undefined
|
|
59
56
|
}, parentPageLabel && /*#__PURE__*/React.createElement(P, {
|
|
60
57
|
my: 0,
|
|
61
58
|
lineHeight: 1.5,
|
|
62
59
|
color: "gray.3",
|
|
63
60
|
fontWeight: 600,
|
|
64
|
-
innerRef: parentPageLabelRef
|
|
65
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:80"
|
|
61
|
+
innerRef: parentPageLabelRef
|
|
66
62
|
}, parentPageLabel), title && /*#__PURE__*/React.createElement(Div, {
|
|
67
63
|
display: "flex",
|
|
68
|
-
alignItems: "center"
|
|
69
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:91"
|
|
64
|
+
alignItems: "center"
|
|
70
65
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
71
66
|
mt: 0,
|
|
72
67
|
mb: 2,
|
|
73
|
-
innerRef: titleRef
|
|
74
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:92"
|
|
68
|
+
innerRef: titleRef
|
|
75
69
|
}, isMobile && navigation && /*#__PURE__*/React.isValidElement(navigation) && /*#__PURE__*/React.createElement(Link, {
|
|
76
70
|
mr: 2,
|
|
77
|
-
onClick: navigation.props.onClick
|
|
78
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:94"
|
|
71
|
+
onClick: navigation.props.onClick
|
|
79
72
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
80
|
-
type: "backward"
|
|
81
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:95"
|
|
73
|
+
type: "backward"
|
|
82
74
|
})), title), beta && /*#__PURE__*/React.createElement(Label, {
|
|
83
75
|
hue: "orange",
|
|
84
76
|
mx: 2,
|
|
85
|
-
verticalAlign: "middle"
|
|
86
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:101"
|
|
77
|
+
verticalAlign: "middle"
|
|
87
78
|
}, /*#__PURE__*/React.createElement(Trans, {
|
|
88
79
|
_: "Beta",
|
|
89
|
-
id: "common.beta"
|
|
90
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:102"
|
|
80
|
+
id: "common.beta"
|
|
91
81
|
}))), description && /*#__PURE__*/React.createElement(P, {
|
|
92
82
|
color: "gray.3",
|
|
93
83
|
mt: 0,
|
|
94
84
|
mb: documentationHref ? 2 : 3,
|
|
95
85
|
lineHeight: 1.25,
|
|
96
86
|
fontWeight: 400,
|
|
97
|
-
wordBreak: "break-word"
|
|
98
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:108"
|
|
87
|
+
wordBreak: "break-word"
|
|
99
88
|
}, description), documentationAsButton && !isMobile ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
100
89
|
place: "right",
|
|
101
90
|
message: /*#__PURE__*/React.createElement(Trans, {
|
|
102
91
|
id: "common.open_documentation",
|
|
103
|
-
_: 'Open documentation'
|
|
104
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:123"
|
|
92
|
+
_: 'Open documentation'
|
|
105
93
|
}),
|
|
106
94
|
Component: Span,
|
|
107
95
|
buttonProps: {
|
|
108
96
|
width: 'fit-content'
|
|
109
|
-
}
|
|
110
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:120"
|
|
97
|
+
}
|
|
111
98
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
112
99
|
type: "primary",
|
|
113
100
|
borderRadius: '20vh',
|
|
@@ -116,23 +103,19 @@ var PageHeader = _ref => {
|
|
|
116
103
|
onClick: onDocumentationButtonClick,
|
|
117
104
|
px: 3,
|
|
118
105
|
py: 1,
|
|
119
|
-
ariaLabel: "open documentation - ".concat(documentationLabel)
|
|
120
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:131"
|
|
106
|
+
ariaLabel: "open documentation - ".concat(documentationLabel)
|
|
121
107
|
}, documentationLabel)) : documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
|
|
122
108
|
fontSize: 2,
|
|
123
109
|
iconSize: 14,
|
|
124
110
|
mb: [3, 0],
|
|
125
111
|
href: documentationHref,
|
|
126
|
-
display: "inline-block"
|
|
127
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:146"
|
|
112
|
+
display: "inline-block"
|
|
128
113
|
}, documentationLabel ? documentationLabel : /*#__PURE__*/React.createElement(Trans, {
|
|
129
114
|
id: "common.documentation",
|
|
130
|
-
_: 'Documentation'
|
|
131
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:156"
|
|
115
|
+
_: 'Documentation'
|
|
132
116
|
}))), control), /*#__PURE__*/React.createElement(Section, {
|
|
133
117
|
level: titlesCount,
|
|
134
|
-
offset: maxPageTitles - titlesCount
|
|
135
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:164"
|
|
118
|
+
offset: maxPageTitles - titlesCount
|
|
136
119
|
}, children));
|
|
137
120
|
};
|
|
138
121
|
|
|
@@ -203,25 +186,20 @@ var Page = _ref2 => {
|
|
|
203
186
|
display: sidebar && sidebarInside ? undefined : 'flex',
|
|
204
187
|
py: 4,
|
|
205
188
|
mb: 4
|
|
206
|
-
}, props, {
|
|
207
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:236"
|
|
208
|
-
}), /*#__PURE__*/React.createElement(Div, {
|
|
189
|
+
}, props), /*#__PURE__*/React.createElement(Div, {
|
|
209
190
|
ml: "auto",
|
|
210
191
|
mr: sidebar && !sidebarInside ? 0 : 'auto',
|
|
211
192
|
display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,
|
|
212
193
|
width: type === 'unbounded' ? '100%' : '90%',
|
|
213
|
-
maxWidth: maxWidthByType[type] || maxWidthByType.narrow
|
|
214
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:244"
|
|
194
|
+
maxWidth: maxWidthByType[type] || maxWidthByType.narrow
|
|
215
195
|
}, /*#__PURE__*/React.createElement(Div, {
|
|
216
196
|
width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
|
|
217
197
|
pr: sidebar && sidebarInside ? [0, 0, 3] : undefined,
|
|
218
|
-
mt: 0
|
|
219
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:253"
|
|
198
|
+
mt: 0
|
|
220
199
|
}, /*#__PURE__*/React.createElement("a", {
|
|
221
200
|
id: "skipTarget",
|
|
222
201
|
ref: skipTargetRef,
|
|
223
|
-
tabIndex: -1
|
|
224
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:258"
|
|
202
|
+
tabIndex: -1
|
|
225
203
|
}), /*#__PURE__*/React.createElement(PageHeader, {
|
|
226
204
|
title: title,
|
|
227
205
|
parentPageLabel: parentPageLabel,
|
|
@@ -236,13 +214,11 @@ var Page = _ref2 => {
|
|
|
236
214
|
parentPageLabelRef: parentPageLabelRef,
|
|
237
215
|
navigation: navigation,
|
|
238
216
|
onDocumentationButtonClick: onDocumentationButtonClick,
|
|
239
|
-
documentationAsButton: documentationAsButton
|
|
240
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:260"
|
|
217
|
+
documentationAsButton: documentationAsButton
|
|
241
218
|
})), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
|
|
242
219
|
width: [1, 1, 1 / 3],
|
|
243
220
|
pl: [0, 0, 3],
|
|
244
|
-
pt: [4, 4, 0]
|
|
245
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:278"
|
|
221
|
+
pt: [4, 4, 0]
|
|
246
222
|
}, sidebar)), !sidebarInside && sidebar);
|
|
247
223
|
};
|
|
248
224
|
|
package/es/Page.stories.js
CHANGED
|
@@ -21,8 +21,7 @@ var StoryLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
21
21
|
|
|
22
22
|
return /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
23
23
|
href: to,
|
|
24
|
-
ref: ref
|
|
25
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:16"
|
|
24
|
+
ref: ref
|
|
26
25
|
}), children);
|
|
27
26
|
});
|
|
28
27
|
StoryLink.displayName = 'StoryLink';
|
|
@@ -46,212 +45,133 @@ export default {
|
|
|
46
45
|
decorators: [Story => /*#__PURE__*/React.createElement(CL1CompatRouterProvider, {
|
|
47
46
|
location: storyLocation,
|
|
48
47
|
navigate: storyNavigate,
|
|
49
|
-
linkComponent: StoryLink
|
|
50
|
-
|
|
51
|
-
}, /*#__PURE__*/React.createElement(Story, {
|
|
52
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:46"
|
|
53
|
-
}))]
|
|
48
|
+
linkComponent: StoryLink
|
|
49
|
+
}, /*#__PURE__*/React.createElement(Story, null))]
|
|
54
50
|
}; // Sample content components for stories
|
|
55
51
|
|
|
56
|
-
var SampleContent = () => /*#__PURE__*/React.createElement(Div, {
|
|
57
|
-
|
|
58
|
-
}, /*#__PURE__*/React.createElement(
|
|
59
|
-
mb: 4,
|
|
60
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:55"
|
|
61
|
-
}, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/React.createElement(Card, {
|
|
62
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:59"
|
|
63
|
-
}, /*#__PURE__*/React.createElement(Div, {
|
|
52
|
+
var SampleContent = () => /*#__PURE__*/React.createElement(Div, null, /*#__PURE__*/React.createElement(P, {
|
|
53
|
+
mb: 4
|
|
54
|
+
}, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
|
|
64
55
|
p: 4,
|
|
65
|
-
mb: 4
|
|
66
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:60"
|
|
56
|
+
mb: 4
|
|
67
57
|
}, /*#__PURE__*/React.createElement(P, {
|
|
68
58
|
mb: 2,
|
|
69
|
-
fontWeight: "bold"
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:64"
|
|
73
|
-
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Card, {
|
|
74
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:70"
|
|
75
|
-
}, /*#__PURE__*/React.createElement(Div, {
|
|
76
|
-
p: 4,
|
|
77
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:71"
|
|
59
|
+
fontWeight: "bold"
|
|
60
|
+
}, "Sample Card Content"), /*#__PURE__*/React.createElement(P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
|
|
61
|
+
p: 4
|
|
78
62
|
}, /*#__PURE__*/React.createElement(P, {
|
|
79
63
|
mb: 2,
|
|
80
|
-
fontWeight: "bold"
|
|
81
|
-
|
|
82
|
-
}, "Another Card"), /*#__PURE__*/React.createElement(P, {
|
|
83
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:75"
|
|
84
|
-
}, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
|
|
64
|
+
fontWeight: "bold"
|
|
65
|
+
}, "Another Card"), /*#__PURE__*/React.createElement(P, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
|
|
85
66
|
|
|
86
|
-
var SampleSidebar = () => /*#__PURE__*/React.createElement(Card, {
|
|
87
|
-
|
|
88
|
-
}, /*#__PURE__*/React.createElement(Div, {
|
|
89
|
-
p: 4,
|
|
90
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:86"
|
|
67
|
+
var SampleSidebar = () => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
|
|
68
|
+
p: 4
|
|
91
69
|
}, /*#__PURE__*/React.createElement(P, {
|
|
92
70
|
mb: 3,
|
|
93
|
-
fontWeight: "bold"
|
|
94
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:87"
|
|
71
|
+
fontWeight: "bold"
|
|
95
72
|
}, "Sidebar Content"), /*#__PURE__*/React.createElement(P, {
|
|
96
|
-
mb: 2
|
|
97
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:90"
|
|
73
|
+
mb: 2
|
|
98
74
|
}, "Quick Actions:"), /*#__PURE__*/React.createElement(Div, {
|
|
99
|
-
mb: 2
|
|
100
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:91"
|
|
75
|
+
mb: 2
|
|
101
76
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
102
77
|
type: "primary",
|
|
103
|
-
width: "100%"
|
|
104
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:92"
|
|
78
|
+
width: "100%"
|
|
105
79
|
}, "Primary Action")), /*#__PURE__*/React.createElement(Div, {
|
|
106
|
-
mb: 2
|
|
107
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:96"
|
|
80
|
+
mb: 2
|
|
108
81
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
109
82
|
type: "default",
|
|
110
|
-
width: "100%"
|
|
111
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:97"
|
|
83
|
+
width: "100%"
|
|
112
84
|
}, "Secondary Action")), /*#__PURE__*/React.createElement(P, {
|
|
113
85
|
mt: 3,
|
|
114
86
|
fontSize: 1,
|
|
115
|
-
color: "gray.3"
|
|
116
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:101"
|
|
87
|
+
color: "gray.3"
|
|
117
88
|
}, "Additional sidebar information and links can go here.")));
|
|
118
89
|
|
|
119
90
|
var SampleControl = () => /*#__PURE__*/React.createElement(Div, {
|
|
120
91
|
display: "flex",
|
|
121
|
-
alignItems: "center"
|
|
122
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:109"
|
|
92
|
+
alignItems: "center"
|
|
123
93
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
124
94
|
type: "primary",
|
|
125
|
-
mr: 2
|
|
126
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:110"
|
|
95
|
+
mr: 2
|
|
127
96
|
}, "Create New"), /*#__PURE__*/React.createElement(Button, {
|
|
128
|
-
type: "default"
|
|
129
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:113"
|
|
97
|
+
type: "default"
|
|
130
98
|
}, "Settings"));
|
|
131
99
|
|
|
132
100
|
var SampleNavigation = () => /*#__PURE__*/React.createElement(Button, {
|
|
133
101
|
type: "plain",
|
|
134
102
|
iconType: "backward",
|
|
135
|
-
onClick: () => console.log('Navigate back')
|
|
136
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:118"
|
|
103
|
+
onClick: () => console.log('Navigate back')
|
|
137
104
|
}, "Back to Dashboard");
|
|
138
105
|
|
|
139
106
|
export var Default = () => /*#__PURE__*/React.createElement(Page, {
|
|
140
107
|
title: "Page Title",
|
|
141
|
-
description: "This is a description of what this page is about and what users can expect to find here."
|
|
142
|
-
|
|
143
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
144
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:132"
|
|
145
|
-
}));
|
|
108
|
+
description: "This is a description of what this page is about and what users can expect to find here."
|
|
109
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
146
110
|
export var WithParentLabel = () => /*#__PURE__*/React.createElement(Page, {
|
|
147
111
|
title: "Settings",
|
|
148
112
|
parentPageLabel: "Account Management",
|
|
149
|
-
description: "Configure your account settings and preferences."
|
|
150
|
-
|
|
151
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
152
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:142"
|
|
153
|
-
}));
|
|
113
|
+
description: "Configure your account settings and preferences."
|
|
114
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
154
115
|
export var WithBeta = () => /*#__PURE__*/React.createElement(Page, {
|
|
155
116
|
title: "New Feature",
|
|
156
117
|
description: "This is a beta feature that is still in development.",
|
|
157
|
-
beta: true
|
|
158
|
-
|
|
159
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
160
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:152"
|
|
161
|
-
}));
|
|
118
|
+
beta: true
|
|
119
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
162
120
|
export var WithDocumentation = () => /*#__PURE__*/React.createElement(Page, {
|
|
163
121
|
title: "API Documentation",
|
|
164
122
|
description: "Learn how to integrate with our API endpoints.",
|
|
165
123
|
documentationLabel: "View API Docs",
|
|
166
|
-
documentationHref: "https://developers.cloudflare.com"
|
|
167
|
-
|
|
168
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
169
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:163"
|
|
170
|
-
}));
|
|
124
|
+
documentationHref: "https://developers.cloudflare.com"
|
|
125
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
171
126
|
export var WithDocumentationButton = () => /*#__PURE__*/React.createElement(Page, {
|
|
172
127
|
title: "Advanced Configuration",
|
|
173
128
|
description: "Configure advanced settings for your application.",
|
|
174
129
|
documentationLabel: "Help",
|
|
175
130
|
documentationAsButton: true,
|
|
176
|
-
onDocumentationButtonClick: () => console.log('Documentation button clicked')
|
|
177
|
-
|
|
178
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
179
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:177"
|
|
180
|
-
}));
|
|
131
|
+
onDocumentationButtonClick: () => console.log('Documentation button clicked')
|
|
132
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
181
133
|
export var WithSidebarInside = () => /*#__PURE__*/React.createElement(Page, {
|
|
182
134
|
title: "Dashboard",
|
|
183
135
|
description: "Overview of your account activity and quick actions.",
|
|
184
|
-
sidebar: /*#__PURE__*/React.createElement(SampleSidebar,
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
sidebarPosition: "inside",
|
|
188
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:182"
|
|
189
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
190
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:188"
|
|
191
|
-
}));
|
|
136
|
+
sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
|
|
137
|
+
sidebarPosition: "inside"
|
|
138
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
192
139
|
export var WithSidebarOutside = () => /*#__PURE__*/React.createElement(Page, {
|
|
193
140
|
title: "Analytics",
|
|
194
141
|
description: "View detailed analytics and performance metrics.",
|
|
195
|
-
sidebar: /*#__PURE__*/React.createElement(SampleSidebar,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
sidebarPosition: "outside",
|
|
199
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:193"
|
|
200
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
201
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:199"
|
|
202
|
-
}));
|
|
142
|
+
sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
|
|
143
|
+
sidebarPosition: "outside"
|
|
144
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
203
145
|
export var WithControl = () => /*#__PURE__*/React.createElement(Page, {
|
|
204
146
|
title: "User Management",
|
|
205
147
|
description: "Manage users and their permissions.",
|
|
206
|
-
control: /*#__PURE__*/React.createElement(SampleControl,
|
|
207
|
-
|
|
208
|
-
}),
|
|
209
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:204"
|
|
210
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
211
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:209"
|
|
212
|
-
}));
|
|
148
|
+
control: /*#__PURE__*/React.createElement(SampleControl, null)
|
|
149
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
213
150
|
export var WithNavigation = () => /*#__PURE__*/React.createElement(Page, {
|
|
214
151
|
title: "Project Details",
|
|
215
152
|
description: "View and edit project configuration.",
|
|
216
|
-
navigation: /*#__PURE__*/React.createElement(SampleNavigation,
|
|
217
|
-
|
|
218
|
-
}),
|
|
219
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:214"
|
|
220
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
221
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:219"
|
|
222
|
-
}));
|
|
153
|
+
navigation: /*#__PURE__*/React.createElement(SampleNavigation, null)
|
|
154
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
223
155
|
export var CenteredHeader = () => /*#__PURE__*/React.createElement(Page, {
|
|
224
156
|
title: "Welcome",
|
|
225
157
|
description: "Welcome to your dashboard. Get started by exploring the features below.",
|
|
226
|
-
centerHeader: true
|
|
227
|
-
|
|
228
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
229
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:229"
|
|
230
|
-
}));
|
|
158
|
+
centerHeader: true
|
|
159
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
231
160
|
export var NarrowWidth = () => /*#__PURE__*/React.createElement(Page, {
|
|
232
161
|
title: "Narrow Page",
|
|
233
162
|
description: "This page uses the narrow width configuration for focused content.",
|
|
234
|
-
type: "narrow"
|
|
235
|
-
|
|
236
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
237
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:239"
|
|
238
|
-
}));
|
|
163
|
+
type: "narrow"
|
|
164
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
239
165
|
export var WideWidth = () => /*#__PURE__*/React.createElement(Page, {
|
|
240
166
|
title: "Wide Page",
|
|
241
167
|
description: "This page uses the wide width configuration for more content.",
|
|
242
|
-
type: "wide"
|
|
243
|
-
|
|
244
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
245
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:249"
|
|
246
|
-
}));
|
|
168
|
+
type: "wide"
|
|
169
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
247
170
|
export var UnboundedWidth = () => /*#__PURE__*/React.createElement(Page, {
|
|
248
171
|
title: "Unbounded Page",
|
|
249
172
|
description: "This page uses the unbounded width configuration for full-width content.",
|
|
250
|
-
type: "unbounded"
|
|
251
|
-
|
|
252
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
253
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:259"
|
|
254
|
-
}));
|
|
173
|
+
type: "unbounded"
|
|
174
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
255
175
|
export var ComplexExample = () => /*#__PURE__*/React.createElement(Page, {
|
|
256
176
|
title: "Complex Page Example",
|
|
257
177
|
parentPageLabel: "Advanced Features",
|
|
@@ -259,51 +179,28 @@ export var ComplexExample = () => /*#__PURE__*/React.createElement(Page, {
|
|
|
259
179
|
beta: true,
|
|
260
180
|
documentationLabel: "Learn More",
|
|
261
181
|
documentationHref: "https://developers.cloudflare.com",
|
|
262
|
-
control: /*#__PURE__*/React.createElement(SampleControl,
|
|
263
|
-
|
|
264
|
-
}),
|
|
265
|
-
sidebar: /*#__PURE__*/React.createElement(SampleSidebar, {
|
|
266
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:272"
|
|
267
|
-
}),
|
|
182
|
+
control: /*#__PURE__*/React.createElement(SampleControl, null),
|
|
183
|
+
sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
|
|
268
184
|
sidebarPosition: "inside",
|
|
269
|
-
navigation: /*#__PURE__*/React.createElement(SampleNavigation,
|
|
270
|
-
|
|
271
|
-
}),
|
|
272
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:264"
|
|
273
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
274
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:276"
|
|
275
|
-
}));
|
|
185
|
+
navigation: /*#__PURE__*/React.createElement(SampleNavigation, null)
|
|
186
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
276
187
|
export var MinimalExample = () => /*#__PURE__*/React.createElement(Page, {
|
|
277
|
-
title: "Minimal Page"
|
|
278
|
-
|
|
279
|
-
}, /*#__PURE__*/React.createElement(P, {
|
|
280
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:282"
|
|
281
|
-
}, "This is a minimal page with just a title and simple content."));
|
|
188
|
+
title: "Minimal Page"
|
|
189
|
+
}, /*#__PURE__*/React.createElement(P, null, "This is a minimal page with just a title and simple content."));
|
|
282
190
|
export var NoTitle = () => /*#__PURE__*/React.createElement(Page, {
|
|
283
|
-
description: "A page without a title, showing just the description."
|
|
284
|
-
|
|
285
|
-
}, /*#__PURE__*/React.createElement(SampleContent, {
|
|
286
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:288"
|
|
287
|
-
}));
|
|
191
|
+
description: "A page without a title, showing just the description."
|
|
192
|
+
}, /*#__PURE__*/React.createElement(SampleContent, null));
|
|
288
193
|
export var LongContent = () => /*#__PURE__*/React.createElement(Page, {
|
|
289
194
|
title: "Long Content Example",
|
|
290
|
-
description: "This page demonstrates how the component handles longer content."
|
|
291
|
-
|
|
292
|
-
}, /*#__PURE__*/React.createElement(Div, {
|
|
293
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:297"
|
|
294
|
-
}, Array.from({
|
|
195
|
+
description: "This page demonstrates how the component handles longer content."
|
|
196
|
+
}, /*#__PURE__*/React.createElement(Div, null, Array.from({
|
|
295
197
|
length: 10
|
|
296
198
|
}, (_, i) => /*#__PURE__*/React.createElement(Card, {
|
|
297
|
-
key: i
|
|
298
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:299"
|
|
199
|
+
key: i
|
|
299
200
|
}, /*#__PURE__*/React.createElement(Div, {
|
|
300
201
|
p: 4,
|
|
301
|
-
mb: 4
|
|
302
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:300"
|
|
202
|
+
mb: 4
|
|
303
203
|
}, /*#__PURE__*/React.createElement(P, {
|
|
304
204
|
mb: 2,
|
|
305
|
-
fontWeight: "bold"
|
|
306
|
-
|
|
307
|
-
}, "Section ", i + 1), /*#__PURE__*/React.createElement(P, {
|
|
308
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:304"
|
|
309
|
-
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))))));
|
|
205
|
+
fontWeight: "bold"
|
|
206
|
+
}, "Section ", i + 1), /*#__PURE__*/React.createElement(P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))))));
|
package/lib/Heading.js
CHANGED
package/lib/Page.js
CHANGED
|
@@ -69,68 +69,55 @@ var PageHeader = function PageHeader(_ref) {
|
|
|
69
69
|
var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
|
|
70
70
|
var isMobile = (0, _utilResponsive.useIsMobile)();
|
|
71
71
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, navigation && !isMobile && /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
72
|
-
mb: 4
|
|
73
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:72"
|
|
72
|
+
mb: 4
|
|
74
73
|
}, navigation), /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
75
74
|
display: control ? ['block', 'flex'] : 'block',
|
|
76
75
|
justifyContent: "space-between",
|
|
77
|
-
mb: headerVisible ? 3 : 0
|
|
78
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:73"
|
|
76
|
+
mb: headerVisible ? 3 : 0
|
|
79
77
|
}, /*#__PURE__*/_react.default.createElement(_elements.Header, {
|
|
80
|
-
textAlign: centerHeader ? 'center' : undefined
|
|
81
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:78"
|
|
78
|
+
textAlign: centerHeader ? 'center' : undefined
|
|
82
79
|
}, parentPageLabel && /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
83
80
|
my: 0,
|
|
84
81
|
lineHeight: 1.5,
|
|
85
82
|
color: "gray.3",
|
|
86
83
|
fontWeight: 600,
|
|
87
|
-
innerRef: parentPageLabelRef
|
|
88
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:80"
|
|
84
|
+
innerRef: parentPageLabelRef
|
|
89
85
|
}, parentPageLabel), title && /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
90
86
|
display: "flex",
|
|
91
|
-
alignItems: "center"
|
|
92
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:91"
|
|
87
|
+
alignItems: "center"
|
|
93
88
|
}, /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
|
|
94
89
|
mt: 0,
|
|
95
90
|
mb: 2,
|
|
96
|
-
innerRef: titleRef
|
|
97
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:92"
|
|
91
|
+
innerRef: titleRef
|
|
98
92
|
}, isMobile && navigation && /*#__PURE__*/_react.default.isValidElement(navigation) && /*#__PURE__*/_react.default.createElement(_componentLink.Link, {
|
|
99
93
|
mr: 2,
|
|
100
|
-
onClick: navigation.props.onClick
|
|
101
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:94"
|
|
94
|
+
onClick: navigation.props.onClick
|
|
102
95
|
}, /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
|
|
103
|
-
type: "backward"
|
|
104
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:95"
|
|
96
|
+
type: "backward"
|
|
105
97
|
})), title), beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
|
|
106
98
|
hue: "orange",
|
|
107
99
|
mx: 2,
|
|
108
|
-
verticalAlign: "middle"
|
|
109
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:101"
|
|
100
|
+
verticalAlign: "middle"
|
|
110
101
|
}, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
|
|
111
102
|
_: "Beta",
|
|
112
|
-
id: "common.beta"
|
|
113
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:102"
|
|
103
|
+
id: "common.beta"
|
|
114
104
|
}))), description && /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
115
105
|
color: "gray.3",
|
|
116
106
|
mt: 0,
|
|
117
107
|
mb: documentationHref ? 2 : 3,
|
|
118
108
|
lineHeight: 1.25,
|
|
119
109
|
fontWeight: 400,
|
|
120
|
-
wordBreak: "break-word"
|
|
121
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:108"
|
|
110
|
+
wordBreak: "break-word"
|
|
122
111
|
}, description), documentationAsButton && !isMobile ? /*#__PURE__*/_react.default.createElement(_componentTooltip.Tooltip, {
|
|
123
112
|
place: "right",
|
|
124
113
|
message: /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
|
|
125
114
|
id: "common.open_documentation",
|
|
126
|
-
_: 'Open documentation'
|
|
127
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:123"
|
|
115
|
+
_: 'Open documentation'
|
|
128
116
|
}),
|
|
129
117
|
Component: _elements.Span,
|
|
130
118
|
buttonProps: {
|
|
131
119
|
width: 'fit-content'
|
|
132
|
-
}
|
|
133
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:120"
|
|
120
|
+
}
|
|
134
121
|
}, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
|
|
135
122
|
type: "primary",
|
|
136
123
|
borderRadius: '20vh',
|
|
@@ -139,23 +126,19 @@ var PageHeader = function PageHeader(_ref) {
|
|
|
139
126
|
onClick: onDocumentationButtonClick,
|
|
140
127
|
px: 3,
|
|
141
128
|
py: 1,
|
|
142
|
-
ariaLabel: "open documentation - ".concat(documentationLabel)
|
|
143
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:131"
|
|
129
|
+
ariaLabel: "open documentation - ".concat(documentationLabel)
|
|
144
130
|
}, documentationLabel)) : documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
|
|
145
131
|
fontSize: 2,
|
|
146
132
|
iconSize: 14,
|
|
147
133
|
mb: [3, 0],
|
|
148
134
|
href: documentationHref,
|
|
149
|
-
display: "inline-block"
|
|
150
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:146"
|
|
135
|
+
display: "inline-block"
|
|
151
136
|
}, documentationLabel ? documentationLabel : /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
|
|
152
137
|
id: "common.documentation",
|
|
153
|
-
_: 'Documentation'
|
|
154
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:156"
|
|
138
|
+
_: 'Documentation'
|
|
155
139
|
}))), control), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
|
|
156
140
|
level: titlesCount,
|
|
157
|
-
offset: maxPageTitles - titlesCount
|
|
158
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:164"
|
|
141
|
+
offset: maxPageTitles - titlesCount
|
|
159
142
|
}, children));
|
|
160
143
|
};
|
|
161
144
|
|
|
@@ -230,25 +213,20 @@ var Page = function Page(_ref2) {
|
|
|
230
213
|
display: sidebar && sidebarInside ? undefined : 'flex',
|
|
231
214
|
py: 4,
|
|
232
215
|
mb: 4
|
|
233
|
-
}, props, {
|
|
234
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:236"
|
|
235
|
-
}), /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
216
|
+
}, props), /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
236
217
|
ml: "auto",
|
|
237
218
|
mr: sidebar && !sidebarInside ? 0 : 'auto',
|
|
238
219
|
display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,
|
|
239
220
|
width: type === 'unbounded' ? '100%' : '90%',
|
|
240
|
-
maxWidth: maxWidthByType[type] || maxWidthByType.narrow
|
|
241
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:244"
|
|
221
|
+
maxWidth: maxWidthByType[type] || maxWidthByType.narrow
|
|
242
222
|
}, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
243
223
|
width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
|
|
244
224
|
pr: sidebar && sidebarInside ? [0, 0, 3] : undefined,
|
|
245
|
-
mt: 0
|
|
246
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:253"
|
|
225
|
+
mt: 0
|
|
247
226
|
}, /*#__PURE__*/_react.default.createElement("a", {
|
|
248
227
|
id: "skipTarget",
|
|
249
228
|
ref: skipTargetRef,
|
|
250
|
-
tabIndex: -1
|
|
251
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:258"
|
|
229
|
+
tabIndex: -1
|
|
252
230
|
}), /*#__PURE__*/_react.default.createElement(PageHeader, {
|
|
253
231
|
title: title,
|
|
254
232
|
parentPageLabel: parentPageLabel,
|
|
@@ -263,13 +241,11 @@ var Page = function Page(_ref2) {
|
|
|
263
241
|
parentPageLabelRef: parentPageLabelRef,
|
|
264
242
|
navigation: navigation,
|
|
265
243
|
onDocumentationButtonClick: onDocumentationButtonClick,
|
|
266
|
-
documentationAsButton: documentationAsButton
|
|
267
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:260"
|
|
244
|
+
documentationAsButton: documentationAsButton
|
|
268
245
|
})), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
269
246
|
width: [1, 1, 1 / 3],
|
|
270
247
|
pl: [0, 0, 3],
|
|
271
|
-
pt: [4, 4, 0]
|
|
272
|
-
"data-source-file": "@cloudflare/component-page:src/Page.tsx:278"
|
|
248
|
+
pt: [4, 4, 0]
|
|
273
249
|
}, sidebar)), !sidebarInside && sidebar);
|
|
274
250
|
};
|
|
275
251
|
|
package/lib/Page.stories.js
CHANGED
|
@@ -34,8 +34,7 @@ var StoryLink = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
34
34
|
|
|
35
35
|
return /*#__PURE__*/_react.default.createElement("a", _extends({}, props, {
|
|
36
36
|
href: to,
|
|
37
|
-
ref: ref
|
|
38
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:16"
|
|
37
|
+
ref: ref
|
|
39
38
|
}), children);
|
|
40
39
|
});
|
|
41
40
|
|
|
@@ -63,95 +62,64 @@ var _default = {
|
|
|
63
62
|
return /*#__PURE__*/_react.default.createElement(_utilCl1CompatRouter.CL1CompatRouterProvider, {
|
|
64
63
|
location: storyLocation,
|
|
65
64
|
navigate: storyNavigate,
|
|
66
|
-
linkComponent: StoryLink
|
|
67
|
-
|
|
68
|
-
}, /*#__PURE__*/_react.default.createElement(Story, {
|
|
69
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:46"
|
|
70
|
-
}));
|
|
65
|
+
linkComponent: StoryLink
|
|
66
|
+
}, /*#__PURE__*/_react.default.createElement(Story, null));
|
|
71
67
|
}]
|
|
72
68
|
}; // Sample content components for stories
|
|
73
69
|
|
|
74
70
|
exports.default = _default;
|
|
75
71
|
|
|
76
72
|
var SampleContent = function SampleContent() {
|
|
77
|
-
return /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
78
|
-
|
|
79
|
-
}, /*#__PURE__*/_react.default.createElement(_elements.
|
|
80
|
-
mb: 4,
|
|
81
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:55"
|
|
82
|
-
}, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
|
|
83
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:59"
|
|
84
|
-
}, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
73
|
+
return /*#__PURE__*/_react.default.createElement(_elements.Div, null, /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
74
|
+
mb: 4
|
|
75
|
+
}, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
85
76
|
p: 4,
|
|
86
|
-
mb: 4
|
|
87
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:60"
|
|
77
|
+
mb: 4
|
|
88
78
|
}, /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
89
79
|
mb: 2,
|
|
90
|
-
fontWeight: "bold"
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:64"
|
|
94
|
-
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
|
|
95
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:70"
|
|
96
|
-
}, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
97
|
-
p: 4,
|
|
98
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:71"
|
|
80
|
+
fontWeight: "bold"
|
|
81
|
+
}, "Sample Card Content"), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
82
|
+
p: 4
|
|
99
83
|
}, /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
100
84
|
mb: 2,
|
|
101
|
-
fontWeight: "bold"
|
|
102
|
-
|
|
103
|
-
}, "Another Card"), /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
104
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:75"
|
|
105
|
-
}, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
|
|
85
|
+
fontWeight: "bold"
|
|
86
|
+
}, "Another Card"), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
|
|
106
87
|
};
|
|
107
88
|
|
|
108
89
|
var SampleSidebar = function SampleSidebar() {
|
|
109
|
-
return /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
|
|
110
|
-
|
|
111
|
-
}, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
112
|
-
p: 4,
|
|
113
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:86"
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
91
|
+
p: 4
|
|
114
92
|
}, /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
115
93
|
mb: 3,
|
|
116
|
-
fontWeight: "bold"
|
|
117
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:87"
|
|
94
|
+
fontWeight: "bold"
|
|
118
95
|
}, "Sidebar Content"), /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
119
|
-
mb: 2
|
|
120
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:90"
|
|
96
|
+
mb: 2
|
|
121
97
|
}, "Quick Actions:"), /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
122
|
-
mb: 2
|
|
123
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:91"
|
|
98
|
+
mb: 2
|
|
124
99
|
}, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
|
|
125
100
|
type: "primary",
|
|
126
|
-
width: "100%"
|
|
127
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:92"
|
|
101
|
+
width: "100%"
|
|
128
102
|
}, "Primary Action")), /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
129
|
-
mb: 2
|
|
130
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:96"
|
|
103
|
+
mb: 2
|
|
131
104
|
}, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
|
|
132
105
|
type: "default",
|
|
133
|
-
width: "100%"
|
|
134
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:97"
|
|
106
|
+
width: "100%"
|
|
135
107
|
}, "Secondary Action")), /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
136
108
|
mt: 3,
|
|
137
109
|
fontSize: 1,
|
|
138
|
-
color: "gray.3"
|
|
139
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:101"
|
|
110
|
+
color: "gray.3"
|
|
140
111
|
}, "Additional sidebar information and links can go here.")));
|
|
141
112
|
};
|
|
142
113
|
|
|
143
114
|
var SampleControl = function SampleControl() {
|
|
144
115
|
return /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
145
116
|
display: "flex",
|
|
146
|
-
alignItems: "center"
|
|
147
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:109"
|
|
117
|
+
alignItems: "center"
|
|
148
118
|
}, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
|
|
149
119
|
type: "primary",
|
|
150
|
-
mr: 2
|
|
151
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:110"
|
|
120
|
+
mr: 2
|
|
152
121
|
}, "Create New"), /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
|
|
153
|
-
type: "default"
|
|
154
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:113"
|
|
122
|
+
type: "default"
|
|
155
123
|
}, "Settings"));
|
|
156
124
|
};
|
|
157
125
|
|
|
@@ -161,19 +129,15 @@ var SampleNavigation = function SampleNavigation() {
|
|
|
161
129
|
iconType: "backward",
|
|
162
130
|
onClick: function onClick() {
|
|
163
131
|
return console.log('Navigate back');
|
|
164
|
-
}
|
|
165
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:118"
|
|
132
|
+
}
|
|
166
133
|
}, "Back to Dashboard");
|
|
167
134
|
};
|
|
168
135
|
|
|
169
136
|
var Default = function Default() {
|
|
170
137
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
171
138
|
title: "Page Title",
|
|
172
|
-
description: "This is a description of what this page is about and what users can expect to find here."
|
|
173
|
-
|
|
174
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
175
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:132"
|
|
176
|
-
}));
|
|
139
|
+
description: "This is a description of what this page is about and what users can expect to find here."
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
177
141
|
};
|
|
178
142
|
|
|
179
143
|
exports.Default = Default;
|
|
@@ -182,11 +146,8 @@ var WithParentLabel = function WithParentLabel() {
|
|
|
182
146
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
183
147
|
title: "Settings",
|
|
184
148
|
parentPageLabel: "Account Management",
|
|
185
|
-
description: "Configure your account settings and preferences."
|
|
186
|
-
|
|
187
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
188
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:142"
|
|
189
|
-
}));
|
|
149
|
+
description: "Configure your account settings and preferences."
|
|
150
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
190
151
|
};
|
|
191
152
|
|
|
192
153
|
exports.WithParentLabel = WithParentLabel;
|
|
@@ -195,11 +156,8 @@ var WithBeta = function WithBeta() {
|
|
|
195
156
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
196
157
|
title: "New Feature",
|
|
197
158
|
description: "This is a beta feature that is still in development.",
|
|
198
|
-
beta: true
|
|
199
|
-
|
|
200
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
201
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:152"
|
|
202
|
-
}));
|
|
159
|
+
beta: true
|
|
160
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
203
161
|
};
|
|
204
162
|
|
|
205
163
|
exports.WithBeta = WithBeta;
|
|
@@ -209,11 +167,8 @@ var WithDocumentation = function WithDocumentation() {
|
|
|
209
167
|
title: "API Documentation",
|
|
210
168
|
description: "Learn how to integrate with our API endpoints.",
|
|
211
169
|
documentationLabel: "View API Docs",
|
|
212
|
-
documentationHref: "https://developers.cloudflare.com"
|
|
213
|
-
|
|
214
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
215
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:163"
|
|
216
|
-
}));
|
|
170
|
+
documentationHref: "https://developers.cloudflare.com"
|
|
171
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
217
172
|
};
|
|
218
173
|
|
|
219
174
|
exports.WithDocumentation = WithDocumentation;
|
|
@@ -226,11 +181,8 @@ var WithDocumentationButton = function WithDocumentationButton() {
|
|
|
226
181
|
documentationAsButton: true,
|
|
227
182
|
onDocumentationButtonClick: function onDocumentationButtonClick() {
|
|
228
183
|
return console.log('Documentation button clicked');
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
232
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:177"
|
|
233
|
-
}));
|
|
184
|
+
}
|
|
185
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
234
186
|
};
|
|
235
187
|
|
|
236
188
|
exports.WithDocumentationButton = WithDocumentationButton;
|
|
@@ -239,14 +191,9 @@ var WithSidebarInside = function WithSidebarInside() {
|
|
|
239
191
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
240
192
|
title: "Dashboard",
|
|
241
193
|
description: "Overview of your account activity and quick actions.",
|
|
242
|
-
sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar,
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
sidebarPosition: "inside",
|
|
246
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:182"
|
|
247
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
248
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:188"
|
|
249
|
-
}));
|
|
194
|
+
sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
|
|
195
|
+
sidebarPosition: "inside"
|
|
196
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
250
197
|
};
|
|
251
198
|
|
|
252
199
|
exports.WithSidebarInside = WithSidebarInside;
|
|
@@ -255,14 +202,9 @@ var WithSidebarOutside = function WithSidebarOutside() {
|
|
|
255
202
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
256
203
|
title: "Analytics",
|
|
257
204
|
description: "View detailed analytics and performance metrics.",
|
|
258
|
-
sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar,
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
sidebarPosition: "outside",
|
|
262
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:193"
|
|
263
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
264
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:199"
|
|
265
|
-
}));
|
|
205
|
+
sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
|
|
206
|
+
sidebarPosition: "outside"
|
|
207
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
266
208
|
};
|
|
267
209
|
|
|
268
210
|
exports.WithSidebarOutside = WithSidebarOutside;
|
|
@@ -271,13 +213,8 @@ var WithControl = function WithControl() {
|
|
|
271
213
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
272
214
|
title: "User Management",
|
|
273
215
|
description: "Manage users and their permissions.",
|
|
274
|
-
control: /*#__PURE__*/_react.default.createElement(SampleControl,
|
|
275
|
-
|
|
276
|
-
}),
|
|
277
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:204"
|
|
278
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
279
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:209"
|
|
280
|
-
}));
|
|
216
|
+
control: /*#__PURE__*/_react.default.createElement(SampleControl, null)
|
|
217
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
281
218
|
};
|
|
282
219
|
|
|
283
220
|
exports.WithControl = WithControl;
|
|
@@ -286,13 +223,8 @@ var WithNavigation = function WithNavigation() {
|
|
|
286
223
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
287
224
|
title: "Project Details",
|
|
288
225
|
description: "View and edit project configuration.",
|
|
289
|
-
navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation,
|
|
290
|
-
|
|
291
|
-
}),
|
|
292
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:214"
|
|
293
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
294
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:219"
|
|
295
|
-
}));
|
|
226
|
+
navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, null)
|
|
227
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
296
228
|
};
|
|
297
229
|
|
|
298
230
|
exports.WithNavigation = WithNavigation;
|
|
@@ -301,11 +233,8 @@ var CenteredHeader = function CenteredHeader() {
|
|
|
301
233
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
302
234
|
title: "Welcome",
|
|
303
235
|
description: "Welcome to your dashboard. Get started by exploring the features below.",
|
|
304
|
-
centerHeader: true
|
|
305
|
-
|
|
306
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
307
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:229"
|
|
308
|
-
}));
|
|
236
|
+
centerHeader: true
|
|
237
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
309
238
|
};
|
|
310
239
|
|
|
311
240
|
exports.CenteredHeader = CenteredHeader;
|
|
@@ -314,11 +243,8 @@ var NarrowWidth = function NarrowWidth() {
|
|
|
314
243
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
315
244
|
title: "Narrow Page",
|
|
316
245
|
description: "This page uses the narrow width configuration for focused content.",
|
|
317
|
-
type: "narrow"
|
|
318
|
-
|
|
319
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
320
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:239"
|
|
321
|
-
}));
|
|
246
|
+
type: "narrow"
|
|
247
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
322
248
|
};
|
|
323
249
|
|
|
324
250
|
exports.NarrowWidth = NarrowWidth;
|
|
@@ -327,11 +253,8 @@ var WideWidth = function WideWidth() {
|
|
|
327
253
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
328
254
|
title: "Wide Page",
|
|
329
255
|
description: "This page uses the wide width configuration for more content.",
|
|
330
|
-
type: "wide"
|
|
331
|
-
|
|
332
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
333
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:249"
|
|
334
|
-
}));
|
|
256
|
+
type: "wide"
|
|
257
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
335
258
|
};
|
|
336
259
|
|
|
337
260
|
exports.WideWidth = WideWidth;
|
|
@@ -340,11 +263,8 @@ var UnboundedWidth = function UnboundedWidth() {
|
|
|
340
263
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
341
264
|
title: "Unbounded Page",
|
|
342
265
|
description: "This page uses the unbounded width configuration for full-width content.",
|
|
343
|
-
type: "unbounded"
|
|
344
|
-
|
|
345
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
346
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:259"
|
|
347
|
-
}));
|
|
266
|
+
type: "unbounded"
|
|
267
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
348
268
|
};
|
|
349
269
|
|
|
350
270
|
exports.UnboundedWidth = UnboundedWidth;
|
|
@@ -357,42 +277,27 @@ var ComplexExample = function ComplexExample() {
|
|
|
357
277
|
beta: true,
|
|
358
278
|
documentationLabel: "Learn More",
|
|
359
279
|
documentationHref: "https://developers.cloudflare.com",
|
|
360
|
-
control: /*#__PURE__*/_react.default.createElement(SampleControl,
|
|
361
|
-
|
|
362
|
-
}),
|
|
363
|
-
sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, {
|
|
364
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:272"
|
|
365
|
-
}),
|
|
280
|
+
control: /*#__PURE__*/_react.default.createElement(SampleControl, null),
|
|
281
|
+
sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
|
|
366
282
|
sidebarPosition: "inside",
|
|
367
|
-
navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation,
|
|
368
|
-
|
|
369
|
-
}),
|
|
370
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:264"
|
|
371
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
372
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:276"
|
|
373
|
-
}));
|
|
283
|
+
navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, null)
|
|
284
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
374
285
|
};
|
|
375
286
|
|
|
376
287
|
exports.ComplexExample = ComplexExample;
|
|
377
288
|
|
|
378
289
|
var MinimalExample = function MinimalExample() {
|
|
379
290
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
380
|
-
title: "Minimal Page"
|
|
381
|
-
|
|
382
|
-
}, /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
383
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:282"
|
|
384
|
-
}, "This is a minimal page with just a title and simple content."));
|
|
291
|
+
title: "Minimal Page"
|
|
292
|
+
}, /*#__PURE__*/_react.default.createElement(_elements.P, null, "This is a minimal page with just a title and simple content."));
|
|
385
293
|
};
|
|
386
294
|
|
|
387
295
|
exports.MinimalExample = MinimalExample;
|
|
388
296
|
|
|
389
297
|
var NoTitle = function NoTitle() {
|
|
390
298
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
391
|
-
description: "A page without a title, showing just the description."
|
|
392
|
-
|
|
393
|
-
}, /*#__PURE__*/_react.default.createElement(SampleContent, {
|
|
394
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:288"
|
|
395
|
-
}));
|
|
299
|
+
description: "A page without a title, showing just the description."
|
|
300
|
+
}, /*#__PURE__*/_react.default.createElement(SampleContent, null));
|
|
396
301
|
};
|
|
397
302
|
|
|
398
303
|
exports.NoTitle = NoTitle;
|
|
@@ -400,27 +305,19 @@ exports.NoTitle = NoTitle;
|
|
|
400
305
|
var LongContent = function LongContent() {
|
|
401
306
|
return /*#__PURE__*/_react.default.createElement(_Page.default, {
|
|
402
307
|
title: "Long Content Example",
|
|
403
|
-
description: "This page demonstrates how the component handles longer content."
|
|
404
|
-
|
|
405
|
-
}, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
406
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:297"
|
|
407
|
-
}, Array.from({
|
|
308
|
+
description: "This page demonstrates how the component handles longer content."
|
|
309
|
+
}, /*#__PURE__*/_react.default.createElement(_elements.Div, null, Array.from({
|
|
408
310
|
length: 10
|
|
409
311
|
}, function (_, i) {
|
|
410
312
|
return /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
|
|
411
|
-
key: i
|
|
412
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:299"
|
|
313
|
+
key: i
|
|
413
314
|
}, /*#__PURE__*/_react.default.createElement(_elements.Div, {
|
|
414
315
|
p: 4,
|
|
415
|
-
mb: 4
|
|
416
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:300"
|
|
316
|
+
mb: 4
|
|
417
317
|
}, /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
418
318
|
mb: 2,
|
|
419
|
-
fontWeight: "bold"
|
|
420
|
-
|
|
421
|
-
}, "Section ", i + 1), /*#__PURE__*/_react.default.createElement(_elements.P, {
|
|
422
|
-
"data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:304"
|
|
423
|
-
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")));
|
|
319
|
+
fontWeight: "bold"
|
|
320
|
+
}, "Section ", i + 1), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")));
|
|
424
321
|
})));
|
|
425
322
|
};
|
|
426
323
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudflare/component-page",
|
|
3
3
|
"description": "Cloudflare Page Component",
|
|
4
|
-
"version": "11.0.
|
|
4
|
+
"version": "11.0.1",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
7
7
|
"author": "James Kyle <jkyle@cloudflare.com>",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"types": "./dist/index.d.ts"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@cloudflare/component-label": "^6.0.
|
|
17
|
-
"@cloudflare/component-link": "^10.0.
|
|
18
|
-
"@cloudflare/elements": "^4.0.
|
|
16
|
+
"@cloudflare/component-label": "^6.0.7",
|
|
17
|
+
"@cloudflare/component-link": "^10.0.6",
|
|
18
|
+
"@cloudflare/elements": "^4.0.7",
|
|
19
19
|
"@cloudflare/intl-react": "^1.9.80",
|
|
20
|
-
"@cloudflare/util-cl1-compat-router": "^3.0.
|
|
20
|
+
"@cloudflare/util-cl1-compat-router": "^3.0.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@cloudflare/style-const": "^6.0.0",
|