@fundamental-styles/theming-preview 0.30.0-rc.8 → 0.30.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.
@@ -1,101 +1,147 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
3
+ <head>
4
4
  <link href="fundamental-styles.css" rel="stylesheet">
5
- <style type="text/css">
6
- .fd-theming .fd-theming__flex{
7
- display: flex;
8
- }
9
- .fd-theming .fd-theming__flex-column{
10
- flex-direction: column;
11
- }
12
- .fd-theming .fd-theming__margin-right-1{
13
- margin-right: 1rem;
14
- }
5
+ <style type="text/css">
6
+ .fd-theming .fd-theming__flex {
7
+ display: flex;
8
+ }
9
+ .fd-theming .fd-theming__flex-column {
10
+ flex-direction: column;
11
+ }
12
+ .fd-theming .fd-theming__margin-right-1 {
13
+ margin-right: 1rem;
14
+ }
15
15
  .fd-theming .fd-theming__margin-bottom-03{
16
16
  margin-bottom: .3rem;
17
- }
18
- </style>
19
- <script src="theme-manager.js"></script>
20
- </head>
21
- <body>
22
- <div class="fd-theming">
23
- <div class="fd-panel fd-panel--fixed">
24
- <div class="fd-panel__header">
25
- <h4 class="fd-panel__title">Shell</h4>
26
- </div>
27
- <div class="fd-panel__content fd-theming__flex">
28
- <div style="height:200px; width: 60%;">
29
- <div class="fd-shellbar">
30
- <div class="fd-shellbar__group fd-shellbar__group--product">
31
- <span class="fd-shellbar__logo">
32
- <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP">
33
- </span>
34
- <div class="fd-popover">
35
- <div class="fd-popover__control">
36
- <button class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu" onclick="onPopoverClick('9GLB26941');" aria-controls="9GLB26941" aria-haspopup="true" aria-expanded="false">
37
- <span class="fd-shellbar__title">Corporate Portal</span>
38
- <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
39
- </button>
40
- </div>
41
- <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="9GLB26941">
42
- <nav class="fd-menu">
43
- <ul class="fd-menu__list fd-menu__list--no-shadow">
44
- <li class="fd-menu__item">
45
- <a role="button" class="fd-menu__link">
46
- <span class="fd-menu__title">Application A</span>
47
- </a>
48
- </li>
49
- <li class="fd-menu__item">
50
- <a role="button" class="fd-menu__link">
51
- <span class="fd-menu__title">Application B</span>
52
- </a>
53
- </li>
54
- <li class="fd-menu__item">
55
- <a role="button" class="fd-menu__link">
56
- <span class="fd-menu__title">Application C</span>
57
- </a>
58
- </li>
59
- <li class="fd-menu__item">
60
- <a role="button" class="fd-menu__link">
61
- <span class="fd-menu__title">Application D</span>
62
- </a>
63
- </li>
64
- </ul>
65
- </nav>
17
+ }
18
+ </style>
19
+ <script src="theme-manager.js"></script>
20
+ </head>
21
+ <body>
22
+ <div class="fd-theming">
23
+ <div class="fd-panel fd-panel--fixed">
24
+ <div class="fd-panel__header">
25
+ <h4 class="fd-panel__title">Shell</h4>
26
+ </div>
27
+ <div class="fd-theming__flex">
28
+ <div style="width:100%">
29
+ <div class="fd-shellbar">
30
+ <div class="fd-shellbar__group fd-shellbar__group--product">
31
+ <span class="fd-shellbar__logo">
32
+ <img
33
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
34
+ srcset="
35
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
36
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
37
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
38
+ "
39
+ width="48"
40
+ height="24"
41
+ alt="SAP"
42
+ />
43
+ </span>
44
+ <div class="fd-popover">
45
+ <div class="fd-popover__control">
46
+ <button
47
+ class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu"
48
+ onclick="onPopoverClick('9GLB26941');"
49
+ aria-controls="9GLB26941"
50
+ aria-haspopup="true"
51
+ aria-expanded="false"
52
+ >
53
+ <span class="fd-shellbar__title">Corporate Portal</span>
54
+ <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
55
+ </button>
56
+ </div>
57
+ <div
58
+ class="fd-popover__body fd-popover__body--no-arrow"
59
+ aria-hidden="true"
60
+ id="9GLB26941"
61
+ >
62
+ <nav class="fd-menu">
63
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
64
+ <li class="fd-menu__item">
65
+ <a role="button" class="fd-menu__link">
66
+ <span class="fd-menu__title">Application A</span>
67
+ </a>
68
+ </li>
69
+ <li class="fd-menu__item">
70
+ <a role="button" class="fd-menu__link">
71
+ <span class="fd-menu__title">Application B</span>
72
+ </a>
73
+ </li>
74
+ <li class="fd-menu__item">
75
+ <a role="button" class="fd-menu__link">
76
+ <span class="fd-menu__title">Application C</span>
77
+ </a>
78
+ </li>
79
+ <li class="fd-menu__item">
80
+ <a role="button" class="fd-menu__link">
81
+ <span class="fd-menu__title">Application D</span>
82
+ </a>
83
+ </li>
84
+ </ul>
85
+ </nav>
86
+ </div>
66
87
  </div>
