POC: Unbranded skin

.github/workflows/deploy-master.yml

@@ -19,7 +19,7 @@ jobs:
               with:
                   persist-credentials: false
 
-            - uses: amondnet/vercel-action@master
+            - uses: amondnet/vercel-action@v42.2.0 # https://github.com/amondnet/vercel-action/issues/359
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }} # needed to allow comments on prs
                   vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required

.github/workflows/deploy-pull-requests.yml

@@ -24,7 +24,7 @@ jobs:
             - run: sed -i 's/yarn vercel-build/yarn vercel-preview-build/' vercel.json
               shell: bash
 
-            - uses: amondnet/vercel-action@master
+            - uses: amondnet/vercel-action@v42.2.0 # https://github.com/amondnet/vercel-action/issues/359
               id: vercel-deploy # identifier to reference this step
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }} # needed to allow comments on prs

.storybook/colors.ts

@@ -8,6 +8,7 @@ export const AVAILABLE_SKINS = [
     'Telefonica',
     'Blau',
     'Esimflag',
+    'Unbranded',
 ] as const;
 
 export type Skin = (typeof AVAILABLE_SKINS)[number];
@@ -73,6 +74,13 @@ export const getColors = (skin: Skin): SkinTheme => {
                 textPrimaryInverse: '#FFFFFF',
                 textSecondary: '#666B73',
             };
+        case 'Unbranded':
+            return {
+                primary: '#000000',
+                textPrimary: '#000000',
+                textPrimaryInverse: '#FFFFFF',
+                textSecondary: '#666666',
+            };
         default:
             throw Error('Unexpected skin: ' + skin);
     }

.storybook/preview.tsx

@@ -20,6 +20,7 @@ import {
     skinVars,
     OverscrollColorProvider,
     ESIMFLAG_SKIN,
+    UNBRANDED_SKIN,
 } from '../src';
 import {AVAILABLE_THEMES, Movistar} from './themes';
 import {getPlatform} from '../src/utils/platform';
@@ -132,7 +133,7 @@ const MisticaThemeProvider = ({
                 <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
                     <OverscrollColorProvider>
                         {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
-                        {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && (
+                        {(skin === TELEFONICA_SKIN || skin === TU_SKIN || skin === UNBRANDED_SKIN) && (
                             <style>{`body {font-family: "Telefonica Sans"}`}</style>
                         )}
                         {(skin === MOVISTAR_SKIN ||

.storybook/themes.tsx

@@ -9,6 +9,7 @@ import {
     getBlauSkin,
     getTuSkin,
     getEsimflagSkin,
+    getUnbrandedSkin,
 } from '../src';
 
 export const Movistar = {
@@ -61,6 +62,11 @@ export const Esimflag = {
     skin: getEsimflagSkin(),
 } as const;
 
+export const Unbranded = {
+    i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
+    skin: getUnbrandedSkin(),
+} as const;
+
 export const AVAILABLE_THEMES = [
     Movistar,
     Movistar_New,
@@ -72,4 +78,5 @@ export const AVAILABLE_THEMES = [
     Blau,
     Tu,
     Esimflag,
+    Unbranded,
 ];

playroom/components/index.tsx

@@ -39,7 +39,7 @@ export * from '../../src/community';
 export {default as Loader} from './loader';
 export {default as Animation} from './animation';
 
-type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo' | 'Movistar' | 'Tu'>;
+type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo' | 'Movistar' | 'Tu' | 'Unbranded'>;
 
 const BrandIcon = ({Logo}: {Logo: React.ComponentType<{size: number; color?: string}>}) => {
     const {isDarkMode} = useTheme();

playroom/frame-component.tsx

@@ -21,6 +21,7 @@ import {
     ESIMFLAG_SKIN,
     VIVO_SKIN,
     BLAU_SKIN,
+    UNBRANDED_SKIN,
 } from '../src';
 import {Movistar_New as defaultThemeConfig} from './themes';
 
@@ -90,7 +91,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
         body {background: ${skinVars.colors.background}}
 
         ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
-        ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
+        ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN || skinName === UNBRANDED_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
         ${
             skinName === MOVISTAR_SKIN ||
             skinName === O2_SKIN ||

playroom/themes.tsx

@@ -16,10 +16,12 @@ export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Esimflag: ThemeConfig = {...themes.Esimflag, ...common};
+export const Unbranded: ThemeConfig = {...themes.Unbranded, ...common};
 
 export const Movistar_New_iOS: ThemeConfig = {...Movistar_New, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};
 export const Esimflag_iOS: ThemeConfig = {...Esimflag, platformOverrides: {platform: 'ios'}};
+export const Unbranded_iOS: ThemeConfig = {...Unbranded, platformOverrides: {platform: 'ios'}};

src/index.tsx

@@ -237,6 +237,7 @@ export {
     BLAU_SKIN,
     TU_SKIN,
     ESIMFLAG_SKIN,
+    UNBRANDED_SKIN,
 } from './skins/constants';
 export {getSkinByName} from './skins/utils';
 export {getVivoSkin} from './skins/vivo';
@@ -249,6 +250,7 @@ export {getTelefonicaSkin} from './skins/telefonica';
 export {getBlauSkin} from './skins/blau';
 export {getTuSkin} from './skins/tu';
 export {getEsimflagSkin} from './skins/esimflag';
+export {getUnbrandedSkin} from './skins/unbranded';
 export {palette as vivoPalette} from './skins/vivo';
 export {palette as vivoNewPalette} from './skins/vivo-new';
 export {palette as movistarPalette} from './skins/movistar';
@@ -259,6 +261,7 @@ export {palette as telefonicaPalette} from './skins/telefonica';
 export {palette as blauPalette} from './skins/blau';
 export {palette as tuPalette} from './skins/tu';
 export {palette as esimFlagPalette} from './skins/esimflag';
+export {palette as unbrandedPalette} from './skins/unbranded';
 
 export type {TrackingEvent, IconProps, DataAttributes} from './utils/types';
 export type {RegionCode} from './utils/region-code';

src/skins/constants.tsx

@@ -8,3 +8,4 @@ export const TELEFONICA_SKIN = 'Telefonica';
 export const BLAU_SKIN = 'Blau';
 export const TU_SKIN = 'Tu';
 export const ESIMFLAG_SKIN = 'Esimflag';
+export const UNBRANDED_SKIN = 'Unbranded';

src/skins/types/index.tsx

@@ -15,7 +15,8 @@ export type KnownSkinName =
     | 'Telefonica'
     | 'Blau'
     | 'Tu'
-    | 'Esimflag';
+    | 'Esimflag'
+    | 'Unbranded';
 export type SkinName = KnownSkinName | string;
 
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;