@salesforcedevs/arch-components 1.20.17-alpha15 → 1.20.17-alpha16
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/lwc.config.json +38 -1
- package/package.json +1 -1
- package/src/modules/arch/buttonLink/buttonLink.stories.js +23 -13
- package/src/modules/arch/cardGridA/cardGridA.stories.js +54 -43
- package/src/modules/arch/cardGridC/cardGridC.stories.js +22 -13
- package/src/modules/arch/cardGridD/cardGridD.stories.js +20 -11
- package/src/modules/arch/content/content.stories.js +15 -8
- package/src/modules/arch/contentIcon/contentIcon.stories.js +64 -44
- package/src/modules/arch/heroA/heroA.stories.js +24 -13
- package/src/modules/arch/heroB/heroB.stories.js +24 -13
- package/src/modules/arch/icon/icon.stories.js +17 -9
- package/src/modules/arch/page/page.stories.js +15 -6
- package/src/modules/arch/pageHeaderA/pageHeaderA.stories.js +17 -10
- package/src/modules/arch/sectionA/sectionA.stories.js +15 -8
- package/src/modules/arch/summary/summary.stories.js +53 -38
package/lwc.config.json
CHANGED
|
@@ -5,5 +5,42 @@
|
|
|
5
5
|
{ "npm": "@salesforcedevs/docs-components" },
|
|
6
6
|
{ "npm": "@salesforcedevs/dx-components" }
|
|
7
7
|
],
|
|
8
|
-
"expose": [
|
|
8
|
+
"expose": [
|
|
9
|
+
"arch/badge",
|
|
10
|
+
"arch/button",
|
|
11
|
+
"arch/buttonLink",
|
|
12
|
+
"arch/card",
|
|
13
|
+
"arch/cardGridA",
|
|
14
|
+
"arch/cardGridC",
|
|
15
|
+
"arch/cardGridD",
|
|
16
|
+
"arch/cardNew",
|
|
17
|
+
"arch/children",
|
|
18
|
+
"arch/content",
|
|
19
|
+
"arch/contentIcon",
|
|
20
|
+
"arch/context",
|
|
21
|
+
"arch/contextAdapter",
|
|
22
|
+
"arch/effectAdapter",
|
|
23
|
+
"arch/explorer",
|
|
24
|
+
"arch/footerMfe",
|
|
25
|
+
"arch/gallery",
|
|
26
|
+
"arch/heading",
|
|
27
|
+
"arch/heroA",
|
|
28
|
+
"arch/heroB",
|
|
29
|
+
"arch/icon",
|
|
30
|
+
"arch/instrumentation",
|
|
31
|
+
"arch/page",
|
|
32
|
+
"arch/pageHeaderA",
|
|
33
|
+
"arch/pill",
|
|
34
|
+
"arch/reflectedElement",
|
|
35
|
+
"arch/searchList",
|
|
36
|
+
"arch/sectionA",
|
|
37
|
+
"arch/select",
|
|
38
|
+
"arch/socialShare",
|
|
39
|
+
"arch/spinner",
|
|
40
|
+
"arch/summary",
|
|
41
|
+
"arch/tab",
|
|
42
|
+
"arch/tabset",
|
|
43
|
+
"arch/threeCardGrid",
|
|
44
|
+
"arch/xsfMfeEvents"
|
|
45
|
+
]
|
|
9
46
|
}
|
package/package.json
CHANGED
|
@@ -1,24 +1,34 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
|
|
6
|
-
modules: ['/modules/arch-button-link.js']
|
|
7
|
-
}
|
|
4
|
+
title: "arch/arch-button-link",
|
|
5
|
+
component: "sb-arch-button-link"
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
// prettier-ignore
|
|
9
|
+
const createStyles = () => html `
|
|
10
|
+
<style>
|
|
11
|
+
sb-arch-button-link {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
</style>`;
|
|
15
|
+
|
|
16
|
+
// prettier-ignore
|
|
17
|
+
export const Base = () => html` ${createStyles()}
|
|
18
|
+
<sb-arch-button-link href="/">Link</sb-arch-button-link>
|
|
12
19
|
`;
|
|
13
20
|
|
|
14
|
-
|
|
15
|
-
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Small = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-button-link size="small" href="/">Link</sb-arch-button-link>
|
|
16
24
|
`;
|
|
17
25
|
|
|
18
|
-
|
|
19
|
-
|
|
26
|
+
// prettier-ignore
|
|
27
|
+
export const Large = () => html` ${createStyles()}
|
|
28
|
+
<sb-arch-button-link size="large" href="/">Link</sb-arch-button-link>
|
|
20
29
|
`;
|
|
21
30
|
|
|
22
|
-
|
|
23
|
-
|
|
31
|
+
// prettier-ignore
|
|
32
|
+
export const Disabled = () => html` ${createStyles()}
|
|
33
|
+
<sb-arch-button-link href="/" disabled>Link</sb-arch-button-link>
|
|
24
34
|
`;
|
|
@@ -1,107 +1,118 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
4
|
+
title: "arch/arch-card-grid-a",
|
|
5
|
+
component: "sb-arch-card-grid-a",
|
|
5
6
|
parameters: {
|
|
6
7
|
chromatic: {
|
|
7
8
|
viewports: [450, 800, 1199]
|
|
8
|
-
}
|
|
9
|
-
modules: ['/modules/arch-card-grid-a.js']
|
|
9
|
+
}
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
// prettier-ignore
|
|
14
|
+
const createStyles = () => html `
|
|
15
|
+
<style>
|
|
16
|
+
sb-arch-card-grid-a {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
</style>`;
|
|
20
|
+
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Base = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-card-grid-a img-aspect="60%">
|
|
24
|
+
<sb-arch-card
|
|
16
25
|
cta-href="/"
|
|
17
26
|
cta-title="Read More"
|
|
18
27
|
cta-target="_blank"
|
|
19
28
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
20
29
|
title="Hello A"
|
|
21
|
-
></arch-card>
|
|
22
|
-
<arch-card
|
|
30
|
+
></sb-arch-card>
|
|
31
|
+
<sb-arch-card
|
|
23
32
|
cta-href="/"
|
|
24
33
|
cta-title="Read More"
|
|
25
34
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
26
35
|
title="Hello B"
|
|
27
|
-
></arch-card>
|
|
28
|
-
<arch-card
|
|
36
|
+
></sb-arch-card>
|
|
37
|
+
<sb-arch-card
|
|
29
38
|
cta-href="/"
|
|
30
39
|
cta-title="Read More"
|
|
31
40
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
32
41
|
title="Hello C"
|
|
33
|
-
></arch-card>
|
|
34
|
-
<arch-card
|
|
42
|
+
></sb-arch-card>
|
|
43
|
+
<sb-arch-card
|
|
35
44
|
cta-href="/"
|
|
36
45
|
cta-title="Read More"
|
|
37
46
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
38
47
|
title="Hello D"
|
|
39
|
-
></arch-card>
|
|
40
|
-
<arch-card
|
|
48
|
+
></sb-arch-card>
|
|
49
|
+
<sb-arch-card
|
|
41
50
|
cta-href="/"
|
|
42
51
|
cta-title="Read More"
|
|
43
52
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
44
53
|
title="Hello E"
|
|
45
|
-
></arch-card>
|
|
46
|
-
</arch-card-grid-a>
|
|
54
|
+
></sb-arch-card>
|
|
55
|
+
</sb-arch-card-grid-a>
|
|
47
56
|
`;
|
|
48
57
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
58
|
+
// prettier-ignore
|
|
59
|
+
export const ImageFull = () => html` ${createStyles()}
|
|
60
|
+
<sb-arch-card-grid-a img-aspect="60%" img-type="full">
|
|
61
|
+
<sb-arch-card
|
|
52
62
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
53
63
|
img-src="/images/card-a.png"
|
|
54
64
|
title="Hello A"
|
|
55
|
-
></arch-card>
|
|
56
|
-
<arch-card
|
|
65
|
+
></sb-arch-card>
|
|
66
|
+
<sb-arch-card
|
|
57
67
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
58
68
|
img-src="/images/card-a.png"
|
|
59
69
|
title="Hello B"
|
|
60
|
-
></arch-card>
|
|
61
|
-
<arch-card
|
|
70
|
+
></sb-arch-card>
|
|
71
|
+
<sb-arch-card
|
|
62
72
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
63
73
|
img-src="/images/card-a.png"
|
|
64
74
|
title="Hello C"
|
|
65
|
-
></arch-card>
|
|
66
|
-
<arch-card
|
|
75
|
+
></sb-arch-card>
|
|
76
|
+
<sb-arch-card
|
|
67
77
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
68
78
|
img-src="/images/card-a.png"
|
|
69
79
|
title="Hello D"
|
|
70
|
-
></arch-card>
|
|
71
|
-
<arch-card
|
|
80
|
+
></sb-arch-card>
|
|
81
|
+
<sb-arch-card
|
|
72
82
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
73
83
|
img-src="/images/card-a.png"
|
|
74
84
|
title="Hello E"
|
|
75
|
-
></arch-card>
|
|
76
|
-
</arch-card-grid-a>
|
|
85
|
+
></sb-arch-card>
|
|
86
|
+
</sb-arch-card-grid-a>
|
|
77
87
|
`;
|
|
78
88
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
89
|
+
// prettier-ignore
|
|
90
|
+
export const ImageLeft = () => html` ${createStyles()}
|
|
91
|
+
<sb-arch-card-grid-a img-aspect="60%" img-type="left">
|
|
92
|
+
<sb-arch-card
|
|
82
93
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
83
94
|
img-src="/images/card-a.png"
|
|
84
95
|
title="Hello A"
|
|
85
|
-
></arch-card>
|
|
86
|
-
<arch-card
|
|
96
|
+
></sb-arch-card>
|
|
97
|
+
<sb-arch-card
|
|
87
98
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
88
99
|
img-src="/images/card-a.png"
|
|
89
100
|
title="Hello B"
|
|
90
|
-
></arch-card>
|
|
91
|
-
<arch-card
|
|
101
|
+
></sb-arch-card>
|
|
102
|
+
<sb-arch-card
|
|
92
103
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
93
104
|
img-src="/images/card-a.png"
|
|
94
105
|
title="Hello C"
|
|
95
|
-
></arch-card>
|
|
96
|
-
<arch-card
|
|
106
|
+
></sb-arch-card>
|
|
107
|
+
<sb-arch-card
|
|
97
108
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
98
109
|
img-src="/images/card-a.png"
|
|
99
110
|
title="Hello D"
|
|
100
|
-
></arch-card>
|
|
101
|
-
<arch-card
|
|
111
|
+
></sb-arch-card>
|
|
112
|
+
<sb-arch-card
|
|
102
113
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
103
114
|
img-src="/images/card-a.png"
|
|
104
115
|
title="Hello E"
|
|
105
|
-
></arch-card>
|
|
106
|
-
</arch-card-grid-a>
|
|
116
|
+
></sb-arch-card>
|
|
117
|
+
</sb-arch-card-grid-a>
|
|
107
118
|
`;
|
|
@@ -1,18 +1,27 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
4
|
+
title: "arch/arch-card-grid-c",
|
|
5
|
+
component: "sb-arch-card-grid-c",
|
|
5
6
|
parameters: {
|
|
6
7
|
chromatic: {
|
|
7
8
|
viewports: [380, 800, 1199]
|
|
8
|
-
}
|
|
9
|
-
modules: ['/modules/arch-card-grid-c.js']
|
|
9
|
+
}
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
// prettier-ignore
|
|
14
|
+
const createStyles = () => html `
|
|
15
|
+
<style>
|
|
16
|
+
sb-arch-card-grid-c {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
</style>`;
|
|
20
|
+
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Base = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-card-grid-c img-aspect="60%">
|
|
24
|
+
<sb-arch-card
|
|
16
25
|
cta-href="/posts/1"
|
|
17
26
|
cta-title="Read More"
|
|
18
27
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
@@ -21,22 +30,22 @@ export const Base = () => html`
|
|
|
21
30
|
pretitle-href="/user/amylee"
|
|
22
31
|
pretitle-href-text="Amy Lee"
|
|
23
32
|
title="Inspire Your Peers Careers by Sharing Your #AwesomeAdmin Advice"
|
|
24
|
-
></arch-card>
|
|
25
|
-
<arch-card
|
|
33
|
+
></sb-arch-card>
|
|
34
|
+
<sb-arch-card
|
|
26
35
|
cta-href="/posts/1"
|
|
27
36
|
cta-title="Read More"
|
|
28
37
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
29
38
|
img-src="/images/card-a.png"
|
|
30
39
|
pretitle="Blog by Amy Lee"
|
|
31
40
|
title="Hello B"
|
|
32
|
-
></arch-card>
|
|
33
|
-
<arch-card
|
|
41
|
+
></sb-arch-card>
|
|
42
|
+
<sb-arch-card
|
|
34
43
|
cta-href="/posts/1"
|
|
35
44
|
cta-title="Read More"
|
|
36
45
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
37
46
|
img-src="/images/card-a.png"
|
|
38
47
|
pretitle="Blog by Amy Lee"
|
|
39
48
|
title="Hello C"
|
|
40
|
-
></arch-card>
|
|
41
|
-
</arch-card-grid-c>
|
|
49
|
+
></sb-arch-card>
|
|
50
|
+
</sb-arch-card-grid-c>
|
|
42
51
|
`;
|
|
@@ -1,18 +1,27 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
4
|
+
title: "arch/arch-card-grid-d",
|
|
5
|
+
component: "sb-arch-card-grid-d",
|
|
5
6
|
parameters: {
|
|
6
7
|
chromatic: {
|
|
7
8
|
viewports: [400, 800, 1199]
|
|
8
|
-
}
|
|
9
|
-
modules: ['/modules/arch-card-grid-d.js']
|
|
9
|
+
}
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
// prettier-ignore
|
|
14
|
+
const createStyles = () => html `
|
|
15
|
+
<style>
|
|
16
|
+
sb-arch-card-grid-d {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
</style>`;
|
|
20
|
+
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Base = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-card-grid-d>
|
|
24
|
+
<sb-arch-card
|
|
16
25
|
cta-href="/"
|
|
17
26
|
cta-title="Start"
|
|
18
27
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
|
|
@@ -21,14 +30,14 @@ export const Base = () => html`
|
|
|
21
30
|
pretitle-href="/users/astro"
|
|
22
31
|
pretitle-href-text="Astro"
|
|
23
32
|
title="Hello A"
|
|
24
|
-
></arch-card>
|
|
25
|
-
<arch-card
|
|
33
|
+
></sb-arch-card>
|
|
34
|
+
<sb-arch-card
|
|
26
35
|
cta-href="/"
|
|
27
36
|
cta-title="Start"
|
|
28
37
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
29
38
|
img-src="/images/card-a.png"
|
|
30
39
|
pretitle="Hello"
|
|
31
40
|
title="Hello B"
|
|
32
|
-
></arch-card>
|
|
33
|
-
</arch-card-grid-d>
|
|
41
|
+
></sb-arch-card>
|
|
42
|
+
</sb-arch-card-grid-d>
|
|
34
43
|
`;
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
|
-
import { ContentExamples } from
|
|
3
|
+
import { ContentExamples } from "./__fixtures__";
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
|
-
title:
|
|
7
|
-
|
|
8
|
-
modules: ['/modules/arch-content.js']
|
|
9
|
-
}
|
|
6
|
+
title: "arch/arch-content",
|
|
7
|
+
component: "sb-arch-content"
|
|
10
8
|
};
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
// prettier-ignore
|
|
11
|
+
const createStyles = () => html `
|
|
12
|
+
<style>
|
|
13
|
+
sb-arch-content {
|
|
14
|
+
display: block;
|
|
15
|
+
}
|
|
16
|
+
</style>`;
|
|
17
|
+
|
|
18
|
+
// prettier-ignore
|
|
19
|
+
export const Base = () => html` ${createStyles()}
|
|
20
|
+
<sb-arch-content> ${ContentExamples()} </sb-arch-content>
|
|
14
21
|
`;
|
|
@@ -1,110 +1,130 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
|
|
6
|
-
modules: ['/modules/arch-content-icon.js']
|
|
7
|
-
}
|
|
4
|
+
title: "arch/arch-content-icon",
|
|
5
|
+
component: "sb-arch-content-icon"
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
// prettier-ignore
|
|
9
|
+
const createStyles = () => html `
|
|
10
|
+
<style>
|
|
11
|
+
sb-arch-content-icon {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
</style>`;
|
|
15
|
+
|
|
16
|
+
// prettier-ignore
|
|
17
|
+
export const Base = () => html` ${createStyles()}
|
|
18
|
+
<sb-arch-content-icon src="/images/badge-1.png"></sb-arch-content-icon>
|
|
12
19
|
`;
|
|
13
20
|
|
|
14
|
-
|
|
15
|
-
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const BaseChecked = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-content-icon
|
|
16
24
|
.checked=${true}
|
|
17
25
|
src="/images/badge-1.png"
|
|
18
|
-
></arch-content-icon>
|
|
26
|
+
></sb-arch-content-icon>
|
|
19
27
|
`;
|
|
20
28
|
|
|
21
|
-
|
|
22
|
-
|
|
29
|
+
// prettier-ignore
|
|
30
|
+
export const BaseSmall = () => html` ${createStyles()}
|
|
31
|
+
<sb-arch-content-icon size="small" src="/images/badge-1.png"></sb-arch-content-icon>
|
|
23
32
|
`;
|
|
24
33
|
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
// prettier-ignore
|
|
35
|
+
export const BaseSmallChecked = () => html` ${createStyles()}
|
|
36
|
+
<sb-arch-content-icon
|
|
27
37
|
.checked=${true}
|
|
28
38
|
size="small"
|
|
29
39
|
src="/images/badge-1.png"
|
|
30
|
-
></arch-content-icon>
|
|
40
|
+
></sb-arch-content-icon>
|
|
31
41
|
`;
|
|
32
42
|
|
|
33
|
-
|
|
34
|
-
|
|
43
|
+
// prettier-ignore
|
|
44
|
+
export const BaseLarge = () => html` ${createStyles()}
|
|
45
|
+
<sb-arch-content-icon size="large" src="/images/badge-1.png"></sb-arch-content-icon>
|
|
35
46
|
`;
|
|
36
47
|
|
|
37
|
-
|
|
38
|
-
|
|
48
|
+
// prettier-ignore
|
|
49
|
+
export const BaseLargeChecked = () => html` ${createStyles()}
|
|
50
|
+
<sb-arch-content-icon
|
|
39
51
|
.checked=${true}
|
|
40
52
|
size="large"
|
|
41
53
|
src="/images/badge-1.png"
|
|
42
|
-
></arch-content-icon>
|
|
54
|
+
></sb-arch-content-icon>
|
|
43
55
|
`;
|
|
44
56
|
|
|
45
|
-
|
|
46
|
-
|
|
57
|
+
// prettier-ignore
|
|
58
|
+
export const BaseXLarge = () => html` ${createStyles()}
|
|
59
|
+
<sb-arch-content-icon
|
|
47
60
|
size="xlarge"
|
|
48
61
|
src="/images/badge-1.png"
|
|
49
|
-
></arch-content-icon>
|
|
62
|
+
></sb-arch-content-icon>
|
|
50
63
|
`;
|
|
51
64
|
|
|
52
|
-
|
|
53
|
-
|
|
65
|
+
// prettier-ignore
|
|
66
|
+
export const BaseXLargeChecked = () => html` ${createStyles()}
|
|
67
|
+
<sb-arch-content-icon
|
|
54
68
|
.checked=${true}
|
|
55
69
|
size="xlarge"
|
|
56
70
|
src="/images/badge-1.png"
|
|
57
|
-
></arch-content-icon>
|
|
71
|
+
></sb-arch-content-icon>
|
|
58
72
|
`;
|
|
59
73
|
|
|
60
|
-
|
|
61
|
-
|
|
74
|
+
// prettier-ignore
|
|
75
|
+
export const Trail = () => html` ${createStyles()}
|
|
76
|
+
<sb-arch-content-icon
|
|
62
77
|
.background=${true}
|
|
63
78
|
color="rgb(221, 49, 49)"
|
|
64
79
|
src="/images/badge-trail-1.png"
|
|
65
|
-
></arch-content-icon>
|
|
80
|
+
></sb-arch-content-icon>
|
|
66
81
|
`;
|
|
67
82
|
|
|
68
|
-
|
|
69
|
-
|
|
83
|
+
// prettier-ignore
|
|
84
|
+
export const TrailChecked = () => html` ${createStyles()}
|
|
85
|
+
<sb-arch-content-icon
|
|
70
86
|
.background=${true}
|
|
71
87
|
color="rgb(221, 49, 49)"
|
|
72
88
|
.checked=${true}
|
|
73
89
|
src="/images/badge-trail-1.png"
|
|
74
|
-
></arch-content-icon>
|
|
90
|
+
></sb-arch-content-icon>
|
|
75
91
|
`;
|
|
76
92
|
|
|
77
|
-
|
|
78
|
-
|
|
93
|
+
// prettier-ignore
|
|
94
|
+
export const TrailSmall = () => html` ${createStyles()}
|
|
95
|
+
<sb-arch-content-icon
|
|
79
96
|
.background=${true}
|
|
80
97
|
color="rgb(221, 49, 49)"
|
|
81
98
|
size="small"
|
|
82
99
|
src="/images/badge-trail-1.png"
|
|
83
|
-
></arch-content-icon>
|
|
100
|
+
></sb-arch-content-icon>
|
|
84
101
|
`;
|
|
85
102
|
|
|
86
|
-
|
|
87
|
-
|
|
103
|
+
// prettier-ignore
|
|
104
|
+
export const TrailLarge = () => html` ${createStyles()}
|
|
105
|
+
<sb-arch-content-icon
|
|
88
106
|
.background=${true}
|
|
89
107
|
color="rgb(221, 49, 49)"
|
|
90
108
|
size="large"
|
|
91
109
|
src="/images/badge-trail-1.png"
|
|
92
|
-
></arch-content-icon>
|
|
110
|
+
></sb-arch-content-icon>
|
|
93
111
|
`;
|
|
94
112
|
|
|
95
|
-
|
|
96
|
-
|
|
113
|
+
// prettier-ignore
|
|
114
|
+
export const Trailmix = () => html` ${createStyles()}
|
|
115
|
+
<sb-arch-content-icon
|
|
97
116
|
.background=${true}
|
|
98
117
|
size="large"
|
|
99
118
|
src="/images/trailblazer-1.png"
|
|
100
|
-
></arch-content-icon>
|
|
119
|
+
></sb-arch-content-icon>
|
|
101
120
|
`;
|
|
102
121
|
|
|
103
|
-
|
|
104
|
-
|
|
122
|
+
// prettier-ignore
|
|
123
|
+
export const TrailmixComplete = () => html` ${createStyles()}
|
|
124
|
+
<sb-arch-content-icon
|
|
105
125
|
.background=${true}
|
|
106
126
|
size="large"
|
|
107
127
|
.checked=${true}
|
|
108
128
|
src="/images/trailblazer-1.png"
|
|
109
|
-
></arch-content-icon>
|
|
129
|
+
></sb-arch-content-icon>
|
|
110
130
|
`;
|
|
@@ -1,17 +1,26 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
4
|
+
title: "arch/arch-hero-a",
|
|
5
|
+
component: "sb-arch-hero-a",
|
|
5
6
|
parameters: {
|
|
6
7
|
chromatic: {
|
|
7
8
|
viewports: [400, 1100, 1199]
|
|
8
|
-
}
|
|
9
|
-
modules: ['/modules/arch-hero-a.js']
|
|
9
|
+
}
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
// prettier-ignore
|
|
14
|
+
const createStyles = () => html `
|
|
15
|
+
<style>
|
|
16
|
+
sb-arch-hero-a {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
</style>`;
|
|
20
|
+
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Base = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-hero-a
|
|
15
24
|
cta-href="/"
|
|
16
25
|
cta-label="CTA"
|
|
17
26
|
img-src="/images/hero-a-architect.png"
|
|
@@ -19,11 +28,12 @@ export const Base = () => html`
|
|
|
19
28
|
subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
|
|
20
29
|
title="Hello
|
|
21
30
|
Architects"
|
|
22
|
-
></arch-hero-a>
|
|
31
|
+
></sb-arch-hero-a>
|
|
23
32
|
`;
|
|
24
33
|
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
// prettier-ignore
|
|
35
|
+
export const Light = () => html` ${createStyles()}
|
|
36
|
+
<sb-arch-hero-a
|
|
27
37
|
background="light"
|
|
28
38
|
cta-href="/"
|
|
29
39
|
cta-label="CTA"
|
|
@@ -32,11 +42,12 @@ export const Light = () => html`
|
|
|
32
42
|
subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
|
|
33
43
|
title="Hello
|
|
34
44
|
Architects"
|
|
35
|
-
></arch-hero-a>
|
|
45
|
+
></sb-arch-hero-a>
|
|
36
46
|
`;
|
|
37
47
|
|
|
38
|
-
|
|
39
|
-
|
|
48
|
+
// prettier-ignore
|
|
49
|
+
export const Dark = () => html` ${createStyles()}
|
|
50
|
+
<sb-arch-hero-a
|
|
40
51
|
background="dark"
|
|
41
52
|
cta-href="/"
|
|
42
53
|
cta-label="CTA"
|
|
@@ -45,5 +56,5 @@ export const Dark = () => html`
|
|
|
45
56
|
subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
|
|
46
57
|
title="Hello
|
|
47
58
|
Architects"
|
|
48
|
-
></arch-hero-a>
|
|
59
|
+
></sb-arch-hero-a>
|
|
49
60
|
`;
|
|
@@ -1,38 +1,49 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
4
|
+
title: "arch/arch-hero-b",
|
|
5
|
+
component: "sb-arch-hero-b",
|
|
5
6
|
parameters: {
|
|
6
7
|
chromatic: {
|
|
7
8
|
viewports: [400, 1199]
|
|
8
|
-
}
|
|
9
|
-
modules: ['/modules/arch-hero-b.js']
|
|
9
|
+
}
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
// prettier-ignore
|
|
14
|
+
const createStyles = () => html `
|
|
15
|
+
<style>
|
|
16
|
+
sb-arch-hero-b {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
</style>`;
|
|
20
|
+
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Base = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-hero-b
|
|
15
24
|
cta-href="/"
|
|
16
25
|
cta-label="CTA"
|
|
17
26
|
img-src="/images/hero-b.png"
|
|
18
27
|
subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
|
|
19
28
|
title="Hello Architects"
|
|
20
|
-
></arch-hero-
|
|
29
|
+
></sb-arch-hero-b>
|
|
21
30
|
`;
|
|
22
31
|
|
|
23
|
-
|
|
24
|
-
|
|
32
|
+
// prettier-ignore
|
|
33
|
+
export const Light = () => html` ${createStyles()}
|
|
34
|
+
<sb-arch-hero-b
|
|
25
35
|
background="light"
|
|
26
36
|
cta-href="/"
|
|
27
37
|
cta-label="CTA"
|
|
28
38
|
img-src="/images/hero-b.png"
|
|
29
39
|
subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
|
|
30
40
|
title="Hello Architects"
|
|
31
|
-
></arch-hero-
|
|
41
|
+
></sb-arch-hero-b>
|
|
32
42
|
`;
|
|
33
43
|
|
|
34
|
-
|
|
35
|
-
|
|
44
|
+
// prettier-ignore
|
|
45
|
+
export const Dark = () => html` ${createStyles()}
|
|
46
|
+
<sb-arch-hero-b
|
|
36
47
|
background="dark"
|
|
37
48
|
background-src="/images/architect-bg.svg"
|
|
38
49
|
cta-href="/"
|
|
@@ -40,5 +51,5 @@ export const Dark = () => html`
|
|
|
40
51
|
img-src="/images/hero-b.png"
|
|
41
52
|
subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
|
|
42
53
|
title="Hello Architects"
|
|
43
|
-
></arch-hero-
|
|
54
|
+
></sb-arch-hero-b>
|
|
44
55
|
`;
|
|
@@ -1,18 +1,26 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
|
|
6
|
-
modules: ['/modules/arch-icon.js']
|
|
7
|
-
}
|
|
4
|
+
title: "arch/arch-icon",
|
|
5
|
+
component: "sb-arch-icon"
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
// prettier-ignore
|
|
9
|
+
const createStyles = () => html `
|
|
10
|
+
<style>
|
|
11
|
+
sb-arch-icon {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
</style>`;
|
|
15
|
+
|
|
16
|
+
// prettier-ignore
|
|
17
|
+
export const Base = () => html` ${createStyles()}
|
|
18
|
+
<sb-arch-icon size="large" symbol="edit"></sb-arch-icon>
|
|
12
19
|
`;
|
|
13
20
|
|
|
14
|
-
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Action = () => html` ${createStyles()}
|
|
15
23
|
<div style="color: red">
|
|
16
|
-
<arch-icon size="large" sprite="action" symbol="check"></arch-icon>
|
|
24
|
+
<sb-arch-icon size="large" sprite="action" symbol="check"></sb-arch-icon>
|
|
17
25
|
</div>
|
|
18
26
|
`;
|
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
|
|
6
|
-
modules: ['/modules/arch-page.js']
|
|
7
|
-
}
|
|
4
|
+
title: "arch/arch-page",
|
|
5
|
+
component: "sb-arch-page"
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
8
|
+
// prettier-ignore
|
|
9
|
+
const createStyles = () => html `
|
|
10
|
+
<style>
|
|
11
|
+
sb-arch-page {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
</style>`;
|
|
15
|
+
|
|
16
|
+
// prettier-ignore
|
|
17
|
+
export const Base = () => html` ${createStyles()}
|
|
18
|
+
<sb-arch-page> Hello </sb-arch-page>
|
|
19
|
+
`;
|
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
|
|
6
|
-
modules: ['/modules/arch-page-header-a.js']
|
|
7
|
-
}
|
|
4
|
+
title: "arch/arch-page-header-a",
|
|
5
|
+
component: "sb-arch-page-header-a"
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
// prettier-ignore
|
|
9
|
+
const createStyles = () => html `
|
|
10
|
+
<style>
|
|
11
|
+
sb-arch-page-header-a {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
</style>`;
|
|
15
|
+
|
|
16
|
+
// prettier-ignore
|
|
17
|
+
export const Base = () => html` ${createStyles()}
|
|
18
|
+
<sb-arch-page-header-a
|
|
12
19
|
pretitle="Reference Architecture"
|
|
13
20
|
title="Content Lifecycle Management and Modeling"
|
|
14
21
|
>
|
|
15
|
-
<arch-cta title="Download" variant="brand"></arch-cta>
|
|
16
|
-
<arch-cta title="Share"></arch-cta>
|
|
17
|
-
</arch-page-header-a>
|
|
22
|
+
<sb-arch-cta title="Download" variant="brand"></sb-arch-cta>
|
|
23
|
+
<sb-arch-cta title="Share"></sb-arch-cta>
|
|
24
|
+
</sb-arch-page-header-a>
|
|
18
25
|
`;
|
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
|
|
6
|
-
modules: ['/modules/arch-section-a.js']
|
|
7
|
-
}
|
|
4
|
+
title: "arch/arch-section-a",
|
|
5
|
+
component: "sb-arch-section-a"
|
|
8
6
|
};
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
// prettier-ignore
|
|
9
|
+
const createStyles = () => html `
|
|
10
|
+
<style>
|
|
11
|
+
sb-arch-section-a {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
</style>`;
|
|
15
|
+
|
|
16
|
+
// prettier-ignore
|
|
17
|
+
export const Base = () => html` ${createStyles()}
|
|
18
|
+
<sb-arch-section-a
|
|
12
19
|
description="Build apps faster, integrate easier, make apps smarter"
|
|
13
20
|
title="Explore Content"
|
|
14
21
|
cta-href="/"
|
|
15
22
|
cta-title="Explore"
|
|
16
23
|
>
|
|
17
|
-
</arch-section-a>
|
|
24
|
+
</sb-arch-section-a>
|
|
18
25
|
`;
|
|
@@ -1,17 +1,26 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from "lit-html";
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
4
|
+
title: "arch/arch-summary",
|
|
5
|
+
component: "sb-arch-summary",
|
|
5
6
|
parameters: {
|
|
6
|
-
modules: ['/modules/arch-summary.js'],
|
|
7
7
|
chromatic: {
|
|
8
8
|
viewports: [400, 800, 1199]
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
// prettier-ignore
|
|
14
|
+
const createStyles = () => html `
|
|
15
|
+
<style>
|
|
16
|
+
sb-arch-summary {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
</style>`;
|
|
20
|
+
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
export const Base = () => html` ${createStyles()}
|
|
23
|
+
<sb-arch-summary
|
|
15
24
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
16
25
|
path="/"
|
|
17
26
|
pretitle="Pretitle by "
|
|
@@ -19,47 +28,49 @@ export const Base = () => html`
|
|
|
19
28
|
pretitle-link-title="Link"
|
|
20
29
|
title="Title"
|
|
21
30
|
>
|
|
22
|
-
<arch-content-icon
|
|
31
|
+
<sb-arch-content-icon
|
|
23
32
|
slot="image"
|
|
24
33
|
src="/images/badge-1.png"
|
|
25
|
-
></arch-content-icon>
|
|
34
|
+
></sb-arch-content-icon>
|
|
26
35
|
<button slot="action">Action</button>
|
|
27
36
|
<span slot="meta-left">Meta left</span>
|
|
28
37
|
<span slot="meta-right">Meta right</span>
|
|
29
|
-
</arch-summary>
|
|
38
|
+
</sb-arch-summary>
|
|
30
39
|
`;
|
|
31
40
|
|
|
32
|
-
|
|
33
|
-
|
|
41
|
+
// prettier-ignore
|
|
42
|
+
export const CustomPretitle = () => html` ${createStyles()}
|
|
43
|
+
<sb-arch-summary
|
|
34
44
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
35
45
|
path="/"
|
|
36
46
|
title="Title"
|
|
37
47
|
>
|
|
38
|
-
<arch-content-icon
|
|
48
|
+
<sb-arch-content-icon
|
|
39
49
|
slot="image"
|
|
40
50
|
src="/images/badge-1.png"
|
|
41
|
-
></arch-content-icon>
|
|
51
|
+
></sb-arch-content-icon>
|
|
42
52
|
<div slot="pretitle">
|
|
43
53
|
Pretitle by <a href="#">Link</a> (custom content)
|
|
44
54
|
</div>
|
|
45
55
|
<button slot="action">Action</button>
|
|
46
56
|
<span slot="meta-left">Meta left</span>
|
|
47
57
|
<span slot="meta-right">Meta right</span>
|
|
48
|
-
</arch-summary>
|
|
58
|
+
</sb-arch-summary>
|
|
49
59
|
`;
|
|
50
60
|
|
|
51
|
-
|
|
52
|
-
|
|
61
|
+
// prettier-ignore
|
|
62
|
+
export const Brick = () => html` ${createStyles()}
|
|
63
|
+
<sb-arch-summary
|
|
53
64
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
54
65
|
display-mode="brick"
|
|
55
66
|
path="/"
|
|
56
67
|
title="Title"
|
|
57
68
|
>
|
|
58
|
-
<arch-content-icon
|
|
69
|
+
<sb-arch-content-icon
|
|
59
70
|
slot="image"
|
|
60
71
|
src="/images/badge-1.png"
|
|
61
72
|
size="small"
|
|
62
|
-
></arch-content-icon>
|
|
73
|
+
></sb-arch-content-icon>
|
|
63
74
|
|
|
64
75
|
<div slot="pretitle">
|
|
65
76
|
Pretitle by <a href="#">Link</a> (custom content)
|
|
@@ -67,21 +78,22 @@ export const Brick = () => html`
|
|
|
67
78
|
<button slot="action">Action</button>
|
|
68
79
|
<span slot="meta-left">Meta left</span>
|
|
69
80
|
<span slot="meta-right">Meta right</span>
|
|
70
|
-
</arch-summary>
|
|
81
|
+
</sb-arch-summary>
|
|
71
82
|
`;
|
|
72
83
|
|
|
73
|
-
|
|
74
|
-
|
|
84
|
+
// prettier-ignore
|
|
85
|
+
export const BrickTile = () => html` ${createStyles()}
|
|
86
|
+
<sb-arch-summary
|
|
75
87
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
76
88
|
display-mode="brick-tile"
|
|
77
89
|
path="/"
|
|
78
90
|
title="Title"
|
|
79
91
|
>
|
|
80
|
-
<arch-content-icon
|
|
92
|
+
<sb-arch-content-icon
|
|
81
93
|
slot="image"
|
|
82
94
|
src="/images/badge-1.png"
|
|
83
95
|
size="small"
|
|
84
|
-
></arch-content-icon>
|
|
96
|
+
></sb-arch-content-icon>
|
|
85
97
|
|
|
86
98
|
<div slot="pretitle">
|
|
87
99
|
Pretitle by <a href="#">Link</a> (custom content)
|
|
@@ -89,22 +101,23 @@ export const BrickTile = () => html`
|
|
|
89
101
|
<button slot="action">Action</button>
|
|
90
102
|
<span slot="meta-left">Meta left</span>
|
|
91
103
|
<span slot="meta-right">Meta right</span>
|
|
92
|
-
</arch-summary>
|
|
104
|
+
</sb-arch-summary>
|
|
93
105
|
`;
|
|
94
106
|
|
|
95
|
-
|
|
96
|
-
|
|
107
|
+
// prettier-ignore
|
|
108
|
+
export const BrickCompact = () => html` ${createStyles()}
|
|
109
|
+
<sb-arch-summary
|
|
97
110
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
98
111
|
compact
|
|
99
112
|
display-mode="brick-tile"
|
|
100
113
|
path="/"
|
|
101
114
|
title="Title"
|
|
102
115
|
>
|
|
103
|
-
<arch-content-icon
|
|
116
|
+
<sb-arch-content-icon
|
|
104
117
|
slot="image"
|
|
105
118
|
src="/images/badge-1.png"
|
|
106
119
|
size="small"
|
|
107
|
-
></arch-content-icon>
|
|
120
|
+
></sb-arch-content-icon>
|
|
108
121
|
|
|
109
122
|
<div slot="pretitle">
|
|
110
123
|
Pretitle by <a href="#">Link</a> (custom content)
|
|
@@ -112,11 +125,12 @@ export const BrickCompact = () => html`
|
|
|
112
125
|
<button slot="action">Action</button>
|
|
113
126
|
<span slot="meta-left">Meta left</span>
|
|
114
127
|
<span slot="meta-right">Meta right</span>
|
|
115
|
-
</arch-summary>
|
|
128
|
+
</sb-arch-summary>
|
|
116
129
|
`;
|
|
117
130
|
|
|
118
|
-
|
|
119
|
-
|
|
131
|
+
// prettier-ignore
|
|
132
|
+
export const TitleButton = () => html` ${createStyles()}
|
|
133
|
+
<sb-arch-summary
|
|
120
134
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
121
135
|
pretitle="Pretitle by "
|
|
122
136
|
pretitle-link-href="/"
|
|
@@ -124,15 +138,16 @@ export const TitleButton = () => html`
|
|
|
124
138
|
title="Title"
|
|
125
139
|
title-mode="button"
|
|
126
140
|
>
|
|
127
|
-
<arch-content-icon
|
|
141
|
+
<sb-arch-content-icon
|
|
128
142
|
slot="image"
|
|
129
143
|
src="/images/badge-1.png"
|
|
130
|
-
></arch-content-icon>
|
|
131
|
-
</arch-summary>
|
|
144
|
+
></sb-arch-content-icon>
|
|
145
|
+
</sb-arch-summary>
|
|
132
146
|
`;
|
|
133
147
|
|
|
134
|
-
|
|
135
|
-
|
|
148
|
+
// prettier-ignore
|
|
149
|
+
export const TitleText = () => html` ${createStyles()}
|
|
150
|
+
<sb-arch-summary
|
|
136
151
|
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
137
152
|
pretitle="Pretitle by "
|
|
138
153
|
pretitle-link-href="/"
|
|
@@ -140,9 +155,9 @@ export const TitleText = () => html`
|
|
|
140
155
|
title="Title"
|
|
141
156
|
title-mode="text"
|
|
142
157
|
>
|
|
143
|
-
<arch-content-icon
|
|
158
|
+
<sb-arch-content-icon
|
|
144
159
|
slot="image"
|
|
145
160
|
src="/images/badge-1.png"
|
|
146
|
-
></arch-content-icon>
|
|
147
|
-
</arch-summary>
|
|
161
|
+
></sb-arch-content-icon>
|
|
162
|
+
</sb-arch-summary>
|
|
148
163
|
`;
|