88
+ <div class="fd-shellbar__subtitle">Subtitle</div>
67
89
  </div>
68
- <div class="fd-shellbar__subtitle">Subtitle</div>
69
- </div>
70
- <div class="fd-shellbar__group fd-shellbar__group--actions">
71
- <div class="fd-shellbar__action fd-shellbar__action--desktop">
72
- <div class="fd-popover__control">
73
- <div aria-label="Image label" onclick="onPopoverClick('F4GcX348b')" aria-controls="F4GcX348b" aria-expanded="false" aria-haspopup="true">
74
- <div class="fd-input-group fd-shellbar__search-field">
75
- <input aria-label="search-input" type="text" class="fd-input fd-input-group__input fd-shellbar__search-field__input" id="F4GcX348b1" value="Search" placeholder="Search...">
76
- <span class="fd-input-group__addon fd-shellbar__search-field__addon fd-input-group__addon--button">
77
- <button aria-label="button-decline" class="fd-shellbar__button fd-button">
78
- <i class="sap-icon--decline"></i>
79
- </button>
80
- </span>
90
+ <div class="fd-shellbar__group fd-shellbar__group--actions">
91
+ <div class="fd-shellbar__action fd-shellbar__action--grow">
92
+ <div id="JKHhjk7234k2" class="fd-input-group fd-shellbar__search-field">
93
+ <input
94
+ aria-label="search-input"
95
+ type="text"
96
+ onfocus="addClass('JKHhjk7234k2', 'is-focus')"
97
+ onblur="removeClass('JKHhjk7234k2', 'is-focus')"
98
+ class="fd-input fd-input-group__input fd-shellbar__search-field-input"
99
+ id="F4GcX348b1"
100
+ placeholder="Search everything"
101
+ />
102
+ <div
103
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
104
+ >
105
+ <button
106
+ aria-label="button-search"
107
+ class="fd-shellbar__button fd-button fd-button--transparent"
108
+ >
109
+ <i class="sap-icon--decline"></i>
110
+ </button>
111
+ </div>
112
+ <div
113
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
114
+ >
115
+ <button
116
+ aria-label="button-search"
117
+ class="fd-shellbar__button fd-button fd-button--transparent"
118
+ >
119
+ <i class="sap-icon--search"></i>
120
+ </button>
81
121
  </div>
122
+ <div class="fd-shellbar__search-field-helper"></div>
82
123
  </div>
83
124
  </div>
84
125
  </div>
