Merge pull request #7116 from valadas/issue/7114

Fixed an issue where language flags would not show in PersonaBar

Author: mitchelsellers

Dnn.AdminExperience/ClientSide/Dnn.React.Common/.storybook/main.js

@@ -72,6 +72,21 @@ const config = {
                 require.resolve("less-loader"),
             ],
         });
+
+        // Ensure Storybook handles image imports the same way the runtime build does.
+        config.module.rules.push({
+            test: /\.(png|jpe?g|gif|webp|ico)$/i,
+            type: 'javascript/auto',
+            use: [
+                {
+                    loader: require.resolve('file-loader'),
+                    options: {
+                        esModule: true,
+                        name: 'static/media/[name].[hash].[ext]'
+                    }
+                }
+            ]
+        });
         return config;
     },
 };

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Flag/flag.stories.js

@@ -4,8 +4,30 @@ import Flag from "./index";
 
 export default {
     component: Flag,
+    render: ({...args}) => <Flag {...args} onClick={action("Clicked")} />
 };
 
-export const WithContent = () => (
-    <Flag title="Test" culture="en-US" onClick={action("Clicked")} />
-);
+// export const WithContent = () => (
+//     <Flag title="Test" culture="en-US" onClick={action("Clicked")} />
+// );
+
+export const EnUs = {
+    args: {
+        title: "English (United States)",
+        culture: "en-US",
+    },
+};
+
+export const FrCa = {
+    args: {
+        title: "French (Canada)",
+        culture: "fr-CA",
+    },
+};
+
+export const Missing = {
+    args: {
+        title: "Missing Flag",
+        culture: "ab-CD",
+    },
+};

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Flag/index.jsx

@@ -1,44 +1,65 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
-const getUrl = (code) => {
-    try {
-        return require(`./img/flags/${code}.png`);
-    } catch (error) {
-        return require("./img/flags/none.png");
-    }
-};
-
-const getStyle = (code, isGeneric) => ({
-    backgroundColor: isGeneric ? "#78BEDB" : "transparent",
+const getStyle = (url) => ({
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "27px",
+    height: "18px",
+    marginRight: "5px",
+    backgroundColor: "transparent",
+    backgroundImage: url ? `url(${url})` : "none",
     backgroundRepeat: "no-repeat",
-    backgroundImage: isGeneric ? "none" : `url(${getUrl(code)})`,
-    backgroundPositionY: "50%",
-    backgroundPositionX: "50%",
+    backgroundPosition: "center",
+    backgroundSize: "contain",
     color: "#FFF",
-    textTransform: "uppercase",
-    display: "inline-block",
-    marginRight: "5px",
     fontWeight: "bold",
-    width: "27px",
-    height: "18px",
-    lineHeight: "18px",
-    verticalAlign: "middle",
-    textAlign: "center"
+    textTransform: "uppercase",
 });
 
-class Flag extends Component {
-    constructor(props) {
-        super(props);
-    }
+const overlayStyle = {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "8px",
+    fontWeight: "900",
+    color: "#000",
+    textTransform: "uppercase",
+    whiteSpace: "nowrap",
+    transform: "scale(0.9, 1.1)",
+};
+
+function Flag({ culture = "", onClick, title }) {
+    const [flagUrl, setFlagUrl] = useState(undefined);
+    const [isFallback, setIsFallback] = useState(false);
+
+    useEffect(() => {
+        try {
+            setFlagUrl(require(`./img/flags/${culture}.png`).default);
+            setIsFallback(false);
+        } catch {
+            try {
+                setFlagUrl(require("./img/flags/none.png").default);
+                setIsFallback(true);
+            } catch {
+                setFlagUrl(undefined);
+                setIsFallback(true);
+            }
+        }
+    }, [culture]);
 
-    render() {
-        const isGeneric = !this.props.culture.includes("-");
-        return <div
-            onClick={this.props.onClick}
-            title={this.props.title}
-            style={getStyle(this.props.culture, isGeneric)}>{isGeneric ? this.props.culture : ""}</div>;
-    }
+    return (
+        <div onClick={onClick} title={title} style={getStyle(flagUrl)}>
+            {isFallback && culture ? <div style={overlayStyle}>{culture}</div> : null}
+        </div>
+    );
 }
 
 Flag.propTypes = {