feat(@clayui/localized-input): create LocalizedInput component

packages/clay-localized-input/.yarnrc

@@ -0,0 +1,3 @@
+# Make `yarn version` produce the right commit message and tag for this package.
+version-tag-prefix "@clayui/localized-input@"
+version-git-message "chore: prepare @clayui/localized-input@%s"

packages/clay-localized-input/README.md

@@ -0,0 +1,17 @@
+# clay-localized-input
+
+React implementation of localized input from lexicon
+
+## Setup
+
+1. Install `yarn`
+
+2. Install local dependencies:
+
+```
+yarn
+```
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

packages/clay-localized-input/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@clayui/localized-input",
+	"version": "3.0.0",
+	"description": "ClayLocalizedInput component",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay/tree/master/packages/clay-localized-input",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
+	"ts:main": "src/index.tsx",
+	"files": [
+		"lib",
+		"src"
+	],
+	"scripts": {
+		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "yarn build && yarn build:types",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": [
+		"clay",
+		"react"
+	],
+	"dependencies": {
+		"classnames": "^2.2.6",
+		"@clayui/button": "^3.3.0",
+		"@clayui/drop-down": "^3.4.1",
+		"@clayui/form": "^3.7.0",
+		"@clayui/icon": "^3.0.4",
+		"@clayui/label": "^3.2.0"
+	},
+	"peerDependencies": {
+		"@clayui/css": "3.x",
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": [
+		"extends browserslist-config-clay"
+	]
+}

packages/clay-localized-input/src/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClayLocalizedInput renders 1`] = `
+<div>
+  <div
+    class="form-group"
+  >
+    <label
+      for="locale1"
+    >
+      Check for translations
+    </label>
+    <div
+      class="input-group"
+    >
+      <div
+        class="input-group-item"
+      >
+        <input
+          class="form-control"
+          id="locale1"
+          placeholder="Text to translate..."
+          value="Apple"
+        />
+      </div>
+      <div
+        class="input-group-item input-group-item-shrink"
+      >
+        <div
+          class="dropdown"
+        >
+          <button
+            class="dropdown-toggle btn btn-monospaced btn-unstyled"
+            style=""
+            title="Open Localizations"
+            type="button"
+          >
+            <svg
+              class="lexicon-icon lexicon-icon-en-us"
+              role="presentation"
+            >
+              <use
+                xlink:href="/path/to/svg#en-us"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="form-text"
+    >
+      Apple
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ClayLocalizedInput renders with prepend content and result formatter 1`] = `
+<div>
+  <div
+    class="form-group"
+  >
+    <label
+      for="locale1"
+    >
+      Check for translations
+    </label>
+    <div
+      class="input-group"
+    >
+      <div
+        class="input-group-item input-group-item-shrink input-group-prepend"
+      >
+        <div
+          class="input-group-text"
+        >
+          /home/
+        </div>
+      </div>
+      <div
+        class="input-group-item"
+      >
+        <input
+          class="form-control"
+          id="locale1"
+          placeholder="Text to translate..."
+          value="Apple"
+        />
+      </div>
+      <div
+        class="input-group-item input-group-item-shrink"
+      >
+        <div
+          class="dropdown"
+        >
+          <button
+            class="dropdown-toggle btn btn-monospaced btn-unstyled"
+            style=""
+            title="Open Localizations"
+            type="button"
+          >
+            <svg
+              class="lexicon-icon lexicon-icon-en-us"
+              role="presentation"
+            >
+              <use
+                xlink:href="/path/to/svg#en-us"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="form-text"
+    >
+      https://liferay.com/home/Apple
+    </div>
+  </div>
+</div>
+`;

packages/clay-localized-input/src/__tests__/index.tsx

@@ -0,0 +1,112 @@
+/**
+ * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayLocalizedInput from '..';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import React from 'react';
+
+const locales = [
+	{
+		label: 'en-US',
+		symbol: 'en-us',
+	},
+	{
+		label: 'es-ES',
+		symbol: 'es-es',
+	},
+	{
+		label: 'fr-FR',
+		symbol: 'fr-fr',
+	},
+	{
+		label: 'hr-HR',
+		symbol: 'hr-hr',
+	},
+];
+
+describe('ClayLocalizedInput', () => {
+	afterEach(cleanup);
+
+	it('renders', () => {
+		const {container} = render(
+			<ClayLocalizedInput
+				id="locale1"
+				locales={locales}
+				onSelectedLocaleChange={() => {}}
+				onTranslationsChange={() => {}}
+				selectedLocale={locales[0]}
+				spritemap="/path/to/svg"
+				translations={{
+					'en-US': 'Apple',
+					'es-ES': 'Manzana',
+				}}
+			/>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders with prepend content and result formatter', () => {
+		const prepend = '/home/';
+
+		const {container} = render(
+			<ClayLocalizedInput
+				id="locale1"
+				locales={locales}
+				onSelectedLocaleChange={() => {}}
+				onTranslationsChange={() => {}}
+				prependContent={prepend}
+				resultFormatter={val => `https://liferay.com${prepend}${val}`}
+				selectedLocale={locales[0]}
+				spritemap="/path/to/svg"
+				translations={{
+					'en-US': 'Apple',
+					'es-ES': 'Manzana',
+				}}
+			/>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it("displays empty if translation doesn't exist", () => {
+		const onSelectedChangeFn = jest.fn();
+		const {container} = render(
+			<ClayLocalizedInput
+				id="input1"
+				locales={locales}
+				onSelectedLocaleChange={onSelectedChangeFn}
+				onTranslationsChange={() => {}}
+				selectedLocale={locales[0]}
+				spritemap="/path/to/svg"
+				translations={{
+					'en-US': 'Apple',
+					'es-ES': 'Manzana',
+				}}
+			/>
+		);
+
+		fireEvent.click(
+			container.querySelector('.dropdown-toggle') as HTMLButtonElement,
+			{}
+		);
+
+		fireEvent.click(
+			document.querySelectorAll('.dropdown-item')[1] as HTMLButtonElement,
+			{}
+		);
+
+		expect(onSelectedChangeFn).toBeCalledWith({
+			label: 'es-ES',
+			symbol: 'es-es',
+		});
+	});
+});