@fundamental-styles/mcp 0.41.8-rc.8 → 0.41.8
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/data/CHANGELOG.md +32 -0
- package/data/accessibility.json +34 -6
- package/data/component-graph.md +7128 -465
- package/data/component-relationships.json +42632 -2263
- package/data/components/avatar-product-switch.md +391 -271
- package/data/components/dynamic-page-dynamic-page.md +287 -3
- package/data/components/dynamic-page.md +1 -1
- package/data/components/panel.md +15 -11
- package/data/design-tokens.json +2 -2
- package/data/examples/Components/panel/borderless.example.html +3 -3
- package/data/examples/Components/panel/expandable.example.html +2 -2
- package/data/examples/Components/panel/fixed-height-content.example.html +1 -1
- package/data/examples/Components/panel/fixed.example.html +1 -1
- package/data/examples/Components/panel/sticky-header.example.html +1 -1
- package/data/examples/Components/panel/transparent.example.html +2 -2
- package/data/examples/Components/product-switch/large.example.html +125 -94
- package/data/examples/Components/product-switch/medium.example.html +26 -13
- package/data/examples/Components/product-switch/small.example.html +71 -33
- package/data/examples/Layouts/dynamic-page/large.example.html +156 -0
- package/data/examples/Layouts/dynamic-page/mobile-collapsed.example.html +1 -1
- package/data/examples/Layouts/dynamic-page/responsive-paddings.example.html +121 -0
- package/data/examples/Layouts/dynamic-page/summary-line.example.html +1 -1
- package/package.json +2 -1
|
@@ -1,96 +1,127 @@
|
|
|
1
1
|
<div class="fd-product-switch__body">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<div class="fd-product-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<div class="fd-product-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
2
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
3
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Home Home Home Home Home Home Home Central Home Central Home Central Home Central Home" aria-posinset="1" aria-setsize="14">
|
|
4
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Home">
|
|
5
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
6
|
+
</span>
|
|
7
|
+
<div class="fd-product-switch__text">
|
|
8
|
+
<div class="fd-product-switch__title">Home Home Home Home Home Home Home Home</div>
|
|
9
|
+
<div class="fd-product-switch__subtitle">Central Home Central Home Central Home Central Home</div>
|
|
10
|
+
</div>
|
|
11
|
+
</li>
|
|
12
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="14">
|
|
13
|
+
<span
|
|
14
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
15
|
+
style="background-image: url('/assets/images/landscape/L1.jpg')"
|
|
16
|
+
role="img"
|
|
17
|
+
aria-label="Avatar landscape"
|
|
18
|
+
></span>
|
|
19
|
+
<div class="fd-product-switch__text">
|
|
20
|
+
<div class="fd-product-switch__title">Analytics Cloud Analytics Cloud</div>
|
|
21
|
+
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
22
|
+
</div>
|
|
23
|
+
</li>
|
|
24
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="14">
|
|
25
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
26
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
27
|
+
</span>
|
|
28
|
+
<div class="fd-product-switch__text">
|
|
29
|
+
<div class="fd-product-switch__title">Catalog</div>
|
|
30
|
+
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
31
|
+
</div>
|
|
32
|
+
</li>
|
|
33
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="14">
|
|
34
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
35
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
36
|
+
</span>
|
|
37
|
+
<div class="fd-product-switch__text">
|
|
38
|
+
<div class="fd-product-switch__title">Guided Buying</div>
|
|
39
|
+
</div>
|
|
40
|
+
</li>
|
|
41
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="14">
|
|
42
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
43
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
44
|
+
</span>
|
|
45
|
+
<div class="fd-product-switch__text">
|
|
46
|
+
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
47
|
+
</div>
|
|
48
|
+
</li>
|
|
49
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="14">
|
|
50
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Travel & Expense">
|
|
51
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
52
|
+
</span>
|
|
53
|
+
<div class="fd-product-switch__text">
|
|
54
|
+
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
55
|
+
<div class="fd-product-switch__subtitle">Concur</div>
|
|
56
|
+
</div>
|
|
57
|
+
</li>
|
|
58
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="14">
|
|
59
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Vendor Management">
|
|
60
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
61
|
+
</span>
|
|
62
|
+
<div class="fd-product-switch__text">
|
|
63
|
+
<div class="fd-product-switch__title">Vendor Management</div>
|
|
64
|
+
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
65
|
+
</div>
|
|
66
|
+
</li>
|
|
67
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="14">
|
|
68
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Human Capital Management">
|
|
69
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
70
|
+
</span>
|
|
71
|
+
<div class="fd-product-switch__text">
|
|
72
|
+
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
73
|
+
</div>
|
|
74
|
+
</li>
|
|
75
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="14">
|
|
76
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
77
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
78
|
+
</span>
|
|
79
|
+
<div class="fd-product-switch__text">
|
|
80
|
+
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
81
|
+
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
82
|
+
</div>
|
|
83
|
+
</li>
|
|
84
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="14">
|
|
85
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
86
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
87
|
+
</span>
|
|
88
|
+
<div class="fd-product-switch__text">
|
|
89
|
+
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
90
|
+
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
91
|
+
</div>
|
|
92
|
+
</li>
|
|
93
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="14">
|
|
94
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
95
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
96
|
+
</span>
|
|
97
|
+
<div class="fd-product-switch__text">
|
|
98
|
+
<div class="fd-product-switch__title">Marketing Cloud</div>
|
|
99
|
+
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
100
|
+
</div>
|
|
101
|
+
</li>
|
|
102
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="14">
|
|
103
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
104
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
105
|
+
</span>
|
|
106
|
+
<div class="fd-product-switch__text">
|
|
107
|
+
<div class="fd-product-switch__title">Service Cloud</div>
|
|
108
|
+
</div>
|
|
109
|
+
</li>
|
|
110
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="14">
|
|
111
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
112
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
113
|
+
</span>
|
|
114
|
+
<div class="fd-product-switch__text">
|
|
115
|
+
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
116
|
+
</div>
|
|
117
|
+
</li>
|
|
118
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="14">
|
|
119
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
120
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
121
|
+
</span>
|
|
122
|
+
<div class="fd-product-switch__text">
|
|
123
|
+
<div class="fd-product-switch__title">S/4HANA</div>
|
|
124
|
+
</div>
|
|
125
|
+
</li>
|
|
126
|
+
</ul>
|
|
96
127
|
</div>
|
|
@@ -1,34 +1,47 @@
|
|
|
1
1
|
<div class="fd-product-switch__body fd-product-switch__body--col-3">
|
|
2
|
-
<ul class="fd-product-switch__list">
|
|
3
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
4
|
-
<
|
|
2
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
3
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Home Home Home Home Home Home Central Home Central Home Central Home Central Home" aria-posinset="1" aria-setsize="5">
|
|
4
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Home">
|
|
5
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
6
|
+
</span>
|
|
5
7
|
<div class="fd-product-switch__text">
|
|
6
|
-
<div class="fd-product-switch__title">Home</div>
|
|
7
|
-
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
8
|
+
<div class="fd-product-switch__title">Home Home Home Home Home Home Home</div>
|
|
9
|
+
<div class="fd-product-switch__subtitle">Central Home Central Home Central Home Central Home</div>
|
|
8
10
|
</div>
|
|
9
11
|
</li>
|
|
10
|
-
<li class="fd-product-switch__item selected" tabindex="0">
|
|
11
|
-
<span
|
|
12
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="5">
|
|
13
|
+
<span
|
|
14
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
15
|
+
style="background-image: url('/assets/images/landscape/L1.jpg')"
|
|
16
|
+
role="img"
|
|
17
|
+
aria-label="Analytics Cloud"
|
|
18
|
+
></span>
|
|
12
19
|
<div class="fd-product-switch__text">
|
|
13
20
|
<div class="fd-product-switch__title">Analytics Cloud</div>
|
|
14
21
|
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
15
22
|
</div>
|
|
16
23
|
</li>
|
|
17
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
18
|
-
<
|
|
24
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="5">
|
|
25
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
26
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
27
|
+
</span>
|
|
19
28
|
<div class="fd-product-switch__text">
|
|
20
29
|
<div class="fd-product-switch__title">Catalog</div>
|
|
21
30
|
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
22
31
|
</div>
|
|
23
32
|
</li>
|
|
24
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
25
|
-
<
|
|
33
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="5">
|
|
34
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
35
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
36
|
+
</span>
|
|
26
37
|
<div class="fd-product-switch__text">
|
|
27
38
|
<div class="fd-product-switch__title">Guided Buying</div>
|
|
28
39
|
</div>
|
|
29
40
|
</li>
|
|
30
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
31
|
-
<
|
|
41
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="5">
|
|
42
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
43
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
44
|
+
</span>
|
|
32
45
|
<div class="fd-product-switch__text">
|
|
33
46
|
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
34
47
|
</div>
|
|
@@ -1,94 +1,132 @@
|
|
|
1
|
-
<div style="width:
|
|
1
|
+
<div style="width: 353px">
|
|
2
2
|
<div class="fd-product-switch__body fd-product-switch__body--mobile">
|
|
3
|
-
<ul class="fd-product-switch__list">
|
|
4
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
5
|
-
<
|
|
3
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
4
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Central Home" aria-posinset="1" aria-setsize="14">
|
|
5
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Home">
|
|
6
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--home"></i>
|
|
7
|
+
</span>
|
|
6
8
|
<div class="fd-product-switch__text">
|
|
7
9
|
<div class="fd-product-switch__title">Home</div>
|
|
8
10
|
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
9
11
|
</div>
|
|
10
12
|
</li>
|
|
11
|
-
<li class="fd-product-switch__item selected" tabindex="0">
|
|
12
|
-
<
|
|
13
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="14">
|
|
14
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start">
|
|
15
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--business-objects-experience"></i>
|
|
16
|
+
</span>
|
|
13
17
|
<div class="fd-product-switch__text">
|
|
14
|
-
<div class="fd-product-switch__title">
|
|
15
|
-
|
|
18
|
+
<div class="fd-product-switch__title">
|
|
19
|
+
Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud
|
|
20
|
+
</div>
|
|
21
|
+
<div class="fd-product-switch__subtitle">Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics</div>
|
|
16
22
|
</div>
|
|
17
23
|
</li>
|
|
18
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
19
|
-
<span
|
|
24
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="14">
|
|
25
|
+
<span
|
|
26
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
27
|
+
style="background-image: url('/assets/images/landscape/L1.jpg')"
|
|
28
|
+
role="img"
|
|
29
|
+
aria-label="SAP Ariba"
|
|
30
|
+
></span>
|
|
20
31
|
<div class="fd-product-switch__text">
|
|
21
32
|
<div class="fd-product-switch__title">Catalog</div>
|
|
22
33
|
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
23
34
|
</div>
|
|
24
35
|
</li>
|
|
25
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
26
|
-
<span
|
|
36
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="14">
|
|
37
|
+
<span
|
|
38
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
39
|
+
style="background-image: url('/assets/images/landscape/demo-avatar.png')"
|
|
40
|
+
role="img"
|
|
41
|
+
aria-label="Business Data Cloud"
|
|
42
|
+
></span>
|
|
27
43
|
<div class="fd-product-switch__text">
|
|
28
44
|
<div class="fd-product-switch__title">Guided Buying</div>
|
|
29
45
|
</div>
|
|
30
46
|
</li>
|
|
31
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
32
|
-
<
|
|
47
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="14">
|
|
48
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Integration Suite">
|
|
49
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
50
|
+
</span>
|
|
33
51
|
<div class="fd-product-switch__text">
|
|
34
52
|
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
35
53
|
</div>
|
|
36
54
|
</li>
|
|
37
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
38
|
-
<
|
|
55
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="14">
|
|
56
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA Cloud">
|
|
57
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
58
|
+
</span>
|
|
39
59
|
<div class="fd-product-switch__text">
|
|
40
60
|
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
41
61
|
<div class="fd-product-switch__subtitle">Concur</div>
|
|
42
62
|
</div>
|
|
43
63
|
</li>
|
|
44
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
45
|
-
<
|
|
64
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="14">
|
|
65
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SuccessFactors">
|
|
66
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
67
|
+
</span>
|
|
46
68
|
<div class="fd-product-switch__text">
|
|
47
69
|
<div class="fd-product-switch__title">Vendor Management</div>
|
|
48
70
|
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
49
71
|
</div>
|
|
50
72
|
</li>
|
|
51
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
52
|
-
<
|
|
73
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Product Management (very long text) ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lacus rhoncus, tempus diam non, mattis tellus." aria-posinset="8" aria-setsize="14">
|
|
74
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Concur">
|
|
75
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
76
|
+
</span>
|
|
53
77
|
<div class="fd-product-switch__text">
|
|
54
|
-
<div class="fd-product-switch__title">
|
|
78
|
+
<div class="fd-product-switch__title">
|
|
79
|
+
Product Management (very long text) ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lacus rhoncus, tempus diam non, mattis tellus.
|
|
80
|
+
</div>
|
|
55
81
|
</div>
|
|
56
82
|
</li>
|
|
57
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
58
|
-
<
|
|
83
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="14">
|
|
84
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
85
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
86
|
+
</span>
|
|
59
87
|
<div class="fd-product-switch__text">
|
|
60
88
|
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
61
89
|
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
62
90
|
</div>
|
|
63
91
|
</li>
|
|
64
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
65
|
-
<
|
|
92
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="14">
|
|
93
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
94
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
95
|
+
</span>
|
|
66
96
|
<div class="fd-product-switch__text">
|
|
67
97
|
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
68
98
|
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
69
99
|
</div>
|
|
70
100
|
</li>
|
|
71
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
72
|
-
<
|
|
101
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="14">
|
|
102
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
103
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
104
|
+
</span>
|
|
73
105
|
<div class="fd-product-switch__text">
|
|
74
106
|
<div class="fd-product-switch__title">Marketing Cloud</div>
|
|
75
107
|
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
76
108
|
</div>
|
|
77
109
|
</li>
|
|
78
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
79
|
-
<
|
|
110
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="14">
|
|
111
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
112
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
113
|
+
</span>
|
|
80
114
|
<div class="fd-product-switch__text">
|
|
81
115
|
<div class="fd-product-switch__title">Service Cloud</div>
|
|
82
116
|
</div>
|
|
83
117
|
</li>
|
|
84
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
85
|
-
<
|
|
118
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="14">
|
|
119
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
120
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
121
|
+
</span>
|
|
86
122
|
<div class="fd-product-switch__text">
|
|
87
123
|
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
88
124
|
</div>
|
|
89
125
|
</li>
|
|
90
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
91
|
-
<
|
|
126
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="14">
|
|
127
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
128
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
129
|
+
</span>
|
|
92
130
|
<div class="fd-product-switch__text">
|
|
93
131
|
<div class="fd-product-switch__title">S/4HANA</div>
|
|
94
132
|
</div>
|