@ember-eui/core 5.0.0-alpha.5 → 5.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.
Files changed (45) hide show
  1. package/addon/components/eui-notification-event/index.hbs +25 -9
  2. package/addon/components/eui-notification-event-meta/index.hbs +82 -74
  3. package/addon/components/eui-notification-event-read-icon/index.hbs +1 -1
  4. package/addon/components/eui-page/index.hbs +13 -18
  5. package/addon/components/eui-page-body/index.hbs +19 -36
  6. package/addon/components/eui-page-content/index.hbs +20 -17
  7. package/addon/components/eui-page-content-body/index.hbs +16 -15
  8. package/addon/components/eui-page-content-header/index.hbs +1 -13
  9. package/addon/components/eui-page-header/index.hbs +91 -33
  10. package/addon/components/eui-page-header-content/index.hbs +247 -182
  11. package/addon/components/eui-page-template/index.hbs +723 -395
  12. package/addon/components/eui-page-template/index.ts +44 -16
  13. package/addon/components/eui-split-panel/outer/index.hbs +5 -4
  14. package/addon/helpers/eui-page-restrict-width.ts +37 -0
  15. package/addon/{components/eui-split-panel/outer/index.ts → modifiers/use-is-within-breakpoints.ts} +2 -11
  16. package/addon/styles/ember-eui.css +4 -0
  17. package/addon/utils/css-mappings/eui-page.ts +19 -1
  18. package/addon/utils/css-mappings/eui-tabs.ts +1 -1
  19. package/app/helpers/eui-page-restrict-width.js +4 -0
  20. package/app/modifiers/use-is-within-breakpoints.js +1 -0
  21. package/docs/layout/page-header/demo/demo1.md +23 -0
  22. package/docs/layout/page-header/demo/demo2.md +23 -0
  23. package/docs/layout/page-header/demo/demo3.md +14 -0
  24. package/docs/layout/page-header/demo/demo4.md +52 -0
  25. package/docs/layout/page-header/demo/demo5.md +64 -0
  26. package/docs/layout/page-header/demo/demo6.md +21 -0
  27. package/docs/layout/page-header/index.md +11 -0
  28. package/docs/layout/{page-demo → page-template/demo}/demo1.md +36 -14
  29. package/docs/layout/page-template/demo/demo10.md +58 -0
  30. package/docs/layout/{page-demo → page-template/demo}/demo2.md +14 -4
  31. package/docs/layout/{page-demo → page-template/demo}/demo3.md +19 -8
  32. package/docs/layout/page-template/demo/demo4.md +43 -0
  33. package/docs/layout/page-template/demo/demo5.md +54 -0
  34. package/docs/layout/{page-demo → page-template/demo}/demo6.md +10 -2
  35. package/docs/layout/{page-demo → page-template/demo}/demo7.md +0 -0
  36. package/docs/layout/page-template/demo/demo8.md +46 -0
  37. package/docs/layout/page-template/demo/demo9.md +43 -0
  38. package/docs/layout/page-template/index.md +11 -0
  39. package/package.json +2 -2
  40. package/docs/layout/page-demo/demo10.md +0 -42
  41. package/docs/layout/page-demo/demo4.md +0 -38
  42. package/docs/layout/page-demo/demo5.md +0 -30
  43. package/docs/layout/page-demo/demo8.md +0 -19
  44. package/docs/layout/page-demo/demo9.md +0 -29
  45. package/docs/layout/page.md +0 -1
