feat(skin): o2 new brand

.storybook/colors.js

@@ -3,7 +3,7 @@
 // This module replaces the required parts from ./src/skins
 
 /**
- * @param {'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'Telefonica' | 'Blau' | 'Tu'} skin
+ * @param {'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'O2-new' | 'Telefonica' | 'Blau' | 'Tu'} skin
  */
 export const getColors = (skin) => {
  switch (skin) {
@@ -29,6 +29,13 @@ export const getColors = (skin) => {
  textPrimaryInverse: '#FFFFFF',
  textSecondary: '#757575',
  };
+ case 'O2-new':
+ return {
+ primary: '#0050FF',
+ textPrimary: '#00001E',
+ textPrimaryInverse: '#FFFFFF',
+ textSecondary: '#3C3C46',
+ };
  case 'Telefonica':
  return {
  primary: '#0066FF',

.storybook/preview.tsx

@@ -10,6 +10,7 @@ import {
  VIVO_SKIN,
  VIVO_NEW_SKIN,
  O2_SKIN,
+ O2_NEW_SKIN,
  TELEFONICA_SKIN,
  BLAU_SKIN,
  TU_SKIN,
@@ -26,9 +27,16 @@ type Platform = 'android' | 'desktop' | 'ios';
 
 const getSkin = (searchParams: URLSearchParams) => {
  const qsSkin = searchParams.get('skin');
- return [MOVISTAR_SKIN, O2_SKIN, VIVO_SKIN, VIVO_NEW_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN].find(
- (skin) => skin === qsSkin
- );
+ return [
+ MOVISTAR_SKIN,
+ O2_SKIN,
+ O2_NEW_SKIN,
+ VIVO_SKIN,
+ VIVO_NEW_SKIN,
+ TELEFONICA_SKIN,
+ BLAU_SKIN,
+ TU_SKIN,
+ ].find((skin) => skin === qsSkin);
 };
 
 const getColorScheme = (searchParams: URLSearchParams): ColorScheme | undefined => {
@@ -108,7 +116,9 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => {
  {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && (
  <style>{`body {font-family: "Telefonica Sans"}`}</style>
  )}
- {skin === O2_SKIN && <style>{`body {font-family: "On Air"}`}</style>}
+ {(skin === O2_SKIN || skin === O2_NEW_SKIN) && (
+ <style>{`body {font-family: "On Air"}`}</style>
+ )}
  <Story {...context} />
  </OverscrollColorProvider>
  </ThemeContextProvider>

.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', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'];
+const AVAILABLE_SKINS = ['Movistar', 'O2', 'O2-new', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'];
 
 const renderPrimaryColorDot = (skinName) => (
  <div

.storybook/themes.tsx

@@ -1,6 +1,7 @@
 import {
  getMovistarSkin,
  getO2Skin,
+ getO2NewSkin,
  getVivoSkin,
  getVivoNewSkin,
  getTelefonicaSkin,
@@ -18,6 +19,11 @@ export const O2 = {
  skin: getO2Skin(),
 } as const;
 
+export const O2_New = {
+ i18n: {locale: 'en-GB', phoneNumberFormattingRegionCode: 'GB'},
+ skin: getO2NewSkin(),
+} as const;
+
 export const Vivo = {
  i18n: {locale: 'pt-BR', phoneNumberFormattingRegionCode: 'BR'},
  skin: getVivoSkin(),
@@ -43,4 +49,4 @@ export const Tu = {
  skin: getTuSkin(),
 } as const;
 
-export const AVAILABLE_THEMES = [Movistar, O2, Vivo, Vivo_New, Telefonica, Blau, Tu];
+export const AVAILABLE_THEMES = [Movistar, O2, O2_New, Vivo, Vivo_New, Telefonica, Blau, Tu];

packages/generate-design-tokens/index.js

@@ -110,7 +110,7 @@ export type Colors = {
 };
 
 const generateSkinFiles = () => {
- const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'telefonica', 'vivo', 'vivo-new', 'tu'];
+ const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'o2-new', 'telefonica', 'vivo', 'vivo-new', 'tu'];
 
  let anyGeneratedSkin;
 

playroom/components/index.tsx

@@ -20,7 +20,7 @@ import {
  IconButton,
  ToggleIconButton,
 } from '../../src';
-import {Movistar, Vivo, O2, Telefonica, Blau, Vivo_New, Tu} from '../themes';
+import {Movistar, Vivo, O2, Telefonica, Blau, Vivo_New, Tu, O2_New} from '../themes';
 import {useOverrideTheme} from '../frame-component';
 import IconSun from '../icons/icon-sun';
 import IconMoon from '../icons/icon-moon';
@@ -67,6 +67,31 @@ const VivoNewLogo = () => (
  </svg>
 );
 
+const O2NewLogo = () => (
+ <svg width="51" height="24" viewBox="0 0 51 24" fill="none">
+ <path
+ d="M17.5488 16.0336C17.8424 16.1065 18.1266 16.2416 18.3388 16.4558C18.5183 16.6276 18.6411 16.85 18.7127 17.0838C18.7977 17.3732 18.8193 17.6804 18.7802 17.9788C18.7429 18.248 18.6501 18.5076 18.5284 18.7512C18.2997 19.1993 17.9805 19.5965 17.6394 19.9683C17.2723 20.3663 16.8766 20.7381 16.4814 21.1094C17.2777 21.1069 18.074 21.1093 18.8703 21.1082C18.9135 21.1078 18.9576 21.1055 19 21.1167V22.0553C18.9759 22.0582 18.952 22.0614 18.9283 22.0624L14.8838 22.0623V21.0512C14.9759 20.9617 15.0743 20.8788 15.1687 20.7916C15.5786 20.4276 15.9825 20.0568 16.3632 19.6636C16.7294 19.2772 17.0861 18.8731 17.3411 18.4066C17.4566 18.1876 17.5534 17.9492 17.5517 17.6994C17.5505 17.5208 17.4843 17.341 17.3574 17.2105C17.1927 17.0367 16.9529 16.949 16.716 16.9204C16.3962 16.887 16.0733 16.9517 15.7757 17.0638C15.546 17.1487 15.3328 17.2686 15.1242 17.3932C15.0916 17.0571 15.0577 16.7213 15.0264 16.3851C15.5388 16.1369 16.1029 15.987 16.6754 15.9609C16.9677 15.9438 17.2639 15.9651 17.5488 16.0336ZM10.8405 5.31604C11.4058 5.52598 11.9429 5.80916 12.4281 6.16153C13.2361 6.74439 13.8939 7.51831 14.3477 8.39092C14.7702 9.19559 15.0213 10.0802 15.1223 10.977C15.1704 11.4268 15.1906 11.8802 15.1648 12.3321C15.1295 13.05 14.99 13.7632 14.7481 14.4425C14.3674 15.5125 13.7227 16.4968 12.8652 17.2646C12.0449 18.0047 11.0307 18.5371 9.94699 18.8056C9.15229 19.0038 8.32369 19.0655 7.50629 19.0057C6.67582 18.9452 5.85411 18.7488 5.09547 18.4128C4.21888 18.0263 3.43007 17.454 2.79756 16.7484C2.02182 15.8874 1.48168 14.8335 1.21175 13.7206C1.07973 13.1805 1.01279 12.6265 1 12.0718V11.7824C1.01178 11.3189 1.05344 10.8555 1.13963 10.3992C1.34506 9.29693 1.79973 8.23074 2.51039 7.34513C3.05786 6.65787 3.75545 6.08494 4.54283 5.67344C5.55445 5.14133 6.70297 4.87855 7.84905 4.85046C8.86383 4.81985 9.88996 4.96284 10.8405 5.31604ZM7.7686 6.88542C7.35186 6.91854 6.93899 7.01037 6.55342 7.16902C6.1453 7.33521 5.76806 7.57142 5.43995 7.86006C5.02852 8.21997 4.69266 8.6576 4.43365 9.13241C4.03931 9.85658 3.81866 10.665 3.75717 11.4807C3.72184 11.96 3.74281 12.4429 3.81421 12.9185C3.90715 13.527 4.08442 14.1257 4.36283 14.679C4.59899 15.1494 4.90986 15.587 5.2996 15.9493C5.7116 16.3366 6.21512 16.6312 6.76043 16.8025C7.26006 16.96 7.79015 17.0181 8.31377 16.9962C8.80091 16.9737 9.28704 16.8782 9.73639 16.6912C10.4144 16.4136 10.9922 15.9303 11.4118 15.3458C11.9534 14.5939 12.259 13.6989 12.3791 12.7929C12.5377 11.6105 12.3647 10.3778 11.831 9.3C11.592 8.82351 11.2831 8.3761 10.8943 8.0029C10.4766 7.59029 9.96207 7.26924 9.39895 7.0804C8.87733 6.90387 8.31808 6.84628 7.7686 6.88542Z"
+ fill="#0050FF"
+ />
+ <path
+ d="M18 12C18 7.58172 21.7924 4 26.4706 4H41.5294C46.2076 4 50 7.58172 50 12V12C50 16.4183 46.2076 20 41.5294 20H26.4706C21.7924 20 18 16.4183 18 12V12Z"
+ fill="#D73241"
+ />
+ <path
+ d="M23.043 15.5039V9.12305H24.2559V10.1367H24.3496C24.6602 9.42773 25.293 9 26.2539 9C27.6777 9 28.4629 9.85547 28.4629 11.373V15.5039H27.2031V11.6895C27.2031 10.6641 26.7578 10.1543 25.8262 10.1543C24.8945 10.1543 24.3027 10.7754 24.3027 11.7715V15.5039H23.043Z"
+ fill="white"
+ />
+ <path
+ d="M32.8574 10.0723C31.9258 10.0723 31.2754 10.7285 31.2051 11.7246H34.4277C34.3984 10.7227 33.7891 10.0723 32.8574 10.0723ZM34.4219 13.7812H35.6348C35.3477 14.9238 34.3281 15.627 32.8691 15.627C31.041 15.627 29.9219 14.373 29.9219 12.334C29.9219 10.2949 31.0645 9 32.8633 9C34.6387 9 35.7109 10.2129 35.7109 12.2168V12.6562H31.2051V12.7266C31.2461 13.8457 31.8965 14.5547 32.9043 14.5547C33.666 14.5547 34.1875 14.2793 34.4219 13.7812Z"
+ fill="white"
+ />
+ <path
+ d="M45.4844 9.12305L43.7324 15.5039H42.4258L41.1074 10.8047H41.0078L39.6953 15.5039H38.4004L36.6426 9.12305H37.9199L39.0625 13.9922H39.1562L40.4688 9.12305H41.6758L42.9883 13.9922H43.0879L44.2246 9.12305H45.4844Z"
+ fill="white"
+ />
+ </svg>
+);
+
 const themesMap: {
  [skinName in KnownSkinName]: {themeConfig: ThemeConfig; text: string; icon: React.ReactNode};
 } = {
@@ -90,6 +115,11 @@ const themesMap: {
  themeConfig: O2,
  icon: <O2Logo size={24} />,
  },
+ 'O2-new': {
+ text: 'O2 new',
+ themeConfig: O2_New,
+ icon: <O2NewLogo />,
+ },
  Telefonica: {
  text: 'Telefónica',
  themeConfig: Telefonica,

playroom/frame-component.tsx

@@ -13,6 +13,7 @@ import {
  VIVO_NEW_SKIN,
  TELEFONICA_SKIN,
  O2_SKIN,
+ O2_NEW_SKIN,
  TU_SKIN,
  MOVISTAR_SKIN,
 } from '../src';
@@ -44,7 +45,12 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
 
  ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
  ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
- ${skinName === MOVISTAR_SKIN || skinName === O2_SKIN ? 'body {font-family: "On Air"}' : ''}
+ ${
+ skinName === MOVISTAR_SKIN || skinName === O2_SKIN || skinName === O2_NEW_SKIN
+ ? 'body {font-family: "On Air"}'
+ : ''
+ }
+
 
  *[class^='_1fu0koy1'] {
  display: none;

playroom/preview-tools.css.ts

@@ -21,7 +21,7 @@ export const controls = style([
  paddingRight: 16,
  }),
  {
- gap: 16,
+ gap: 8,
  zIndex: 2,
  background: 'white',
  borderBottom: `1px solid ${skinVars.colors.divider}`,

playroom/themes.tsx

@@ -14,6 +14,7 @@ export const Movistar: ThemeConfig = {...themes.Movistar, ...common};
 export const Vivo: ThemeConfig = {...themes.Vivo, ...common};
 export const Vivo_New: ThemeConfig = {...themes.Vivo_New, ...common};
 export const O2: ThemeConfig = {...themes.O2, ...common};
+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 Tu: ThemeConfig = {...themes.Tu, ...common};
@@ -22,6 +23,7 @@ export const Movistar_iOS: ThemeConfig = {...Movistar, platformOverrides: {platf
 export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
 export const O2_iOS: ThemeConfig = {...O2, 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 Tu_iOS: ThemeConfig = {...Tu, platformOverrides: {platform: 'ios'}};

src/__screenshot_tests__/private-skin-components-screenshot-test.tsx

@@ -1,6 +1,6 @@
 import {openStoryPage} from '../test-utils';
 
-const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'O2-new', 'Tu'] as const;
 
 test.each(SKINS)('Components in %s', async (skin) => {
  const page = await openStoryPage({

src/index.tsx

@@ -186,6 +186,7 @@ export {
  VIVO_SKIN,
  VIVO_NEW_SKIN,
  O2_SKIN,
+ O2_NEW_SKIN,
  MOVISTAR_SKIN,
  TELEFONICA_SKIN,
  BLAU_SKIN,
@@ -196,6 +197,7 @@ export {getVivoSkin} from './skins/vivo';
 export {getVivoNewSkin} from './skins/vivo-new';
 export {getMovistarSkin} from './skins/movistar';
 export {getO2Skin} from './skins/o2';
+export {getO2NewSkin} from './skins/o2-new';
 export {getTelefonicaSkin} from './skins/telefonica';
 export {getBlauSkin} from './skins/blau';
 export {getTuSkin} from './skins/tu';

src/logo.tsx

@@ -6,6 +6,7 @@ import Touchable from './touchable';
 import {getMovistarSkin} from './skins/movistar';
 import {getVivoSkin} from './skins/vivo';
 import {getO2Skin} from './skins/o2';
+import {getO2NewSkin} from './skins/o2-new';
 import {getBlauSkin} from './skins/blau';
 import {getTuSkin} from './skins/tu';
 import {getTelefonicaSkin} from './skins/telefonica';
@@ -150,11 +151,12 @@ const VivoLogoImage = ({size, type}: LogoImageProps) => {
  );
 };
 
-const O2LogoImage = ({size, type}: LogoImageProps) => {
+const O2LogoImage = ({size, type, isO2NewSkin}: LogoImageProps & {isO2NewSkin: boolean}) => {
  const {isDarkMode} = useTheme();
  const isInverse = useIsInverseVariant();
  // todo WEB-761 what about classic?
- const {colors} = getO2Skin();
+ const {colors} = isO2NewSkin ? getO2NewSkin() : getO2Skin();
+
  const color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
 
  if (type === 'vertical') {
@@ -370,7 +372,8 @@ const LogoBase: React.FC<LogoBaseProps> = ({size = 48, skinName, type = 'isotype
  case 'Vivo-new':
  return <VivoLogoImage size={size} type={type} />;
  case 'O2':
- return <O2LogoImage size={size} type={type} />;
+ case 'O2-new':
+ return <O2LogoImage isO2NewSkin={skinName === 'O2-new'} size={size} type={type} />;
  case 'Telefonica':
  return <TelefonicaLogoImage size={size} type={type} />;
  case 'Blau':
@@ -494,6 +497,11 @@ export const O2Logo: React.FC<LogoProps> = ({size, type = 'isotype', ...props})
  <LogoBase skinName="O2" type={type} size={size} />
  </MaybeTouchableLogo>
 );
+export const O2NewLogo: React.FC<LogoProps> = ({size, type = 'isotype', ...props}) => (
+ <MaybeTouchableLogo {...props}>
+ <LogoBase skinName="O2" type={type} size={size} />
+ </MaybeTouchableLogo>
+);
 export const TelefonicaLogo: React.FC<LogoProps> = ({size, type = 'isotype', ...props}) => (
  <MaybeTouchableLogo {...props}>
  <LogoBase skinName="Telefonica" type={type} size={size} />

src/skins/constants.tsx

@@ -1,5 +1,6 @@
 export const MOVISTAR_SKIN = 'Movistar';
 export const O2_SKIN = 'O2';
+export const O2_NEW_SKIN = 'O2-new';
 export const VIVO_SKIN = 'Vivo';
 export const VIVO_NEW_SKIN = 'Vivo-new';
 export const TELEFONICA_SKIN = 'Telefonica';