Allow sharp country symbols to be supported by the country symbol CSS file

.changeset/lazy-ghosts-ring.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/countries": patch
+---
+
+Fixed `saltSharpCountries.css` not being shipped as part of the package.

packages/countries/scripts/generateCountrySymbol.mjs

@@ -90,6 +90,41 @@ const generateCssAsBg = ({ basePath, cssOutputPath, fileArg }) => {
   });
 };
 
+/** Generate all sharp country SVG as background image, in a single CSS */
+const generateSharpCssAsBg = ({ basePath, cssOutputPath, fileArg }) => {
+  // options is optional
+  const options = {};
+
+  const globPath = path
+    .join(basePath, `./SVG/sharp/+(${fileArg})`)
+    .replace(/\\/g, "/");
+
+  const fileNames = glob.sync(globPath, options);
+
+  const countryCss = fileNames
+    .map((fileName) => {
+      const svgString = fs.readFileSync(fileName, "utf-8").trim();
+
+      const countryCode = path.parse(fileName).name.toUpperCase();
+
+      return `.saltCountrySharp-${countryCode}{background-image:url("data:image/svg+xml,${encodeURIComponent(
+        svgString
+      )}")}`;
+    })
+    .join("\n");
+
+  const ALL_CSS = `[class*=' saltCountrySharp-'],[class^='saltCountrySharp-'] {background-size: cover;height:var(--salt-size-base, 20px);width:calc(var(--salt-size-base, 20px) * 1.44);}\n`;
+
+  const formattedResult = prettier.format(
+    CSS_GENERATED_WARNING_COMMENT.concat(ALL_CSS, countryCss),
+    { ...PRETTIER_SETTINGS, parser: "css" }
+  );
+
+  fs.writeFileSync(cssOutputPath, formattedResult, {
+    encoding: "utf8",
+  });
+};
+
 // Generate all the country symbol components
 const generateCountrySymbolComponents = ({
   templatePath,
@@ -465,6 +500,7 @@ const basePath = path.join(__dirname, "../src");
 const componentsPath = path.join(basePath, "./components/");
 const templatePath = path.join(__dirname, "./templateCountrySymbol.mustache");
 const cssOutputPath = path.join(__dirname, "../saltCountries.css");
+const sharpCssOutputPath = path.join(__dirname, "../saltSharpCountries.css");
 const fileArg = process.argv.splice(2).join("|");
 
 generateComponentsFolder(basePath);
@@ -479,6 +515,11 @@ generateCssAsBg({
   cssOutputPath,
   fileArg,
 });
+generateSharpCssAsBg({
+  basePath,
+  cssOutputPath: sharpCssOutputPath,
+  fileArg,
+});
 generateCountryMetaMap({ countryMetaMap, basePath });
 generateLazyMap({ countryMetaMap, basePath });
 generateIndex({ countryMetaMap, componentsPath });

packages/countries/scripts/templateCountrySymbol.mustache

@@ -11,10 +11,8 @@ const {{componentName}} = forwardRef<SVGSVGElement, {{componentName}}Props>(
 
     const uid = useId(props.id);
 
-    const { className, ...rest } = props;
-
     return (
-      <CountrySymbol data-testid="{{componentName}}" aria-label="{{ariaLabel}}" viewBox="{{viewBox}}" ref={ref} className={clsx(className, { "saltCountrySymbol-sharp": {{sharp}} })} {...rest}>
+      <CountrySymbol data-testid="{{componentName}}" aria-label="{{ariaLabel}}" viewBox="{{viewBox}}" ref={ref} {{#sharp}}sharp{{/sharp}} {...props}>
         {{{svgElements}}}
       </CountrySymbol>
     );

packages/countries/src/components/AD.tsx

@@ -10,16 +10,13 @@ export type ADProps = CountrySymbolProps;
 const AD = forwardRef<SVGSVGElement, ADProps>(function AD(props: ADProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AD"
       aria-label="Andorra"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AD-a`}

packages/countries/src/components/AD_Sharp.tsx

@@ -13,16 +13,14 @@ const AD_Sharp = forwardRef<SVGSVGElement, AD_SharpProps>(function AD_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AD_Sharp"
       aria-label="Andorra"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AD-a`}

packages/countries/src/components/AE.tsx

@@ -10,16 +10,13 @@ export type AEProps = CountrySymbolProps;
 const AE = forwardRef<SVGSVGElement, AEProps>(function AE(props: AEProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AE"
       aria-label="United Arab Emirates (the)"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AE-a`}

packages/countries/src/components/AE_Sharp.tsx

@@ -13,16 +13,14 @@ const AE_Sharp = forwardRef<SVGSVGElement, AE_SharpProps>(function AE_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AE_Sharp"
       aria-label="United Arab Emirates (the)"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AE-a`}

packages/countries/src/components/AF.tsx

@@ -10,16 +10,13 @@ export type AFProps = CountrySymbolProps;
 const AF = forwardRef<SVGSVGElement, AFProps>(function AF(props: AFProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AF"
       aria-label="Afghanistan"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AF-a`}

packages/countries/src/components/AF_Sharp.tsx

@@ -13,16 +13,14 @@ const AF_Sharp = forwardRef<SVGSVGElement, AF_SharpProps>(function AF_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AF_Sharp"
       aria-label="Afghanistan"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AF-a`}

packages/countries/src/components/AG.tsx

@@ -10,16 +10,13 @@ export type AGProps = CountrySymbolProps;
 const AG = forwardRef<SVGSVGElement, AGProps>(function AG(props: AGProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AG"
       aria-label="Antigua and Barbuda"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AG-a`}

packages/countries/src/components/AG_Sharp.tsx

@@ -13,16 +13,14 @@ const AG_Sharp = forwardRef<SVGSVGElement, AG_SharpProps>(function AG_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AG_Sharp"
       aria-label="Antigua and Barbuda"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AG-a`}

packages/countries/src/components/AI.tsx

@@ -10,16 +10,13 @@ export type AIProps = CountrySymbolProps;
 const AI = forwardRef<SVGSVGElement, AIProps>(function AI(props: AIProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AI"
       aria-label="Anguilla"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AI-a`}

packages/countries/src/components/AI_Sharp.tsx

@@ -13,16 +13,14 @@ const AI_Sharp = forwardRef<SVGSVGElement, AI_SharpProps>(function AI_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AI_Sharp"
       aria-label="Anguilla"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AI-a`}

packages/countries/src/components/AL.tsx

@@ -10,16 +10,13 @@ export type ALProps = CountrySymbolProps;
 const AL = forwardRef<SVGSVGElement, ALProps>(function AL(props: ALProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AL"
       aria-label="Albania"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AL-a`}

packages/countries/src/components/AL_Sharp.tsx

@@ -13,16 +13,14 @@ const AL_Sharp = forwardRef<SVGSVGElement, AL_SharpProps>(function AL_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AL_Sharp"
       aria-label="Albania"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AL-a`}

packages/countries/src/components/AM.tsx

@@ -10,16 +10,13 @@ export type AMProps = CountrySymbolProps;
 const AM = forwardRef<SVGSVGElement, AMProps>(function AM(props: AMProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AM"
       aria-label="Armenia"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AM-a`}

packages/countries/src/components/AM_Sharp.tsx

@@ -13,16 +13,14 @@ const AM_Sharp = forwardRef<SVGSVGElement, AM_SharpProps>(function AM_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AM_Sharp"
       aria-label="Armenia"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AM-a`}

packages/countries/src/components/AO.tsx

@@ -10,16 +10,13 @@ export type AOProps = CountrySymbolProps;
 const AO = forwardRef<SVGSVGElement, AOProps>(function AO(props: AOProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AO"
       aria-label="Angola"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AO-a`}

packages/countries/src/components/AO_Sharp.tsx

@@ -13,16 +13,14 @@ const AO_Sharp = forwardRef<SVGSVGElement, AO_SharpProps>(function AO_Sharp(
 ) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AO_Sharp"
       aria-label="Angola"
       viewBox="0 0 72 50"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": true })}
-      {...rest}
+      sharp
+      {...props}
     >
       <mask
         id={`${uid}-AO-a`}

packages/countries/src/components/AQ.tsx

@@ -10,16 +10,13 @@ export type AQProps = CountrySymbolProps;
 const AQ = forwardRef<SVGSVGElement, AQProps>(function AQ(props: AQProps, ref) {
   const uid = useId(props.id);
 
-  const { className, ...rest } = props;
-
   return (
     <CountrySymbol
       data-testid="AQ"
       aria-label="Antarctica"
       viewBox="0 0 72 72"
       ref={ref}
-      className={clsx(className, { "saltCountrySymbol-sharp": false })}
-      {...rest}
+      {...props}
     >
       <mask
         id={`${uid}-AQ-a`}