Merge branch 'master' into atoledano-swc

.storybook/colors.js

@@ -3,7 +3,7 @@
 // This module replaces the required parts from ./src/skins
 
 /**
- * @param {'Movistar' | 'Vivo' | 'O2' | 'O2-classic' | 'Telefonica'} skin
+ * @param {'Movistar' | 'Vivo' | 'O2' | 'O2-classic' | 'Telefonica' | 'Blau'} skin
  */
 export const getColors = (skin) => {
     switch (skin) {
@@ -36,6 +36,13 @@ export const getColors = (skin) => {
                 textPrimaryInverse: '#FFFFFF',
                 textSecondary: '#6E7894',
             };
+        case 'Blau':
+            return {
+                primary: '#0070BF',
+                textPrimary: '#000000',
+                textPrimaryInverse: '#FFFFFF',
+                textSecondary: '#808285',
+            };
         default:
             throw Error('Unexpected skin: ' + skin);
     }

.storybook/preview.tsx

@@ -8,6 +8,7 @@ import {
     O2_SKIN,
     O2_CLASSIC_SKIN,
     TELEFONICA_SKIN,
+    BLAU_SKIN,
     useTheme,
 } from '../src';
 import {AVAILABLE_THEMES, Movistar} from './themes';
@@ -41,7 +42,7 @@ type Platform = 'android' | 'desktop' | 'ios';
 
 const getSkin = (searchParams: URLSearchParams) => {
     const qsSkin = searchParams.get('skin');
-    return [MOVISTAR_SKIN, O2_SKIN, O2_CLASSIC_SKIN, VIVO_SKIN, TELEFONICA_SKIN].find(
+    return [MOVISTAR_SKIN, O2_SKIN, O2_CLASSIC_SKIN, VIVO_SKIN, TELEFONICA_SKIN, BLAU_SKIN].find(
         (skin) => skin === qsSkin
     );
 };

.storybook/theme-selector-addon/register.js

@@ -5,7 +5,7 @@ import {WithTooltip, IconButton, TooltipLinkList} from '@storybook/components';
 import {getColors} from '../colors';
 import {createStorybookTheme} from '../storybook-manager-theme';
 
-const AVAILABLE_SKINS = ['Movistar', 'O2', 'O2-classic', 'Vivo', 'Telefonica'];
+const AVAILABLE_SKINS = ['Movistar', 'O2', 'O2-classic', 'Vivo', 'Telefonica', 'Blau'];
 
 const renderPrimaryColorDot = (skinName) => (
     <div

.storybook/themes.tsx

@@ -1,4 +1,11 @@
-import {getMovistarSkin, getO2Skin, getO2ClassicSkin, getVivoSkin, getTelefonicaSkin} from '../src';
+import {
+    getMovistarSkin,
+    getO2Skin,
+    getO2ClassicSkin,
+    getVivoSkin,
+    getTelefonicaSkin,
+    getBlauSkin,
+} from '../src';
 
 export const Movistar = {
     i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
@@ -30,4 +37,9 @@ export const Telefonica = {
     skin: getTelefonicaSkin(),
 } as const;
 
-export const AVAILABLE_THEMES = [Movistar, O2, O2_Classic, Vivo, Telefonica];
+export const Blau = {
+    i18n: {locale: 'de-DE', phoneNumberFormattingRegionCode: 'DE'},
+    skin: getBlauSkin(),
+} as const;
+
+export const AVAILABLE_THEMES = [Movistar, O2, O2_Classic, Vivo, Telefonica, Blau];

CHANGELOG.md

@@ -1,3 +1,43 @@
+# [10.9.0](https://github.com/Telefonica/mistica-web/compare/v10.8.1...v10.9.0) (2021-10-21)
+
+
+### Features
+
+* **MonthField:** new form field to select months ([#356](https://github.com/Telefonica/mistica-web/issues/356)) ([1a949a5](https://github.com/Telefonica/mistica-web/commit/1a949a5fa4d2f9e7a0141afd7c920741faf36c49))
+
+## [10.8.1](https://github.com/Telefonica/mistica-web/compare/v10.8.0...v10.8.1) (2021-10-19)
+
+
+### Bug Fixes
+
+* **blau:** some color bad naming ([#358](https://github.com/Telefonica/mistica-web/issues/358)) ([64a3a87](https://github.com/Telefonica/mistica-web/commit/64a3a87a23cdbb16ca60c0639976c5fe84275905))
+
+# [10.8.0](https://github.com/Telefonica/mistica-web/compare/v10.7.0...v10.8.0) (2021-10-18)
+
+
+### Features
+
+* **ButtonGroup:** new component (private) ([#351](https://github.com/Telefonica/mistica-web/issues/351)) ([fe00dd7](https://github.com/Telefonica/mistica-web/commit/fe00dd7372e6bec8222bf7456b28fb523d40d2c9))
+
+# [10.7.0](https://github.com/Telefonica/mistica-web/compare/v10.6.0...v10.7.0) (2021-10-18)
+
+
+### Bug Fixes
+
+* **colors:** fix some dark colors ([#354](https://github.com/Telefonica/mistica-web/issues/354)) ([7ecb12b](https://github.com/Telefonica/mistica-web/commit/7ecb12b502a4a634d4cd0686f205e448db3a7b7f))
+
+
+### Features
+
+* **ProgressBar:** allow custom color ([#353](https://github.com/Telefonica/mistica-web/issues/353)) ([1f7be87](https://github.com/Telefonica/mistica-web/commit/1f7be87b4c9297fa273f69b612333224f05750aa))
+
+# [10.6.0](https://github.com/Telefonica/mistica-web/compare/v10.5.1...v10.6.0) (2021-10-14)
+
+
+### Features
+
+* **Blau:** new skin ([#311](https://github.com/Telefonica/mistica-web/issues/311)) ([235017b](https://github.com/Telefonica/mistica-web/commit/235017bb80fd87956ce84257c2042862d53b6f85))
+
 ## [10.5.1](https://github.com/Telefonica/mistica-web/compare/v10.5.0...v10.5.1) (2021-10-05)
 
 

flow-defs/button-group.js.flow

@@ -0,0 +1,11 @@
+// @flow
+
+import * as React from "react";
+import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
+export type ButtonGroupProps = {|
+  primaryButton?: React.Element<typeof ButtonPrimary>,
+  secondaryButton?: React.Element<typeof ButtonSecondary>,
+  link?: React.Element<typeof ButtonLink>,
+|};
+declare var ButtonGroup: React.ComponentType<ButtonGroupProps>;
+declare export default typeof ButtonGroup;

flow-defs/button.js.flow

@@ -3,7 +3,7 @@
 import * as React from "react";
 import type { DataAttributes, TrackingEvent } from "./utils/types";
 import type { Location } from "history";
-declare export var BUTTON_MIN_WIDTH: 156;
+declare export var BUTTON_MIN_WIDTH: 136;
 declare type CommonProps = {|
   children: React.Node,
   className?: string,

flow-defs/callout.js.flow

@@ -7,9 +7,8 @@ declare type Props = {
   description: string,
   onClose?: () => void,
   icon?: React.Element<any>,
-  button?:
-    | React.Element<typeof ButtonPrimary>
-    | React.Element<typeof ButtonSecondary>,
+  button?: React.Element<typeof ButtonPrimary>,
+  secondaryButton?: React.Element<typeof ButtonSecondary>,
   buttonLink?: React.Element<typeof ButtonLink>,
   "aria-label"?: string,
 };

flow-defs/date-time-picker.js.flow

@@ -9,6 +9,7 @@ export type DateTimePickerProps = {|
   inputRef: (field: HTMLInputElement | null) => void,
   isValidDate?: (currentDate: Moment, selectedDate: Moment) => boolean,
   withTime?: boolean,
+  mode?: "year-month",
 |};
 declare var DateTimePicker: React.ComponentType<DateTimePickerProps>;
 declare export default typeof DateTimePicker;

flow-defs/decimal-field.js.flow

@@ -17,6 +17,7 @@ export type DecimalFieldProps = {|
   ...$Exact<CommonFormFieldProps>,
 
   onChangeValue?: (value: string, rawValue: string) => void,
+  prefix?: React.Node,
 |};
 declare var DecimalField: React.ComponentType<DecimalFieldProps>;
 declare export default typeof DecimalField;

flow-defs/empty-state-card.js.flow

@@ -5,9 +5,8 @@ import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
 import type { DataAttributes } from "./utils/types";
 declare type CommonProps = {|
   title: string,
-  button?:
-    | React.Element<typeof ButtonPrimary>
-    | React.Element<typeof ButtonSecondary>,
+  button?: React.Element<typeof ButtonPrimary>,
+  secondaryButton?: React.Element<typeof ButtonSecondary>,
   buttonLink?: React.Element<typeof ButtonLink>,
   description?: string,
   "aria-label"?: string,

flow-defs/feedback.js.flow

@@ -1,14 +1,10 @@
 // @flow
 
 import * as React from "react";
-import { ButtonPrimary, ButtonSecondary, ButtonLink } from "./button";
 import type { DataAttributes } from "./utils/types";
+import type { ButtonGroupProps } from "./button-group";
 declare type HapticFeedback = "error" | "success";
-declare type FeedbackButtonsProps = {
-  primaryButton?: React.Element<typeof ButtonPrimary>,
-  secondaryButton?: React.Element<typeof ButtonSecondary>,
-  link?: React.Element<typeof ButtonLink>,
-};
+declare type FeedbackButtonsProps = ButtonGroupProps;
 declare type FeedbackProps = {|
   ...$Exact<FeedbackButtonsProps>,
 

flow-defs/highlighted-card.js.flow

@@ -14,6 +14,7 @@ declare type CommonProps = {|
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   isInverse?: boolean,
   "aria-label"?: string,
+  width?: string | number,
 |};
 declare type BasicProps = {| ...$Exact<CommonProps> |};
 declare type ButtonProps = {|

flow-defs/index.js.flow

@@ -109,6 +109,7 @@ declare export { default as CreditCardExpirationField } from "./credit-card-expi
 declare export { default as CreditCardFields } from "./credit-card-fields";
 declare export { default as CvvField } from "./cvv-field";
 declare export { default as DateField } from "./date-field";
+declare export { default as MonthField } from "./month-field";
 declare export { default as DateTimeField } from "./date-time-field";
 declare export { default as IntegerField } from "./integer-field";
 declare export { default as DecimalField } from "./decimal-field";
@@ -145,18 +146,21 @@ declare export {
   O2_SKIN,
   MOVISTAR_SKIN,
   TELEFONICA_SKIN,
+  BLAU_SKIN,
 } from "./skins/constants";
 declare export { getSkinByName } from "./skins/utils";
 declare export { getVivoSkin } from "./skins/vivo";
 declare export { getMovistarSkin } from "./skins/movistar";
 declare export { getO2Skin } from "./skins/o2";
 declare export { getO2ClassicSkin } from "./skins/o2-classic";
 declare export { getTelefonicaSkin } from "./skins/telefonica";
+declare export { getBlauSkin } from "./skins/blau";
 declare export { palette as vivoPalette } from "./skins/vivo";
 declare export { palette as movistarPalette } from "./skins/movistar";
 declare export { palette as o2Palette } from "./skins/o2";
 declare export { palette as o2ClassicPalette } from "./skins/o2-classic";
 declare export { palette as telefonicaPalette } from "./skins/telefonica";
+declare export { palette as blauPalette } from "./skins/blau";
 declare export { Locale } from "./utils/locale";
 declare export { TrackingEvent } from "./utils/types";
 declare export { RegionCode } from "./utils/region-code";

flow-defs/month-field.js.flow

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+import type { CommonFormFieldProps } from "./text-field-base";
+export type DateFieldProps = {|
+  ...$Exact<CommonFormFieldProps>,
+
+  onChangeValue?: (value: string, rawValue: string) => void,
+  min?: Date,
+  max?: Date,
+|};
+declare var DateField: React.ComponentType<DateFieldProps>;
+declare export default typeof DateField;

flow-defs/progress-bar.js.flow

@@ -1,6 +1,9 @@
 // @flow
 
 import * as React from "react";
-declare type Props = { progressPercent: number };
+declare type Props = {
+  progressPercent: number,
+  color?: string,
+};
 declare var ProgressBar: React.ComponentType<Props>;
 declare export default typeof ProgressBar;

flow-defs/skins/blau.js.flow

@@ -0,0 +1,39 @@
+// @flow
+
+import type { GetSkin } from "./types";
+declare 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",
+  +darkModeBlack: "#191919",
+  +darkModeGrey: "#242424",
+};
+declare export var getBlauSkin: GetSkin;

flow-defs/skins/constants.js.flow

@@ -5,3 +5,4 @@ declare export var O2_SKIN: "O2";
 declare export var O2_CLASSIC_SKIN: "O2-classic";
 declare export var VIVO_SKIN: "Vivo";
 declare export var TELEFONICA_SKIN: "Telefonica";
+declare export var BLAU_SKIN: "Blau";

flow-defs/skins/types.js.flow

@@ -1,7 +1,13 @@
 // @flow
 
 export type SkinVariant = "prominent";
-export type SkinName = "Movistar" | "O2" | "O2-classic" | "Vivo" | "Telefonica";
+export type SkinName =
+  | "Movistar"
+  | "O2"
+  | "O2-classic"
+  | "Vivo"
+  | "Telefonica"
+  | "Blau";
 export type GetSkin = (variant?: SkinVariant) => Skin;
 export type Skin = {
   name: SkinName,

flow-defs/theme.js.flow

@@ -34,6 +34,7 @@ declare var TEXTS_ES: {
   openNavigationMenu: string,
   closeNavigationMenu: string,
   backNavigationBar: string,
+  clearButton: string,
 };
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {

flow-defs/utils/time.js.flow

@@ -1,4 +1,5 @@
 // @flow
 
 declare export var getLocalDateString: (date: Date) => string;
+declare export var getLocalYearMonthString: (date: Date) => string;
 declare export var getLocalDateTimeString: (date: Date) => string;

package.json

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

playroom/components.tsx

@@ -12,12 +12,13 @@ import {
     Checkbox,
     ThemeContextProvider,
 } from '../src';
-import {Movistar, Vivo, O2, Telefonica} from './themes';
+import {Movistar, Vivo, O2, Telefonica, Blau} from './themes';
 import {useOverrideTheme} from './frame-component';
 
 import type {ThemeConfig, ColorScheme, SkinName} from '../src';
 
 export * from '../src';
+export {default as ButtonGroup} from '../src/button-group';
 
 const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -46,7 +47,7 @@ const useControlsStyles = createUseStyles((theme) => ({
     },
     tabs: {
         flexBasis: '100%',
-        marginRight: 96,
+        marginRight: 72,
         whiteSpace: 'nowrap',
     },
     desktopControlItem: {
@@ -106,6 +107,10 @@ const themesMap: {[skinName: string]: {themeConfig: ThemeConfig; text: string}}
         text: 'Telefónica',
         themeConfig: Telefonica,
     },
+    Blau: {
+        text: 'Blau',
+        themeConfig: Blau,
+    },
 };
 
 type PreviewToolsControlsProps = {

playroom/snippets.tsx

@@ -59,6 +59,14 @@ const buttonSnippets: Array<Snippet> = [
         name: 'Button with icon',
         code: '<ButtonPrimary onPress={() => {}}><IconLockClosedRegular color="currentColor" />Action</ButtonPrimary>',
     },
+    {
+        name: 'ButtonGroup (internal use)',
+        code: `
+        <ButtonGroup
+          primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
+          secondaryButton={<ButtonSecondary onPress={() => {}}>Secondary Action</ButtonSecondary>}
+          link={<ButtonLink onPress={() => {}}>Link</ButtonLink>}/>`,
+    },
     {
         name: 'ButtonLayout',
         code: `