@fluid-topics/ft-page-layout 1.3.45 → 1.3.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-page-layout.light.js +334 -315
- package/build/ft-page-layout.min.js +301 -282
- package/build/ftds-page-layout.js +22 -21
- package/build/ftds-page-layout.styles.js +1 -1
- package/package.json +8 -8
|
@@ -10,12 +10,12 @@ import { repeat } from "lit/directives/repeat.js";
|
|
|
10
10
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
11
11
|
import { classMap } from "lit/directives/class-map.js";
|
|
12
12
|
import { styles } from "./ftds-page-layout.styles";
|
|
13
|
-
import {
|
|
13
|
+
import { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
|
|
14
14
|
import { FtdsPopover } from "@fluid-topics/ft-popover";
|
|
15
15
|
import { FtdsChip } from "@fluid-topics/ft-chip";
|
|
16
16
|
import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
|
|
17
17
|
import { FtdsLink } from "@fluid-topics/ft-link";
|
|
18
|
-
import { FtLitElementWithI18n
|
|
18
|
+
import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
|
|
19
19
|
import { defaultPageLayoutMessages, i18nContext } from "./FtdsPageLayoutMessages";
|
|
20
20
|
class FtdsPageLayout extends FtLitElementWithI18n {
|
|
21
21
|
constructor() {
|
|
@@ -45,18 +45,18 @@ class FtdsPageLayout extends FtLitElementWithI18n {
|
|
|
45
45
|
<div class="ftds-page-layout--left-slot">
|
|
46
46
|
<div class="ftds-page-layout--title-container">
|
|
47
47
|
${(this.breadcrumb ? this.renderBreadcrumb() : html `
|
|
48
|
-
<
|
|
49
|
-
|
|
48
|
+
<ftds-typography class="ftds-page-layout--title"
|
|
49
|
+
variant="${FtdsTypographyVariants.title1}">
|
|
50
50
|
${this.pageTitle}
|
|
51
|
-
</
|
|
51
|
+
</ftds-typography>`)}
|
|
52
52
|
${this.renderPopover()}
|
|
53
53
|
${this.renderChip()}
|
|
54
54
|
</div>
|
|
55
55
|
${this.subTitle ? html `
|
|
56
|
-
<
|
|
57
|
-
|
|
56
|
+
<ftds-typography class="ftds-page-layout--sub-title"
|
|
57
|
+
variant="${FtdsTypographyVariants.body2regular}">
|
|
58
58
|
${this.subTitle}
|
|
59
|
-
</
|
|
59
|
+
</ftds-typography>` : nothing}
|
|
60
60
|
</div>
|
|
61
61
|
<div class="ftds-page-layout--right-slot">
|
|
62
62
|
<slot name="header-right"></slot>
|
|
@@ -65,7 +65,7 @@ class FtdsPageLayout extends FtLitElementWithI18n {
|
|
|
65
65
|
}
|
|
66
66
|
renderFooter() {
|
|
67
67
|
return html `
|
|
68
|
-
<div ?hidden
|
|
68
|
+
<div ?hidden=${!this.footerHasContent} class="ftds-page-layout--footer ftds-page-layout--child">
|
|
69
69
|
<div class="ftds-page-layout--left-slot">
|
|
70
70
|
<slot name="footer-left" @slotchange=${this.onSlotChange}></slot>
|
|
71
71
|
</div>
|
|
@@ -79,7 +79,7 @@ class FtdsPageLayout extends FtLitElementWithI18n {
|
|
|
79
79
|
var _a;
|
|
80
80
|
return html `
|
|
81
81
|
<div class="ftds-page-layout--chips-container">
|
|
82
|
-
${repeat((_a = this.chipsContent) !== null && _a !== void 0 ? _a : [], chip => html `
|
|
82
|
+
${repeat((_a = this.chipsContent) !== null && _a !== void 0 ? _a : [], (chip) => html `
|
|
83
83
|
<ftds-chip family="${chip.family}" icon="${chip.icon}">
|
|
84
84
|
${chip.label}
|
|
85
85
|
</ftds-chip>`)}
|
|
@@ -93,19 +93,20 @@ class FtdsPageLayout extends FtLitElementWithI18n {
|
|
|
93
93
|
${repeat(this.breadcrumb, (item, index) => html `
|
|
94
94
|
<li>
|
|
95
95
|
${item.link ? html `
|
|
96
|
-
<ftds-link href
|
|
96
|
+
<ftds-link href="${item.link}" underlined target="_self" family="${DesignSystemFamily.brand}"
|
|
97
|
+
variant="${FtdsTypographyVariants.body2medium}">
|
|
97
98
|
${item.label}
|
|
98
99
|
</ftds-link>` : html `
|
|
99
|
-
<
|
|
100
|
+
<ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="ftds-page-layout--breadcrumb-item">
|
|
100
101
|
${item.label}
|
|
101
|
-
</
|
|
102
|
+
</ftds-typography>`}
|
|
102
103
|
</li>`)}
|
|
103
104
|
<li>
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
<ftds-typography class="ftds-page-layout--title"
|
|
106
|
+
aria-current="${ifDefined(this.breadcrumb ? "page" : undefined)}"
|
|
107
|
+
variant="${FtdsTypographyVariants.body2semibold}">
|
|
107
108
|
${this.pageTitle}
|
|
108
|
-
</
|
|
109
|
+
</ftds-typography>
|
|
109
110
|
</li>
|
|
110
111
|
</ol>
|
|
111
112
|
</nav>
|
|
@@ -113,9 +114,9 @@ class FtdsPageLayout extends FtLitElementWithI18n {
|
|
|
113
114
|
}
|
|
114
115
|
renderPopover() {
|
|
115
116
|
return html `
|
|
116
|
-
<ftds-popover ?hidden=${!this.popoverHasContent} closeButtonLabel
|
|
117
|
-
openButtonLabel
|
|
118
|
-
openButtonFamily
|
|
117
|
+
<ftds-popover ?hidden=${!this.popoverHasContent} closeButtonLabel="${i18nContext.messages.popoverCloseButtonLabel()}"
|
|
118
|
+
openButtonLabel="${i18nContext.messages.popoverOpenButtonLabel()}" openButtonTooltipPosition="bottom"
|
|
119
|
+
openButtonFamily="${DesignSystemFamily.info}" openButtonSize="${DesignSystemSize.medium}">
|
|
119
120
|
<slot name="popover-content" @slotchange=${this.onSlotChange}></slot>
|
|
120
121
|
</ftds-popover>`;
|
|
121
122
|
}
|
|
@@ -134,7 +135,7 @@ class FtdsPageLayout extends FtLitElementWithI18n {
|
|
|
134
135
|
}
|
|
135
136
|
}
|
|
136
137
|
FtdsPageLayout.elementDefinitions = {
|
|
137
|
-
"
|
|
138
|
+
"ftds-typography": FtdsTypography,
|
|
138
139
|
"ftds-popover": FtdsPopover,
|
|
139
140
|
"ftds-chip": FtdsChip,
|
|
140
141
|
"ftds-link": FtdsLink,
|
|
@@ -99,7 +99,7 @@ export const styles = css `
|
|
|
99
99
|
display: inline;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
nav.ftds-page-layout--breadcrumb
|
|
102
|
+
nav.ftds-page-layout--breadcrumb ftds-typography.ftds-page-layout--breadcrumb-item {
|
|
103
103
|
color: ${titleBreadcrumb.previousNonClickableColor};
|
|
104
104
|
}
|
|
105
105
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-page-layout",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.46",
|
|
4
4
|
"description": "A page layout component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@fluid-topics/design-system-variables": "2.53.1",
|
|
23
|
-
"@fluid-topics/ft-chip": "1.3.
|
|
24
|
-
"@fluid-topics/ft-link": "1.3.
|
|
25
|
-
"@fluid-topics/ft-popover": "1.3.
|
|
26
|
-
"@fluid-topics/ft-typography": "1.3.
|
|
27
|
-
"@fluid-topics/ft-wc-utils": "1.3.
|
|
23
|
+
"@fluid-topics/ft-chip": "1.3.46",
|
|
24
|
+
"@fluid-topics/ft-link": "1.3.46",
|
|
25
|
+
"@fluid-topics/ft-popover": "1.3.46",
|
|
26
|
+
"@fluid-topics/ft-typography": "1.3.46",
|
|
27
|
+
"@fluid-topics/ft-wc-utils": "1.3.46",
|
|
28
28
|
"lit": "3.1.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@fluid-topics/ft-wc-test-utils": "1.3.
|
|
31
|
+
"@fluid-topics/ft-wc-test-utils": "1.3.46"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
|
|
34
34
|
}
|