@entur-partner/common 4.1.0 → 4.4.0

package/dist/EnturPartnerLogo.d.ts

@@ -1,8 +1,10 @@
 import './EnturPartnerLogo.scss';
 import React, { FC } from 'react';
+import { Environment } from './environment';
 interface LogoProps {
     title: string;
     className?: string;
+    accentColor?: string;
     [key: string]: any;
 }
 export declare const EnturPartnerLogoSvg: FC<LogoProps>;
@@ -10,6 +12,7 @@ interface EnturPartnerLogoProps {
     altText: string;
     as?: 'div' | React.ElementType;
     className?: string;
+    environment?: Environment;
 }
 export declare const EnturPartnerLogo: FC<EnturPartnerLogoProps>;
 export {};

package/dist/FeatureToggle.d.ts

@@ -1,4 +1,12 @@
 import { ReactNode } from 'react';
+/**
+ * Returns true if the provided flag exist in localStorage
+ * or is set as an environment variable.
+ *
+ * @param flag case sensitive flag. If it is an environment variable
+ * you can drop the REACT_APP_ prefix.
+ */
+export declare function featureFlag(flag: string): boolean;
 /**
  * Returns true if the provided flag exist in localStorage
  * or is set as an environment variable.

package/dist/UserMenu.d.ts

@@ -1,17 +1,17 @@
 import './UserMenu.scss';
 import { FC } from 'react';
+import { Environment } from './environment';
 interface UserMenuProps {
     userName: string;
     messages: {
         logout: string;
-        termsAndConditions: string;
         switchLanguage: string;
     };
     onLogout: () => void;
-    onShowGdprDialog: () => void;
     onLanguageChange: (language: string) => void;
     language: string;
     className?: string;
+    environment?: Environment;
 }
 export declare const UserMenu: FC<UserMenuProps>;
 export {};

package/dist/common.cjs.development.js

@@ -214,14 +214,21 @@ var LinkButton = function LinkButton(_ref) {
  * you can drop the REACT_APP_ prefix.
  */
 
