@ember-eui/core 5.0.0-alpha.6 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/addon/components/eui-page/index.hbs +13 -18
  2. package/addon/components/eui-page-body/index.hbs +19 -36
  3. package/addon/components/eui-page-content/index.hbs +20 -17
  4. package/addon/components/eui-page-content-body/index.hbs +16 -15
  5. package/addon/components/eui-page-content-header/index.hbs +1 -13
  6. package/addon/components/eui-page-header/index.hbs +91 -33
  7. package/addon/components/eui-page-header-content/index.hbs +247 -182
  8. package/addon/components/eui-page-template/index.hbs +723 -395
  9. package/addon/components/eui-page-template/index.ts +44 -16
  10. package/addon/components/eui-split-panel/outer/index.hbs +5 -4
  11. package/addon/helpers/eui-page-restrict-width.ts +37 -0
  12. package/addon/{components/eui-split-panel/outer/index.ts → modifiers/use-is-within-breakpoints.ts} +2 -11
  13. package/addon/utils/css-mappings/eui-page.ts +19 -1
  14. package/addon/utils/css-mappings/eui-tabs.ts +1 -1
  15. package/app/helpers/eui-page-restrict-width.js +4 -0
  16. package/app/modifiers/use-is-within-breakpoints.js +1 -0
  17. package/docs/layout/page-header/demo/demo1.md +23 -0
  18. package/docs/layout/page-header/demo/demo2.md +23 -0
  19. package/docs/layout/page-header/demo/demo3.md +14 -0
  20. package/docs/layout/page-header/demo/demo4.md +52 -0
  21. package/docs/layout/page-header/demo/demo5.md +64 -0
  22. package/docs/layout/page-header/demo/demo6.md +21 -0
  23. package/docs/layout/page-header/index.md +11 -0
  24. package/docs/layout/{page-demo → page-template/demo}/demo1.md +36 -14
  25. package/docs/layout/page-template/demo/demo10.md +58 -0
  26. package/docs/layout/{page-demo → page-template/demo}/demo2.md +14 -4
  27. package/docs/layout/{page-demo → page-template/demo}/demo3.md +19 -8
  28. package/docs/layout/page-template/demo/demo4.md +43 -0
  29. package/docs/layout/page-template/demo/demo5.md +54 -0
  30. package/docs/layout/{page-demo → page-template/demo}/demo6.md +10 -2
  31. package/docs/layout/{page-demo → page-template/demo}/demo7.md +0 -0
  32. package/docs/layout/page-template/demo/demo8.md +46 -0
  33. package/docs/layout/page-template/demo/demo9.md +43 -0
  34. package/docs/layout/page-template/index.md +11 -0
  35. package/package.json +2 -2
  36. package/docs/layout/page-demo/demo10.md +0 -42
  37. package/docs/layout/page-demo/demo4.md +0 -38
  38. package/docs/layout/page-demo/demo5.md +0 -30
  39. package/docs/layout/page-demo/demo8.md +0 -19
  40. package/docs/layout/page-demo/demo9.md +0 -29
  41. package/docs/layout/page.md +0 -1
