From c9e932d886a66cf0b6da454dc36c77533e07a59f Mon Sep 17 00:00:00 2001
From: Zhihao Cui <5257855+origami-z@users.noreply.github.com>
Date: Thu, 26 Sep 2024 23:59:22 +0100
Subject: [PATCH] Fix LazyCountrySymbol crash with invalid code (#4157)

Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
---
 .changeset/thirty-knives-learn.md             |  5 +++
 .../__e2e__/LazyCountrySymbol.cy.tsx          |  8 ++++
 .../lazy-country-symbol/LazyCountrySymbol.tsx | 15 +++++---
 .../stories/LazyCountrySymbol.qa.stories.tsx  | 38 +++++++++++++++++++
 .../stories/LazyCountrySymbol.stories.tsx     |  6 ++-
 .../examples/country-symbol/LazyLoading.tsx   |  6 ++-
 6 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/thirty-knives-learn.md

diff --git a/.changeset/thirty-knives-learn.md b/.changeset/thirty-knives-learn.md
new file mode 100644
index 00000000000..1be1711ef85
--- /dev/null
+++ b/.changeset/thirty-knives-learn.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/countries": patch
+---
+
+Fixed LazyCountrySymbol crash with invalid code, and `sharp` was not working correctly.
diff --git a/packages/countries/src/__tests__/__e2e__/LazyCountrySymbol.cy.tsx b/packages/countries/src/__tests__/__e2e__/LazyCountrySymbol.cy.tsx
index 18e229dba92..23a5eb671a8 100644
--- a/packages/countries/src/__tests__/__e2e__/LazyCountrySymbol.cy.tsx
+++ b/packages/countries/src/__tests__/__e2e__/LazyCountrySymbol.cy.tsx
@@ -6,4 +6,12 @@ const composedStories = composeStories(countrySymbolStory);
 
 describe("Given an LazyCountrySymbol", () => {
   checkAccessibility(composedStories);
+
+  it("should not crash if passed in invalid code", () => {
+    const { LazyCountrySymbol } = composedStories;
+    cy.mount(
+      // @ts-ignore
+      <LazyCountrySymbol code="invalid" />,
+    );
+  });
 });
diff --git a/packages/countries/src/lazy-country-symbol/LazyCountrySymbol.tsx b/packages/countries/src/lazy-country-symbol/LazyCountrySymbol.tsx
index 3ad2ec39027..47ee44d50c1 100644
--- a/packages/countries/src/lazy-country-symbol/LazyCountrySymbol.tsx
+++ b/packages/countries/src/lazy-country-symbol/LazyCountrySymbol.tsx
@@ -8,14 +8,19 @@ export type LazyCountrySymbolProps = {
 
 export const LazyCountrySymbol = ({
   code,
+  sharp,
   ...props
 }: LazyCountrySymbolProps) => {
-  const Component = lazyMap[code];
+  const mapCode = sharp ? (`${code}_Sharp` as const) : code;
+  const Component = lazyMap[mapCode];
 
-  if (!Component && process.env.NODE_ENV !== "production") {
-    console.warn(
-      `Setting country code to ${code} which is invalid for <LazyCountrySymbol />`,
-    );
+  if (!Component) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `Setting country code to ${code} which is invalid for <LazyCountrySymbol />`,
+      );
+    }
+    return null;
   }
 
   return <Component {...props} />;
diff --git a/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx b/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx
index cf0833caaf6..52a3307618e 100644
--- a/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx
+++ b/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx
@@ -1,6 +1,7 @@
 import { LazyCountrySymbol, countryMetaMap } from "@salt-ds/countries";
 import type { CountryCode } from "@salt-ds/countries";
 import type { Meta, StoryFn } from "@storybook/react";
+import { QAContainer } from "docs/components";
 import { Suspense } from "react";
 
 export default {
@@ -43,3 +44,40 @@ export const AllLazyCountrySymbols: StoryFn = () => {
 AllLazyCountrySymbols.parameters = {
   chromatic: { disableSnapshot: false },
 };
+
+export const AllLazyCountrySharpSymbols: StoryFn = (props) => {
+  return (
+    <Suspense fallback="Loading...">
+      {sizes.map((size) => (
+        <div
+          key={size}
+          style={{
+            display: "grid",
+            // Different cols, to avoid overlap in TD in Chromatic
+            gridTemplateColumns: "repeat(10, auto)",
+            gap: 8,
+            padding: "12px 0",
+          }}
+        >
+          {Object.keys(countryMetaMap)
+            .map(
+              (componentCode) => countryMetaMap[componentCode as CountryCode],
+            )
+            .map(({ countryCode }) => (
+              <LazyCountrySymbol
+                key={countryCode}
+                code={countryCode}
+                id={`${size}-${countryCode}-sharp`}
+                size={size}
+                sharp
+              />
+            ))}
+        </div>
+      ))}
+    </Suspense>
+  );
+};
+
+AllLazyCountrySharpSymbols.parameters = {
+  chromatic: { disableSnapshot: false },
+};
diff --git a/packages/countries/stories/LazyCountrySymbol.stories.tsx b/packages/countries/stories/LazyCountrySymbol.stories.tsx
index 5b9c9bed553..1ff7c517c24 100644
--- a/packages/countries/stories/LazyCountrySymbol.stories.tsx
+++ b/packages/countries/stories/LazyCountrySymbol.stories.tsx
@@ -1,3 +1,4 @@
+import { FlexLayout } from "@salt-ds/core";
 import {
   LazyCountrySymbol as LazyCountrySymbolComponent,
   countryMetaMap,
@@ -28,7 +29,10 @@ export const LazyCountrySymbol: StoryFn<typeof LazyCountrySymbolComponent> = (
 ) => {
   return (
     <Suspense fallback={"Loading..."}>
-      <LazyCountrySymbolComponent {...args} />
+      <FlexLayout>
+        <LazyCountrySymbolComponent {...args} />
+        <LazyCountrySymbolComponent sharp {...args} />
+      </FlexLayout>
     </Suspense>
   );
 };
diff --git a/site/src/examples/country-symbol/LazyLoading.tsx b/site/src/examples/country-symbol/LazyLoading.tsx
index b48c0c9247b..66bbf1b9f26 100644
--- a/site/src/examples/country-symbol/LazyLoading.tsx
+++ b/site/src/examples/country-symbol/LazyLoading.tsx
@@ -1,3 +1,4 @@
+import { FlexLayout } from "@salt-ds/core";
 import { LazyCountrySymbol } from "@salt-ds/countries";
 import { Suspense } from "react";
 
@@ -5,6 +6,9 @@ const code = "AD" as const;
 
 export const LazyLoading = () => (
   <Suspense fallback="Loading...">
-    <LazyCountrySymbol code={code} />
+    <FlexLayout>
+      <LazyCountrySymbol code={code} />
+      <LazyCountrySymbol code={code} sharp />
+    </FlexLayout>
   </Suspense>
 );