@telefonica/mistica 10.5.1 → 10.9.0

package/dist-es/skins/blau.js

@@ -0,0 +1,225 @@
+import { applyAlpha } from '../utils/color';
+import { BLAU_SKIN } from './constants';
+export var palette = {
+  blauBluePrimary: '#00B6F1',
+  blauBluePrimary10: '#F7FDFF',
+  blauBluePrimary20: '#E5F6FD',
+  blauBluePrimary30: '#B3E9FB',
+  blauBlueSecondary: '#0072BC',
+  blauBlueSecondary10: '#E5F1F9',
+  blauBlueSecondary20: '#B2D4EC',
+  blauBlueSecondary30: '#80B7DF',
+  blauBlueSecondary60: '#005A99',
+  blauPurple: '#7814B3',
+  blauPurple10: '#F1E7F7',
+  blauPurple30: '#BB89D9',
+  blauYellow: '#FFA922',
+  blauYellow10: '#FFF6E9',
+  blauYellow60: '#F09500',
+  blauYellow70: '#996614',
+  blauRed: '#F64417',
+  blauRed10: '#FEECE8',
+  blauRed20: '#FCC7B9',
+  blauRed30: '#FA9E87',
+  blauRed70: '#C93712',
+  blauGreen: '#30D300',
+  blauGreen10: '#EAFBE5',
+  blauGreen70: '#1D7F00',
+  grey1: '#F5F9FA',
+  grey2: '#E7E7E7',
+  grey3: '#B8B8B8',
+  grey4: '#A0A0A0',
+  grey5: '#808285',
+  grey6: '#000000',
+  white: '#FFFFFF',
+  // specific for dark mode:
+  darkModeBlack: '#191919',
+  darkModeGrey: '#242424'
+};
+export var getBlauSkin = function getBlauSkin() {
+  return {
+    name: BLAU_SKIN,
+    colors: {
+      // BACKGROUNDS
+      appBarBackground: palette.white,
+      background: palette.white,
+      backgroundContainer: palette.white,
+      backgroundBrand: palette.blauBluePrimary,
+      backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
+      backgroundSkeleton: palette.grey2,
+      backgroundSkeletonInverse: palette.white,
+      navigationBarBackground: palette.blauBluePrimary,
+      backgroundAlternative: palette.blauBluePrimary20,
+      backgroundFeedbackBottom: palette.blauBluePrimary,
+      skeletonWave: palette.grey2,
+      // BORDERS
+      borderLight: palette.grey1,
+      border: palette.grey2,
+      borderDark: palette.grey5,
+      borderSelected: palette.blauBlueSecondary60,
+      // BUTTONS
+      buttonDangerBackground: palette.blauRed,
+      buttonDangerBackgroundDisabled: palette.blauRed20,
+      buttonDangerBackgroundSelected: palette.blauRed70,
+      buttonDangerBackgroundHover: palette.blauRed70,
+      buttonLinkBackgroundSelected: palette.blauPurple10,
+      buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.3),
+      buttonPrimaryBackground: palette.blauBlueSecondary,
+      buttonPrimaryBackgroundDisabled: palette.blauBlueSecondary20,
+      buttonPrimaryBackgroundDisabledInverse: palette.blauBlueSecondary30,
+      buttonPrimaryBackgroundInverse: palette.white,
+      buttonPrimaryBackgroundSelected: palette.blauBlueSecondary60,
+      buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
+      buttonPrimaryBackgroundSelectedInverse: palette.blauBluePrimary30,
+      buttonSecondaryBackground: palette.blauBlueSecondary,
+      buttonSecondaryBackgroundDisabled: palette.blauBlueSecondary20,
+      buttonSecondaryBackgroundSelected: palette.blauBlueSecondary60,
+      buttonSecondaryBorderDisabledInverse: palette.blauBlueSecondary20,
+      buttonSecondaryBorderInverse: palette.white,
+      buttonSecondaryBorderSelectedInverse: palette.blauBluePrimary30,
+      textButtonPrimary: palette.white,
+      textButtonPrimaryDisabled: palette.white,
+      textButtonPrimaryInverse: palette.blauBlueSecondary,
+      textButtonPrimaryInverseDisabled: palette.blauBluePrimary10,
+      textButtonPrimaryInverseSelected: palette.blauBlueSecondary60,
+      textButtonSecondary: palette.blauBlueSecondary,
+      textButtonSecondaryDisabled: palette.blauBlueSecondary30,
+      textButtonSecondarySelected: palette.blauBlueSecondary60,
+      textButtonSecondaryInverse: palette.white,
+      textButtonSecondaryInverseDisabled: palette.blauBlueSecondary20,
+      textButtonSecondaryInverseSelected: palette.white,
+      textLink: palette.blauPurple,
+      textLinkInverse: palette.white,
+      textLinkDanger: palette.blauRed,
+      textLinkDangerDisabled: palette.blauRed20,
+      textLinkDisabled: palette.blauPurple30,
+      textLinkSnackbar: palette.blauPurple30,
+      // CONTROLS
+      control: palette.grey2,
+      controlActivated: palette.blauBlueSecondary,
+      controlError: palette.blauRed,
+      loadingBar: palette.blauBlueSecondary,
+      loadingBarBackground: palette.blauBlueSecondary10,
+      loadingBarInverse: palette.blauBlueSecondary,
+      // Deprecated. Remove
+      loadingBarBackgroundInverse: palette.blauBlueSecondary10,
+      // Deprecated. Remove
+      toggleAndroidInactive: palette.grey2,
+      toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
+      iosControlKnob: palette.white,
+      // DIVIDERS
+      divider: palette.grey2,
+      dividerInverse: applyAlpha(palette.white, 0.2),
+      navigationBarDivider: palette.blauBluePrimary,
+      // FEEDBACKS
+      badge: palette.blauRed,
+      feedbackErrorBackground: palette.blauRed,
+      feedbackInfoBackground: palette.grey6,
+      // GLOBAL
+      brand: palette.blauBluePrimary,
+      brandDark: palette.blauBlueSecondary,
+      inverse: palette.white,
+      neutralHigh: palette.grey6,
+      neutralMedium: palette.grey5,
+      neutralLow: palette.grey2,
+      textPrimary: palette.grey6,
+      textPrimaryInverse: palette.white,
+      textSecondary: palette.grey5,
+      textSecondaryInverse: palette.white,
+      textDisabled: palette.grey3,
+      textAmount: palette.blauBlueSecondary,
+      // STATES
+      error: palette.blauRed,
+      success: palette.blauGreen,
+      warning: palette.blauYellow,
+      promo: palette.blauPurple,
+      highlight: palette.blauBluePrimary,
+      // BARS TEXTS
+      textNavigationBarPrimary: palette.white,
+      textNavigationBarSecondary: palette.blauBlueSecondary20,
+      textNavigationSearchBarHint: palette.blauBlueSecondary20,
+      textNavigationSearchBarText: palette.white,
+      textAppBar: palette.grey5,
+      textAppBarSelected: palette.blauBlueSecondary60
+    },
+    darkModeColors: {
+      // BACKGROUNDS
+      backgroundBrand: palette.darkModeBlack,
+      background: palette.darkModeBlack,
+      appBarBackground: palette.darkModeGrey,
+      backgroundContainer: palette.darkModeGrey,
+      backgroundAlternative: palette.darkModeGrey,
+      backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
+      backgroundSkeleton: palette.darkModeGrey,
+      backgroundSkeletonInverse: palette.darkModeGrey,
+      backgroundFeedbackBottom: palette.darkModeBlack,
+      navigationBarBackground: palette.darkModeBlack,
+      skeletonWave: palette.grey5,
+      // BORDERS
+      borderLight: palette.darkModeBlack,
+      border: palette.darkModeGrey,
+      // BUTTONS
+      buttonDangerBackgroundDisabled: palette.darkModeGrey,
+      buttonLinkBackgroundSelected: applyAlpha(palette.blauPurple, 0.3),
+      buttonLinkBackgroundSelectedInverse: applyAlpha(palette.blauPurple, 0.3),
+      buttonPrimaryBackgroundDisabled: palette.darkModeGrey,
+      buttonPrimaryBackgroundDisabledInverse: palette.darkModeGrey,
+      buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
+      buttonPrimaryBackgroundSelected: palette.blauBlueSecondary60,
+      buttonSecondaryBackgroundDisabled: palette.darkModeGrey,
+      buttonSecondaryBorderDisabledInverse: palette.darkModeGrey,
+      buttonSecondaryBorderInverse: palette.blauBluePrimary,
+      buttonSecondaryBorderSelectedInverse: palette.blauBlueSecondary60,
+      textButtonPrimary: palette.grey2,
+      textButtonPrimaryDisabled: palette.grey5,
+      textButtonPrimaryInverse: palette.grey2,
+      textButtonPrimaryInverseDisabled: palette.grey5,
+      textButtonPrimaryInverseSelected: palette.grey2,
+      textButtonSecondary: palette.grey2,
+      textButtonSecondaryDisabled: palette.grey5,
+      textButtonSecondarySelected: palette.blauBlueSecondary60,
+      textButtonSecondaryInverse: palette.grey2,
+      textButtonSecondaryInverseDisabled: palette.grey5,
+      textButtonSecondaryInverseSelected: palette.blauBlueSecondary60,
+      textLink: palette.blauPurple30,
+      textLinkInverse: palette.blauPurple30,
+      textLinkDisabled: palette.grey5,
+      textLinkDangerDisabled: palette.grey5,
+      // CONTROLS
+      control: palette.darkModeGrey,
+      loadingBar: palette.blauBluePrimary,
+      loadingBarBackground: palette.darkModeGrey,
+      toggleAndroidInactive: palette.grey5,
+      // web only
+      toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
+      // web only
+      iosControlKnob: palette.grey2,
+      // web only
+      // DIVIDERS
+      divider: applyAlpha(palette.white, 0.05),
+      dividerInverse: applyAlpha(palette.white, 0.05),
+      navigationBarDivider: palette.darkModeBlack,
+      // GLOBAL
+      brand: palette.blauBluePrimary,
+      brandDark: palette.grey5,
+      inverse: palette.grey2,
+      neutralHigh: palette.grey2,
+      neutralMedium: palette.grey5,
+      neutralLow: palette.darkModeGrey,
+      textPrimary: palette.grey2,
+      textPrimaryInverse: palette.grey2,
+      textSecondary: palette.grey4,
+      textSecondaryInverse: palette.grey4,
+      textDisabled: palette.grey5,
+      textAmount: palette.blauBlueSecondary,
+      textNavigationBarPrimary: palette.grey2,
+      textNavigationBarSecondary: palette.grey4,
+      textNavigationSearchBarHint: palette.grey4,
+      // iOS
+      textNavigationSearchBarText: palette.grey2,
+      // iOS
+      textAppBar: palette.grey5,
+      textAppBarSelected: palette.grey2
+    }
+  };
+};