package/addon/components/eui-page-header-content/index.hbs CHANGED
@@ -1,219 +1,284 @@
1
- <div
2
- class={{class-names
3
- "euiPageHeaderContent"
4
- (if @restrictWidth "euiPanel--restrictWidth-custom" "")
5
- }}
6
- {{style (inline-styles width=@restrictWidth)}}
7
- ...attributes
8
- >
9
-
10
- {{#if (eq @alignItems "top")}}
11
- <EuiFlexGroup
12
- class="euiPageHeaderContent__top"
13
- @responsive={{@responsive}}
14
- @alignItems={{if @pageTitle "flexStart" "baseline"}}
15
- @gutterSize="l"
16
- >
17
- {{#if (eq @responsive "reverse")}}
18
- {{#if @rightSideItems}}
19
- <EuiFlexItem @grow={{false}}>
20
- <EuiFlexGroup
21
- @wrap={{true}}
22
- @responsive={{false}}
23
- {{! {...rightSideGroupProps} }}
24
- class="euiPageHeaderContent__rightSideItems"
25
- >
26
- {{!-- {{#each @rightSideItems as |rightSideItem|}}
27
- {{component rightSideItem}}
28
- {{/each}} --}}
29
- </EuiFlexGroup>
30
- </EuiFlexItem>
31
- {{/if}}
32
- <EuiFlexItem>
33
- <EuiTitle {{! {...pageTitleProps} }} @size="l">
34
- <h1>
35
- {{#if @iconType}}
36
- <EuiIcon
37
- @size="xl"
38
- {{! {...iconProps} }}
39
- @type={{@iconType}}
40
- class="euiPageHeaderContent__titleIcon"
41
- />
42
- {{/if}}
43
- {{#if @pageTitle}}
44
- {{@pageTitle}}
45
- {{/if}}
46
- </h1>
47
- </EuiTitle>
48
-
49
- {{#if @tabs}}
50
- <EuiSpacer />
51
- <EuiTabs>
52
- {{#each @tabs as |tab|}}
53
- <EuiTab
54
- @isSelected={{tab.isSelected}}
55
- @onClick={{optional tab.onClick}}
56
- >
57
- {{tab.label}}
58
- </EuiTab>
59
- {{/each}}
60
- </EuiTabs>
61
- {{/if}}
62
- </EuiFlexItem>
63
- {{else}}
64
- <EuiFlexItem>
65
- <EuiTitle {{! {...pageTitleProps} }} @size="l">
66
- <h1>
67
- {{#if @iconType}}
68
- <EuiIcon
69
- @size="xl"
70
- {{! {...iconProps} }}
71
- @type={{@iconType}}
72
- class="euiPageHeaderContent__titleIcon"
73
- />
74
- {{/if}}
75
- {{#if @pageTitle}}
76
- {{@pageTitle}}
77
- {{/if}}
78
- </h1>
79
- </EuiTitle>
80
-
81
- {{#if @tabs}}
82
- <EuiSpacer />
83
- <EuiTabs>
84
- {{#each @tabs as |tab|}}
85
- <EuiTab
86
- @isSelected={{tab.isSelected}}
87
- @onClick={{optional tab.onClick}}
88
- >
89
- {{tab.label}}
90
- </EuiTab>
91
- {{/each}}
92
- </EuiTabs>
93
- {{/if}}
94
- </EuiFlexItem>
95
- {{#if @rightSideItems}}
96
- <EuiFlexItem @grow={{false}}>
97
- <EuiFlexGroup
98
- @wrap={{true}}
99
- @responsive={{false}}
100
- {{! {...rightSideGroupProps} }}
101
- class="euiPageHeaderContent__rightSideItems"
102
- >
103
- {{!-- {{#each @rightSideItems as |rightSideItem|}}
104
- {{component rightSideItem}}
105
- {{/each}} --}}
106
- </EuiFlexGroup>
107
- </EuiFlexItem>
108
- {{/if}}
109
- {{/if}}
110
- </EuiFlexGroup>
111
- {{#if @bottomContent}}
112
- <div class="euiPageHeaderContent__bottom">
113
- {{@bottomContent}}
114
- </div>
1
+ {{#let
2
+ (arg-or-default @responsive true)
3
+ (arg-or-default @alignItems "top")
4
+ (use-state false)
5
+ (and (arg-or-default @hasDescriptionBlock true) (has-block "description"))
6
+ (and
7
+ (arg-or-default @hasRightSideItemsBlock true) (has-block "rightSideItems")
8
+ )
9
+ (or
10
+ (and (arg-or-default @hasPageTitleBlock true) (has-block "pageTitle"))
11
+ @pageTitle
12
+ )
13
+ (and (arg-or-default @hasDefaultBlock true) (has-block "default"))
14
+ as |responsive alignItems isResponsiveBreakpoint hasDescriptionBlock hasRightSideItemsBlock hasPageTitleBlock hasDefaultBlock|
15
+ }}
16
+ <div
17
+ class={{class-names
18
+ "euiPageHeaderContent"
19
+ (if @restrictWidth "euiPanel--restrictWidth-custom" "")
20
+ }}
21
+ {{style (inline-styles width=@restrictWidth)}}
22
+ {{use-is-within-breakpoints
23
+ sizes=(array "xs" "s")
24
+ isActive=(not (not responsive))
25
+ setIsWithinBreakpointsValue=isResponsiveBreakpoint.setState
26
+ }}
27
+ ...attributes
28
+ >
29
+ {{#if @breadcrumbs}}
30
+ <EuiBreadcrumbs
31
+ @breadcrumbs={{@breadcrumbs}}
32
+ class={{@breadcrumbProps.className}}
33
+ />
34
+ <EuiSpacer @size="s" />
115
35
  {{/if}}
116
- {{else}}
117
- <EuiFlexGroup
118
- @responsive={{@responsive}}
119
- class="euiPageHeaderContent__top"
120
- @alignItems={{if (eq @alignItems "bottom") "flexEnd" @alignItems}}
121
- gutterSize="l"
122
- >
123
- <EuiFlexItem>
124
- {{#if @bottomContent}}
125
- <div class="euiPageHeaderContent__bottom">
126
- {{@bottomContent}}
127
- <EuiTitle {{! {...pageTitleProps} }} @size="l">
128
- <h1>
36
+ {{#if (or (eq alignItems "top") isResponsiveBreakpoint.value)}}
37
+ <EuiFlexGroup
38
+ class="euiPageHeaderContent__top"
39
+ @responsive={{not (not responsive)}}
40
+ @alignItems={{if hasPageTitleBlock "flexStart" "baseline"}}
41
+ @gutterSize="l"
42
+ >
43
+ {{#if (and isResponsiveBreakpoint.value (eq responsive "reverse"))}}
44
+ {{#if hasRightSideItemsBlock}}
45
+ <EuiFlexItem @grow={{false}}>
46
+ <EuiFlexGroup
47
+ @wrap={{true}}
48
+ @responsive={{false}}
49
+ class={{class-names
50
+ "euiPageHeaderContent__rightSideItems"
51
+ @rightSideGroupProps.className
52
+ }}
53
+ >
54
+ {{yield
55
+ (component "eui-flex-item" grow=false)
56
+ to="rightSideItems"
57
+ }}
58
+ </EuiFlexGroup>
59
+ </EuiFlexItem>
60
+ {{/if}}
61
+ <EuiFlexItem>
62
+ {{#if (and (not hasPageTitleBlock) @tabs)}}
63
+ <EuiTabs @size="xl" @display="condensed" @bottomBorder={{false}}>
64
+ {{#each @tabs as |tab|}}
65
+ <EuiTab
66
+ @isSelected={{tab.isSelected}}
67
+ @href={{tab.href}}
68
+ {{on "click" (optional tab.onClick)}}
69
+ >
70
+ {{tab.label}}
71
+ </EuiTab>
72
+ {{/each}}
73
+ </EuiTabs>
74
+ {{/if}}
75
+ {{#if hasPageTitleBlock}}
76
+ <EuiTitle
77
+ class={{@pageTitleProps.className}}
78
+ @size="l"
79
+ @tagName="h1"
80
+ >
129
81
  {{#if @iconType}}
130
82
  <EuiIcon
131
83
  @size="xl"
132
- {{! {...iconProps} }}
133
84
  @type={{@iconType}}
134
- class="euiPageHeaderContent__titleIcon"
85
+ @iconClasses={{class-names
86
+ "euiPageHeaderContent__titleIcon"
87
+ @iconProps.className
88
+ }}
135
89
  />
136
90
  {{/if}}
137
91
  {{#if @pageTitle}}
138
92
  {{@pageTitle}}
93
+ {{yield to="pageTitle"}}
139
94
  {{/if}}
140
- </h1>
141
- </EuiTitle>
95
+ </EuiTitle>
96
+ {{/if}}
142
97
 
143
- {{#if @tabs}}
144
- <EuiSpacer />
145
- <EuiTabs>
98
+ {{#if hasDescriptionBlock}}
99
+ {{#if (or hasPageTitleBlock @tabs)}}
100
+ <EuiSpacer />
101
+ {{/if}}
102
+ <EuiText @grow={{false}}>
103
+ {{@description}}
104
+ {{yield to="description"}}
105
+ </EuiText>
106
+ {{/if}}
107
+ </EuiFlexItem>
108
+ {{else}}
109
+ <EuiFlexItem>
110
+ {{#if (and (not hasPageTitleBlock) @tabs)}}
111
+ <EuiTabs @size="xl" @display="condensed" @bottomBorder={{false}}>
146
112
  {{#each @tabs as |tab|}}
147
113
  <EuiTab
148
114
  @isSelected={{tab.isSelected}}
149
- @onClick={{optional tab.onClick}}
115
+ {{on "click" (optional tab.onClick)}}
150
116
  >
151
117
  {{tab.label}}
152
118
  </EuiTab>
153
119
  {{/each}}
154
120
  </EuiTabs>
155
121
  {{/if}}
156
- {{#if @description}}
157
- <EuiSpacer />
122
+ {{#if hasPageTitleBlock}}
123
+ <EuiTitle
124
+ class={{@pageTitleProps.className}}
125
+ @size="l"
126
+ @tagName="h1"
127
+ >
128
+ {{#if @iconType}}
129
+ <EuiIcon
130
+ @size="xl"
131
+ @type={{@iconType}}
132
+ @iconClasses={{class-names
133
+ "euiPageHeaderContent__titleIcon"
134
+ @iconProps.className
135
+ }}
136
+ />
137
+ {{/if}}
138
+ {{#if @pageTitle}}
139
+ {{@pageTitle}}
140
+ {{yield to="pageTitle"}}
141
+ {{/if}}
142
+ </EuiTitle>
143
+ {{/if}}
144
+
145
+ {{#if hasDescriptionBlock}}
146
+ {{#if (or hasPageTitleBlock @tabs)}}
147
+ <EuiSpacer />
148
+ {{/if}}
158
149
  <EuiText @grow={{false}}>
159
- <p>{{@description}}</p>
150
+ {{@description}}
151
+ {{yield to="description"}}
160
152
  </EuiText>
161
153
  {{/if}}
162
- </div>
163
- {{else}}
164
- <EuiTitle {{! {...pageTitleProps} }} @size="l">
165
- <h1>
154
+ </EuiFlexItem>
155
+ {{#if hasRightSideItemsBlock}}
156
+ <EuiFlexItem @grow={{false}}>
157
+ <EuiFlexGroup
158
+ @wrap={{true}}
159
+ @responsive={{false}}
160
+ class={{class-names
161
+ "euiPageHeaderContent__rightSideItems"
162
+ @rightSideGroupProps.className
163
+ }}
164
+ >
165
+ {{yield
166
+ (component "eui-flex-item" grow=false)
167
+ to="rightSideItems"
168
+ }}
169
+ </EuiFlexGroup>
170
+ </EuiFlexItem>
171
+ {{/if}}
172
+ {{/if}}
173
+ </EuiFlexGroup>
174
+ {{#if (or hasDefaultBlock (and hasPageTitleBlock @tabs))}}
175
+ <div class="euiPageHeaderContent__bottom">
176
+ <EuiSpacer />
177
+ {{yield to="default"}}
178
+ {{#if hasPageTitleBlock}}
179
+ <EuiTabs @size="l" @display="condensed" @bottomBorder={{false}}>
180
+ {{#each @tabs as |tab|}}
181
+ <EuiTab
182
+ @isSelected={{tab.isSelected}}
183
+ {{on "click" (optional tab.onClick)}}
184
+ >
185
+ {{tab.label}}
186
+ </EuiTab>
187
+ {{/each}}
188
+ </EuiTabs>
189
+ {{/if}}
190
+ </div>
191
+ {{/if}}
192
+ {{else}}
193
+ <EuiFlexGroup
194
+ class="euiPageHeaderContent__top"
195
+ @responsive={{not (not responsive)}}
196
+ @alignItems={{if (eq alignItems "bottom") "flexEnd" alignItems}}
197
+ @gutterSize="l"
198
+ >
199
+ <EuiFlexItem>
200
+ {{#if (and (not hasPageTitleBlock) @tabs)}}
201
+ <EuiTabs @size="xl" @display="condensed" @bottomBorder={{false}}>
202
+ {{#each @tabs as |tab|}}
203
+ <EuiTab
204
+ @isSelected={{tab.isSelected}}
205
+ @href={{tab.href}}
206
+ {{on "click" (optional tab.onClick)}}
207
+ >
208
+ {{tab.label}}
209
+ </EuiTab>
210
+ {{/each}}
211
+ </EuiTabs>
212
+ {{/if}}
213
+ {{#if hasPageTitleBlock}}
214
+ <EuiTitle
215
+ class={{@pageTitleProps.className}}
216
+ @size="l"
217
+ @tagName="h1"
218
+ >
166
219
  {{#if @iconType}}
167
220
  <EuiIcon
168
221
  @size="xl"
169
- {{! {...iconProps} }}
170
222
  @type={{@iconType}}
171
- class="euiPageHeaderContent__titleIcon"
223
+ @iconClasses={{class-names
224
+ "euiPageHeaderContent__titleIcon"
225
+ @iconProps.className
226
+ }}
172
227
  />
173
228
  {{/if}}
174
229
  {{#if @pageTitle}}
175
230
  {{@pageTitle}}
231
+ {{yield to="pageTitle"}}
176
232
  {{/if}}
177
- </h1>
178
- </EuiTitle>
179
-
180
- {{#if @tabs}}
181
- <EuiSpacer />
182
- <EuiTabs>
183
- {{#each @tabs as |tab|}}
184
- <EuiTab
185
- @isSelected={{tab.isSelected}}
186
- @onClick={{optional tab.onClick}}
187
- >
188
- {{tab.label}}
189
- </EuiTab>
190
- {{/each}}
191
- </EuiTabs>
233
+ </EuiTitle>
192
234
  {{/if}}
193
- {{#if @description}}
194
- <EuiSpacer />
235
+
236
+ {{#if hasDescriptionBlock}}
237
+ {{#if (or hasPageTitleBlock @tabs)}}
238
+ <EuiSpacer />
239
+ {{/if}}
195
240
  <EuiText @grow={{false}}>
196
- <p>{{@description}}</p>
241
+ {{@description}}
242
+ {{yield to="description"}}
197
243
  </EuiText>
198
244
  {{/if}}
199
- {{/if}}
200
- </EuiFlexItem>
201
- {{#if @rightSideItems}}
202
- <EuiFlexItem @grow={{false}}>
203
- <EuiFlexGroup
204
- @wrap={{true}}
205
- @responsive={{false}}
206
- {{! {...rightSideGroupProps} }}
207
- class="euiPageHeaderContent__rightSideItems"
208
- >
209
- {{#each @rightSideItems as |rightSideItem|}}
210
- <EuiFlexItem @grow={{false}}>
211
- {{rightSideItem}}
212
- </EuiFlexItem>
213
- {{/each}}
214
- </EuiFlexGroup>
245
+ {{#if (or hasDefaultBlock (and hasPageTitleBlock @tabs))}}
246
+ <div class="euiPageHeaderContent__bottom">
247
+ <EuiSpacer />
248
+ {{yield to="default"}}
249
+ {{#if hasPageTitleBlock}}
250
+ <EuiTabs @size="l" @display="condensed" @bottomBorder={{false}}>
251
+ {{#each @tabs as |tab|}}
252
+ <EuiTab
253
+ @isSelected={{tab.isSelected}}
254
+ {{on "click" (optional tab.onClick)}}
255
+ >
256
+ {{tab.label}}
257
+ </EuiTab>
258
+ {{/each}}
259
+ </EuiTabs>
260
+ {{/if}}
261
+ </div>
262
+ {{/if}}
215
263
  </EuiFlexItem>
216
- {{/if}}
217
- </EuiFlexGroup>
218
- {{/if}}
219
- </div>
264
+ {{#if hasRightSideItemsBlock}}
265
+ <EuiFlexItem @grow={{false}}>
266
+ <EuiFlexGroup
267
+ @wrap={{true}}
268
+ @responsive={{false}}
269
+ class={{class-names
270
+ "euiPageHeaderContent__rightSideItems"
271
+ @rightSideGroupProps.className
272
+ }}
273
+ >
274
+ {{yield
275
+ (component "eui-flex-item" grow=false)
276
+ to="rightSideItems"
277
+ }}
278
+ </EuiFlexGroup>
279
+ </EuiFlexItem>
280
+ {{/if}}
281
+ </EuiFlexGroup>
282
+ {{/if}}
283
+ </div>
284
+ {{/let}}