fix: number icon tests. lint.

.storybook/pages/Cad/Cad.tsx

@@ -265,7 +265,6 @@ export const Cad = () => (
     <Panel className="u-margin-bottom-lg" variant="squared">
       <LayoutContainer>
         <PageHeader
-          orientation="2up"
           className="u-margin-bottom-none"
           description={
             <HorizontalStepper
@@ -278,6 +277,7 @@ export const Cad = () => (
             ></HorizontalStepper>
           }
           headingSize="title-sm"
+          orientation="2up"
           right={
             <ButtonGroup>
               <Button>
@@ -470,21 +470,21 @@ export const Cad = () => (
               />
             </CardWithNotification.Body>
           </CardWithNotification>
-          <Grid variant="1-2-1up" className="u-margin-bottom-lg">
+          <Grid className="u-margin-bottom-lg" variant="1-2-1up">
             <GridItem>
               <TableCard
+                buttonContent="View all Cognitive Skills"
                 tableColumns={CognitiveSkillColumns}
                 tableRows={CognitiveSkillRows}
                 title="Cognitive skills coverage"
-                buttonContent="View all Cognitive Skills"
               />
             </GridItem>
             <GridItem>
               <TableCard
+                buttonContent="View all Standards"
                 tableColumns={StandardsColumns}
                 tableRows={StandardsRows}
                 title="Standards coverage"
-                buttonContent="View all Standards"
               />
             </GridItem>
           </Grid>

.storybook/recipes/NumberIconList/NumberIconList.stories.tsx

@@ -1,16 +1,14 @@
-
-import React from 'react';
 import { Story, Meta } from '@storybook/react';
+import React from 'react';
 
 import { NumberIconList, Props } from './NumberIconList';
 
 export default {
-	title: 'Recipes/NumberIconList',
-	component: NumberIconList,
+  title: 'Recipes/NumberIconList',
+  component: NumberIconList,
 } as Meta;
 
 const Template: Story<Props> = (args) => <NumberIconList {...args} />;
 
 export const Default = Template.bind({});
-Default.args = {
-};;
+Default.args = {};

.storybook/recipes/NumberIconList/NumberIconList.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
 import clsx from 'clsx';
+import React, { ReactNode } from 'react';
 import styles from './NumberIconList.module.css';
 
 export interface Props {

.storybook/recipes/NumberIconList/index.ts

@@ -1 +1 @@
-export { NumberIconList as default } from './NumberIconList'
+export { NumberIconList as default } from './NumberIconList';

.storybook/recipes/TableCard/TableCard.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Story, Meta } from '@storybook/react';
+import React from 'react';
 
 import { TableCard, Props } from './TableCard';
 

.storybook/recipes/TableCard/TableCard.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
 import clsx from 'clsx';
+import React, { ReactNode } from 'react';
 import styles from './TableCard.module.css';
 
 import {
@@ -66,12 +66,12 @@ export const TableCard = ({
   return (
     <Card className={componentClassName} {...other}>
       <CardBody>
-        <Heading className="u-margin-bottom-md" as="h2" size="title-sm">
+        <Heading as="h2" className="u-margin-bottom-md" size="title-sm">
           {title}
         </Heading>
         <Table
-          className={styles['standards-coverage__table']}
           caption="Standards coverage"
+          className={styles['standards-coverage__table']}
           hideCaption={true}
         >
           <TableHeader>
@@ -80,7 +80,7 @@ export const TableCard = ({
                 return (
                   <TableHeaderCell
                     className={styles['standards-coverage__table-header-cell']}
-                    key={'table-header-row-' + index}
+                    key={'table-header-cell-' + index}
                   >
                     {item.title}
                   </TableHeaderCell>
@@ -91,18 +91,19 @@ export const TableCard = ({
           <TableBody>
             {tableRows.map((item, index) => {
               return (
-                <TableRow>
+                <TableRow key={`table-row-${index}`}>
                   <TableHeaderCell>{item.value1}</TableHeaderCell>
                   <TableCell>
                     <NumberIconList>
                       {item.projects.map((item, index) => {
                         return (
                           <NumberIcon
-                            size="sm"
                             aria-label={item.ariaLabel}
-                            number={index + 1}
                             incomplete={!item.complete}
+                            key={`number-icon-${index}`}
+                            number={index + 1}
                             numberIconTitle={`incomplete step ${index + 1}`}
+                            size="sm"
                           />
                         );
                       })}

src/components/HorizontalStep/HorizontalStep.tsx

@@ -59,9 +59,9 @@ export const HorizontalStep = ({
     ) : (
       <NumberIcon
         aria-label={`current step ${stepNumber} ${text}`}
+        incomplete={variant !== 'active'}
         number={stepNumber}
         numberIconTitle={`incomplete step ${stepNumber} ${text}`}
-        incomplete={variant !== 'active'}
       />
     );