refactor(TabInfoButton): [EMU-7334] Use InfoIcon component

getPopsure · May 13, 2024 · ee6a8c6 · ee6a8c6
1 parent a3c9186
commit ee6a8c6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 50 deletions.
diff --git a/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx b/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx
@@ -1,3 +1,4 @@
+import Info from '../../../icon/icons/Info';
 import styles from './style.module.scss';
 
 const TableInfoButton = ({
@@ -7,39 +8,13 @@ const TableInfoButton = ({
   onClick: () => void;
   className?: string;
 }) => (
-  <span
-    role="button"
+  <button
     className={`p-btn--secondary ${styles.button} ${className}`}
+    type="button"
     onClick={onClick}
-    onKeyDown={(e) => {
-      e.stopPropagation();
-
-      if (e.key === 'Enter' || e.key === " ") {
-        onClick();
-      }
-    }}
-    tabIndex={0}
   >
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z"
-      />
-      <path d="M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z" />
-    </svg>
-  </span>
+    <Info size={20} />
+  </button>
 );
 
 export default TableInfoButton;
diff --git a/src/lib/components/comparisonTable/index.stories.mdx b/src/lib/components/comparisonTable/index.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
+import TableInfoButton from './components/TableInfoButton';
 import { CardButton } from '../cards';
 
 import {
@@ -76,9 +76,7 @@ export const ComparisonTableWithData = () => {
           key: 'name',
           label: 'Films',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
@@ -91,15 +89,18 @@ export const ComparisonTableWithData = () => {
           key: 'imdb',
           label: 'IMDB rating',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
           id: 3,
           key: 'rating',
-          label: <TableRowHeader label="Our rating of movies found online on IMDB lists" onClickInfo={() => {}} />,
+          label: (
+            <TableRowHeader
+              label="Our rating of movies found online on IMDB lists"
+              onClickInfo={() => {}}
+            />
+          ),
           render: (value) => (
             <TableButton onClick={() => {}}>
               <TableRating type="star" rating={value} />
@@ -110,11 +111,18 @@ export const ComparisonTableWithData = () => {
           id: 5,
           key: 'recommended',
           label: (
-            <TableRowHeader
-              label="Recommended"
-              subtitle="Our favourites"
-              onClickInfo={() => {}}
-            />
+            <>
+              <TableRowHeader
+                label="Recommended"
+                subtitle="Our favourites"
+                onClickInfo={() => {}}
+              />
+              <TableInfoButton
+                onClick={() => {
+                  console.log('STUFF');
+                }}
+              />
+            </>
           ),
           render: (value) => <TableRating type="zap" rating={value} />,
         },
@@ -322,9 +330,7 @@ export const ComparisonTableWithData = () => {
           key: 'name',
           label: 'Films',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
@@ -337,15 +343,18 @@ export const ComparisonTableWithData = () => {
           key: 'imdb',
           label: 'IMDB rating',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
           id: 3,
           key: 'rating',
-          label: <TableRowHeader label="Our rating of movies found online on IMDB lists" onClickInfo={() => {}} />,
+          label: (
+            <TableRowHeader
+              label="Our rating of movies found online on IMDB lists"
+              onClickInfo={() => {}}
+            />
+          ),
           render: (value) => (
             <TableButton onClick={() => {}}>
               <TableRating type="star" rating={value} />