package/dist-es/skins/constants.js

@@ -2,4 +2,5 @@ export var MOVISTAR_SKIN = 'Movistar';
 export var O2_SKIN = 'O2';
 export var O2_CLASSIC_SKIN = 'O2-classic';
 export var VIVO_SKIN = 'Vivo';
-export var TELEFONICA_SKIN = 'Telefonica';
+export var TELEFONICA_SKIN = 'Telefonica';
+export var BLAU_SKIN = 'Blau';

package/dist-es/skins/telefonica.js

@@ -188,7 +188,7 @@ export var getTelefonicaSkin = function getTelefonicaSkin() {
       textLink: palette.telefonicaBlue,
       textLinkInverse: palette.telefonicaBlue,
       textLinkDisabled: palette.grey6,
-      control: palette.grey6,
+      control: palette.darkModeGrey,
       controlActivated: palette.telefonicaBlue,
       loadingBar: palette.telefonicaBlue,
       loadingBarBackground: applyAlpha(palette.white, 0.05),

package/dist-es/skins/utils.js

@@ -1,4 +1,5 @@
-import { TELEFONICA_SKIN, VIVO_SKIN, O2_SKIN, O2_CLASSIC_SKIN, MOVISTAR_SKIN } from './constants';
+import { BLAU_SKIN, TELEFONICA_SKIN, VIVO_SKIN, O2_SKIN, O2_CLASSIC_SKIN, MOVISTAR_SKIN } from './constants';
+import { getBlauSkin } from './blau';
 import { getTelefonicaSkin } from './telefonica';
 import { getVivoSkin } from './vivo';
 import { getO2Skin } from './o2';
@@ -6,6 +7,9 @@ import { getO2ClassicSkin } from './o2-classic';
 import { getMovistarSkin } from './movistar';
 export var getSkinByName = function getSkinByName(name, variant) {
   switch (name) {
+    case BLAU_SKIN:
+      return getBlauSkin(variant);
+
     case TELEFONICA_SKIN:
       return getTelefonicaSkin(variant);
 

package/dist-es/stepper.js

@@ -100,7 +100,7 @@ var useStyles = createUseStyles(function (_ref) {
       height: 4,
       width: '100%',
       margin: '0 8px',
-      background: colors.border,
+      background: colors.control,
       borderRadius: 4,
       overflow: 'hidden',
       '&:last-child': {

package/dist-es/text-field-base.js

@@ -150,6 +150,10 @@ var useStyles = createUseStyles(function (theme) {
       // Chrome: hide value if not valid or focused
       // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
       // be sure to check that case when updating these styles
+      '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+        color: 'transparent',
+        opacity: 0
+      },
       '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
         color: 'transparent',
         opacity: 0
@@ -160,6 +164,9 @@ var useStyles = createUseStyles(function (theme) {
       },
       // Firefox: hide value if not valid or focused
       // Only apply when Firefox, otherwise it breaks styles in safari mobile
+      '&[type="month"]:not(:valid):not(:focus)': isFirefox() ? {
+        color: 'transparent'
+      } : {},
       '&[type="date"]:not(:valid):not(:focus)': isFirefox() ? {
         color: 'transparent'
       } : {},
@@ -274,7 +281,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref14, ref
   var hasLabel = !!label || !rest.required; // this shrinkLabel override is a workaround because I was unable to find a way to hide date
   // and date-time native placeholders when the input is not required
 
-  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local') && !rest.required;
+  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local' || rest.type === 'month') && !rest.required;
   var classes = useStyles({
     inputState: inputState,
     error: error,

package/dist-es/theme.js

@@ -34,7 +34,8 @@ var TEXTS_ES = {
   menuLabelSuffix: 'menú',
   openNavigationMenu: 'Abrir menú de navegación',
   closeNavigationMenu: 'Cerrar menú de navegación',
-  backNavigationBar: 'Atrás'
+  backNavigationBar: 'Atrás',
+  clearButton: 'Borrar'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -63,7 +64,8 @@ var TEXTS_EN = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Open navigation menu',
   closeNavigationMenu: 'Close navigation menu',
-  backNavigationBar: 'Back'
+  backNavigationBar: 'Back',
+  clearButton: 'Clear'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -92,7 +94,8 @@ var TEXTS_DE = {
   menuLabelSuffix: 'Menü',
   openNavigationMenu: 'Navigationsmenü öffnen',
   closeNavigationMenu: 'Navigationsmenü schließen',
-  backNavigationBar: 'Zurück'
+  backNavigationBar: 'Zurück',
+  clearButton: 'Löschen'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -121,7 +124,8 @@ var TEXTS_PT = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Abrir menu de navegação',
   closeNavigationMenu: 'Fechar menu de navegação',
-  backNavigationBar: 'Voltar'
+  backNavigationBar: 'Voltar',
+  clearButton: 'Apagar'
 };
 export var getTexts = function getTexts(locale) {
   var lang = locale.toLocaleLowerCase().split(/[-_]/)[0];

package/dist-es/utils/time.js

@@ -4,6 +4,11 @@ export var getLocalDateString = function getLocalDateString(date) {
   var dd = String(date.getDate()).padStart(2, '0');
   return "".concat(yyyy, "-").concat(mm, "-").concat(dd);
 };
+export var getLocalYearMonthString = function getLocalYearMonthString(date) {
+  var yyyy = date.getFullYear();
+  var mm = String(date.getMonth() + 1).padStart(2, '0');
+  return "".concat(yyyy, "-").concat(mm);
+};
 export var getLocalDateTimeString = function getLocalDateTimeString(date) {
   var h = String(date.getHours()).padStart(2, '0');
   var m = String(date.getMinutes()).padStart(2, '0');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.5.1",
+    "version": "10.9.0",
     "license": "MIT",
     "repository": {
         "type": "git",