Fix LazyCountrySymbol crash with invalid code (#4157)

Co-authored-by: Josh Wooding <[email protected]>

.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.

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" />,
+    );
+  });
 });

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} />;

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 },
+};

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>
   );
 };

site/src/examples/country-symbol/LazyLoading.tsx

@@ -1,10 +1,14 @@
+import { FlexLayout } from "@salt-ds/core";
 import { LazyCountrySymbol } from "@salt-ds/countries";
 import { Suspense } from "react";
 
 const code = "AD" as const;
 
 export const LazyLoading = () => (
   <Suspense fallback="Loading...">
-    <LazyCountrySymbol code={code} />
+    <FlexLayout>
+      <LazyCountrySymbol code={code} />
+      <LazyCountrySymbol code={code} sharp />
+    </FlexLayout>
   </Suspense>
 );