diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx index 2e54722a88dd94..80e2ee0409b2eb 100644 --- a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx +++ b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { useTranslate } from 'i18n-calypso'; import { useEffect, useLayoutEffect, useState } from 'react'; import SocialLogo from 'social-logos'; -import { getAutomatticBrandingNoun } from '../utils'; +import { AutomatticBrand, getAutomatticBrandingNoun } from '../utils'; import type { FooterProps, PureFooterProps, LanguageOptions } from '../types'; import './style.scss'; @@ -61,10 +61,7 @@ export const PureUniversalNavbarFooter = ( { additionalCompanyLinks = null, onLanguageChange = defaultOnLanguageChange, localizeUrl = pureLocalizeUrl, - automatticBranding = { - article: __( 'An', __i18n_text_domain__ ), - noun: __( 'thingamajig', __i18n_text_domain__ ), - }, + automatticBranding, locale, languageOptions = allLanguageOptions, }: PureFooterProps ) => { @@ -275,7 +272,7 @@ export const PureUniversalNavbarFooter = ( {
  • - + { __( 'Privacy', __i18n_text_domain__ ) }{ ' ' } { __( 'Policy', __i18n_text_domain__ ) } @@ -438,17 +435,7 @@ export const PureUniversalNavbarFooter = ( {
    - { automatticBranding.article } - Automattic - - { automatticBranding.noun } + { automatticBranding }
    @@ -479,7 +466,9 @@ const UniversalNavbarFooter = ( { const isEnglishLocale = useIsEnglishLocale(); const pathNameWithoutLocale = currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 ); - const [ automatticBranding, setAutomatticBranding ] = useState( { article: '', noun: '' } ); + const [ automatticBranding, setAutomatticBranding ] = useState< + React.ReactElement | string | number + >( ); // Since this component renders in SSR, effects don't run there. As a result, // the markup needs to look ok _before_ any effects run. Using the isomorphic diff --git a/packages/wpcom-template-parts/src/utils.ts b/packages/wpcom-template-parts/src/utils.ts deleted file mode 100644 index d893e4bae91c3f..00000000000000 --- a/packages/wpcom-template-parts/src/utils.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { translate as translateMethod } from 'i18n-calypso'; - -export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { - const automatticRoger = [ - translate( 'An Automattic brainchild' ), - translate( 'An Automattic contraption' ), - translate( 'An Automattic creation' ), - translate( 'An Automattic experiment' ), - translate( 'An Automattic invention' ), - translate( 'An Automattic joint' ), - translate( 'An Automattic medley' ), - translate( 'An Automattic opus' ), - translate( 'An Automattic production' ), - translate( 'An Automattic ruckus' ), - translate( 'An Automattic thingamajig' ), - ]; - - const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]; - - return { - article: branding.split( 'Automattic' )[ 0 ], - noun: branding.split( 'Automattic' )[ 1 ], - }; -}; diff --git a/packages/wpcom-template-parts/src/utils.tsx b/packages/wpcom-template-parts/src/utils.tsx new file mode 100644 index 00000000000000..6c8993305b993a --- /dev/null +++ b/packages/wpcom-template-parts/src/utils.tsx @@ -0,0 +1,81 @@ +import { translate as translateMethod } from 'i18n-calypso'; + +export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { + const automatticRoger = [ + translate( 'An {{Automattic/}} brainchild', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} contraption', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} creation', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} experiment', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} invention', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} joint', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} medley', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} opus', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} production', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} ruckus', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} thingamajig', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + ]; + + const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]; + + return branding; +}; + +export function AutomatticBrand() { + return ( + <> + Automattic + + + ); +}