@cloudflare/component-page 10.1.18 → 10.1.20

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