Feat/893 anchor per network param (#907)

* feat: highlight network param targeted by anchor

* Feat/893: Highlighted key-value row colours

* Feat/893: Removed unneeded important bangs

Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>

apps/explorer/src/app/routes/network-parameters/network-parameters.spec.tsx

@@ -24,10 +24,10 @@ describe('NetworkParametersTable', () => {
     );
     const rows = screen.getAllByTestId('key-value-table-row');
     expect(rows[0].children[0]).toHaveTextContent(
-      'Market Fee Factors Infrastructure Fee'
+      'market.fee.factors.infrastructureFee'
     );
     expect(rows[1].children[0]).toHaveTextContent(
-      'Market Liquidity Provision Min Lp Stake Quantum Multiple'
+      'market.liquidityProvision.minLpStakeQuantumMultiple'
     );
     expect(rows[0].children[1]).toHaveTextContent('0.0005');
     expect(rows[1].children[1]).toHaveTextContent('1');
@@ -54,10 +54,10 @@ describe('NetworkParametersTable', () => {
     );
     const rows = screen.getAllByTestId('key-value-table-row');
     expect(rows[0].children[0]).toHaveTextContent(
-      'Market Fee Factors Infrastructure Fee'
+      'market.fee.factors.infrastructureFee'
     );
     expect(rows[1].children[0]).toHaveTextContent(
-      'Market Liquidity Provision Min Lp Stake Quantum Multiple'
+      'market.liquidityProvision.minLpStakeQuantumMultiple'
     );
     expect(rows[0].children[1]).toHaveTextContent('0.0005');
     expect(rows[1].children[1]).toHaveTextContent('1');

apps/explorer/src/app/routes/network-parameters/network-parameters.tsx

@@ -16,7 +16,6 @@ import type {
   NetworkParametersQuery_networkParameters,
 } from './__generated__/NetworkParametersQuery';
 import orderBy from 'lodash/orderBy';
-import startCase from 'lodash/startCase';
 
 const BIG_NUMBER_PARAMS = [
   'spam.protection.delegation.min.tokens',
@@ -42,8 +41,15 @@ export const renderRow = ({
 }: NetworkParametersQuery_networkParameters) => {
   const isSyntaxRow = isJsonObject(value);
   return (
-    <KeyValueTableRow key={key} inline={!isSyntaxRow}>
-      {startCase(key)}
+    <KeyValueTableRow
+      key={key}
+      inline={!isSyntaxRow}
+      id={key}
+      className={
+        'group target:bg-vega-pink target:text-white dark:target:bg-vega-yellow dark:target:text-black'
+      }
+    >
+      {key}
       {isSyntaxRow ? (
         <SyntaxHighlighter data={JSON.parse(value)} />
       ) : isNaN(Number(value)) ? (

libs/ui-toolkit/src/components/key-value-table/key-value-table.spec.tsx

@@ -90,3 +90,19 @@ it('Applies muted class if prop is passed', () => {
     'w-full border-collapse mb-8 [border-spacing:0] break-all'
   );
 });
+
+it('Applies id to row if passed', () => {
+  render(
+    <KeyValueTable>
+      <KeyValueTableRow inline={false} id="thisistheid">
+        <span>My value</span>
+        <span>My value</span>
+      </KeyValueTableRow>
+    </KeyValueTable>
+  );
+
+  expect(screen.getByTestId('key-value-table-row')).toHaveAttribute(
+    'id',
+    'thisistheid'
+  );
+});

libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx

@@ -77,6 +77,7 @@ export const KeyValueTableRow = ({
   noBorder = false,
   dtClassName,
   ddClassName,
+  id,
 }: KeyValueTableRowProps) => {
   const dlClassName = classNames(
     'flex gap-1 flex-wrap justify-between ',
@@ -92,14 +93,24 @@ export const KeyValueTableRow = ({
   const dtClassNames = `break-words font-medium uppercase align-top p-4 capitalize ${dtClassName}`;
   const ddClassNames = classNames(
     'align-top p-4 text-black/60 dark:text-white/60 break-words',
+    'group-target:text-white dark:group-target:text-black',
     {
       'font-mono': numerical,
     },
     ddClassName
   );
 
+  const attributes = {} as Partial<React.HTMLProps<HTMLDListElement>>;
+  if (id) {
+    attributes.id = id;
+  }
+
   return (
-    <dl className={dlClassName} data-testid="key-value-table-row">
+    <dl
+      className={dlClassName}
+      data-testid="key-value-table-row"
+      {...attributes}
+    >
       <dt className={dtClassNames}>{children[0]}</dt>
       <dd className={ddClassNames}>{children[1]}</dd>
     </dl>