agroptima-design-system 1.2.35 → 1.2.37-beta.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.
package/package.json
CHANGED
|
@@ -40,6 +40,10 @@
|
|
|
40
40
|
.cards-table-cell {
|
|
41
41
|
vertical-align: top;
|
|
42
42
|
padding: config.$space-2x config.$space-3x;
|
|
43
|
+
|
|
44
|
+
.label {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
.cards-table-body .cards-table-row {
|
|
@@ -156,6 +160,14 @@
|
|
|
156
160
|
width: 100%;
|
|
157
161
|
flex: inherit;
|
|
158
162
|
padding: 0px;
|
|
163
|
+
|
|
164
|
+
.label {
|
|
165
|
+
display: inline;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.highlight {
|
|
169
|
+
@include typography.cards-table-list-highlight-text;
|
|
170
|
+
}
|
|
159
171
|
}
|
|
160
172
|
|
|
161
173
|
.actions {
|
|
@@ -438,3 +438,101 @@ export const MultipleBadges: Story = {
|
|
|
438
438
|
</CardsTable>
|
|
439
439
|
),
|
|
440
440
|
}
|
|
441
|
+
|
|
442
|
+
export const MobileWithLabelAndHighlightedValue: Story = {
|
|
443
|
+
render: (args) => (
|
|
444
|
+
<CardsTable withTitle {...args}>
|
|
445
|
+
<CardsTableHead>
|
|
446
|
+
<CardsTableRow>
|
|
447
|
+
<CardsTableHeader>
|
|
448
|
+
<Checkbox
|
|
449
|
+
hideLabel
|
|
450
|
+
id="checkbox-select-all"
|
|
451
|
+
indeterminate
|
|
452
|
+
checked
|
|
453
|
+
onChange={() => {}}
|
|
454
|
+
variant="primary"
|
|
455
|
+
/>
|
|
456
|
+
<span>Game title</span>
|
|
457
|
+
</CardsTableHeader>
|
|
458
|
+
<CardsTableHeader>Company address</CardsTableHeader>
|
|
459
|
+
<CardsTableHeader>Customer service email</CardsTableHeader>
|
|
460
|
+
<CardsTableHeader>State</CardsTableHeader>
|
|
461
|
+
<CardsTableHeader>Price</CardsTableHeader>
|
|
462
|
+
<CardsTableHeader actions>Actions</CardsTableHeader>
|
|
463
|
+
</CardsTableRow>
|
|
464
|
+
</CardsTableHead>
|
|
465
|
+
<CardsTableBody>
|
|
466
|
+
<CardsTableRow>
|
|
467
|
+
<CardsTableCell titleWithActions={3}>
|
|
468
|
+
<Checkbox
|
|
469
|
+
hideLabel
|
|
470
|
+
accessibilityLabel="Select all table rows"
|
|
471
|
+
id="checkbox-select-all"
|
|
472
|
+
variant="primary"
|
|
473
|
+
/>
|
|
474
|
+
<span>Zone of the Enders: The 2nd Runner</span>
|
|
475
|
+
<Badge
|
|
476
|
+
accessibilityLabel="Game is bought"
|
|
477
|
+
icon="Export"
|
|
478
|
+
variant="success-outlined"
|
|
479
|
+
/>
|
|
480
|
+
</CardsTableCell>
|
|
481
|
+
<CardsTableCell>
|
|
482
|
+
Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku,
|
|
483
|
+
Tokyo, 104-0061 Japan
|
|
484
|
+
</CardsTableCell>
|
|
485
|
+
<CardsTableCell>
|
|
486
|
+
<span className="label">Email: </span>
|
|
487
|
+
<span className="highlight">konami@fakemail.com</span>
|
|
488
|
+
</CardsTableCell>
|
|
489
|
+
<CardsTableCell floatingLeftMobile>
|
|
490
|
+
<Badge
|
|
491
|
+
accessibilityLabel="Game is bought"
|
|
492
|
+
text="Bought"
|
|
493
|
+
variant="success-outlined"
|
|
494
|
+
/>
|
|
495
|
+
</CardsTableCell>
|
|
496
|
+
<CardsTableCell>
|
|
497
|
+
<span className="label">State: </span>
|
|
498
|
+
<span className="highlight">Not available</span>
|
|
499
|
+
</CardsTableCell>
|
|
500
|
+
<CardsTableCell actions>
|
|
501
|
+
<IconButton
|
|
502
|
+
icon="Edit"
|
|
503
|
+
accessibilityLabel="Edit game"
|
|
504
|
+
href="link.com"
|
|
505
|
+
/>
|
|
506
|
+
<IconButton
|
|
507
|
+
icon="Delete"
|
|
508
|
+
accessibilityLabel="Delete game"
|
|
509
|
+
href="link.com"
|
|
510
|
+
/>
|
|
511
|
+
<ActionsMenu position="right" accessibilityLabel="More actions">
|
|
512
|
+
<PopoverMenuOption
|
|
513
|
+
active
|
|
514
|
+
onClick={() => alert('Save')}
|
|
515
|
+
variant="primary"
|
|
516
|
+
title="Save"
|
|
517
|
+
leftIcon="Export"
|
|
518
|
+
/>
|
|
519
|
+
<PopoverMenuOption
|
|
520
|
+
onClick={() => alert('Restart level')}
|
|
521
|
+
variant="primary"
|
|
522
|
+
title="Restart level"
|
|
523
|
+
leftIcon="Export"
|
|
524
|
+
/>
|
|
525
|
+
<PopoverMenuOption
|
|
526
|
+
disabled
|
|
527
|
+
onClick={() => alert('Back to main menu')}
|
|
528
|
+
variant="primary"
|
|
529
|
+
title="Back to main menu"
|
|
530
|
+
leftIcon="Export"
|
|
531
|
+
/>
|
|
532
|
+
</ActionsMenu>
|
|
533
|
+
</CardsTableCell>
|
|
534
|
+
</CardsTableRow>
|
|
535
|
+
</CardsTableBody>
|
|
536
|
+
</CardsTable>
|
|
537
|
+
),
|
|
538
|
+
}
|