chore(table): expands test coverage

- fixes up existing tests to use new default props if necessary
- adds numerical test, text alignment, visual elements, empty state,
loading state, and a test of a smattering of other focus/selected tests
for the rows and cells

Author: marissahuysentruyt

components/table/stories/table.test.js

@@ -133,22 +133,31 @@ export const TableGroup = Variants({
 			hasColumnDividers: true,
 		},
 		{
-			testHeading: "Summary: selected",
+			testHeading: "Empty state",
+			rowItems: [],
+		},
+		{
+			testHeading: "Loading state",
+			isLoading: true,
+		},
+		{
+			testHeading: "Summary and selected rows",
 			rowItems: ExampleSummarySelectedContent,
 		},
 		{
-			testHeading: "Multi-select: emphasized",
+			testHeading: "Selection mode: multiple, emphasized",
 			rowItems: ExampleMultiSelectContent,
+			isEmphasized: true,
 		},
 		{
-			testHeading: "Multi-select: non-emphasized",
-			isEmphasized: false,
+			testHeading: "Selection mode: multiple, non-emphasized",
 			rowItems: ExampleMultiSelectContent,
 		},
 		{
 			testHeading: "Quiet multi-select: emphasized",
 			isQuiet: true,
 			rowItems: ExampleMultiSelectContent,
+			isEmphasized: true,
 		},
 		{
 			testHeading: "Scrollable",
@@ -230,7 +239,8 @@ export const TableGroup = Variants({
 			],
 		},
 		{
-			testHeading: "Collapsible: multi-select",
+			testHeading: "Selection mode: multiple, collapsible",
+			selectionMode: "multiple",
 			rowItems: [
 				{
 					showCheckbox: true,
@@ -296,60 +306,100 @@ export const TableGroup = Variants({
 			],
 		},
 		{
-			testHeading: "Thumbnails",
-			showThumbnails: true,
+			testHeading: "End-alignment for numerical data",
 			rowItems: [
 				{
-					cellContent: ["Table row alpha", "Test", "2"],
+					cellContent: ["Pikachu", "Electric", "35"],
+					textAlignment: {
+						2: "end"
+					}
 				},
 				{
-					cellContent: ["Table row bravo", "Test", "28"],
+					cellContent: ["Charmander", "Fire", "39"],
+					textAlignment: {
+						2: "end"
+					}
 				},
 				{
-					cellContent: [
-						"Table row charlie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
-						"Test",
-						"23",
-					],
+					cellContent: ["Mew", "Psychic", "100"],
+					textAlignment: {
+						2: "end"
+					}
+				},
+			],
+		},
+		{
+			testHeading: "Visual elements",
+			rowItems: [
+				{
+					cellContent: "Avatar example",
+					visualElement: "avatar",
 				},
 				{
-					cellContent: ["Table row delta", "Test", "7"],
+					cellContent: "Icon example",
+					visualElement: "icon",
+				},
+				{
+					cellContent: "Thumbnail example",
+					visualElement: "thumbnail",
 				},
 			],
 		},
 		{
-			testHeading: "Thumbnail: collapsible",
-			showThumbnails: true,
+			testHeading: "Visual elements: collapsible",
 			rowItems: [
 				{
 					cellContent: "Table row alpha",
 					isCollapsible: true,
 					isExpanded: true,
 					tier: 0,
-					ariaControls: "table-cr-bravo",
+					ariaControls: "table-cr-bravo table-cr-delta",
 					id: "table-cr-alpha",
 				},
 				{
 					cellContent:
-						"Table row bravo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+						"Table row bravo. There is actually another collapsed row here that's not visible. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
 					isCollapsible: true,
 					tier: 1,
 					ariaControls: "table-cr-charlie",
 					id: "table-cr-bravo",
+					visualElement: "avatar",
+				},
+				{
+					cellContent: [
+						"Table row charlie",
+						"Default not visible",
+						"Default not visible",
+					],
+					isCollapsible: true,
+					isHidden: true,
+					tier: 2,
+					id: "table-cr-charlie",
+				},
+				{
+					cellContent: "Selected row delta",
+					isSelected: true,
+					isCollapsible: true,
+					isExpanded: true,
+					tier: 1,
+					ariaControls: "table-cr-echo table-cr-foxtrot",
+					id: "table-cr-delta",
+					visualElement: "icon",
 				},
 				{
-					cellContent: "Table row charlie",
+					cellContent: "Table row echo",
 					tier: 2,
 					isLastTier: true,
 					isCollapsible: true,
-					id: "table-cr-charlie",
+					id: "table-cr-echo",
+					visualElement: "thumbnail",
 				},
 				{
-					cellContent: "Table row delta",
+					cellContent: "Table row foxtrot",
 					tier: 2,
 					isLastTier: true,
 					isCollapsible: true,
-					id: "table-cr-delta",
+					id: "table-cr-foxtrot",
 				},
 				{
 					cellContent: "Summary row",
@@ -370,5 +420,40 @@ export const TableGroup = Variants({
 			testHeading: "Body drop target",
 			isDropTarget: true,
 		},
+		{
+			testHeading: "Focus, selected states for rows and cells",
+			rowItems: [
+				{
+					cellContent: "Focused selected row, no rounded corners",
+					isFocused: true,
+					isSelected: true,
+				},
+				{
+					cellContent: "Table row bravo",
+				},
+				{
+					cellContent: "Selected unfocused row, no rounded corners",
+					isSelected: true,
+				},
+				{
+					cellContent: "Focused unselected row, no rounded corners",
+					isFocused: true,
+				},
+				{
+					cellContent: ["Table row with a focused cell", "Focused cell", "Unfocused cell"],
+					cellCustomClasses: {
+						1: ["is-focused"]
+					}
+				},
+				{
+					cellContent: "Table row echo",
+				},
+				{
+					cellContent: "Focused selected row, with rounded corners",
+					isFocused: true,
+					isSelected: true,
+				}
+			],
+		}
 	],
 });