85
- <div class="fd-shellbar__action fd-shellbar__action--desktop">
86
- <button class="fd-button fd-shellbar__button" aria-label="Search">
87
- <i class="sap-icon--search"></i>
88
- </button>
89
- </div>
90
- <div class="fd-shellbar__action">
91
- <div class="fd-popover fd-popover--right">
92
- <div class="fd-popover__control">
93
- <div class="fd-button fd-shellbar__button fd-user-menu__control" aria-controls="ZY3AY276" onclick="onPopoverClick('ZY3AY276')" aria-expanded="false" aria-haspopup="true" role="button">
94
- <span
95
- class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
96
- style="background-image: url('assets/images/avatars/1.svg');"
97
- aria-label="William Wallingham">WW
98
- </span>
126
+ <div class="fd-shellbar__group fd-shellbar__group--actions">
127
+ <div class="fd-shellbar__action">
128
+ <div class="fd-popover fd-popover--right">
129
+ <div class="fd-popover__control">
130
+ <div
131
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
132
+ aria-controls="ZY3AY276"
133
+ onclick="onPopoverClick('ZY3AY276')"
134
+ aria-expanded="false"
135
+ aria-haspopup="true"
136
+ role="button"
137
+ >
138
+ <span
139
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatar--circle"
140
+ style="background-image: url('assets/images/avatars/1.svg')"
141
+ aria-label="William Wallingham"
142
+ >WW
143
+ </span>
144
+ </div>
99
145
  </div>
100
146
  </div>
101
147
  </div>
@@ -104,144 +150,180 @@
104
150
  </div>
105
151
  </div>
106
152
  </div>
107
- </div>
108
153
 
109
- <div class="fd-panel fd-panel--fixed">
110
- <div class="fd-panel__header">
111
- <h4 class="fd-panel__title">Tiles</h4>
112
- </div>
113
- <div class="fd-panel__content fd-theming__flex">
114
- <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
115
- <div class="fd-tile__header">
116
- <div class="fd-tile__title">My Tasks</div>
117
- </div>
118
- <div class="fd-tile__content">
119
- <div class="fd-numeric-content">
120
- <div class="fd-numeric-content fd-numeric-content--small-tile">
121
- <div class="fd-numeric-content__launch-icon-container">
122
- <i role="presentation" class="fd-numeric-content__launch-icon sap-icon--task"></i>
123
- </div>
124
- <div class="fd-numeric-content__kpi-container">
125
- <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">12</div>
154
+ <div class="fd-panel fd-panel--fixed">
155
+ <div class="fd-panel__header">
156
+ <h4 class="fd-panel__title">Tiles</h4>
157
+ </div>
158
+ <div class="fd-panel__content fd-theming__flex">
159
+ <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
160
+ <div class="fd-tile__header">
161
+ <div class="fd-tile__title">My Tasks</div>
162
+ </div>
163
+ <div class="fd-tile__content">
164
+ <div class="fd-numeric-content">
165
+ <div class="fd-numeric-content fd-numeric-content--small-tile">
166
+ <div class="fd-numeric-content__launch-icon-container">
167
+ <i
168
+ role="presentation"
169
+ class="fd-numeric-content__launch-icon sap-icon--task"
170
+ ></i>
171
+ </div>
172
+ <div class="fd-numeric-content__kpi-container">
173
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">12</div>
174
+ </div>
126
175
  </div>
127
176
  </div>
128
177
  </div>
129
- </div>
130
- <div class="fd-tile__footer fd-tile__footer--1-col">
131
- <div class="fd-tile__section">
132
- <span class="fd-tile__footer-text">Tasks</span>
178
+ <div class="fd-tile__footer fd-tile__footer--1-col">
179
+ <div class="fd-tile__section">
180
+ <span class="fd-tile__footer-text">Tasks</span>
181
+ </div>
133
182
  </div>
134
183
  </div>
135
- </div>
136
- &nbsp &nbsp &nbsp
137
- <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
138
- <div class="fd-tile__header">
139
- <div class="fd-tile__title">My Leave Requests</div>
140
- </div>
141
- <div class="fd-tile__content">
142
- <div class="fd-numeric-content">
143
- <div class="fd-numeric-content fd-numeric-content--small-tile">
144
- <div class="fd-numeric-content__launch-icon-container">
145
- <i role="presentation" class="fd-numeric-content__launch-icon sap-icon--general-leave-request"></i>
146
- </div>
147
- <div class="fd-numeric-content__kpi-container">
148
- <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">3</div>
184
+ &nbsp &nbsp &nbsp
185
+ <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
186
+ <div class="fd-tile__header">
187
+ <div class="fd-tile__title">My Leave Requests</div>
188
+ </div>
189
+ <div class="fd-tile__content">
190
+ <div class="fd-numeric-content">
191
+ <div class="fd-numeric-content fd-numeric-content--small-tile">
192
+ <div class="fd-numeric-content__launch-icon-container">
193
+ <i
194
+ role="presentation"
195
+ class="fd-numeric-content__launch-icon sap-icon--general-leave-request"
196
+ ></i>
197
+ </div>
198
+ <div class="fd-numeric-content__kpi-container">
199
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">3</div>
200
+ </div>
149
201
  </div>