package/addon/components/eui-page-template/index.hbs CHANGED
@@ -1,417 +1,745 @@
1
- {{#if (eq this.template "centeredBody")}}
2
- <EuiPage
3
- class={{this.classes}}
4
- @paddingSize={{if
5
- (or @pageSideBar (has-block "pageSideBar"))
6
- "none"
7
- @paddingSize
8
- }}
9
- @grow={{arg-or-default @grow true}}
10
- {{style (inline-styles min-height=(concat this.minHeight "px"))}}
11
- {{! {...rest} }}
12
- {{! style={pageStyle} }}
13
- >
14
- {{#if (has-block "pageSideBar")}}
15
- {{yield to="pageSideBar"}}
16
- {{else if @pageSideBar}}
17
- <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
18
- {{@pageSideBar}}
19
- </EuiPageSideBar>
20
- {{/if}}
21
- <EuiPageBody
22
- @paddingSize={{if
23
- (or @pageSideBar (has-block "pageSideBar"))
24
- (arg-or-default @paddingSize "l")
25
- "none"
26
- }}
27
- @restrictWidth={{if
28
- (or @pageSideBar (has-block "pageSideBar"))
29
- "false"
30
- @restrictWidth
31
- }}
32
- {{! {...pageBodyProps} }}
33
- >
34
- {{#if (has-block "pageHeader")}}
35
- {{yield to="pageHeader"}}
36
- {{else if @pageHeader}}
37
- <EuiPageHeader
38
- @restrictWidth={{if
39
- (or @pageSideBar (has-block "pageSideBar"))
40
- @restrictWidth
41
- false
42
- }}
43
- @bottomBorder={{if
44
- (or @pageSideBar (has-block "pageSideBar"))
45
- false
46
- @bottomBorder
47
- }}
48
- @paddingSize={{@paddingSize}}
49
- @responsive={{arg-or-default @responsive true}}
50
- @rightSideItems={{@pageHeader.rightSideItems}}
51
- @iconType={{@pageHeader.iconType}}
52
- @tabs={{@pageHeader.tabs}}
53
- @pageTitle={{@pageHeader.pageTitle}}
54
- />
55
- {{/if}}
56
- <EuiPageContent
57
- @verticalPosition="center"
58
- @horizontalPosition="center"
59
- @paddingSize={{arg-or-default @paddingSize "none"}}
60
- {{! {...pageContentProps} }}
61
- >
62
- <EuiPageContentBody
63
- @paddingSize={{if
64
- (or @pageSideBar (has-block "pageSideBar"))
65
- @paddingSize
66
- "none"
67
- }}
68
- @restrictWidth={{@restrictWidth}}
69
- {{! {...pageContentBodyProps} }}
1
+ {{#let
2
+ (arg-or-default @grow true)
3
+ (arg-or-default @paddingSize "l")
4
+ (and (arg-or-default @hasBottomBarBlock true) (has-block "bottomBar"))
5
+ (and (arg-or-default @hasPageSideBarBlock true) (has-block "pageSideBar"))
6
+ (and
7
+ (arg-or-default @hasPageHeaderPageTitleBlock true)
8
+ (has-block "pageHeaderPageTitle")
9
+ )
10
+ (and
11
+ (arg-or-default @hasPageHeaderDefaultBlock true)
12
+ (has-block "pageHeaderDefault")
13
+ )
14
+ (and
15
+ (arg-or-default @hasPageHeaderRightSideItemsBlock true)
16
+ (has-block "pageHeaderRightSideItems")
17
+ )
18
+ (and
19
+ (arg-or-default @hasPageHeaderDescriptionBlock true)
20
+ (has-block "pageHeaderDescription")
21
+ )
22
+ (modifier
23
+ "use-is-within-breakpoints"
24
+ sizes=(array "m" "l" "xl")
25
+ isActive=true
26
+ setIsWithinBreakpointsValue=this.setIsWithinBreakpoints
27
+ )
28
+ as |grow paddingSize hasBottomBarBlock hasPageSideBarBlock hasPageHeaderPageTitleBlock hasPageHeaderDefaultBlock hasPageHeaderRightSideItemsBlock hasPageHeaderDescriptionBlock isWithinBreakpointsModifier|
29
+ }}
30
+ {{#let
31
+ (or
32
+ @pageHeader
33
+ hasPageHeaderPageTitleBlock
34
+ hasPageHeaderDefaultBlock
35
+ hasPageHeaderRightSideItemsBlock
36
+ hasPageHeaderDescriptionBlock
37
+ )
38
+ as |hasPageHeader|
39
+ }}
40
+ {{#if (eq this.template "centeredBody")}}
41
+ {{#if hasPageSideBarBlock}}
42
+ <EuiPage
43
+ class={{this.classes}}
44
+ @paddingSize="none"
45
+ @grow={{grow}}
46
+ {{isWithinBreakpointsModifier}}
47
+ {{style (inline-styles min-height=this.minHeight)}}
48
+ ...attributes
70
49
  >
71
- {{yield to="default"}}
72
- </EuiPageContentBody>
73
- </EuiPageContent>
74
- </EuiPageBody>
75
- </EuiPage>
76
- {{else if (eq this.template "centeredContent")}}
77
- <EuiPage
78
- class={{this.classes}}
79
- @paddingSize="none"
80
- @grow={{arg-or-default @grow true}}
81
- {{style (inline-styles min-height=(concat this.minHeight "px"))}}
82
- {{! {...rest} }}
83
- {{! style={pageStyle} }}
84
- >
85
- {{#if (has-block "pageSideBar")}}
86
- {{yield to="pageSideBar"}}
87
- {{else if @pageSideBar}}
88
- <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
89
- {{@pageSideBar}}
90
- </EuiPageSideBar>
91
- {{/if}}
92
- {{#if (or (has-block "pageSideBar") @pageSideBar)}}
93
- <EuiPageBody
94
- @panelled={{true}}
95
- @paddingSize={{arg-or-default @paddingSize "l"}}
96
- class={{this.pageBodyProps}}
97
- >
98
- {{#if (has-block "pageHeader")}}
99
- {{yield to="pageHeader"}}
100
- {{else if @pageHeader}}
101
- <EuiPageHeader
102
- @restrictWidth={{@restrictWidth}}
103
- @paddingSize={{if
104
- (or @pageHeader (has-block "pageHeader"))
105
- ""
106
- this.paddingSize
107
- }}
108
- @responsive={{arg-or-default @responsive true}}
109
- @rightSideItems={{@pageHeader.rightSideItems}}
110
- @iconType={{@pageHeader.iconType}}
111
- @tabs={{@pageHeader.tabs}}
112
- @pageTitle={{@pageHeader.pageTitle}}
113
- />
114
- {{/if}}
115
- <EuiPageContent
116
- @verticalPosition="center"
117
- @horizontalPosition="center"
118
- @hasShadow={{false}}
119
- @color="subdued"
120
- @paddingSize={{@pageContentProps.paddingSize}}
121
- style={{if
122
- (or @pageHeader (has-block "pageHeader"))
123
- ""
124
- "display: flex"
125
- }}
126
- class={{this.pageContentProps}}
50
+ <EuiPageSideBar
51
+ class={{@pageSideBarProps.className}}
52
+ @sticky={{true}}
53
+ @paddingSize={{paddingSize}}
54
+ >
55
+ {{yield to="pageSideBar"}}
56
+ </EuiPageSideBar>
57
+ <EuiPageBody
58
+ class={{this.pageBodyPropsClass}}
59
+ @paddingSize={{paddingSize}}
60
+ >
61
+ <EuiPageHeader
62
+ @restrictWidth={{this.restrictWidth}}
63
+ @responsive={{@pageHeader.responsive}}
64
+ @iconType={{@pageHeader.iconType}}
65
+ @tabs={{@pageHeader.tabs}}
66
+ @pageTitle={{@pageHeader.pageTitle}}
67
+ @description={{@pageHeader.description}}
68
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
69
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
70
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
71
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
72
+ >
73
+ <:pageTitle>
74
+ {{yield to="pageHeaderPageTitle"}}
75
+ </:pageTitle>
76
+ <:default>
77
+ {{yield to="pageHeaderDefault"}}
78
+ </:default>
79
+ <:description>
80
+ {{yield to="pageHeaderDescription"}}
81
+ </:description>
82
+ <:rightSideItems as |item|>
83
+ {{yield item to="pageHeaderRightSideItems"}}
84
+ </:rightSideItems>
85
+ </EuiPageHeader>
86
+
87
+ <EuiPageContent
88
+ class={{this.pageContentPropsClass}}
89
+ @verticalPosition="center"
90
+ @horizontalPosition="center"
91
+ @paddingSize={{paddingSize}}
92
+ >
93
+ <EuiPageContentBody
94
+ class={{this.pageContentBodyPropsClass}}
95
+ @restrictWidth={{this.restrictWidth}}
96
+ >
97
+ {{#if (and this.canFullHeight this.fullHeight)}}
98
+ <EuiFlexGroup
99
+ class="eui-fullHeight"
100
+ @gutterSize="none"
101
+ @direction="column"
102
+ @responsive={{false}}
103
+ >
104
+ <EuiFlexItem
105
+ class={{class-names
106
+ (if (eq this.fullHeight true) "eui-yScroll")
107
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
108
+ }}
109
+ @grow={{true}}
110
+ >
111
+ {{yield to="default"}}
112
+ </EuiFlexItem>
113
+ </EuiFlexGroup>
114
+ {{else}}
115
+ {{yield to="default"}}
116
+ {{/if}}
117
+ </EuiPageContentBody>
118
+ </EuiPageContent>
119
+ </EuiPageBody>
120
+ </EuiPage>
121
+ {{else}}
122
+ <EuiPage
123
+ class={{this.classes}}
124
+ @paddingSize={{paddingSize}}
125
+ @grow={{grow}}
126
+ {{isWithinBreakpointsModifier}}
127
+ {{style (inline-styles min-height=this.minHeight)}}
128
+ ...attributes
127
129
  >
128
- <EuiPageContentBody
129
- @restrictWidth={{@restrictWidth}}
130
- class={{this.pageContentBodyProps}}
130
+ <EuiPageBody
131
+ class={{this.pageBodyPropsClass}}
132
+ @restrictWidth={{this.restrictWidth}}
131
133
  >
132
- {{yield to="default"}}
133
- </EuiPageContentBody>
134
- </EuiPageContent>
135
- </EuiPageBody>
136
- {{else}}
137
- <EuiPageBody class={{this.pageBodyProps}} @paddingSize="l">
138
- {{#if (has-block "pageHeader")}}
139
- {{yield to="pageHeader"}}
140
- {{else if @pageHeader}}
141
- <EuiPageHeader
142
- @restrictWidth={{@restrictWidth}}
143
- @paddingSize={{this.paddingSize}}
144
- @responsive={{arg-or-default @responsive true}}
145
- @rightSideItems={{@pageHeader.rightSideItems}}
146
- @iconType={{@pageHeader.iconType}}
147
- @tabs={{@pageHeader.tabs}}
148
- @pageTitle={{@pageHeader.pageTitle}}
149
- />
150
- {{/if}}
151
- <EuiPageContent
152
- @borderRadius="none"
153
- @hasShadow={{false}}
154
- @paddingSize={{@paddingSize}}
155
- style="display: flex"
134
+ {{#if hasPageHeader}}
135
+ <EuiPageHeader
136
+ @restrictWidth={{false}}
137
+ @bottomBorder={{@pageHeader.bottomBorder}}
138
+ @paddingSize="none"
139
+ @responsive={{@pageHeader.responsive}}
140
+ @iconType={{@pageHeader.iconType}}
141
+ @tabs={{@pageHeader.tabs}}
142
+ @pageTitle={{@pageHeader.pageTitle}}
143
+ @description={{@pageHeader.description}}
144
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
145
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
146
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
147
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
148
+ >
149
+ <:pageTitle>
150
+ {{yield to="pageHeaderPageTitle"}}
151
+ </:pageTitle>
152
+ <:default>
153
+ {{yield to="pageHeaderDefault"}}
154
+ </:default>
155
+ <:description>
156
+ {{yield to="pageHeaderDescription"}}
157
+ </:description>
158
+ <:rightSideItems as |item|>
159
+ {{yield item to="pageHeaderRightSideItems"}}
160
+ </:rightSideItems>
161
+ </EuiPageHeader>
162
+ {{/if}}
163
+ <EuiPageBody>
164
+ <EuiPageContent
165
+ class={{this.pageContentPropsClass}}
166
+ @verticalPosition="center"
167
+ @horizontalPosition="center"
168
+ @hasBorder={{@pageContentProps.hasBorder}}
169
+ @hasShadow={{@pageContentProps.hasShadow}}
170
+ @color={{@pageContentProps.color}}
171
+ @borderRadius={{@pageContentProps.borderRadius}}
172
+ @grow={{@pageContentProps.grow}}
173
+ @role={{@pageContentProps.role}}
174
+ @paddingSize={{paddingSize}}
175
+ >
176
+ <EuiPageContentBody
177
+ class={{this.pageContentBodyPropsClass}}
178
+ @paddingSize="none"
179
+ @restrictWidth={{this.restrictWidth}}
180
+ >
181
+ {{#if (and this.canFullHeight this.fullHeight)}}
182
+ <EuiFlexGroup
183
+ class="eui-fullHeight"
184
+ @gutterSize="none"
185
+ @direction="column"
186
+ @responsive={{false}}
187
+ >
188
+ <EuiFlexItem
189
+ class={{class-names
190
+ (if (eq this.fullHeight true) "eui-yScroll")
191
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
192
+ }}
193
+ @grow={{true}}
194
+ >
195
+ {{yield to="default"}}
196
+ </EuiFlexItem>
197
+ </EuiFlexGroup>
198
+ {{else}}
199
+ {{yield to="default"}}
200
+ {{/if}}
201
+ </EuiPageContentBody>
202
+ </EuiPageContent>
203
+ </EuiPageBody>
204
+ </EuiPageBody>
205
+ </EuiPage>
206
+ {{/if}}
207
+ {{else if (eq this.template "centeredContent")}}
208
+ {{#if hasPageSideBarBlock}}
209
+ <EuiPage
210
+ class={{this.classes}}
211
+ @paddingSize="none"
212
+ @grow={{grow}}
213
+ {{isWithinBreakpointsModifier}}
214
+ {{style (inline-styles min-height=this.minHeight)}}
215
+ ...attributes
156
216
  >
157
- <EuiPageContent
158
- @verticalPosition="center"
159
- @horizontalPosition="center"
160
- @hasShadow={{false}}
161
- @color="subdued"
162
- @paddingSize={{@pageContentProps.paddingSize}}
163
- class={{this.pageContentProps}}
217
+ <EuiPageSideBar
218
+ class={{@pageSideBarProps.className}}
219
+ @sticky={{true}}
220
+ @paddingSize={{paddingSize}}
221
+ >
222
+ {{yield to="pageSideBar"}}
223
+ </EuiPageSideBar>
224
+ <EuiPageBody
225
+ @panelled={{true}}
226
+ @paddingSize={{paddingSize}}
227
+ class={{this.pageBodyPropsClass}}
164
228
  >
165
- <EuiPageContentBody
166
- @restrictWidth={{@restrictWidth}}
167
- class={{this.pageContentBodyProps}}
229
+ {{#if hasPageHeader}}
230
+ <EuiPageHeader
231
+ @restrictWidth={{this.restrictWidth}}
232
+ @paddingSize={{@pageHeader.paddingSize}}
233
+ @responsive={{@pageHeader.responsive}}
234
+ @iconType={{@pageHeader.iconType}}
235
+ @tabs={{@pageHeader.tabs}}
236
+ @pageTitle={{@pageHeader.pageTitle}}
237
+ @description={{@pageHeader.description}}
238
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
239
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
240
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
241
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
242
+ >
243
+ <:pageTitle>
244
+ {{yield to="pageHeaderPageTitle"}}
245
+ </:pageTitle>
246
+ <:default>
247
+ {{yield to="pageHeaderDefault"}}
248
+ </:default>
249
+ <:description>
250
+ {{yield to="pageHeaderDescription"}}
251
+ </:description>
252
+ <:rightSideItems as |item|>
253
+ {{yield item to="pageHeaderRightSideItems"}}
254
+ </:rightSideItems>
255
+ </EuiPageHeader>
256
+ {{/if}}
257
+ <EuiPageContent
258
+ @verticalPosition="center"
259
+ @horizontalPosition="center"
260
+ @hasShadow={{false}}
261
+ @color="subdued"
262
+ @paddingSize={{paddingSize}}
263
+ class={{this.pageContentPropsClass}}
168
264
  >
169
- {{yield to="default"}}
170
- </EuiPageContentBody>
171
- </EuiPageContent>
172
- </EuiPageContent>
173
- </EuiPageBody>
174
- {{/if}}
175
- </EuiPage>
176
- {{else if (eq this.template "empty")}}
177
- <EuiPage
178
- class={{this.classes}}
179
- @paddingSize={{if
180
- (or (has-block "pageSideBar") @pageSideBar)
181
- "none"
182
- @paddingSize
183
- }}
184
- @grow={{arg-or-default @grow true}}
185
- {{style (inline-styles min-height=(concat this.minHeight "px"))}}
186
- {{! {...rest} }}
187
- {{! style={pageStyle} }}
188
- >
189
- {{#if (has-block "pageSideBar")}}
190
- {{yield to="pageSideBar"}}
191
- {{else if @pageSideBar}}
192
- <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
193
- {{@pageSideBar}}
194
- </EuiPageSideBar>
195
- {{/if}}
196
- <EuiPageBody
197
- @restrictWidth={{if
198
- (or (has-block "pageSideBar") @pageSideBar)
199
- "none"
200
- @restrictWidth
201
- }}
202
- @paddingSize={{if
203
- (or (has-block "pageSideBar") @pageSideBar)
204
- @paddingSize
205
- "none"
206
- }}
207
- class={{this.pageBodyProps}}
208
- >
209
- {{#if (has-block "pageHeader")}}
210
- {{yield to="pageHeader"}}
211
- {{else if @pageHeader}}
212
- <EuiPageHeader
213
- @restrictWidth={{if
214
- (or (has-block "pageSideBar") @pageSideBar)
215
- @restrictWidth
216
- false
217
- }}
218
- @paddingSize={{if
219
- (or (has-block "pageSideBar") @pageSideBar)
220
- @paddingSize
221
- "none"
222
- }}
223
- @bottomBorder={{@bottomBorder}}
224
- @responsive={{arg-or-default @responsive true}}
225
- @rightSideItems={{@pageHeader.rightSideItems}}
226
- @iconType={{@pageHeader.iconType}}
227
- @tabs={{@pageHeader.tabs}}
228
- @pageTitle={{@pageHeader.pageTitle}}
229
- />
230
- {{/if}}
231
- <EuiPageContent
232
- @hasBorder={{false}}
233
- @hasShadow={{false}}
234
- @paddingSize={{"none"}}
235
- @color={{"transparent"}}
236
- @borderRadius={{"none"}}
237
- class={{this.pageContentProps}}
238
- >
239
- <EuiPageContentBody
240
- @paddingSize={{if
241
- (or (has-block "pageSideBar") @pageSideBar)
242
- @paddingSize
243
- "none"
244
- }}
245
- @restrictWidth={{if
246
- (or (has-block "pageSideBar") @pageSideBar)
247
- @restrictWidth
248
- false
249
- }}
250
- class={{this.pageContentBodyProps}}
265
+ <EuiPageContentBody
266
+ @restrictWidth={{this.restrictWidth}}
267
+ class={{this.pageContentBodyPropsClass}}
268
+ >
269
+ {{#if (and this.canFullHeight this.fullHeight)}}
270
+ <EuiFlexGroup
271
+ class="eui-fullHeight"
272
+ @gutterSize="none"
273
+ @direction="column"
274
+ @responsive={{false}}
275
+ >
276
+ <EuiFlexItem
277
+ class={{class-names
278
+ (if (eq this.fullHeight true) "eui-yScroll")
279
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
280
+ }}
281
+ @grow={{true}}
282
+ >
283
+ {{yield to="default"}}
284
+ </EuiFlexItem>
285
+ </EuiFlexGroup>
286
+ {{else}}
287
+ {{yield to="default"}}
288
+ {{/if}}
289
+ </EuiPageContentBody>
290
+ </EuiPageContent>
291
+ </EuiPageBody>
292
+ </EuiPage>
293
+ {{else}}
294
+ <EuiPage
295
+ class={{this.classes}}
296
+ @paddingSize="none"
297
+ @grow={{grow}}
298
+ {{isWithinBreakpointsModifier}}
299
+ {{style (inline-styles min-height=this.minHeight)}}
300
+ ...attributes
251
301
  >
252
- {{#if (and this.fullHeight this.canFullHeight)}}
253
- <EuiFlexGroup
254
- class="eui-fullHeight"
255
- @gutterSize="none"
256
- @direction="column"
257
- @responsive={{false}}
302
+ <EuiPageBody class={{this.pageBodyPropsClass}}>
303
+ {{#if hasPageHeader}}
304
+ <EuiPageHeader
305
+ @restrictWidth={{this.restrictWidth}}
306
+ @paddingSize={{paddingSize}}
307
+ @responsive={{@pageHeader.responsive}}
308
+ @iconType={{@pageHeader.iconType}}
309
+ @tabs={{@pageHeader.tabs}}
310
+ @pageTitle={{@pageHeader.pageTitle}}
311
+ @description={{@pageHeader.description}}
312
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
313
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
314
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
315
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
316
+ >
317
+ <:pageTitle>
318
+ {{yield to="pageHeaderPageTitle"}}
319
+ </:pageTitle>
320
+ <:default>
321
+ {{yield to="pageHeaderDefault"}}
322
+ </:default>
323
+ <:description>
324
+ {{yield to="pageHeaderDescription"}}
325
+ </:description>
326
+ <:rightSideItems as |item|>
327
+ {{yield item to="pageHeaderRightSideItems"}}
328
+ </:rightSideItems>
329
+ </EuiPageHeader>
330
+ {{/if}}
331
+ {{!template-lint-disable}}
332
+ <EuiPageContent
333
+ role={{null}}
334
+ @borderRadius="none"
335
+ @hasShadow={{false}}
336
+ @paddingSize={{paddingSize}}
337
+ style="display: flex"
258
338
  >
259
- <EuiFlexItem
260
- class={{class-names
261
- (if
262
- (eq this.fullHeight "noscroll")
263
- "eui-fullHeight "
264
- (if (eq this.fullHeight true) "eui-yScroll")
265
- )
266
- }}
267
- @grow={{true}}
339
+ {{!template-lint-enable}}
340
+ <EuiPageContent
341
+ @verticalPosition="center"
342
+ @horizontalPosition="center"
343
+ @hasShadow={{false}}
344
+ @color="subdued"
345
+ @paddingSize={{paddingSize}}
346
+ class={{this.pageContentPropsClass}}
268
347
  >
269
- {{yield to="default"}}
270
- </EuiFlexItem>
271
- </EuiFlexGroup>
272
- {{else}}
273
- {{yield to="default"}}
274
- {{/if}}
275
- </EuiPageContentBody>
276
- </EuiPageContent>
277
- </EuiPageBody>
278
- </EuiPage>
279
- {{else}}
280
- <EuiPage
281
- class={{this.classes}}
282
- @paddingSize="none"
283
- @grow={{arg-or-default @grow true}}
284
- {{style (inline-styles min-height=(concat this.minHeight "px"))}}
285
- {{!-- @style={{@pageStyle}} --}}
286
- >
287
- {{#if (has-block "pageSideBar")}}
288
- {{yield to="pageSideBar"}}
289
- {{else if @pageSideBar}}
290
- <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
291
- {{@pageSideBar}}
292
- </EuiPageSideBar>
293
- {{/if}}
294
- {{! <EuiPageBody {...pageBodyProps}> }}
295
- {{#if (or (has-block "bottomBar") @bottomBar)}}
296
- <EuiPageBody
297
- @panelled={{true}}
298
- @paddingSize="none"
299
- class={{this.pageBodyProps}}
300
- >
301
- <EuiPageBody @paddingSize="l">
302
- {{#if (has-block "pageHeader")}}
303
- {{yield to="pageHeader"}}
304
- {{else if @pageHeader}}
305
- <EuiPageHeader
306
- @restrictWidth={{@restrictWidth}}
307
- @paddingSize={{@paddingSize}}
308
- @responsive={{arg-or-default @responsive true}}
309
- @rightSideItems={{@pageHeader.rightSideItems}}
310
- @iconType={{@pageHeader.iconType}}
311
- @tabs={{@pageHeader.tabs}}
312
- @pageTitle={{@pageHeader.pageTitle}}
313
- />
314
- {{/if}}
348
+ <EuiPageContentBody
349
+ @restrictWidth={{this.restrictWidth}}
350
+ class={{this.pageContentBodyPropsClass}}
351
+ >
352
+ {{#if (and this.canFullHeight this.fullHeight)}}
353
+ <EuiFlexGroup
354
+ class="eui-fullHeight"
355
+ @gutterSize="none"
356
+ @direction="column"
357
+ @responsive={{false}}
358
+ >
359
+ <EuiFlexItem
360
+ class={{class-names
361
+ (if (eq this.fullHeight true) "eui-yScroll")
362
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
363
+ }}
364
+ @grow={{true}}
365
+ >
366
+ {{yield to="default"}}
367
+ </EuiFlexItem>
368
+ </EuiFlexGroup>
369
+ {{else}}
370
+ {{yield to="default"}}
371
+ {{/if}}
372
+ </EuiPageContentBody>
373
+ </EuiPageContent>
315
374
 
316
- <EuiPageContent
317
- {{! @hasBorder={pageHeader === undefined ? false : undefined} }}
318
- @hasBorder={{false}}
319
- @hasShadow={{false}}
320
- @paddingSize={{"none"}}
321
- @color={{"plain"}}
322
- @borderRadius={{"none"}}
323
- class={{this.pageContentProps}}
375
+ </EuiPageContent>
376
+ </EuiPageBody>
377
+ </EuiPage>
378
+ {{/if}}
379
+ {{else if (eq this.template "empty")}}
380
+ {{#if hasPageSideBarBlock}}
381
+ <EuiPage
382
+ class={{this.classes}}
383
+ @paddingSize="none"
384
+ @grow={{grow}}
385
+ {{isWithinBreakpointsModifier}}
386
+ {{style (inline-styles min-height=this.minHeight)}}
387
+ ...attributes
388
+ >
389
+ <EuiPageSideBar @sticky={{true}} @paddingSize={{paddingSize}}>
390
+ {{yield to="pageSideBar"}}
391
+ </EuiPageSideBar>
392
+ <EuiPageBody
393
+ @paddingSize={{paddingSize}}
394
+ class={{this.pageBodyPropsClass}}
324
395
  >
325
- <EuiPageContentBody
326
- @restrictWidth={{@restrictWidth}}
327
- @paddingSize={{@paddingSize}}
328
- @borderRadius={{@borderRadius}}
329
- class={{this.pageContentBodyProps}}
396
+ {{#if hasPageHeader}}
397
+ <EuiPageHeader
398
+ @restrictWidth={{this.restrictWidth}}
399
+ @paddingSize={{@pageHeader.paddingSize}}
400
+ @responsive={{@pageHeader.responsive}}
401
+ @iconType={{@pageHeader.iconType}}
402
+ @tabs={{@pageHeader.tabs}}
403
+ @pageTitle={{@pageHeader.pageTitle}}
404
+ @description={{@pageHeader.description}}
405
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
406
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
407
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
408
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
409
+ >
410
+ <:pageTitle>
411
+ {{yield to="pageHeaderPageTitle"}}
412
+ </:pageTitle>
413
+ <:default>
414
+ {{yield to="pageHeaderDefault"}}
415
+ </:default>
416
+ <:description>
417
+ {{yield to="pageHeaderDescription"}}
418
+ </:description>
419
+ <:rightSideItems as |item|>
420
+ {{yield item to="pageHeaderRightSideItems"}}
421
+ </:rightSideItems>
422
+ </EuiPageHeader>
423
+ {{/if}}
424
+ <EuiPageContent
425
+ @hasBorder={{false}}
426
+ @hasShadow={{false}}
427
+ @paddingSize="none"
428
+ @color="transparent"
429
+ @borderRadius="none"
430
+ class={{this.pageContentPropsClass}}
330
431
  >
331
- {{yield to="default"}}
332
- </EuiPageContentBody>
333
- </EuiPageContent>
334
- </EuiPageBody>
335
- {{#if (has-block "bottomBar")}}
336
- {{yield to="bottomBar"}}
337
- {{else if @bottomBar}}
338
- <EuiBottomBar
339
- @paddingSize={{@paddingSize}}
340
- @position={{if
341
- (and this.canFullHeight this.fullHeight)
342
- "static"
343
- "sticky"
344
- }}
345
- {{! {...(bottomBarProps as unknown)} }}
432
+ <EuiPageContentBody
433
+ @restrictWidth={{this.restrictWidth}}
434
+ class={{this.pageContentBodyPropsClass}}
435
+ >
436
+ {{#if (and this.canFullHeight this.fullHeight)}}
437
+ <EuiFlexGroup
438
+ class="eui-fullHeight"
439
+ @gutterSize="none"
440
+ @direction="column"
441
+ @responsive={{false}}
442
+ >
443
+ <EuiFlexItem
444
+ class={{class-names
445
+ (if (eq this.fullHeight true) "eui-yScroll")
446
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
447
+ }}
448
+ @grow={{true}}
449
+ >
450
+ {{yield to="default"}}
451
+ </EuiFlexItem>
452
+ </EuiFlexGroup>
453
+ {{else}}
454
+ {{yield to="default"}}
455
+ {{/if}}
456
+ </EuiPageContentBody>
457
+ </EuiPageContent>
458
+ </EuiPageBody>
459
+ </EuiPage>
460
+ {{else}}
461
+ <EuiPage
462
+ class={{this.classes}}
463
+ @paddingSize={{paddingSize}}
464
+ @grow={{grow}}
465
+ {{isWithinBreakpointsModifier}}
466
+ {{style (inline-styles min-height=this.minHeight)}}
467
+ ...attributes
468
+ >
469
+ <EuiPageBody
470
+ @restrictWidth={{this.restrictWidth}}
471
+ class={{this.pageBodyPropsClass}}
346
472
  >
347
- {{! {/* Wrapping the contents with EuiPageContentBody allows us to match the restrictWidth to keep the contents aligned */} }}
348
- <EuiPageContentBody
349
- @paddingSize={{"none"}}
350
- @restrictWidth={{@restrictWidth}}
473
+ {{#if hasPageHeader}}
474
+ <EuiPageHeader
475
+ @bottomBorder={{@pageHeader.bottomBorder}}
476
+ @restrictWidth={{false}}
477
+ @paddingSize={{@pageHeader.paddingSize}}
478
+ @responsive={{@pageHeader.responsive}}
479
+ @iconType={{@pageHeader.iconType}}
480
+ @tabs={{@pageHeader.tabs}}
481
+ @pageTitle={{@pageHeader.pageTitle}}
482
+ @description={{@pageHeader.description}}
483
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
484
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
485
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
486
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
487
+ >
488
+ <:pageTitle>
489
+ {{yield to="pageHeaderPageTitle"}}
490
+ </:pageTitle>
491
+ <:default>
492
+ {{yield to="pageHeaderDefault"}}
493
+ </:default>
494
+ <:description>
495
+ {{yield to="pageHeaderDescription"}}
496
+ </:description>
497
+ <:rightSideItems as |item|>
498
+ {{yield item to="pageHeaderRightSideItems"}}
499
+ </:rightSideItems>
500
+ </EuiPageHeader>
501
+ {{/if}}
502
+ <EuiPageContent
503
+ @hasBorder={{false}}
504
+ @hasShadow={{false}}
505
+ @paddingSize="none"
506
+ @color="transparent"
507
+ @borderRadius="none"
508
+ class={{this.pageContentPropsClass}}
351
509
  >
352
- {{@bottomBar}}
353
- </EuiPageContentBody>
354
- </EuiBottomBar>
355
- {{/if}}
356
- </EuiPageBody>
510
+ <EuiPageContentBody
511
+ @restrictWidth="none"
512
+ class={{this.pageContentBodyPropsClass}}
513
+ >
514
+ {{#if (and this.canFullHeight this.fullHeight)}}
515
+ <EuiFlexGroup
516
+ class="eui-fullHeight"
517
+ @gutterSize="none"
518
+ @direction="column"
519
+ @responsive={{false}}
520
+ >
521
+ <EuiFlexItem
522
+ class={{class-names
523
+ (if (eq this.fullHeight true) "eui-yScroll")
524
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
525
+ }}
526
+ @grow={{true}}
527
+ >
528
+ {{yield to="default"}}
529
+ </EuiFlexItem>
530
+ </EuiFlexGroup>
531
+ {{else}}
532
+ {{yield to="default"}}
533
+ {{/if}}
534
+ </EuiPageContentBody>
535
+ </EuiPageContent>
536
+ </EuiPageBody>
537
+ </EuiPage>
538
+ {{/if}}
357
539
  {{else}}
358
- <EuiPageBody @paddingSize="l">
359
- {{#if (has-block "pageHeader")}}
360
- {{yield to="pageHeader"}}
361
- {{else if @pageHeader}}
362
- <EuiPageHeader
363
- @restrictWidth={{@restrictWidth}}
364
- @paddingSize={{@paddingSize}}
365
- @responsive={{arg-or-default @responsive true}}
366
- @rightSideItems={{@pageHeader.rightSideItems}}
367
- @iconType={{@pageHeader.iconType}}
368
- @tabs={{@pageHeader.tabs}}
369
- @pageTitle={{@pageHeader.pageTitle}}
370
- @description={{@pageHeader.description}}
371
- />
372
- {{/if}}
373
-
374
- <EuiPageContent
375
- {{! @hasBorder={pageHeader === undefined ? false : undefined} }}
376
- @hasBorder={{false}}
377
- @hasShadow={{false}}
378
- @paddingSize={{"none"}}
379
- @color={{"plain"}}
380
- @borderRadius={{"none"}}
381
- class={{this.pageContentProps}}
540
+ {{#if hasPageSideBarBlock}}
541
+ <EuiPage
542
+ class={{this.classes}}
543
+ @paddingSize="none"
544
+ @grow={{grow}}
545
+ {{isWithinBreakpointsModifier}}
546
+ {{style (inline-styles min-height=this.minHeight)}}
547
+ ...attributes
382
548
  >
383
- <EuiPageContentBody
384
- @restrictWidth={{@restrictWidth}}
385
- @paddingSize={{@paddingSize}}
386
- @borderRadius={{@borderRadius}}
387
- class={{this.pageContentBodyProps}}
549
+ <EuiPageSideBar
550
+ class={{@pageSideBarProps.className}}
551
+ @sticky={{true}}
552
+ @paddingSize={{paddingSize}}
388
553
  >
389
- {{#if (and this.fullHeight this.canFullHeight)}}
390
- <EuiFlexGroup
391
- class="eui-fullHeight"
392
- @gutterSize="none"
393
- @direction="column"
394
- @responsive={{false}}
554
+ {{yield to="pageSideBar"}}
555
+ </EuiPageSideBar>
556
+ <EuiPageBody
557
+ @panelled={{true}}
558
+ @paddingSize="none"
559
+ class={{this.pageBodyPropsClass}}
560
+ >
561
+ <EuiPageBody
562
+ class={{this.pageBodyPropsClass}}
563
+ @paddingSize={{paddingSize}}
564
+ @tagName="div"
565
+ >
566
+ {{#if hasPageHeader}}
567
+ <EuiPageHeader
568
+ @bottomBorder={{@pageHeader.bottomBorder}}
569
+ @restrictWidth={{this.restrictWidth}}
570
+ @paddingSize={{@pageHeader.paddingSize}}
571
+ @responsive={{@pageHeader.responsive}}
572
+ @iconType={{@pageHeader.iconType}}
573
+ @tabs={{@pageHeader.tabs}}
574
+ @pageTitle={{@pageHeader.pageTitle}}
575
+ @description={{@pageHeader.description}}
576
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
577
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
578
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
579
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
580
+ >
581
+ <:pageTitle>
582
+ {{yield to="pageHeaderPageTitle"}}
583
+ </:pageTitle>
584
+ <:default>
585
+ {{yield to="pageHeaderDefault"}}
586
+ </:default>
587
+ <:description>
588
+ {{yield to="pageHeaderDescription"}}
589
+ </:description>
590
+ <:rightSideItems as |item|>
591
+ {{yield item to="pageHeaderRightSideItems"}}
592
+ </:rightSideItems>
593
+ </EuiPageHeader>
594
+ {{/if}}
595
+ <EuiPageContent
596
+ @hasShadow={{false}}
597
+ @hasBorder={{false}}
598
+ @color="transparent"
599
+ @borderRadius="none"
600
+ @paddingSize="none"
601
+ class={{this.pageContentPropsClass}}
602
+ >
603
+ <EuiPageContentBody
604
+ @restrictWidth={{this.restrictWidth}}
605
+ class={{this.pageContentBodyPropsClass}}
606
+ >
607
+ {{#if (and this.canFullHeight this.fullHeight)}}
608
+ <EuiFlexGroup
609
+ class="eui-fullHeight"
610
+ @gutterSize="none"
611
+ @direction="column"
612
+ @responsive={{false}}
613
+ >
614
+ <EuiFlexItem
615
+ class={{class-names
616
+ (if (eq this.fullHeight true) "eui-yScroll")
617
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
618
+ }}
619
+ @grow={{true}}
620
+ >
621
+ {{yield to="default"}}
622
+ </EuiFlexItem>
623
+ </EuiFlexGroup>
624
+ {{else}}
625
+ {{yield to="default"}}
626
+ {{/if}}
627
+ </EuiPageContentBody>
628
+ </EuiPageContent>
629
+ </EuiPageBody>
630
+ {{#if hasBottomBarBlock}}
631
+ <EuiBottomBar
632
+ @paddingSize={{paddingSize}}
633
+ @position={{if
634
+ (and this.canFullHeight this.fullHeight)
635
+ "static"
636
+ "sticky"
637
+ }}
395
638
  >
396
- <EuiFlexItem
397
- class={{class-names
398
- (if
399
- (eq this.fullHeight "noscroll")
400
- "eui-fullHeight "
401
- (if (eq this.fullHeight true) "eui-yScroll")
402
- )
403
- }}
404
- @grow={{true}}
639
+ <EuiPageContentBody
640
+ @paddingSize="none"
641
+ @restrictWidth={{this.restrictWidth}}
405
642
  >
643
+ {{yield to="bottomBar"}}
644
+ </EuiPageContentBody>
645
+ </EuiBottomBar>
646
+ {{/if}}
647
+ </EuiPageBody>
648
+ </EuiPage>
649
+ {{else}}
650
+ <EuiPage
651
+ class={{this.classes}}
652
+ @paddingSize="none"
653
+ @grow={{grow}}
654
+ {{isWithinBreakpointsModifier}}
655
+ {{style (inline-styles min-height=this.minHeight)}}
656
+ ...attributes
657
+ >
658
+ <EuiPageBody class={{this.pageBodyPropsClass}}>
659
+ {{#if hasPageHeader}}
660
+ <EuiPageHeader
661
+ @restrictWidth={{this.restrictWidth}}
662
+ @bottomBorder={{@pageHeader.bottomBorder}}
663
+ @paddingSize={{paddingSize}}
664
+ @responsive={{@pageHeader.responsive}}
665
+ @iconType={{@pageHeader.iconType}}
666
+ @tabs={{@pageHeader.tabs}}
667
+ @pageTitle={{@pageHeader.pageTitle}}
668
+ @description={{@pageHeader.description}}
669
+ @hasPageTitleBlock={{hasPageHeaderPageTitleBlock}}
670
+ @hasDefaultBlock={{hasPageHeaderDefaultBlock}}
671
+ @hasDescriptionBlock={{hasPageHeaderDescriptionBlock}}
672
+ @hasRightSideItemsBlock={{hasPageHeaderRightSideItemsBlock}}
673
+ >
674
+ <:pageTitle>
675
+ {{yield to="pageHeaderPageTitle"}}
676
+ </:pageTitle>
677
+ <:default>
678
+ {{yield to="pageHeaderDefault"}}
679
+ </:default>
680
+ <:description>
681
+ {{yield to="pageHeaderDescription"}}
682
+ </:description>
683
+ <:rightSideItems as |item|>
684
+ {{yield item to="pageHeaderRightSideItems"}}
685
+ </:rightSideItems>
686
+ </EuiPageHeader>
687
+ {{/if}}
688
+ <EuiPageContent
689
+ @hasBorder={{if hasPageHeader false}}
690
+ @hasShadow={{false}}
691
+ @paddingSize="none"
692
+ @color="plain"
693
+ @borderRadius="none"
694
+ class={{this.pageContentPropsClass}}
695
+ >
696
+ <EuiPageContentBody
697
+ @restrictWidth={{this.restrictWidth}}
698
+ @paddingSize={{paddingSize}}
699
+ class={{this.pageContentBodyPropsClass}}
700
+ >
701
+ {{#if (and this.canFullHeight this.fullHeight)}}
702
+ <EuiFlexGroup
703
+ class="eui-fullHeight"
704
+ @gutterSize="none"
705
+ @direction="column"
706
+ @responsive={{false}}
707
+ >
708
+ <EuiFlexItem
709
+ class={{class-names
710
+ (if (eq this.fullHeight true) "eui-yScroll")
711
+ (if (eq this.fullHeight "noscroll") "eui-fullHeight")
712
+ }}
713
+ @grow={{true}}
714
+ >
715
+ {{yield to="default"}}
716
+ </EuiFlexItem>
717
+ </EuiFlexGroup>
718
+ {{else}}
406
719
  {{yield to="default"}}
407
- </EuiFlexItem>
408
- </EuiFlexGroup>
409
- {{else}}
410
- {{yield to="default"}}
720
+ {{/if}}
721
+ </EuiPageContentBody>
722
+ </EuiPageContent>
723
+ {{#if hasBottomBarBlock}}
724
+ <EuiBottomBar
725
+ @paddingSize={{paddingSize}}
726
+ @position={{if
727
+ (and this.canFullHeight this.fullHeight)
728
+ "static"
729
+ "sticky"
730
+ }}
731
+ >
732
+ <EuiPageContentBody
733
+ @paddingSize="none"
734
+ @restrictWidth={{this.restrictWidth}}
735
+ >
736
+ {{yield to="bottomBar"}}
737
+ </EuiPageContentBody>
738
+ </EuiBottomBar>
411
739
  {{/if}}
412
- </EuiPageContentBody>
413
- </EuiPageContent>
414
- </EuiPageBody>
740
+ </EuiPageBody>
741
+ </EuiPage>
742
+ {{/if}}
415
743
  {{/if}}
416
- </EuiPage>
417
- {{/if}}
744
+ {{/let}}
745
+ {{/let}}