[Fix] Skill table styling (#10440)

* update cells for skill table

* add translation

apps/web/src/lang/fr.json

@@ -6842,6 +6842,10 @@
     "defaultMessage": "Votre numéro de suivi pour cette demande est : <strong>{requestId}</strong>",
     "description": "Message to the user about the ID of their request for referencing the request"
   },
+  "aq2pSe": {
+    "defaultMessage": "description pour {name}",
+    "description": "Link text suffix to read more of the description for a skill"
+  },
   "aqkSW2": {
     "defaultMessage": "Inscrivez-vous plutôt",
     "description": "Link text to register instead of signing in"

apps/web/src/pages/Skills/components/SkillTable.tsx

@@ -31,6 +31,7 @@ import * as messages from "~/lang/frCompiled.json";
 
 import {
   categoryAccessor,
+  descriptionCell,
   familiesAccessor,
   skillFamiliesCell,
 } from "./tableHelpers";
@@ -213,6 +214,12 @@ const SkillTable = ({
       {
         id: "description",
         sortingFn: normalizedText,
+        cell: ({ row: { original: skill } }) =>
+          descriptionCell(
+            intl,
+            getLocalizedName(skill.name, intl),
+            getLocalizedName(skill.description, intl),
+          ),
         header: intl.formatMessage({
           defaultMessage: "Description",
           id: "9yGJ6k",

apps/web/src/pages/Skills/components/tableHelpers.tsx

@@ -7,7 +7,7 @@ import {
   getLocalizedArray,
 } from "@gc-digital-talent/i18n";
 import { notEmpty } from "@gc-digital-talent/helpers";
-import { Chip, Chips } from "@gc-digital-talent/ui";
+import { Spoiler } from "@gc-digital-talent/ui";
 import {
   Maybe,
   Skill,
@@ -32,12 +32,10 @@ export function skillFamiliesCell(
     ?.filter(notEmpty)
     .sort()
     .map((family) => (
-      <Chip color="primary" key={family?.key}>
-        {getLocalizedName(family.name, intl)}
-      </Chip>
+      <li key={family?.key}>{getLocalizedName(family.name, intl)}</li>
     ));
 
-  return families ? <Chips>{families}</Chips> : null;
+  return families ? <ul>{families}</ul> : null;
 }
 
 export function familiesAccessor(skill: Skill, intl: IntlShape) {
@@ -51,3 +49,26 @@ export function familiesAccessor(skill: Skill, intl: IntlShape) {
 export function keywordsAccessor(skill: Skill, intl: IntlShape) {
   return getLocalizedArray(skill.keywords as LocalizedArray, intl);
 }
+
+export function descriptionCell(
+  intl: IntlShape,
+  name: string,
+  description?: Maybe<string>,
+) {
+  return description ? (
+    <Spoiler
+      text={description}
+      linkSuffix={intl.formatMessage(
+        {
+          defaultMessage: "description for {name}",
+          id: "aq2pSe",
+          description:
+            "Link text suffix to read more of the description for a skill",
+        },
+        {
+          name,
+        },
+      )}
+    />
+  ) : null;
+}