150
202
  </div>
151
203
  </div>
152
- </div>
153
- <div class="fd-tile__footer fd-tile__footer--1-col">
154
- <div class="fd-tile__section">
155
- <span class="fd-tile__footer-text">Requests</span>
204
+ <div class="fd-tile__footer fd-tile__footer--1-col">
205
+ <div class="fd-tile__section">
206
+ <span class="fd-tile__footer-text">Requests</span>
207
+ </div>
156
208
  </div>
157
209
  </div>
158
- </div>
159
- &nbsp &nbsp &nbsp
160
- <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
161
- <div class="fd-tile__header">
162
- <div class="fd-tile__title">Lunch Menu</div>
163
- <div class="fd-tile__subtitle">Weekly Menu</div>
164
- </div>
165
- <div class="fd-tile__content">
166
- <div class="fd-numeric-content">
167
- <div class="fd-numeric-content fd-numeric-content--small-tile">
168
- <div class="fd-numeric-content__launch-icon-container">
169
- <i role="presentation" class="fd-numeric-content__launch-icon sap-icon--menu"></i>
210
+ &nbsp &nbsp &nbsp
211
+ <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
212
+ <div class="fd-tile__header">
213
+ <div class="fd-tile__title">Lunch Menu</div>
214
+ <div class="fd-tile__subtitle">Weekly Menu</div>
215
+ </div>
216
+ <div class="fd-tile__content">
217
+ <div class="fd-numeric-content">
218
+ <div class="fd-numeric-content fd-numeric-content--small-tile">
219
+ <div class="fd-numeric-content__launch-icon-container">
220
+ <i
221
+ role="presentation"
222
+ class="fd-numeric-content__launch-icon sap-icon--menu"
223
+ ></i>
224
+ </div>
170
225
  </div>
171
226
  </div>
172
227
  </div>
173
228
  </div>
174
229
  </div>
175
230
  </div>
176
- </div>
177
231
 
178
- <div class="fd-panel fd-panel--fixed">
179
- <div class="fd-panel__header">
180
- <h4 class="fd-panel__title">Card</h4>
181
- </div>
182
- <div class="fd-panel__content fd-theming__flex">
183
- <div style="width: 300px; height: 400px; margin: 1rem;">
184
- <div class="fd-card" role="region" aria-label="Card Anatomy Example 1">
185
- <a class="fd-card__header" tabindex="0">
186
- <span
187
- class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
188
- style="background-image: url('/assets/images/backgrounds/city.jpg')"
189
- role="img"
190
- aria-label="John Doe">JD</span>
191
- <div class="fd-card__header-text">
192
- <div class="fd-card__title-area">
193
- <div class="fd-card__title">Card Title</div>
194
- <span class="fd-object-status fd-card__counter">Counter</span>
232
+ <div class="fd-panel fd-panel--fixed">
233
+ <div class="fd-panel__header">
234
+ <h4 class="fd-panel__title">Card</h4>
235
+ </div>
236
+ <div class="fd-panel__content fd-theming__flex">
237
+ <div style="width: 300px; height: 400px; margin: 1rem">
238
+ <div class="fd-card" role="region" aria-label="Card Anatomy Example 1">
239
+ <a class="fd-card__header" tabindex="0">
240
+ <span
241
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
242
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
243
+ role="img"
244
+ aria-label="John Doe"
245
+ >JD</span
246
+ >
247
+ <div class="fd-card__header-text">
248
+ <div class="fd-card__title-area">
249
+ <div class="fd-card__title">Card Title</div>
250
+ <span class="fd-object-status fd-card__counter">Counter</span>
251
+ </div>
252
+ <div class="fd-card__subtitle-area">
253
+ <div class="fd-card__subtitle">Card Subtitle</div>
254
+ </div>
195
255
  </div>
