From ae0330d53708b74f20c46503b2c52a0ddc3961f6 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 8 Oct 2020 14:24:35 -0700
Subject: [PATCH 01/12] Add LanguagePicker as package

---
 package.json                                  |   5 +-
 packages/language-picker/.eslintrc.js         |  10 ++
 packages/language-picker/.storybook/main.js   |  26 ++++
 .../language-picker/.storybook/preview.js     |   1 +
 packages/language-picker/CHANGELOG.md         |   3 +
 packages/language-picker/README.md            |  26 ++++
 packages/language-picker/jest.config.js       |   5 +
 packages/language-picker/package.json         |  50 ++++++++
 packages/language-picker/src/index.ts         |   2 +
 .../src/language-picker.stories.tsx           |  62 ++++++++++
 .../language-picker/src/language-picker.tsx   | 117 ++++++++++++++++++
 packages/language-picker/src/style.scss       |  47 +++++++
 packages/language-picker/tsconfig.json        |  33 +++++
 13 files changed, 385 insertions(+), 2 deletions(-)
 create mode 100644 packages/language-picker/.eslintrc.js
 create mode 100644 packages/language-picker/.storybook/main.js
 create mode 100644 packages/language-picker/.storybook/preview.js
 create mode 100644 packages/language-picker/CHANGELOG.md
 create mode 100644 packages/language-picker/README.md
 create mode 100644 packages/language-picker/jest.config.js
 create mode 100644 packages/language-picker/package.json
 create mode 100644 packages/language-picker/src/index.ts
 create mode 100644 packages/language-picker/src/language-picker.stories.tsx
 create mode 100644 packages/language-picker/src/language-picker.tsx
 create mode 100644 packages/language-picker/src/style.scss
 create mode 100644 packages/language-picker/tsconfig.json

diff --git a/package.json b/package.json
index 160b53f4b0f77..ad89ab9675c23 100644
--- a/package.json
+++ b/package.json
@@ -158,8 +158,9 @@
 		"whybundled:server": "whybundled client/stats-server.json",
 		"composite-checkout-demo": "webpack-dev-server --config ./packages/composite-checkout/webpack.config.demo.js --mode development",
 		"components:storybook:start": "start-storybook -c packages/components/.storybook",
