Merge pull request #582 from guardian/dblatcher/update-stand

update Stand, replace IntendedAudienceSignifier prop logic

Author: dblatcher

package.json

@@ -42,9 +42,9 @@
     "sass": "^1.77.8",
     "sass-loader": "^8.0.2",
     "style-loader": "^0.13.1",
-    "terser-webpack-plugin": "^3.0.2",
+    "terser-webpack-plugin": "^5.6.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.6.2",
+    "typescript": "^5.0.0",
     "url-loader": "^4.1.1",
     "webpack": "5.94.0",
     "webpack-cli": "^5.1.4",
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
-    "@guardian/stand": "^0.0.37",
+    "@guardian/stand": "^0.0.47",
     "@guardian/user-telemetry-client": "1.2.1",
     "@types/react": "^17.0.76",
     "@types/react-dom": "^17.0.9",

public/components/content-list-item/templates/intended-audience.html

@@ -1,9 +1,7 @@
 <td
   class="content-list-item__field--intended-audience"
-  title="Intended Audience: {{ contentItem.intendedAudience || 'none' }}"
 >
-  <intended-audience-signifier 
-   production-office="contentItem.office"
-   intended-audience="contentItem.intendedAudience"
+  <intended-audience-signifier
+    intended-audience="contentItem.intendedAudience"
   ></intended-audience-signifier>
 </td>

public/lib/model/intended-audience.ts

@@ -11,9 +11,6 @@ type IntendedAudienceOptionValue =
 type AudienceTagSlug = "global" | "uk" | "au" | "us";
 const expectedAudienceSlugs = ["global", "uk", "au", "us"];
 
-export const isAudienceTagSlug = (text: string) =>
-  expectedAudienceSlugs.includes(text);
-
 export const intendedAudienceOptions: {
   displayName: string;
   value: IntendedAudienceOptionValue;

public/react/IntendedAudienceWrapper.tsx

@@ -1,103 +1,40 @@
 import {
   IntendedAudienceSignifier,
-  type IntendedAudienceSignifierProps,
-} from "@guardian/stand/intendedAudienceSignifier";
+  mapTagsToSourceAndTarget
+} from "@guardian/stand/IntendedAudienceSignifier";
 import React from "react";
-import { isAudienceTagSlug } from "../lib/model/intended-audience";
 
 type Props = {
   intendedAudience?: string;
-  productionOffice?: string;
 };
 
-const parseProductionOfficeToSource = (
-  source?: string,
-): IntendedAudienceSignifierProps["source"] => {
-  if (!source) {
-    return "UK";
+const getSourceAndTarget = (intendedAudience?: string) => {
+  if (!intendedAudience) {
+    return undefined;
   }
-  switch (source?.toUpperCase()) {
-    case "US":
-      return "US";
-    case "AU":
-    case "AUS":
-      return "AUS";
-    case "UK":
-    default:
-      return "UK";
-  }
-};
 
-const slugsToSource = (
-  audienceTagTokens: string[],
-): IntendedAudienceSignifierProps["source"] => {
-  if (audienceTagTokens.includes("au")) {
-    return "AUS";
-  }
-  if (audienceTagTokens.includes("us")) {
-    return "US";
-  }
-  return "UK";
-};
+  // We intend to deprecate the stub.externalData.intendedAudience (Option[String], comma separated tag slugs) and use
+  // stub.externalData.trackingTags (Option[List[String]], array of tag paths)
 
-const slugsToIntendedAudience = (
-  audienceTagTokens: string[],
-): IntendedAudienceSignifierProps["intendedAudience"] => {
-  if (audienceTagTokens.length === 0) {
-    return "Don't know";
-  }
-  if (audienceTagTokens.includes("global")) {
-    return audienceTagTokens.length === 1 ? "Global" : "Domestic For Global";
-  }
-  return "Domestic for Domestic";
-};
-
-const deriveProps = (
-  stubIntendedAudience: string | undefined,
-  productionOffice: string | undefined,
-): {
-  source: IntendedAudienceSignifierProps["source"];
-  intendedAudience: IntendedAudienceSignifierProps["intendedAudience"];
-} => {
-  if (!stubIntendedAudience) {
-    return {
-      source: parseProductionOfficeToSource(productionOffice),
-      intendedAudience: "Don't know",
-    };
-  }
-
-  const audienceTagSlugs = stubIntendedAudience
-    .split(",")
-    .filter(isAudienceTagSlug);
-
-  return {
-    source: slugsToSource(audienceTagSlugs),
-    intendedAudience: slugsToIntendedAudience(audienceTagSlugs),
-  };
+  return mapTagsToSourceAndTarget(
+    intendedAudience
+      .split(",")
+      .map((slug) => ({ path: `tracking/audience/${slug}` })),
+  );
 };
 
 export const IntendedAudienceWrapper: React.FunctionComponent<Props> = ({
-  intendedAudience: stubIntendedAudience,
-  productionOffice,
+  intendedAudience,
 }: Props) => {
-  const { intendedAudience, source } = deriveProps(
-    stubIntendedAudience,
-    productionOffice,
-  );
+  const sourceAndTarget = getSourceAndTarget(intendedAudience);
+  if (!sourceAndTarget) {
+    return null; // do not render the "Don't know" signifier in the table
+  }
 
   return (
     <IntendedAudienceSignifier
-      intendedAudience={intendedAudience}
-      source={source}
-      theme={{
-        svg: {
-          width: "16px",
-          height: "12px",
-        },
-        typography: {
-          font: "normal 460 12px GuardianAgateSans1Web",
-        },
-      }}
+      target={sourceAndTarget.target}
+      source={sourceAndTarget.source}
     />
   );
 };