196
- <div class="fd-card__subtitle-area">
197
- <div class="fd-card__subtitle">Card Subtitle</div>
256
+ </a>
257
+ <div class="fd-card__content" role="group" aria-label="Card Content">
258
+ <div class="fd-card__content-container">
259
+ <div class="fd-card__content-section">
260
+ <div class="fd-card__content-title-container"></div>
261
+ <div class="fd-card__content-group-text">
262
+ <span>
263
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
264
+ et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
265
+ Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
266
+ </span>
267
+ </div>
268
+ </div>
198
269
  </div>
270
+
271
+ </div>
272
+ <div class="fd-card__footer">
273
+ <a class="fd-link fd-card__footer-link" href="#">
274
+ <span class="fd-link__content">
275
+ Footer with a long link Lorem ipsum dolor sit amet,
276
+ consectetur adipisicing elit. Accusantium
277
+ </span>
278
+ </a>
279
+ <button class="fd-button fd-button--transparent">
280
+ <i class="sap-icon sap-icon--overflow"></i>
281
+ </button>
199
282
  </div>
200
- </a>
201
- <div class="fd-card__content" role="group" aria-label="Card Content"></div>
283
+ </div>
202
284
  </div>
203
- </div>
204
- <div style="width: 300px; height: 100%; margin: 1rem;">
205
- <div class="fd-card" role="region" aria-label="List Card Example 1">
206
- <div class="fd-card__header fd-card__header--non-interactive">
207
- <div class="fd-card__header-text">
208
- <div class="fd-card__title-area">
209
- <div class="fd-card__title">Quick Links</div>
210
- <span class="fd-object-status fd-card__counter">6 of 20</span>
285
+ <div style="width: 300px; height: 100%; margin: 1rem">
286
+ <div class="fd-card" role="region" aria-label="List Card Example 1">
287
+ <div class="fd-card__header fd-card__header--non-interactive">
288
+ <div class="fd-card__header-text">
289
+ <div class="fd-card__title-area">
290
+ <div class="fd-card__title">Quick Links</div>
291
+ <span class="fd-object-status fd-card__counter">6 of 20</span>
292
+ </div>
211
293
  </div>
212
294
  </div>
213
- </div>
214
- <div class="fd-card__content" role="group" aria-label="Card Content">
215
- <ul class="fd-list fd-list--no-border" role="list">
216
- <li role="listitem" tabindex="0" class="fd-list__item">
217
- <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
218
- <span class="fd-list__title">List item 1</span>
219
- </li>
220
- <li role="listitem" tabindex="0" class="fd-list__item">
221
- <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
222
- <span class="fd-list__title">List item 2</span>
223
- </li>
224
- <li role="listitem" tabindex="0" class="fd-list__item">
225
- <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
226
- <span class="fd-list__title">List item 3</span>
227
- </li>
228
- <li role="listitem" tabindex="0" class="fd-list__item">
229
- <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
230
- <span class="fd-list__title">List item 4</span>
231
- </li>
232
- <li role="listitem" tabindex="0" class="fd-list__item">
233
- <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
234
- <span class="fd-list__title">List item 3</span>
235
- </li>
236
- <li role="listitem" tabindex="0" class="fd-list__item">
237
- <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
238
- <span class="fd-list__title">List item 4</span>
239
- </li>
240
- </ul>
295
+ <div class="fd-card__content" role="group" aria-label="Card Content">
296
+ <ul class="fd-list fd-list--no-border" role="list">
297
+ <li role="listitem" tabindex="0" class="fd-list__item">
298
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
299
+ <span class="fd-list__title">List item 1</span>
300
+ </li>
301
+ <li role="listitem" tabindex="0" class="fd-list__item">
302
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
303
+ <span class="fd-list__title">List item 2</span>
304
+ </li>
305
+ <li role="listitem" tabindex="0" class="fd-list__item">
306
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
307
+ <span class="fd-list__title">List item 3</span>
308
+ </li>
309
+ <li role="listitem" tabindex="0" class="fd-list__item">
310
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
311
+ <span class="fd-list__title">List item 4</span>
312
+ </li>
313
+ <li role="listitem" tabindex="0" class="fd-list__item">
314
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
315
+ <span class="fd-list__title">List item 3</span>
316
+ </li>
317
+ <li role="listitem" tabindex="0" class="fd-list__item">
318
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
319
+ <span class="fd-list__title">List item 4</span>
320
+ </li>
321
+ </ul>
322
+ </div>
241
323
  </div>