-		"search:storybook:start": "start-storybook -c packages/search/.storybook",
-		"media-library:storybook:start": "start-storybook -c packages/media-library/.storybook -h calypso.localhost -p 3001"
+		"language-picker:storybook:start": "start-storybook -c packages/language-picker/.storybook",
+		"media-library:storybook:start": "start-storybook -c packages/media-library/.storybook -h calypso.localhost -p 3001",
+		"search:storybook:start": "start-storybook -c packages/search/.storybook"
 	},
 	"dependencies": {
 		"@automattic/babel-plugin-i18n-calypso": "^1.2.0",
diff --git a/packages/language-picker/.eslintrc.js b/packages/language-picker/.eslintrc.js
new file mode 100644
index 0000000000000..aeaacd69b4ece
--- /dev/null
+++ b/packages/language-picker/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+	overrides: [
+		{
+			files: [ '**/test/**/*' ],
+			rules: {
+				'import/no-nodejs-modules': 'off',
+			},
+		},
+	],
+};
diff --git a/packages/language-picker/.storybook/main.js b/packages/language-picker/.storybook/main.js
new file mode 100644
index 0000000000000..9a84281147868
--- /dev/null
+++ b/packages/language-picker/.storybook/main.js
@@ -0,0 +1,26 @@
+const path = require( 'path' );
+
+module.exports = {
+	stories: [ '../src/**/*.stories.{js,jsx,ts,tsx}' ],
+	addons: [
+		'@storybook/addon-actions',
+		'@storybook/preset-scss',
+		{
+			name: '@storybook/preset-typescript',
+			options: {
+				tsLoaderOptions: {
+					transpileOnly: true,
+					configFile: path.resolve( __dirname, '../tsconfig.json' ),
+				},
+				tsDocgenLoaderOptions: {
+					tsconfigPath: path.resolve( __dirname, '../tsconfig.json' ),
+				},
+				forkTsCheckerWebpackPluginOptions: {
+					tsconfig: path.resolve( __dirname, '../tsconfig.json' ),
+					memoryLimit: 4096,
+				},
+				include: [ path.resolve( __dirname, '../src' ) ],
+			},
+		},
+	],
+};
diff --git a/packages/language-picker/.storybook/preview.js b/packages/language-picker/.storybook/preview.js
new file mode 100644
index 0000000000000..521d3335699b9
--- /dev/null
+++ b/packages/language-picker/.storybook/preview.js
@@ -0,0 +1 @@
+import '@wordpress/components/build-style/style.css';
diff --git a/packages/language-picker/CHANGELOG.md b/packages/language-picker/CHANGELOG.md
new file mode 100644
index 0000000000000..bec300287b9ef
--- /dev/null
+++ b/packages/language-picker/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 1.0.0
+
+- Add LanguagePicker
diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md
new file mode 100644
index 0000000000000..2bb92063ee93b
--- /dev/null
+++ b/packages/language-picker/README.md
@@ -0,0 +1,26 @@
+# LanguagePicker
+
+A language picker component extracted from Gutenboarding for the purposes of code sharing between Gutenboarding and Calypso.
+
+## Installation
+
+Install the components and the color schemes they depend on.
+
+```bash
+yarn add @automattic/language-picker
+```
+
+## Development Workflow
+
+This package is developed as part of the Calypso monorepo. Run `yarn`
+in the root of the repository to get the required `devDependencies`.
+
+### Tests
+
+`yarn run test-packages`
+
+`yarn run test-packages:watch`
+
+### Using [Storybook](https://storybook.js.org/)
+
+`yarn run language-picker:storybook:start`
diff --git a/packages/language-picker/jest.config.js b/packages/language-picker/jest.config.js
new file mode 100644
index 0000000000000..b94a8c8661cfe
--- /dev/null
+++ b/packages/language-picker/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+	preset: '@automattic/calypso-build',
+	rootDir: __dirname,
+	cacheDirectory: '<rootDir>/../../.cache/jest',
+};
diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
new file mode 100644
index 0000000000000..742b9e1c32c89
--- /dev/null
+++ b/packages/language-picker/package.json
@@ -0,0 +1,50 @@
+{
+	"name": "@automattic/language-picker",
+	"version": "1.0.0-alpha.3",
+	"description": "Automattic Language Picker",
+	"homepage": "https://github.com/Automattic/wp-calypso",
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic Inc.",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Automattic/wp-calypso.git",
+		"directory": "packages/language-picker"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"bugs": {
+		"url": "https://github.com/Automattic/wp-calypso/issues"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"types": "dist/types",
+	"dependencies": {
+		"@automattic/react-i18n": "file:../react-i18n",
+		"@babel/runtime": "^7.11.1",
+		"@wordpress/base-styles": "^2.0.1",
+		"@wordpress/components": "^10.0.5",
+		"@wordpress/i18n": "^3.14.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8",
+		"react-dom": "^16.8"
+	},
+	"devDependencies": {
+		"@storybook/addon-actions": "^5.3.18",
+		"enzyme": "^3.11.0"
+	},
+	"scripts": {
+		"clean": "npx rimraf dist && tsc --build --clean",
+		"prepublish": "yarn run clean",
+		"prepare": "transpile && tsc && copy-assets"
+	}
+}
diff --git a/packages/language-picker/src/index.ts b/packages/language-picker/src/index.ts
new file mode 100644
index 0000000000000..f16eecca2ec25
--- /dev/null
+++ b/packages/language-picker/src/index.ts
@@ -0,0 +1,2 @@
+export * from './language-picker';
+export { default } from './language-picker';
diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx
new file mode 100644
index 0000000000000..b0439613b1d68
--- /dev/null
+++ b/packages/language-picker/src/language-picker.stories.tsx
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+import LanguagePicker, { Language, LanguageGroup } from '.';
+
+export default { title: 'LanguagePicker' };
+
+const LANGUAGES: Language[] = [
+	{
+		value: 1,
+		langSlug: 'en',
+		name: 'English',
+		wpLocale: 'en_US',
+		popular: 1,
+		territories: [ '019' ],
+	},
+	{ value: 71, langSlug: 'th', name: 'ไทย', wpLocale: 'th', territories: [ '035' ] },
+
+	{ value: 455, langSlug: 'tl', name: 'Tagalog', wpLocale: 'tl', territories: [ '035' ] },
+	{ value: 481, langSlug: 'am', name: 'አማርኛ', wpLocale: 'am', territories: [ '002' ] },
+	{
+		value: 482,
+		langSlug: 'en-gb',
+		name: 'English (UK)',
+		wpLocale: 'en_GB',
+		territories: [ '154' ],
+	},
+];
+
+const LANGUAGE_GROUPS: LanguageGroup[] = [
+	{
+		id: 'popular',
+		name: ( translate ) => translate( 'Popular languages' ),
+	},
+	{
+		id: 'africa-middle-east',
+		name: ( translate ) => translate( 'Africa and Middle East' ),
+		subTerritories: [ '145', '002' ],
+		countries: [ 'AM' ],
+	},
+	{
+		id: 'asia-pacific',
+		default: true,
+		name: ( translate ) => translate( 'Asia-Pacific' ),
+		subTerritories: [ '143', '009', '030', '034', '035' ],
+		countries: [ 'TL', 'TH' ],
+	},
+];
+
+export const _default = () => {
+	return (
+		<LanguagePicker
+			// eslint-disable-next-line no-console
+			onSelectLanguage={ ( language ) => console.log( language ) }
+			languageGroups={ LANGUAGE_GROUPS }
+			languages={ LANGUAGES }
+			defaultLananguageGroupId="popular"
+		/>
+	);
+};
diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx
new file mode 100644
index 0000000000000..15ba8deabbe53
--- /dev/null
+++ b/packages/language-picker/src/language-picker.tsx
@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { useI18n } from '@automattic/react-i18n';
+
+/**
+ * WordPress dependencies
+ */
+import { I18n } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+export type LanguageGroup = {
+	id: string;
+	name: ( translate: I18n[ '__' ] ) => string;
+	subTerritories?: string[];
+	countries?: string[];
+	default?: boolean;
+};
+
+type LanguageSlug = string;
+type WPLocale = string;
+
+type BaseLanguage = {
+	langSlug: LanguageSlug;
+	name: string;
+	popular?: number;
+	rtl?: boolean;
+	territories: string[];
+	value: number;
+	wpLocale: WPLocale | '';
+};
+
+type SubLanguage = BaseLanguage & { parentLangSlug: string };
+
+export type Language = BaseLanguage | SubLanguage;
+
+type Props = {
+	onSelectLanguage: ( language: Language ) => void;
+	languages: Language[];
+	languageGroups: LanguageGroup[];
+	defaultLananguageGroupId: string;
+};
+
+const LanguagePicker = ( {
+	onSelectLanguage,
+	languages,
+	languageGroups,
+	defaultLananguageGroupId,
+}: Props ) => {
+	const { __ } = useI18n();
+	const [ filter, setFilter ] = useState( defaultLananguageGroupId );
+
+	const getFilteredLanguages = () => {
+		switch ( filter ) {
+			case 'popular':
+				return languages
+					.filter( ( language ) => language.popular )
+					.sort( ( a, b ) => ( a.popular as number ) - ( b.popular as number ) );
+			default: {
+				const languageGroup = languageGroups.find( ( l ) => l.id === filter );
+				const subTerritories = languageGroup ? languageGroup.subTerritories : [];
+				return languages
+					.filter( ( language ) =>
+						language.territories.some( ( t ) => subTerritories?.includes( t ) )
+					)
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) );
+			}
+		}
+	};
+
+	const renderCategoryButtons = () => {
+		return languageGroups.map( ( languageGroup ) => {
+			const isSelected = filter === languageGroup.id;
+
+			const onClick = () => {
+				setFilter( languageGroup.id );
+			};
+
+			return (
+				<div key={ languageGroup.id }>
+					<Button onClick={ onClick } className="language-picker__language-group">
+						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name( __ ) }</span>
+					</Button>
+				</div>
+			);
+		} );
+	};
+
+	return (
+		<>
+			<div className="language-picker__regions-label">{ __( 'regions' ) }</div>
+			<div className="language-picker__content">
+				<div className="language-picker__category-filters">{ renderCategoryButtons() }</div>
+				<div className="language-picker__language-buttons">
+					{ getFilteredLanguages().map( ( language ) => (
+						<Button
+							className="language-picker__language-button"
+							key={ language.langSlug }
+							onClick={ () => onSelectLanguage( language ) }
+							title={ language.name }
+						>
+							<span lang={ language.langSlug }>{ language.name }</span>
+						</Button>
+					) ) }
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default LanguagePicker;
diff --git a/packages/language-picker/src/style.scss b/packages/language-picker/src/style.scss
new file mode 100644
index 0000000000000..9d7ca759f2fe2
--- /dev/null
+++ b/packages/language-picker/src/style.scss
@@ -0,0 +1,47 @@
+@import '~@wordpress/base-styles/breakpoints';
+@import '~@wordpress/base-styles/mixins';
+@import '~@wordpress/base-styles/variables';
+
+.language-picker__language-group {
+	width: 100%;
+}
+
+.language-picker__language-group > span {
+	padding-bottom: 4px;
+	&.is-selected {
+		padding-bottom: 2px;
+		border-bottom: 2px solid #3582c4;
+	}
+}
+
+.language-picker__regions-label {
+	font-family: $default-font;
+	margin: 6px 12px;
+	color: $gray-600;
+	/* stylelint-disable-next-line scales/font-size */
+	font-size: 13px;
+	text-transform: uppercase;
+}
+
+.language-picker__content {
+	display: flex;
+}
+
+.language-picker__category-filters {
+	min-width: 170px;
+
+	@include break-small {
+		min-width: 220px;
+		margin-right: 60px;
+	}
+}
+
+.language-picker__language-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+}
+
+.language-picker__language-button {
+	width: 165px;
+}
diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json
new file mode 100644
index 0000000000000..bdf5a4af4ced0
--- /dev/null
+++ b/packages/language-picker/tsconfig.json
@@ -0,0 +1,33 @@
+{
+	"compilerOptions": {
+		"target": "ES2016",
+		"module": "esnext",
+		"allowJs": true,
+		"checkJs": false,
+		"jsx": "react",
+		"declaration": true,
+		"declarationDir": "dist/types",
+		"outDir": "dist/types",
+		"emitDeclarationOnly": true,
+		"isolatedModules": true,
+
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+
+		"forceConsistentCasingInFileNames": true,
+
+		"typeRoots": [ "../../node_modules/@types" ],
+		"types": [],
+		"rootDir": "src",
+
+		"composite": true
+	},
+	"include": [ "src" ],
+	"exclude": [ "**/docs/*", "**/test/*" ]
+}

From 560956ad0fa9768e892d2320865fa8f69baea127 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 8 Oct 2020 14:25:18 -0700
Subject: [PATCH 02/12] Use LanguagePicker in Gutenboarding

