akeneo-design-system 0.1.220 → 0.1.221

package/.storybook/preview-head.html

@@ -1 +1,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet" />
+<style>
+    @font-face {
+        font-family: 'Flag Emoji';
+        unicode-range: U+1F1E6-1F1FF;
+        src: url('./fonts/twemoji/TwemojiCountryFlags.woff2') format('woff2');
+    }
+</style>

package/lib/components/Locale/Locale.js

@@ -54,7 +54,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var shared_1 = require("../../shared");
 var theme_1 = require("../../theme");
 var LocaleContainer = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n"])));
-var Emoji = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  margin-right: 3px;\n"], ["\n  font-size: ", ";\n  margin-right: 3px;\n"])), (0, theme_1.getFontSize)('bigger'));
+var Emoji = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  margin-right: 3px;\n  font-family: 'Flag Emoji', ", ";\n"], ["\n  font-size: ", ";\n  margin-right: 3px;\n  font-family: 'Flag Emoji', ", ";\n"])), (0, theme_1.getFontSize)('bigger'), (0, theme_1.getFontFamily)('default'));
 var Locale = (0, react_1.forwardRef)(function (_a, forwardedRef) {
     var code = _a.code, languageLabel = _a.languageLabel, rest = __rest(_a, ["code", "languageLabel"]);
     var _b = code.split('_'), languageCode = _b[0], length = _b.length, _c = length - 1, countryCode = _b[_c];

package/lib/components/Locale/Locale.js.map

@@ -1 +1 @@
-{"version":3,"file":"Locale.js","sourceRoot":"","sources":["../../../src/components/Locale/Locale.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6C;AAC7C,wEAAuC;AACvC,uCAAsC;AACtC,qCAAwC;AAExC,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,gJAAA,6EAIlC,IAAA,CAAC;AAEF,IAAM,KAAK,GAAG,2BAAM,CAAC,IAAI,iHAAA,iBACV,EAAqB,2BAEnC,KAFc,IAAA,mBAAW,EAAC,QAAQ,CAAC,CAEnC,CAAC;AAiBF,IAAM,MAAM,GAAG,IAAA,kBAAU,EACvB,UAAC,EAA2C,EAAE,YAAkC;IAA9E,IAAA,IAAI,UAAA,EAAE,aAAa,mBAAA,EAAK,IAAI,cAA7B,yBAA8B,CAAD;IACrB,IAAsD,KAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlE,YAAY,QAAA,EAAE,MAAM,YAAA,EAAE,KAAC,MAAM,GAAG,CAAE,EAAE,WAAW,SAAmB,CAAC;IAE7E,OAAO,CACL,8BAAC,eAAe,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI;QAC1C,8BAAC,KAAK,IAAC,IAAI,EAAC,KAAK,gBAAa,WAAW,IACtC,IAAA,iBAAQ,EAAC,WAAW,CAAC,CAChB;QACP,aAAa,IAAI,YAAY,CACd,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,wBAAM"}
+{"version":3,"file":"Locale.js","sourceRoot":"","sources":["../../../src/components/Locale/Locale.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6C;AAC7C,wEAAuC;AACvC,uCAAsC;AACtC,qCAAuD;AAEvD,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,gJAAA,6EAIlC,IAAA,CAAC;AAEF,IAAM,KAAK,GAAG,2BAAM,CAAC,IAAI,qJAAA,iBACV,EAAqB,wDAEL,EAAwB,KACtD,KAHc,IAAA,mBAAW,EAAC,QAAQ,CAAC,EAEL,IAAA,qBAAa,EAAC,SAAS,CAAC,CACtD,CAAC;AAiBF,IAAM,MAAM,GAAG,IAAA,kBAAU,EACvB,UAAC,EAA2C,EAAE,YAAkC;IAA9E,IAAA,IAAI,UAAA,EAAE,aAAa,mBAAA,EAAK,IAAI,cAA7B,yBAA8B,CAAD;IACrB,IAAsD,KAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlE,YAAY,QAAA,EAAE,MAAM,YAAA,EAAE,KAAC,MAAM,GAAG,CAAE,EAAE,WAAW,SAAmB,CAAC;IAE7E,OAAO,CACL,8BAAC,eAAe,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI;QAC1C,8BAAC,KAAK,IAAC,IAAI,EAAC,KAAK,gBAAa,WAAW,IACtC,IAAA,iBAAQ,EAAC,WAAW,CAAC,CAChB;QACP,aAAa,IAAI,YAAY,CACd,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,wBAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.220",
+  "version": "0.1.221",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

package/public/fonts/twemoji/LICENCE.txt

@@ -0,0 +1,7 @@
+Twemoji (c) by Twitter, Inc and other contributors
+
+Twemoji is licensed under a
+Creative Commons Attribution 4.0 International License.
+
+You should have received a copy of the license along with this
+work. If not, see <http://creativecommons.org/licenses/by/4.0/>.

package/src/components/Locale/Locale.stories.mdx

@@ -8,7 +8,7 @@ import {Locale} from './Locale.tsx';
 ## Usage
 
 Component to display a locale (country and language) in Akeneo products.
-
+To display correctly the flag on windows clients, you can use an external font like TwemojiCountryFlags or use one of your own.
 ## Playground
 
 <Canvas>

package/src/components/Locale/Locale.tsx

@@ -1,7 +1,7 @@
 import React, {forwardRef, Ref} from 'react';
 import styled from 'styled-components';
 import {getEmoji} from '../../shared';
-import {getFontSize} from '../../theme';
+import {getFontFamily, getFontSize} from '../../theme';
 
 const LocaleContainer = styled.span`
   display: inline-flex;
@@ -12,6 +12,7 @@ const LocaleContainer = styled.span`
 const Emoji = styled.span`
   font-size: ${getFontSize('bigger')};
   margin-right: 3px;
+  font-family: 'Flag Emoji', ${getFontFamily('default')};
 `;
 
 type LocaleProps = {

package/src/components/SwitcherButton/SwitcherButton.stories.mdx

@@ -76,6 +76,7 @@ Most of the time, when you click on a switcher, a dropdown appears.
 </Canvas>
 
 ## Example with flag
+To display correctly the flag on windows clients, you can use an external font like TwemojiCountryFlags or use one of your own.
 
 <Canvas>
   <Story name="Flag">