242
324
  </div>
243
325
  </div>
244
326
  </div>
245
327
  </div>
246
- </div>
247
- </body>
328
+ </body>
329
+ </html>
package/table.html CHANGED
@@ -177,40 +177,40 @@
177
177
  <input checked aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="5">
178
178
  <label class="fd-checkbox__label" for="5"></label>
179
179
  </td>
180
- <td class="fd-table__cell">Apple</td>
181
- <td class="fd-table__cell">98311</td>
182
- <td class="fd-table__cell">200</td>
183
- <td class="fd-table__cell">$1.30</td>
180
+ <td class="fd-table__cell"><span class="fd-table__text">Apple</span></td>
181
+ <td class="fd-table__cell"><span class="fd-table__text">98311</span></td>
182
+ <td class="fd-table__cell"><span class="fd-table__text">200</span></td>
183
+ <td class="fd-table__cell"><span class="fd-table__text">$1.30</span></td>
184
184
  </tr>
185
185
  <tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
186
186
  <td class="fd-table__cell fd-table__cell--checkbox">
187
187
  <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="6">
188
188
  <label class="fd-checkbox__label" for="6"></label>
189
189
  </td>
190
- <td class="fd-table__cell">Banana</td>
191
- <td class="fd-table__cell">3612</td>
192
- <td class="fd-table__cell">500</td>
193
- <td class="fd-table__cell">$0.50</td>
190
+ <td class="fd-table__cell"><span class="fd-table__text">Banana</span></td>
191
+ <td class="fd-table__cell"><span class="fd-table__text">3612</span></td>
192
+ <td class="fd-table__cell"><span class="fd-table__text">500</span></td>
193
+ <td class="fd-table__cell"><span class="fd-table__text">$0.50</span></td>
194
194
  </tr>
195
195
  <tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
196
196
  <td class="fd-table__cell fd-table__cell--checkbox">
197
197
  <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="7">
198
198
  <label class="fd-checkbox__label" for="7"></label>
199
199
  </td>
200
- <td class="fd-table__cell">Pineapple</td>
201
- <td class="fd-table__cell">63125</td>
202
- <td class="fd-table__cell">80</td>
203
- <td class="fd-table__cell">$5.10</td>
200
+ <td class="fd-table__cell"><span class="fd-table__text">Pineapple</span></td>
201
+ <td class="fd-table__cell"><span class="fd-table__text">63125</span></td>
202
+ <td class="fd-table__cell"><span class="fd-table__text">80</span></td>
203
+ <td class="fd-table__cell"><span class="fd-table__text">$5.10</span></td>
204
204
  </tr>
205
205
  <tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
206
206
  <td class="fd-table__cell fd-table__cell--checkbox">
207
207
  <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="8">
208
208
  <label class="fd-checkbox__label" for="8"></label>
209
209
  </td>
210
- <td class="fd-table__cell">Orange</td>
211
- <td class="fd-table__cell">37012</td>
212
- <td class="fd-table__cell">200</td>
213
- <td class="fd-table__cell">$2.50</td>
210
+ <td class="fd-table__cell"><span class="fd-table__text">Orange</span></td>
211
+ <td class="fd-table__cell"><span class="fd-table__text">37012</span></td>
212
+ <td class="fd-table__cell"><span class="fd-table__text">200</span></td>
213
+ <td class="fd-table__cell"><span class="fd-table__text">$2.50</span></td>
214
214
  </tr>
215
215
  </tbody>
216
216
  </table>