---
 .../onboarding-block/language/index.tsx       | 69 +++----------------
 .../onboarding-block/language/style.scss      | 44 ------------
 client/package.json                           |  1 +
 yarn.lock                                     | 16 +++++
 4 files changed, 28 insertions(+), 102 deletions(-)

diff --git a/client/landing/gutenboarding/onboarding-block/language/index.tsx b/client/landing/gutenboarding/onboarding-block/language/index.tsx
index dea9689c91c38..cacded57d57a0 100644
--- a/client/landing/gutenboarding/onboarding-block/language/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/language/index.tsx
@@ -3,15 +3,15 @@
  */
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button } from '@wordpress/components';
 import { useI18n } from '@automattic/react-i18n';
 import { ActionButtons, BackButton, Title } from '@automattic/onboarding';
+import LanguagePicker from '@automattic/language-picker';
 
 /**
  * Internal dependencies
  */
 import { ChangeLocaleContextConsumer } from '../../components/locale-context';
-import { languages, Language } from '../../../../languages';
+import { languages } from '../../../../languages';
 import {
 	LANGUAGE_GROUPS,
 	DEFAULT_LANGUAGE_GROUP,
@@ -24,7 +24,6 @@ import './style.scss';
 
 const LanguageStep: React.FunctionComponent = () => {
 	const { __ } = useI18n();
-	const [ filter, setFilter ] = React.useState< string >( DEFAULT_LANGUAGE_GROUP );
 
 	const history = useHistory();
 
@@ -32,42 +31,6 @@ const LanguageStep: React.FunctionComponent = () => {
 		history.goBack();
 	};
 
-	const getFilteredLanguages = () => {
-		switch ( filter ) {
-			case 'popular':
-				return languages
-					.filter( ( language: Language ) => language.popular )
-					.sort(
-						( a: Language, b: Language ) => ( a.popular as number ) - ( b.popular as number )
-					);
-			default: {
-				const languageGroup = LANGUAGE_GROUPS.find( ( l ) => l.id === filter );
-				const subTerritories = languageGroup ? languageGroup.subTerritories : null;
-				return languages
-					.filter( ( language: Language ) =>
-						language.territories.some( ( t ) => subTerritories?.includes( t ) )
-					)
-					.sort( ( a: Language, b: Language ) => a.name.localeCompare( b.name ) );
-			}
-		}
-	};
-
-	const renderCategoryButtons = () => {
-		return LANGUAGE_GROUPS.map( ( languageGroup ) => {
-			const isSelected = filter === languageGroup.id;
-
-			const onClick = () => {
-				setFilter( languageGroup.id );
-			};
-			return (
-				<div key={ languageGroup.id }>
-					<Button onClick={ onClick } className={ 'language__language-group' }>
-						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name( __ ) }</span>
-					</Button>
-				</div>
-			);
-		} );
-	};
 	return (
 		<ChangeLocaleContextConsumer>
 			{ ( changeLocale ) => (
@@ -78,25 +41,15 @@ const LanguageStep: React.FunctionComponent = () => {
 							<BackButton onClick={ goBack } />
 						</ActionButtons>
 					</div>
-					<div className="language__regions-label">{ __( 'regions' ) }</div>
-					<div className="language__page-content">
-						<div className="language__category-filters">{ renderCategoryButtons() }</div>
-						<div className="language__language-buttons">
-							{ getFilteredLanguages().map( ( language: Language ) => (
-								<Button
-									className="language__language-item"
-									key={ language.langSlug }
-									onClick={ () => {
-										changeLocale( language.langSlug );
-										goBack();
-									} }
-									title={ language.name }
-								>
-									<span lang={ language.langSlug }>{ language.name }</span>
-								</Button>
-							) ) }
-						</div>
-					</div>
+					<LanguagePicker
+						languageGroups={ LANGUAGE_GROUPS }
+						defaultLananguageGroupId={ DEFAULT_LANGUAGE_GROUP }
+						languages={ languages }
+						onSelectLanguage={ ( language ) => {
+							changeLocale( language.langSlug );
+							goBack();
+						} }
+					/>
 				</div>
 			) }
 		</ChangeLocaleContextConsumer>
diff --git a/client/landing/gutenboarding/onboarding-block/language/style.scss b/client/landing/gutenboarding/onboarding-block/language/style.scss
index d71595b4e2fb2..8daf939b75ac0 100644
--- a/client/landing/gutenboarding/onboarding-block/language/style.scss
+++ b/client/landing/gutenboarding/onboarding-block/language/style.scss
@@ -1,49 +1,5 @@
-@import '../../mixins';
-
 .language__heading {
 	margin: 64px 0 80px;
 	display: flex;
 	justify-content: space-between;
 }
-
-.language__language-group {
-	width: 100%;
-}
-
-.language__language-group > span {
-	padding-bottom: 4px;
-	&.is-selected {
-		padding-bottom: 2px;
-		border-bottom: 2px solid var( --mainColor );
-	}
-}
-
-.language__regions-label {
-	margin: 6px 12px;
-	color: var( --studio-gray-50 );
-	font-size: 13px;
-	text-transform: uppercase;
-}
-
-.language__page-content {
-	display: flex;
-}
-
-.language__category-filters {
-	min-width: 170px;
-
-	@include break-small {
-		min-width: 220px;
-		margin-right: 60px;
-	}
-}
-
-.language__language-buttons {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-}
-
-.language__language-item {
-	width: 165px;
-}
diff --git a/client/package.json b/client/package.json
index 063b6dc56781b..7f0152b86b853 100644
--- a/client/package.json
+++ b/client/package.json
@@ -24,6 +24,7 @@
 		"@automattic/domain-picker": "^1.0.0-alpha.0",
 		"@automattic/format-currency": "^1.0.0-alpha.0",
 		"@automattic/lasagna": "^0.6.1",
+		"@automattic/language-picker": "file:../packages/language-picker",
 		"@automattic/load-script": "^1.0.0",
 		"@automattic/material-design-icons": "^1.0.0",
 		"@automattic/notifications": "^1.0.0",
diff --git a/yarn.lock b/yarn.lock
index 92ef88dabd252..3cf88847e1b8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,6 +16,15 @@
   resolved "https://registry.yarnpkg.com/@automattic/color-studio/-/color-studio-2.3.0.tgz#6549e77f823514bdcf520cb2c48932c2c9db379f"
   integrity sha512-GRMV4PMtn2iE+30+RP33LyJSe4Qp8oILFNvk+iF8zd0LzUUaErZu86rk8YpEcLvFJzOU2BTXSewSdwyGc/sa1g==
 
+"@automattic/language-picker@file:packages/language-picker":
+  version "1.0.0-alpha.3"
+  dependencies:
+    "@automattic/react-i18n" "file:../../Library/Caches/Yarn/v6/npm-@automattic-language-picker-1.0.0-alpha.3-0c765296-2de2-4d1c-a515-a0556d288183-1602189433742/node_modules/@automattic/react-i18n"
+    "@babel/runtime" "^7.11.1"
+    "@wordpress/base-styles" "^2.0.1"
+    "@wordpress/components" "^10.0.5"
+    "@wordpress/i18n" "^3.14.0"
+
 "@automattic/lasagna@^0.6.1":
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/@automattic/lasagna/-/lasagna-0.6.1.tgz#98984f268e3186c3d4455f7f2bc324d509910f0c"
@@ -34,6 +43,13 @@
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+"@automattic/react-i18n@file:packages/react-i18n":
+  version "1.0.0-alpha.0"
+  dependencies:
+    "@wordpress/compose" "1.x.x - 3.x.x"
+    "@wordpress/i18n" "^3.14.0"
+    tslib "^1.10.0"
+
 "@automattic/react-virtualized@^9.21.2":
   version "9.21.2"
   resolved "https://registry.yarnpkg.com/@automattic/react-virtualized/-/react-virtualized-9.21.2.tgz#ea14243e7e7811eaa14daed3f0a6f4579208996f"

From 467acae200673348ff4bff8ac2a1d0f3fafd5f55 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 8 Oct 2020 15:34:14 -0700
Subject: [PATCH 03/12] Correct references to language-picker package

---
 client/package.json                   | 2 +-
 client/tsconfig.json                  | 1 +
 packages/language-picker/package.json | 2 +-
 yarn.lock                             | 9 ---------
 4 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/client/package.json b/client/package.json
index 7f0152b86b853..35c19313b7c08 100644
--- a/client/package.json
+++ b/client/package.json
@@ -24,7 +24,7 @@
 		"@automattic/domain-picker": "^1.0.0-alpha.0",
 		"@automattic/format-currency": "^1.0.0-alpha.0",
 		"@automattic/lasagna": "^0.6.1",
-		"@automattic/language-picker": "file:../packages/language-picker",
+		"@automattic/language-picker": "^1.0.0",
 		"@automattic/load-script": "^1.0.0",
 		"@automattic/material-design-icons": "^1.0.0",
 		"@automattic/notifications": "^1.0.0",
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 2caaba361e2f8..31ec8718e27c8 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -20,6 +20,7 @@
 		{ "path": "../packages/calypso-analytics" },
 		{ "path": "../packages/components" },
 		{ "path": "../packages/data-stores" },
+		{ "path": "../packages/language-picker" },
 		{ "path": "../packages/media-library" },
 		{ "path": "../packages/react-i18n" }
 	],
diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
index 742b9e1c32c89..9f6c0091f1007 100644
--- a/packages/language-picker/package.json
+++ b/packages/language-picker/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/language-picker",
-	"version": "1.0.0-alpha.3",
+	"version": "1.0.0",
 	"description": "Automattic Language Picker",
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"license": "GPL-2.0-or-later",
diff --git a/yarn.lock b/yarn.lock
index 3cf88847e1b8f..cfa08dc4e757b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,15 +16,6 @@
   resolved "https://registry.yarnpkg.com/@automattic/color-studio/-/color-studio-2.3.0.tgz#6549e77f823514bdcf520cb2c48932c2c9db379f"
   integrity sha512-GRMV4PMtn2iE+30+RP33LyJSe4Qp8oILFNvk+iF8zd0LzUUaErZu86rk8YpEcLvFJzOU2BTXSewSdwyGc/sa1g==
 
-"@automattic/language-picker@file:packages/language-picker":
-  version "1.0.0-alpha.3"
-  dependencies:
-    "@automattic/react-i18n" "file:../../Library/Caches/Yarn/v6/npm-@automattic-language-picker-1.0.0-alpha.3-0c765296-2de2-4d1c-a515-a0556d288183-1602189433742/node_modules/@automattic/react-i18n"
-    "@babel/runtime" "^7.11.1"
-    "@wordpress/base-styles" "^2.0.1"
-    "@wordpress/components" "^10.0.5"
-    "@wordpress/i18n" "^3.14.0"
-
 "@automattic/lasagna@^0.6.1":
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/@automattic/lasagna/-/lasagna-0.6.1.tgz#98984f268e3186c3d4455f7f2bc324d509910f0c"

From 755018c14038a03cbee372d80c38d56f4588db01 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Tue, 13 Oct 2020 08:30:11 -0700
Subject: [PATCH 04/12] Clean up package

---
 packages/language-picker/.eslintrc.js   | 10 ----------
 packages/language-picker/README.md      |  8 --------
 packages/language-picker/jest.config.js |  5 -----
 packages/language-picker/package.json   |  3 +--
 packages/language-picker/tsconfig.json  |  3 +--
 5 files changed, 2 insertions(+), 27 deletions(-)
 delete mode 100644 packages/language-picker/.eslintrc.js
 delete mode 100644 packages/language-picker/jest.config.js

diff --git a/packages/language-picker/.eslintrc.js b/packages/language-picker/.eslintrc.js
deleted file mode 100644
index aeaacd69b4ece..0000000000000
--- a/packages/language-picker/.eslintrc.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
-	overrides: [
-		{
-			files: [ '**/test/**/*' ],
-			rules: {
-				'import/no-nodejs-modules': 'off',
-			},
-		},
-	],
-};
diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md
index 2bb92063ee93b..3a58b59f75e99 100644
--- a/packages/language-picker/README.md
+++ b/packages/language-picker/README.md
@@ -4,8 +4,6 @@ A language picker component extracted from Gutenboarding for the purposes of cod
 
 ## Installation
 
-Install the components and the color schemes they depend on.
-
 ```bash
 yarn add @automattic/language-picker
 ```
@@ -15,12 +13,6 @@ yarn add @automattic/language-picker
 This package is developed as part of the Calypso monorepo. Run `yarn`
 in the root of the repository to get the required `devDependencies`.
 
-### Tests
-
-`yarn run test-packages`
-
-`yarn run test-packages:watch`
-
 ### Using [Storybook](https://storybook.js.org/)
 
 `yarn run language-picker:storybook:start`
diff --git a/packages/language-picker/jest.config.js b/packages/language-picker/jest.config.js
deleted file mode 100644
index b94a8c8661cfe..0000000000000
--- a/packages/language-picker/jest.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-	preset: '@automattic/calypso-build',
-	rootDir: __dirname,
-	cacheDirectory: '<rootDir>/../../.cache/jest',
-};
diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
index 9f6c0091f1007..b8a02151ee455 100644
--- a/packages/language-picker/package.json
+++ b/packages/language-picker/package.json
@@ -39,8 +39,7 @@
 		"react-dom": "^16.8"
 	},
 	"devDependencies": {
-		"@storybook/addon-actions": "^5.3.18",
-		"enzyme": "^3.11.0"
+		"@storybook/addon-actions": "^5.3.18"
 	},
 	"scripts": {
 		"clean": "npx rimraf dist && tsc --build --clean",
diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json
index bdf5a4af4ced0..abb477014a378 100644
--- a/packages/language-picker/tsconfig.json
+++ b/packages/language-picker/tsconfig.json
@@ -28,6 +28,5 @@
 
 		"composite": true
 	},