-function useFeatureToggle(flag) {
+function featureFlag(flag) {
   var _window$localStorage, _window$localStorage2;
 
-  if (process.env["REACT_APP_" + flag] === 'true' || ((_window$localStorage = window.localStorage) == null ? void 0 : _window$localStorage.getItem(flag)) === 'true' || ((_window$localStorage2 = window.localStorage) == null ? void 0 : _window$localStorage2.getItem("REACT_APP_" + flag)) === 'true') {
-    return true;
-  }
+  return process.env["REACT_APP_" + flag] === 'true' || ((_window$localStorage = window.localStorage) == null ? void 0 : _window$localStorage.getItem(flag)) === 'true' || ((_window$localStorage2 = window.localStorage) == null ? void 0 : _window$localStorage2.getItem("REACT_APP_" + flag)) === 'true';
+}
+/**
+ * Returns true if the provided flag exist in localStorage
+ * or is set as an environment variable.
+ *
+ * @param flag case sensitive flag. If it is an environment variable
+ * you can drop the REACT_APP_ prefix.
+ */
 
-  return false;
+function useFeatureToggle(flag) {
+  return featureFlag(flag);
 }
 var FeatureToggle = function FeatureToggle(_ref) {
   var children = _ref.children,
@@ -235,9 +242,37 @@ var FeatureToggle = function FeatureToggle(_ref) {
   return null;
 };
 
-var _excluded$d = ["title"];
+var _environmentColors, _humanReadableEnviron;
+
+exports.Environment = void 0;
+
+(function (Environment) {
+  Environment["Local"] = "local";
+  Environment["Development"] = "dev";
+  Environment["Staging"] = "staging";
+  Environment["Production"] = "prod";
+})(exports.Environment || (exports.Environment = {}));
+
+var environmentColors = (_environmentColors = {}, _environmentColors[exports.Environment.Local] = '#B482FB', _environmentColors[exports.Environment.Development] = '#5AC39A', _environmentColors[exports.Environment.Staging] = '#FFCA28', _environmentColors);
+/**
+ * Gets the color for the given environment. This is the color used for the environment
+ * indicator. There is no color for production as it should not have any special environment
+ * indication.
+ */
+
+var getColorForEnvironment = function getColorForEnvironment(environment) {
+  return environmentColors[environment];
+};
+var humanReadableEnvironment = (_humanReadableEnviron = {}, _humanReadableEnviron[exports.Environment.Local] = 'Local', _humanReadableEnviron[exports.Environment.Development] = 'Dev', _humanReadableEnviron[exports.Environment.Staging] = 'Staging', _humanReadableEnviron[exports.Environment.Production] = 'Prod', _humanReadableEnviron);
+var getHumanReadableEnvironment = function getHumanReadableEnvironment(environment) {
+  return humanReadableEnvironment[environment];
+};
+
+var _excluded$d = ["title", "accentColor"];
 var EnturPartnerLogoSvg = function EnturPartnerLogoSvg(_ref) {
   var title = _ref.title,
+      _ref$accentColor = _ref.accentColor,
+      accentColor = _ref$accentColor === void 0 ? '#FF5959' : _ref$accentColor,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   return React__default["default"].createElement("svg", _extends({
@@ -251,13 +286,13 @@ var EnturPartnerLogoSvg = function EnturPartnerLogoSvg(_ref) {
     fill: "#FFF",
     d: "M0 .231V25.72h18.745v-4.318H4.869v-6.163h12.31v-4.318H4.87V4.55h13.876V.231z"
   }), React__default["default"].createElement("path", {
-    fill: "#FF5959",
+    fill: accentColor,
     d: "M0 36.408h45.253v-4.32H0z"
   }), React__default["default"].createElement("path", {
     fill: "#FFF",
     d: "M40.384.231v15.425L23.656.231h-.521V25.72h4.869V10.573L44.732 25.72h.521V.23zM69.25 15.238h-7.267v21.17h-4.87v-21.17H49.81V10.92h19.44zM83.863 36.86c-1.646 0-3.142-.255-4.486-.765-1.345-.51-2.493-1.23-3.443-2.159-.95-.928-1.687-2.054-2.208-3.378-.522-1.323-.783-2.797-.783-4.422V10.92h4.869v15.216c0 1.277.209 2.333.626 3.169.417.836.933 1.497 1.548 1.985a5.346 5.346 0 001.982 1.01c.707.186 1.339.278 1.895.278.557 0 1.188-.092 1.896-.279a5.35 5.35 0 001.982-1.01c.614-.487 1.13-1.148 1.548-1.984.417-.836.625-1.892.625-3.169V10.92h4.87v15.216c0 1.625-.256 3.1-.766 4.422-.51 1.324-1.24 2.45-2.19 3.378-.952.929-2.1 1.648-3.444 2.159-1.344.51-2.851.766-4.52.766M104.21 24.047h5.546c1.016 0 1.854-.127 2.513-.383.658-.255 1.179-.592 1.56-1.01.381-.418.641-.888.78-1.41.138-.522.208-1.05.208-1.584 0-.627-.099-1.207-.295-1.741a3.718 3.718 0 00-.901-1.393c-.405-.394-.924-.708-1.56-.94-.636-.232-1.404-.348-2.305-.348h-5.546v8.81zm0 4.248v8.113h-4.87V10.92h11.567c1.3 0 2.49.215 3.57.644 1.08.43 2.004 1.033 2.77 1.81a8.287 8.287 0 011.794 2.787c.43 1.079.645 2.257.645 3.534 0 .952-.128 1.874-.383 2.768-.256.894-.61 1.7-1.063 2.42a7.32 7.32 0 01-1.672 1.863 5.929 5.929 0 01-2.178 1.096l6.339 8.566h-5.808l-5.893-8.113h-4.818z"
   }), React__default["default"].createElement("g", {
-    fill: "#FF5959"
+    fill: accentColor
   }, React__default["default"].createElement("path", {
     d: "M141.051 23.448h5.628c4.185 0 5.989-1.984 5.989-4.942 0-2.742-1.515-4.618-5.989-4.618h-5.628v9.56zm0 3.067v9.776h-3.571V10.75h9.632c6.674 0 9.127 3.211 9.127 7.54 0 4.979-3.102 8.226-9.2 8.226h-5.988zM169.695 28.715c-1.371-.288-2.958-.505-4.401-.505-2.85 0-4.041 1.263-4.041 3.139s1.407 2.706 3.463 2.706c2.49 0 4.979-1.443 4.979-4.221v-1.119zm-4.293-2.958c1.551 0 3.174.253 4.293.469v-.83c0-2.525-1.154-3.896-4.33-3.896-2.164 0-3.824.866-4.942 2.092l-2.02-2.272c1.732-1.66 3.644-2.598 7.07-2.598 5.052 0 7.469 1.876 7.469 7.215v10.354h-3.211V34.02h-.108c-1.082 1.767-3.211 2.705-5.592 2.705-3.32 0-6.241-1.66-6.241-5.303 0-3.103 1.912-5.664 7.612-5.664zM178.965 19.191h3.211v2.886h.108c.938-1.984 2.922-3.355 5.231-3.355.47 0 .938.036 1.335.144l-.144 3.14a6.77 6.77 0 00-1.552-.181c-3.246 0-4.798 2.633-4.798 5.483v8.983h-3.39v-17.1zM199.961 36.291h-1.912c-4.004 0-5.988-.938-5.988-5.772v-8.55h-2.778V19.19h2.778v-4.654h3.355v4.654h4.473v2.778h-4.473v7.973c0 3.427 1.587 3.535 3.319 3.535h1.226v2.814zM219.767 36.291h-3.391V26.84c0-2.778-1.083-5.375-4.257-5.375-3.14 0-5.268 2.597-5.268 6.169v8.658h-3.391v-17.1h3.32v2.814h.143c.794-1.623 3.067-3.283 5.99-3.283 4.941 0 6.854 3.644 6.854 8.081v9.488zM227.847 26.262h10.57c0-2.597-2.272-4.726-5.087-4.726-2.922 0-5.014 1.948-5.483 4.726zm-.036 2.453c.397 3.355 2.633 5.195 5.844 5.195 2.778 0 4.618-1.623 5.484-2.67l2.164 1.804c-1.37 1.913-4.365 3.716-8.045 3.716-4.942 0-8.73-3.535-8.73-8.55 0-5.195 3.752-9.488 8.983-9.488 5.303 0 8.009 4.365 8.009 8.19 0 .649-.036 1.226-.072 1.803H227.81zM246.245 19.191h3.21v2.886h.109c.938-1.984 2.922-3.355 5.231-3.355.469 0 .938.036 1.335.144l-.145 3.14a6.77 6.77 0 00-1.551-.181c-3.247 0-4.798 2.633-4.798 5.483v8.983h-3.391v-17.1z"
   }))));
@@ -266,13 +301,15 @@ var EnturPartnerLogo = function EnturPartnerLogo(_ref2) {
   var _ref2$as = _ref2.as,
       Component = _ref2$as === void 0 ? 'nav' : _ref2$as,
       className = _ref2.className,
-      altText = _ref2.altText;
+      altText = _ref2.altText,
+      environment = _ref2.environment;
   var classList = cx__default["default"](['eps-logo-wrapper', className]);
   return React__default["default"].createElement(Component, {
     className: classList
   }, React__default["default"].createElement(EnturPartnerLogoSvg, {
     title: altText,
-    className: "logo"
+    className: "logo",
+    accentColor: environment !== undefined && environment !== exports.Environment.Production ? getColorForEnvironment(environment) : undefined
   }));
 };
 
@@ -298,15 +335,15 @@ var Content = function Content(_ref) {
   }, children);
 };
 
-var _excluded$c = ["className", "children", "userName", "open", "onOpenChange"];
+var _excluded$c = ["className", "children", "userName", "open", "onOpenChange", "environment"];
 var UserMenu = function UserMenu(_ref) {
   var className = _ref.className,
       messages = _ref.messages,
       onLogout = _ref.onLogout,
       onLanguageChange = _ref.onLanguageChange,
-      onShowGdprDialog = _ref.onShowGdprDialog,
       userName = _ref.userName,
-      language = _ref.language;
+      language = _ref.language,
+      environment = _ref.environment;
   var triggerClassList = cx__default["default"](['eps-user-menu__trigger-button', className]);
 
   var _useState = React.useState(false),
@@ -319,21 +356,11 @@ var UserMenu = function UserMenu(_ref) {
     open: open,
     onOpenChange: setOpen,
     className: triggerClassList,
-    userName: userName
+    userName: userName,
+    environment: environment
   }, React__default["default"].createElement("div", {
     id: "eps-overflow-menu"
-  }, React__default["default"].createElement(CustomOverflowMenuItem, {
-    onClick: function onClick() {
-      onShowGdprDialog();
-      setOpen(false);
-    },
-    className: "eps-overflow-menu__item"
-  }, React__default["default"].createElement("span", {
-    "aria-hidden": true
-  }, React__default["default"].createElement(icons.PrivacyIcon, {
-    size: "1rem",
-    inline: true
-  })), messages.termsAndConditions), language === 'en' ? React__default["default"].createElement(CustomOverflowMenuItem, {
+  }, language === 'en' ? React__default["default"].createElement(CustomOverflowMenuItem, {
     onClick: function onClick() {
       onLanguageChange('nb');
       setOpen(false);
@@ -381,6 +408,7 @@ var CustomOverflowMenu = function CustomOverflowMenu(_ref2) {
       userName = _ref2.userName,
       open = _ref2.open,
       onOpenChange = _ref2.onOpenChange,
+      environment = _ref2.environment,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var overflowItemsClasses = cx__default["default"]('eps-overflow-menu__group', {
@@ -409,7 +437,11 @@ var CustomOverflowMenu = function CustomOverflowMenu(_ref2) {
   })), React__default["default"].createElement(typography.Heading6, {
     margin: "none",
     as: "span"
-  }, userName), React__default["default"].createElement("span", {
+  }, userName, environment !== undefined && environment !== exports.Environment.Production && React__default["default"].createElement("span", {
+    style: {
+      color: getColorForEnvironment(environment)
+    }
+  }, ' ', "(", getHumanReadableEnvironment(environment), ")")), React__default["default"].createElement("span", {
     className: "eps-arrow-icon"
   }, React__default["default"].createElement(icons.DownArrowIcon, {
     inline: true
@@ -1084,6 +1116,9 @@ exports.StatusLabel = StatusLabel;
 exports.Text = Text;
 exports.Unbutton = Unbutton;
 exports.UserMenu = UserMenu;
+exports.featureFlag = featureFlag;
+exports.getColorForEnvironment = getColorForEnvironment;
+exports.getHumanReadableEnvironment = getHumanReadableEnvironment;
 exports.responsiveProp = responsiveProp;
 exports.useEventListener = useEventListener;
 exports.useFeatureToggle = useFeatureToggle;