FUI - Moving to the native elements - Product list

src/components/apis/list-of-apis/react/runtime/ApiListDropdown.tsx

@@ -2,9 +2,7 @@ import * as React from "react";
 import { useState } from "react";
 import {
     Badge,
-    Body1Strong,
     Combobox,
-    Link,
     Option,
     OptionGroup,
     Spinner,
@@ -14,7 +12,6 @@ import { GroupByTag } from "../../../../utils/react/TableListInfo";
 import { Pagination } from "../../../../utils/react/Pagination";
 import * as Constants from "../../../../../constants";
 import { Api } from "../../../../../models/api";
-import { TApiListRuntimeFCProps } from "./ApiListRuntime";
 import {
     isApisGrouped,
     TagGroupToggleBtn,
@@ -23,6 +20,7 @@ import {
 } from "./utils";
 import { RouteHelper } from "../../../../../routing/routeHelper";
 import { ApiService } from "../../../../../services/apiService";
+import { TApiListRuntimeFCProps } from "./ApiListRuntime";
 
 type TApiListDropdown = Omit<
     TApiListRuntimeFCProps,
@@ -71,7 +69,7 @@ const Options = ({
     <>
         {apis.map((api) => (
             <Option key={api.id} value={api.name} text={api.displayName}>
-                <Link href={getReferenceUrl(api.name)} appearance="subtle">{api.displayName}</Link>{" "}
+                <a href={getReferenceUrl(api.name)} className="dropdown-link">{api.displayName}</a>{" "}
                 <ApiTypeBadge api={api} /> <ApiVersionBadge api={api} />
             </Option>
         ))}
@@ -175,7 +173,7 @@ const ApiListDropdownFC = ({
 
     return (
         <>
-            <Body1Strong block>API</Body1Strong>
+            <span className="strong">API</span>
             <div style={{ padding: ".25rem 0 1rem" }}>{content}</div>
         </>
     );

src/components/products/product-list/react/runtime/ProductsCards.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Button, Link, Subtitle1 } from "@fluentui/react-components";
+import { Stack } from "@fluentui/react";
 import { Product } from "../../../../../models/product";
-import { TProductsData } from "./utils";
-import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
 import { markdownMaxCharsMap } from "../../../../../constants";
+import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
+import { TProductsData } from "./utils";
 
 type Props = {
     getReferenceUrl: (productName: string) => string;
@@ -13,18 +13,21 @@ const ProductCard = ({ product, getReferenceUrl }: Props & { product: Product })
     return (
         <div className={"fui-list-card"}>
             <div style={{ height: "100%" }}>
-                <Subtitle1>{product.displayName}</Subtitle1>
+                <h4>{product.displayName}</h4>
 
                 <MarkdownProcessor markdownToDisplay={product.description} maxChars={markdownMaxCharsMap.cards} />
             </div>
 
-            <div>
-                <Link href={getReferenceUrl(product.name)} title={product.displayName}>
-                    <Button appearance={"outline"}>
-                        Go to Product
-                    </Button>
-                </Link>
-            </div>
+            <Stack horizontal>
+                <a
+                    href={getReferenceUrl(product.name)}
+                    title={product.displayName}
+                    role="button"
+                    className="button"
+                >
+                    Go to Product
+                </a>
+            </Stack>
         </div>
     );
 };

src/components/products/product-list/react/runtime/ProductsDropdown.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 import {
-    Body1Strong,
     Combobox,
-    Link,
     Option,
     Spinner,
 } from "@fluentui/react-components";
@@ -36,7 +34,7 @@ const Options = ({
     <>
         {products.map((product) => (
             <Option key={product.id} value={product.name} text={product.displayName}>
-                <Link href={getReferenceUrl(product.name)} appearance="subtle">{product.displayName}</Link>
+                <a href={getReferenceUrl(product.name)} className="dropdown-link">{product.displayName}</a>
             </Option>
         ))}
     </>
@@ -100,7 +98,7 @@ const ProductsDropdownFC = ({
 
     return (
         <>
-            <Body1Strong block>Product</Body1Strong>
+            <span className="strong">Product</span>
             <div style={{ padding: ".25rem 0 1rem" }}>{content}</div>
         </>
     );

src/components/products/product-list/react/runtime/ProductsTable.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
 import {
-    Body1Strong,
-    Link,
     Table,
     TableBody,
     TableCell,
@@ -25,9 +23,9 @@ const TableBodyProducts = ({ products, getReferenceUrl }: Props & { products: Pr
             ? products.map((product) => (
                 <TableRow key={product.id}>
                     <TableCell>
-                        <Link href={getReferenceUrl(product.name)} title={product.displayName}>
+                        <a href={getReferenceUrl(product.name)} title={product.displayName}>
                             {product.displayName}
-                        </Link>
+                        </a>
                     </TableCell>
                     <TableCell style={{padding: ".5rem 0"}}>
                         <MarkdownProcessor markdownToDisplay={product.description} maxChars={markdownMaxCharsMap.table} />
@@ -44,10 +42,10 @@ export const ProductsTable = ({ products, getReferenceUrl }: Props & { products:
         <TableHeader>
             <TableRow className={"fui-table-headerRow"}>
                 <TableHeaderCell>
-                    <Body1Strong>Name</Body1Strong>
+                    <span className="strong">Name</span>
                 </TableHeaderCell>
                 <TableHeaderCell>
-                    <Body1Strong>Description</Body1Strong>
+                    <span className="strong">Description</span>
                 </TableHeaderCell>
             </TableRow>
         </TableHeader>

src/themes/website/styles/text.scss

@@ -20,3 +20,11 @@ span.strong {
 span.caption1 {
     font-size: .9em;
 }
+
+a.dropdown-link {
+    color: inherit;
+
+    &:hover {
+        color: inherit;
+    }
+}