fix: change class names of table card elements

chanzuckerberg · Jun 13, 2022 · 33afbe0 · 33afbe0
1 parent ab18d0a
commit 33afbe0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/.storybook/recipes/TableCard/TableCard.module.css b/.storybook/recipes/TableCard/TableCard.module.css
@@ -5,16 +5,24 @@
 \*------------------------------------*/
 
 /**
- * 1) 
+ * 1) Card with a title, table, and button within
  */
-.standards-coverage {
-}
 
-.standards-coverage__table {
+/**
+* Table card table
+* 1) Actual table within the card
+*/
+.table-card__table {
   color: var(--eds-theme-color-text-neutral-subtle);
 }
 
-.standards-coverage__table-header-cell {
+/**
+* Table card table header cell
+*/
+.table-card__table-header-cell {
+  /**
+  * First child within table card table header cell
+  */
   &:first-child {
     @media all and (min-width: $eds-bp-md) {
       width: 11.875rem;

diff --git a/.storybook/recipes/TableCard/TableCard.tsx b/.storybook/recipes/TableCard/TableCard.tsx
@@ -61,7 +61,7 @@ export const TableCard = ({
   tableColumns,
   ...other
 }: Props) => {
-  const componentClassName = clsx(styles['standards-coverage'], className, {});
+  const componentClassName = clsx(styles['table-card'], className, {});
 
   return (
     <Card className={componentClassName} {...other}>
@@ -76,15 +76,15 @@ export const TableCard = ({
         </Heading>
         <Table
           caption="Standards coverage"
-          className={styles['standards-coverage__table']}
+          className={styles['table-card__table']}
           hideCaption={true}
         >
           <TableHeader>
             <TableRow>
               {tableColumns.map((item, index) => {
                 return (
                   <TableHeaderCell
-                    className={styles['standards-coverage__table-header-cell']}
+                    className={styles['table-card__table-header-cell']}
                     key={'table-header-cell-' + index}
                   >
                     {item.title}