-	"include": [ "src" ],
-	"exclude": [ "**/docs/*", "**/test/*" ]
+	"include": [ "src" ]
 }

From ab755b923288ed2614f74b68fead46b3f402976a Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Wed, 14 Oct 2020 09:04:11 -0700
Subject: [PATCH 05/12] Remove react-i18n dependency that was breaking
 storybook

---
 packages/language-picker/package.json                    | 1 -
 packages/language-picker/src/language-picker.stories.tsx | 8 ++++----
 packages/language-picker/src/language-picker.tsx         | 8 +++-----
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
index b8a02151ee455..073ac8ed57a0b 100644
--- a/packages/language-picker/package.json
+++ b/packages/language-picker/package.json
@@ -28,7 +28,6 @@
 	],
 	"types": "dist/types",
 	"dependencies": {
-		"@automattic/react-i18n": "file:../react-i18n",
 		"@babel/runtime": "^7.11.1",
 		"@wordpress/base-styles": "^2.0.1",
 		"@wordpress/components": "^10.0.5",
diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx
index b0439613b1d68..2b6bf1e9afd6b 100644
--- a/packages/language-picker/src/language-picker.stories.tsx
+++ b/packages/language-picker/src/language-picker.stories.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React from 'react';
+import { __ } from '@wordpress/i18n';
 
 import LanguagePicker, { Language, LanguageGroup } from '.';
 
@@ -17,7 +18,6 @@ const LANGUAGES: Language[] = [
 		territories: [ '019' ],
 	},
 	{ value: 71, langSlug: 'th', name: 'ไทย', wpLocale: 'th', territories: [ '035' ] },
-
 	{ value: 455, langSlug: 'tl', name: 'Tagalog', wpLocale: 'tl', territories: [ '035' ] },
 	{ value: 481, langSlug: 'am', name: 'አማርኛ', wpLocale: 'am', territories: [ '002' ] },
 	{
@@ -32,18 +32,18 @@ const LANGUAGES: Language[] = [
 const LANGUAGE_GROUPS: LanguageGroup[] = [
 	{
 		id: 'popular',
-		name: ( translate ) => translate( 'Popular languages' ),
+		name: () => __( 'Popular languages' ),
 	},
 	{
 		id: 'africa-middle-east',
-		name: ( translate ) => translate( 'Africa and Middle East' ),
+		name: () => __( 'Africa and Middle East' ),
 		subTerritories: [ '145', '002' ],
 		countries: [ 'AM' ],
 	},
 	{
 		id: 'asia-pacific',
 		default: true,
-		name: ( translate ) => translate( 'Asia-Pacific' ),
+		name: () => __( 'Asia-Pacific' ),
 		subTerritories: [ '143', '009', '030', '034', '035' ],
 		countries: [ 'TL', 'TH' ],
 	},
diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx
index 15ba8deabbe53..2b41bcb3eaed7 100644
--- a/packages/language-picker/src/language-picker.tsx
+++ b/packages/language-picker/src/language-picker.tsx
@@ -2,13 +2,12 @@
  * External dependencies
  */
 import React, { useState } from 'react';
-import { useI18n } from '@automattic/react-i18n';
 
 /**
  * WordPress dependencies
  */
-import { I18n } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Style dependencies
@@ -17,7 +16,7 @@ import './style.scss';
 
 export type LanguageGroup = {
 	id: string;
-	name: ( translate: I18n[ '__' ] ) => string;
+	name: () => string;
 	subTerritories?: string[];
 	countries?: string[];
 	default?: boolean;
@@ -53,7 +52,6 @@ const LanguagePicker = ( {
 	languageGroups,
 	defaultLananguageGroupId,
 }: Props ) => {
-	const { __ } = useI18n();
 	const [ filter, setFilter ] = useState( defaultLananguageGroupId );
 
 	const getFilteredLanguages = () => {
@@ -85,7 +83,7 @@ const LanguagePicker = ( {
 			return (
 				<div key={ languageGroup.id }>
 					<Button onClick={ onClick } className="language-picker__language-group">
-						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name( __ ) }</span>
+						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name() }</span>
 					</Button>
 				</div>
 			);

From e6322956518b952d7916b0495c5ff76aa50003e7 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 15 Oct 2020 08:32:04 -0700
Subject: [PATCH 06/12] Fix typo and add i18n documentation

---
 packages/language-picker/README.md                     |  4 ++++
 .../language-picker/src/language-picker.stories.tsx    |  1 -
 packages/language-picker/src/language-picker.tsx       | 10 ++--------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md
index 3a58b59f75e99..cd39e3ad9b1fb 100644
--- a/packages/language-picker/README.md
+++ b/packages/language-picker/README.md
@@ -8,6 +8,10 @@ A language picker component extracted from Gutenboarding for the purposes of cod
 yarn add @automattic/language-picker
 ```
 
+## Internationalization
+
+This package depends directly on `@wordpress/i18n` for translations and the existence of locale data is assumed. This means consumers must provide the locale data for this package.
+
 ## Development Workflow
 
 This package is developed as part of the Calypso monorepo. Run `yarn`
diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx
index 2b6bf1e9afd6b..e9c684a1a2184 100644
--- a/packages/language-picker/src/language-picker.stories.tsx
+++ b/packages/language-picker/src/language-picker.stories.tsx
@@ -56,7 +56,6 @@ export const _default = () => {
 			onSelectLanguage={ ( language ) => console.log( language ) }
 			languageGroups={ LANGUAGE_GROUPS }
 			languages={ LANGUAGES }
-			defaultLananguageGroupId="popular"
 		/>
 	);
 };
diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx
index 2b41bcb3eaed7..6f2da4a187c1b 100644
--- a/packages/language-picker/src/language-picker.tsx
+++ b/packages/language-picker/src/language-picker.tsx
@@ -43,16 +43,10 @@ type Props = {
 	onSelectLanguage: ( language: Language ) => void;
 	languages: Language[];
 	languageGroups: LanguageGroup[];
-	defaultLananguageGroupId: string;
 };
 
-const LanguagePicker = ( {
-	onSelectLanguage,
-	languages,
-	languageGroups,
-	defaultLananguageGroupId,
-}: Props ) => {
-	const [ filter, setFilter ] = useState( defaultLananguageGroupId );
+const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props ) => {
+	const [ filter, setFilter ] = useState( languageGroups[ 0 ].id );
 
 	const getFilteredLanguages = () => {
 		switch ( filter ) {

From 050e38f2886d46f63d51ad32599645938a463ae1 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 15 Oct 2020 09:54:41 -0700
Subject: [PATCH 07/12] Commit missing yarn.lock changes

---
 yarn.lock | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index cfa08dc4e757b..92ef88dabd252 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,13 +34,6 @@
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
-"@automattic/react-i18n@file:packages/react-i18n":
-  version "1.0.0-alpha.0"
-  dependencies:
-    "@wordpress/compose" "1.x.x - 3.x.x"
-    "@wordpress/i18n" "^3.14.0"
-    tslib "^1.10.0"
-
 "@automattic/react-virtualized@^9.21.2":
   version "9.21.2"
   resolved "https://registry.yarnpkg.com/@automattic/react-virtualized/-/react-virtualized-9.21.2.tgz#ea14243e7e7811eaa14daed3f0a6f4579208996f"

From 29342edc9905033f24f136d07e5d8921b714bf24 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 15 Oct 2020 10:11:46 -0700
Subject: [PATCH 08/12] Remove non-existent prop

---
 .../gutenboarding/onboarding-block/language/index.tsx       | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/landing/gutenboarding/onboarding-block/language/index.tsx b/client/landing/gutenboarding/onboarding-block/language/index.tsx
index cacded57d57a0..071befa5ded3b 100644
--- a/client/landing/gutenboarding/onboarding-block/language/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/language/index.tsx
@@ -12,10 +12,7 @@ import LanguagePicker from '@automattic/language-picker';
  */
 import { ChangeLocaleContextConsumer } from '../../components/locale-context';
 import { languages } from '../../../../languages';
-import {
-	LANGUAGE_GROUPS,
-	DEFAULT_LANGUAGE_GROUP,
-} from '../../../../components/language-picker/constants';
+import { LANGUAGE_GROUPS } from '../../../../components/language-picker/constants';
 
 /**
  * Style dependencies
@@ -43,7 +40,6 @@ const LanguageStep: React.FunctionComponent = () => {
 					</div>
 					<LanguagePicker
 						languageGroups={ LANGUAGE_GROUPS }
-						defaultLananguageGroupId={ DEFAULT_LANGUAGE_GROUP }
 						languages={ languages }
 						onSelectLanguage={ ( language ) => {
 							changeLocale( language.langSlug );

From 212a8b9690887c01a645e57b9be3003140597309 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Tue, 20 Oct 2020 08:48:03 -0700
Subject: [PATCH 09/12] Use wp/i18n to translate region names

---
 client/components/language-picker/constants.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/components/language-picker/constants.js b/client/components/language-picker/constants.js
index c5c7bf04b3da9..b1a55fe2d1975 100644
--- a/client/components/language-picker/constants.js
+++ b/client/components/language-picker/constants.js
@@ -1,6 +1,10 @@
 /**
  * @jest-environment jsdom
  */
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
 
 /*
  * List of territories that languages are grouped into (displayed as tabs in the UI).
@@ -23,11 +27,11 @@ export const DEFAULT_LANGUAGE_GROUP = 'popular';
 export const LANGUAGE_GROUPS = [
 	{
 		id: 'popular',
-		name: ( translate ) => translate( 'Popular languages' ),
+		name: () => __( 'Popular languages' ),
 	},
 	{
 		id: 'africa-middle-east',
-		name: ( translate ) => translate( 'Africa and Middle East' ),
+		name: () => __( 'Africa and Middle East' ),
 		subTerritories: [ '145', '002' ],
 		countries: [
 			'AE',
@@ -112,7 +116,7 @@ export const LANGUAGE_GROUPS = [
 	},
 	{
 		id: 'americas',
-		name: ( translate ) => translate( 'Americas' ),
+		name: () => __( 'Americas' ),
 		subTerritories: [ '019' ],
 		countries: [
 			'AG',
@@ -175,7 +179,7 @@ export const LANGUAGE_GROUPS = [
 	{
 		id: 'asia-pacific',
 		default: true,
-		name: ( translate ) => translate( 'Asia-Pacific' ),
+		name: () => __( 'Asia-Pacific' ),
 		subTerritories: [ '143', '009', '030', '034', '035' ],
 		countries: [
 			'AC',
@@ -254,13 +258,13 @@ export const LANGUAGE_GROUPS = [
 	},
 	{
 		id: 'eastern-europe',
-		name: ( translate ) => translate( 'Eastern Europe' ),
+		name: () => __( 'Eastern Europe' ),
 		subTerritories: [ '151' ],
 		countries: [ 'BG', 'BY', 'CZ', 'HU', 'MD', 'PL', 'RO', 'RU', 'SK', 'UA' ],
 	},
 	{
 		id: 'western-europe',
-		name: ( translate ) => translate( 'Western Europe' ),
+		name: () => __( 'Western Europe' ),
 		subTerritories: [ '154', '155', '039' ],
 		countries: [
 			'AD',

From e1d2ca7a5a7d0ffb1798ad028d3180769cc9eaff Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Tue, 20 Oct 2020 08:53:24 -0700
Subject: [PATCH 10/12] Wrap all styles and use more specific name

---
 .../language-picker/src/language-picker.tsx   | 19 +++--
 packages/language-picker/src/style.scss       | 82 ++++++++++---------
 2 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx
index 6f2da4a187c1b..bd1dd8ac2f181 100644
--- a/packages/language-picker/src/language-picker.tsx
+++ b/packages/language-picker/src/language-picker.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
 /**
  * External dependencies
  */
@@ -76,7 +77,7 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 
 			return (
 				<div key={ languageGroup.id }>
-					<Button onClick={ onClick } className="language-picker__language-group">
+					<Button onClick={ onClick } className="language-picker-component__language-group">
 						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name() }</span>
 					</Button>
 				</div>
@@ -85,14 +86,16 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 	};
 
 	return (
-		<>
-			<div className="language-picker__regions-label">{ __( 'regions' ) }</div>
-			<div className="language-picker__content">
-				<div className="language-picker__category-filters">{ renderCategoryButtons() }</div>
-				<div className="language-picker__language-buttons">
+		<div className="language-picker-component">
+			<div className="language-picker-component__regions-label">{ __( 'regions' ) }</div>
+			<div className="language-picker-component__content">
+				<div className="language-picker-component__category-filters">
+					{ renderCategoryButtons() }
+				</div>
+				<div className="language-picker-component__language-buttons">
 					{ getFilteredLanguages().map( ( language ) => (
 						<Button
-							className="language-picker__language-button"
+							className="language-picker-component__language-button"
 							key={ language.langSlug }
 							onClick={ () => onSelectLanguage( language ) }
 							title={ language.name }
@@ -102,7 +105,7 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 					) ) }
 				</div>
 			</div>
-		</>
+		</div>
 	);
 };
 
diff --git a/packages/language-picker/src/style.scss b/packages/language-picker/src/style.scss
index 9d7ca759f2fe2..659900cc51341 100644
--- a/packages/language-picker/src/style.scss
+++ b/packages/language-picker/src/style.scss
@@ -2,46 +2,48 @@
 @import '~@wordpress/base-styles/mixins';
 @import '~@wordpress/base-styles/variables';
 
-.language-picker__language-group {
-	width: 100%;
-}
-
-.language-picker__language-group > span {
-	padding-bottom: 4px;
-	&.is-selected {
-		padding-bottom: 2px;
-		border-bottom: 2px solid #3582c4;
+.language-picker-component {
+	.language-picker-component__language-group {
+		width: 100%;
 	}
-}
-
-.language-picker__regions-label {
-	font-family: $default-font;
-	margin: 6px 12px;
-	color: $gray-600;
-	/* stylelint-disable-next-line scales/font-size */
-	font-size: 13px;
-	text-transform: uppercase;
-}
-
-.language-picker__content {
-	display: flex;
-}
-
-.language-picker__category-filters {
-	min-width: 170px;
-
-	@include break-small {
-		min-width: 220px;
-		margin-right: 60px;
+	
+	.language-picker-component__language-group > span {
+		padding-bottom: 4px;
+		&.is-selected {
+			padding-bottom: 2px;
+			border-bottom: 2px solid #3582c4;
+		}
+	}
+	
+	.language-picker-component__regions-label {
+		font-family: $default-font;
+		margin: 6px 12px;
+		color: $gray-600;
+		/* stylelint-disable-next-line scales/font-size */
+		font-size: 13px;
+		text-transform: uppercase;
+	}
+	
+	.language-picker-component__content {
+		display: flex;
+	}
+	
+	.language-picker-component__category-filters {
+		min-width: 170px;
+	
+		@include break-small {
+			min-width: 220px;
+			margin-right: 60px;
+		}
+	}
+	
+	.language-picker-component__language-buttons {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+	}
+	
+	.language-picker-component__language-button {
+		width: 165px;
 	}
-}
-
-.language-picker__language-buttons {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-}
-
-.language-picker__language-button {
-	width: 165px;
 }

From c1817302acf43e152d5515c6e8c3d6f218f5e018 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Fri, 23 Oct 2020 11:43:28 -0700
Subject: [PATCH 11/12] Fix various translation bugs

---
 .../onboarding-block/language/index.tsx       |   5 +-
 packages/language-picker/package.json         |   1 +
 packages/language-picker/src/constants.ts     | 294 ++++++++++++++++++
 packages/language-picker/src/index.ts         |   1 +
 .../language-picker/src/language-picker.tsx   |   7 +-
 packages/language-picker/src/types.d.ts       |   1 +
 6 files changed, 304 insertions(+), 5 deletions(-)
 create mode 100644 packages/language-picker/src/constants.ts
 create mode 100644 packages/language-picker/src/types.d.ts

diff --git a/client/landing/gutenboarding/onboarding-block/language/index.tsx b/client/landing/gutenboarding/onboarding-block/language/index.tsx
index 071befa5ded3b..c7c233b144f86 100644
--- a/client/landing/gutenboarding/onboarding-block/language/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/language/index.tsx
@@ -5,14 +5,13 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useI18n } from '@automattic/react-i18n';
 import { ActionButtons, BackButton, Title } from '@automattic/onboarding';
-import LanguagePicker from '@automattic/language-picker';
+import LanguagePicker, { createLanguageGroups } from '@automattic/language-picker';
 
 /**
  * Internal dependencies
  */
 import { ChangeLocaleContextConsumer } from '../../components/locale-context';
 import { languages } from '../../../../languages';
-import { LANGUAGE_GROUPS } from '../../../../components/language-picker/constants';
 
 /**
  * Style dependencies
@@ -39,7 +38,7 @@ const LanguageStep: React.FunctionComponent = () => {
 						</ActionButtons>
 					</div>
 					<LanguagePicker
-						languageGroups={ LANGUAGE_GROUPS }
+						languageGroups={ createLanguageGroups( __ ) }
 						languages={ languages }
 						onSelectLanguage={ ( language ) => {
 							changeLocale( language.langSlug );
diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
index 073ac8ed57a0b..c1bba3a97b44a 100644
--- a/packages/language-picker/package.json
+++ b/packages/language-picker/package.json
@@ -28,6 +28,7 @@
 	],
 	"types": "dist/types",
 	"dependencies": {
+		"@automattic/react-i18n": "^1.0.0-alpha.0",
 		"@babel/runtime": "^7.11.1",
 		"@wordpress/base-styles": "^2.0.1",
 		"@wordpress/components": "^10.0.5",
diff --git a/packages/language-picker/src/constants.ts b/packages/language-picker/src/constants.ts
new file mode 100644
index 0000000000000..755fb213873fc
--- /dev/null
+++ b/packages/language-picker/src/constants.ts
@@ -0,0 +1,294 @@
+/**
+ * Internal dependencies
+ */
+import { LanguageGroup } from './language-picker';
+import { I18nReact } from '@automattic/react-i18n';
+
+export const createLanguageGroups = ( __: I18nReact[ '__' ] ): LanguageGroup[] => [
+	{
+		id: 'popular',
+		name: () => __( 'Popular languages' ),
+	},
+	{
+		id: 'africa-middle-east',
+		name: () => __( 'Africa and Middle East' ),
+		subTerritories: [ '145', '002' ],
+		countries: [
+			'AE',
+			'AM',
+			'AO',
+			'AZ',
+			'BF',
+			'BH',
+			'BI',
+			'BJ',
+			'BW',
+			'CD',
+			'CF',
+			'CG',
+			'CI',
+			'CM',
+			'CV',
+			'CY',
+			'DJ',
+			'DZ',
+			'EA',
+			'EG',
+			'EH',
+			'ER',
+			'ET',
+			'GA',
+			'GE',
+			'GH',
+			'GM',
+			'GN',
+			'GQ',
+			'GW',
+			'IC',
+			'IL',
+			'IQ',
+			'JO',
+			'KE',
+			'KM',
+			'KW',
+			'LB',
+			'LR',
+			'LS',
+			'LY',
+			'MA',
+			'MG',
+			'ML',
+			'MR',
+			'MU',
+			'MW',
+			'MZ',
+			'NA',
+			'NE',
+			'NG',
+			'OM',
+			'PS',
+			'QA',
+			'RE',
+			'RW',
+			'SA',
+			'SC',
+			'SD',
+			'SH',
+			'SL',
+			'SN',
+			'SO',
+			'SS',
+			'ST',
+			'SY',
+			'SZ',
+			'TD',
+			'TG',
+			'TN',
+			'TR',
+			'TZ',
+			'UG',
+			'YE',
+			'YT',
+			'ZA',
+			'ZM',
+			'ZW',
+		],
+	},
+	{
+		id: 'americas',
+		name: () => __( 'Americas' ),
+		subTerritories: [ '019' ],
+		countries: [
+			'AG',
+			'AI',
+			'AR',
+			'AW',
+			'BB',
+			'BL',
+			'BM',
+			'BO',
+			'BQ',
+			'BR',
+			'BS',
+			'BZ',
+			'CA',
+			'CL',
+			'CO',
+			'CR',
+			'CU',
+			'CW',
+			'DM',
+			'DO',
+			'EC',
+			'FK',
+			'GD',
+			'GF',
+			'GL',
+			'GP',
+			'GT',
+			'GY',
+			'HN',
+			'HT',
+			'JM',
+			'KN',
+			'KY',
+			'LC',
+			'MF',
+			'MQ',
+			'MS',
+			'MX',
+			'NI',
+			'PA',
+			'PE',
+			'PM',
+			'PR',
+			'PY',
+			'SR',
+			'SV',
+			'SX',
+			'TC',
+			'TT',
+			'US',
+			'UY',
+			'VC',
+			'VE',
+			'VG',
+			'VI',
+		],
+	},
+	{
+		id: 'asia-pacific',
+		default: true,
+		name: () => __( 'Asia-Pacific' ),
+		subTerritories: [ '143', '009', '030', '034', '035' ],
+		countries: [
+			'AC',
+			'AF',
+			'AQ',
+			'AS',
+			'AU',
+			'BD',
+			'BN',
+			'BT',
+			'BV',
+			'CC',
+			'CK',
+			'CN',
+			'CP',
+			'CX',
+			'DG',
+			'FJ',
+			'FM',
+			'GS',
+			'GU',
+			'HK',
+			'HM',
+			'ID',
+			'IN',
+			'IO',
+			'IR',
+			'JP',
+			'KG',
+			'KH',
+			'KI',
+			'KP',
+			'KR',
+			'KZ',
+			'LA',
+			'LK',
+			'MH',
+			'MM',
+			'MN',
+			'MO',
+			'MP',
+			'MV',
+			'MY',
+			'NC',
+			'NF',
+			'NP',
+			'NR',
+			'NU',
+			'NZ',
+			'PF',
+			'PG',
+			'PH',
+			'PK',
+			'PN',
+			'PW',
+			'QO',
+			'SB',
+			'SG',
+			'TA',
+			'TF',
+			'TH',
+			'TJ',
+			'TK',
+			'TL',
+			'TM',
+			'TO',
+			'TV',
+			'TW',
+			'UM',
+			'UZ',
+			'VN',
+			'VU',
+			'WF',
+			'WS',
+		],
+	},
+	{
+		id: 'eastern-europe',
+		name: () => __( 'Eastern Europe' ),
+		subTerritories: [ '151' ],
+		countries: [ 'BG', 'BY', 'CZ', 'HU', 'MD', 'PL', 'RO', 'RU', 'SK', 'UA' ],
+	},
+	{
+		id: 'western-europe',
+		name: () => __( 'Western Europe' ),
+		subTerritories: [ '154', '155', '039' ],
+		countries: [
+			'AD',
+			'AL',
+			'AT',
+			'AX',
+			'BA',
+			'BE',
+			'CH',
+			'DE',
+			'DK',
+			'EE',
+			'ES',
+			'FI',
+			'FO',
+			'FR',
+			'GB',
+			'GG',
+			'GI',
+			'GR',
+			'HR',
+			'IE',
+			'IM',
+			'IS',
+			'IT',
+			'JE',
+			'LI',
+			'LT',
+			'LU',
+			'LV',
+			'MC',
+			'ME',
+			'MK',
+			'MT',
+			'NL',
+			'NO',
+			'PT',
+			'RS',
+			'SE',
+			'SI',
+			'SJ',
+			'SM',
+			'VA',
+			'XK',
+		],
+	},
+];
diff --git a/packages/language-picker/src/index.ts b/packages/language-picker/src/index.ts
index f16eecca2ec25..83019881af6e3 100644
--- a/packages/language-picker/src/index.ts
+++ b/packages/language-picker/src/index.ts
@@ -1,2 +1,3 @@
 export * from './language-picker';
 export { default } from './language-picker';
+export * from './constants';
diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx
index bd1dd8ac2f181..467cd3fe94a59 100644
--- a/packages/language-picker/src/language-picker.tsx
+++ b/packages/language-picker/src/language-picker.tsx
@@ -3,12 +3,12 @@
  * External dependencies
  */
 import React, { useState } from 'react';
+import { useI18n } from '@automattic/react-i18n';
 
 /**
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Style dependencies
@@ -47,6 +47,7 @@ type Props = {
 };
 
 const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props ) => {
+	const { __ } = useI18n();
 	const [ filter, setFilter ] = useState( languageGroups[ 0 ].id );
 
 	const getFilteredLanguages = () => {
@@ -87,7 +88,9 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 
 	return (
 		<div className="language-picker-component">
-			<div className="language-picker-component__regions-label">{ __( 'regions' ) }</div>
+			<div className="language-picker-component__regions-label">
+				{ __( 'regions', __i18n_text_domain__ ) }
+			</div>
 			<div className="language-picker-component__content">
 				<div className="language-picker-component__category-filters">
 					{ renderCategoryButtons() }
diff --git a/packages/language-picker/src/types.d.ts b/packages/language-picker/src/types.d.ts
new file mode 100644
index 0000000000000..e4d38b2ca9e4e
--- /dev/null
+++ b/packages/language-picker/src/types.d.ts
@@ -0,0 +1 @@
+declare const __i18n_text_domain__: string;

From bf3aebc2d92a6caae397330e8898a33fcbed923a Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Fri, 23 Oct 2020 11:48:19 -0700
Subject: [PATCH 12/12] Remove language-picker storybook

---
 package.json                                  |  1 -
 packages/language-picker/.storybook/main.js   | 26 --------
 .../language-picker/.storybook/preview.js     |  1 -
 packages/language-picker/CHANGELOG.md         |  4 +-
 packages/language-picker/README.md            |  4 --
 packages/language-picker/package.json         |  3 -
 .../src/language-picker.stories.tsx           | 61 -------------------
 7 files changed, 2 insertions(+), 98 deletions(-)
 delete mode 100644 packages/language-picker/.storybook/main.js
 delete mode 100644 packages/language-picker/.storybook/preview.js
 delete mode 100644 packages/language-picker/src/language-picker.stories.tsx

diff --git a/package.json b/package.json
index ad89ab9675c23..c2f4859328036 100644
--- a/package.json
+++ b/package.json
@@ -158,7 +158,6 @@
 		"whybundled:server": "whybundled client/stats-server.json",
 		"composite-checkout-demo": "webpack-dev-server --config ./packages/composite-checkout/webpack.config.demo.js --mode development",
 		"components:storybook:start": "start-storybook -c packages/components/.storybook",
-		"language-picker:storybook:start": "start-storybook -c packages/language-picker/.storybook",
 		"media-library:storybook:start": "start-storybook -c packages/media-library/.storybook -h calypso.localhost -p 3001",
 		"search:storybook:start": "start-storybook -c packages/search/.storybook"
 	},
diff --git a/packages/language-picker/.storybook/main.js b/packages/language-picker/.storybook/main.js
deleted file mode 100644
index 9a84281147868..0000000000000
--- a/packages/language-picker/.storybook/main.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const path = require( 'path' );
-
-module.exports = {
-	stories: [ '../src/**/*.stories.{js,jsx,ts,tsx}' ],
-	addons: [
-		'@storybook/addon-actions',
-		'@storybook/preset-scss',
-		{
-			name: '@storybook/preset-typescript',
-			options: {
-				tsLoaderOptions: {
-					transpileOnly: true,
-					configFile: path.resolve( __dirname, '../tsconfig.json' ),
-				},
-				tsDocgenLoaderOptions: {
-					tsconfigPath: path.resolve( __dirname, '../tsconfig.json' ),
-				},
-				forkTsCheckerWebpackPluginOptions: {
-					tsconfig: path.resolve( __dirname, '../tsconfig.json' ),
-					memoryLimit: 4096,
-				},
-				include: [ path.resolve( __dirname, '../src' ) ],
-			},
-		},
-	],
-};
diff --git a/packages/language-picker/.storybook/preview.js b/packages/language-picker/.storybook/preview.js
deleted file mode 100644
index 521d3335699b9..0000000000000
--- a/packages/language-picker/.storybook/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@wordpress/components/build-style/style.css';
diff --git a/packages/language-picker/CHANGELOG.md b/packages/language-picker/CHANGELOG.md
index bec300287b9ef..7342cb6eaca4a 100644
--- a/packages/language-picker/CHANGELOG.md
+++ b/packages/language-picker/CHANGELOG.md
@@ -1,3 +1,3 @@
-## 1.0.0
+## 1.0.0-alpha.0
 
-- Add LanguagePicker
+- Add LanguagePicker based on Gutenboarding language picker
diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md
index cd39e3ad9b1fb..f77b8d8287a78 100644
--- a/packages/language-picker/README.md
+++ b/packages/language-picker/README.md
@@ -16,7 +16,3 @@ This package depends directly on `@wordpress/i18n` for translations and the exis
 
 This package is developed as part of the Calypso monorepo. Run `yarn`
 in the root of the repository to get the required `devDependencies`.
-
-### Using [Storybook](https://storybook.js.org/)
-
-`yarn run language-picker:storybook:start`
diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
index c1bba3a97b44a..15b73ac1c7e9a 100644
--- a/packages/language-picker/package.json
+++ b/packages/language-picker/package.json
@@ -38,9 +38,6 @@
 		"react": "^16.8",
 		"react-dom": "^16.8"
 	},
-	"devDependencies": {
-		"@storybook/addon-actions": "^5.3.18"
-	},
 	"scripts": {
 		"clean": "npx rimraf dist && tsc --build --clean",
 		"prepublish": "yarn run clean",
diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx
deleted file mode 100644
index e9c684a1a2184..0000000000000
--- a/packages/language-picker/src/language-picker.stories.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-import { __ } from '@wordpress/i18n';
-
-import LanguagePicker, { Language, LanguageGroup } from '.';
-
-export default { title: 'LanguagePicker' };
-
-const LANGUAGES: Language[] = [
-	{
-		value: 1,
-		langSlug: 'en',
-		name: 'English',
-		wpLocale: 'en_US',
-		popular: 1,
-		territories: [ '019' ],
-	},
-	{ value: 71, langSlug: 'th', name: 'ไทย', wpLocale: 'th', territories: [ '035' ] },
-	{ value: 455, langSlug: 'tl', name: 'Tagalog', wpLocale: 'tl', territories: [ '035' ] },
-	{ value: 481, langSlug: 'am', name: 'አማርኛ', wpLocale: 'am', territories: [ '002' ] },
-	{
-		value: 482,
-		langSlug: 'en-gb',
-		name: 'English (UK)',
-		wpLocale: 'en_GB',
-		territories: [ '154' ],
-	},
-];
-
-const LANGUAGE_GROUPS: LanguageGroup[] = [
-	{
-		id: 'popular',
-		name: () => __( 'Popular languages' ),
-	},
-	{
-		id: 'africa-middle-east',
-		name: () => __( 'Africa and Middle East' ),
-		subTerritories: [ '145', '002' ],
-		countries: [ 'AM' ],
-	},
-	{
-		id: 'asia-pacific',
-		default: true,
-		name: () => __( 'Asia-Pacific' ),
-		subTerritories: [ '143', '009', '030', '034', '035' ],
-		countries: [ 'TL', 'TH' ],
-	},
-];
-
-export const _default = () => {
-	return (
-		<LanguagePicker
-			// eslint-disable-next-line no-console
-			onSelectLanguage={ ( language ) => console.log( language ) }
-			languageGroups={ LANGUAGE_GROUPS }
-			languages={ LANGUAGES }
-		/>
-	);
-};