Support for left/right strings

.storybook/preview.js

@@ -0,0 +1,12 @@
+export const parameters = {
+    locale: 'en',
+    locales: {
+        en: {title: 'English', right: '🇺🇸'},
+        gb: {title: 'English', right: 'GB'},
+        fr: {title: 'Français', left: '🇫🇷'},
+        ja: {left: '🇯🇵'},
+        de: {right: '🇩🇪'},
+        es: 'Spain',
+        it: '🇮🇹 Italiano',
+    },
+}

README.md

@@ -47,7 +47,7 @@ const myDecorator = (story, context) => {
 
 End users configure the `locales` and `locale` parameters in `.storybook/preview.js`.
 
-`Locales` is an object where the keys are the "ids" of the locale/language and the values are the plain text name of that locale you want to use. This is what will appear in the dropdown in the toolbar.
+`locales` is an object where the keys are the "ids" of the locale/language and the values are the plain text name of that locale you want to use. This is what will appear in the dropdown in the toolbar.
 
 ```javascript
 export const parameters = {
@@ -74,4 +74,33 @@ export const parameters = {
 };
 ```
 
+The `locales` object can also have values as an object with keys of `title`, `left`, or `right`. 
+
+This is useful if you want to include an emoji flag or some other string to the left or right side.
+
+For example:
+```javascript
+export const parameters = {
+    locale: "en",
+    locales: {
+        en: {title: "English", left: '🇺🇸'},
+        fr: {title: "Français", left: '🇫🇷'},
+        ja: {title: "日本語", left: '🇯🇵'},
+    },
+};
+```
+
+Or something like this:
+```javascript
+export const parameters = {
+  locale: "en_US",
+  locales: {
+    en_US: {title: "English", right: 'US'},
+    en_GB: {title: "English", right: 'GB'},
+    fr_FR: {title: "Français", right: 'FR'},
+    ja_JP: {title: "日本語", right: 'JP'},
+  },
+};
+```
+
 Addons should instruct them to use whichever format your i18n implementation expects.

package.json

@@ -50,10 +50,10 @@
   "dependencies": {},
   "devDependencies": {
     "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/preset-typescript": "^7.15.0",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/react": "^6.2.9",
     "auto": "^10.3.0",

src/Tool.tsx

@@ -12,19 +12,34 @@ export interface Link {
   title: string;
   active: boolean;
   onClick: () => void;
+  left?: string;
+  right?: string;
+}
+
+export type LocaleValue = string | {title: string, left?: string, right?: string};
+
+const getValue = (value: LocaleValue) => {
+    if (typeof value === 'string') {
+        return {title: value};
+    }
+    return {
+        title: value.title || '',
+        left: value.left,
+        right: value.right
+    };
 }
 
 const getLocales = (
-  locales: string[],
+  locales: Record<string, LocaleValue>,
   locale: string,
   onSelect: (selected: string) => void
 ): Link[] =>
   locales
-    ? Object.entries(locales).map(([key, name]) => ({
-      id: key,
-      title: name,
-      active: key === locale,
-      onClick: () => onSelect(key),
+    ? Object.entries(locales).map(([key, value]) => ({
+        ...getValue(value),
+        id: key,
+        active: key === locale,
+        onClick: () => onSelect(key),
     }))
     : [
       {

stories/Test.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const Test = () => <div>Test</div>;
+
+export default Test;
+

stories/test.stories.jsx

@@ -0,0 +1,8 @@
+import Test from './Test';
+
+export default {
+    component: Test,
+    title: 'Test',
+};
+
+export const Default = () => <Test/>;