Panel content type

l10n/bundle.l10n.json

@@ -267,6 +267,12 @@
   "dashboard.app.developer.devTools.title": "Open the DevTools",
   "dashboard.app.developer.devTools.label": "DevTools",
 
+  "panel.contentType.contentTypeValidator.title": "Content-type",
+  "panel.contentType.contentTypeValidator.hint": "We noticed field differences between the content-type and the front matter data. \n Would you like to create, update, or set the content-type for this content?",
+  "panel.contentType.contentTypeValidator.button.create": "Create content-type",
+  "panel.contentType.contentTypeValidator.button.add": "Add missing fields to content-type",
+  "panel.contentType.contentTypeValidator.button.change": "Change content-type of the file",
+
   "panel.actions.title": "Actions",
   "panel.actions.openDashboard": "Open dashboard",
   "panel.actions.openPreview": "Open preview",

src/localization/localization.enum.ts

@@ -863,6 +863,27 @@ export enum LocalizationKey {
    * DevTools
    */
   dashboardAppDeveloperDevToolsLabel = 'dashboard.app.developer.devTools.label',
+  /**
+   * Content-type
+   */
+  panelContentTypeContentTypeValidatorTitle = 'panel.contentType.contentTypeValidator.title',
+  /**
+   * We noticed field differences between the content-type and the front matter data. 
+ Would you like to create, update, or set the content-type for this content?
+   */
+  panelContentTypeContentTypeValidatorHint = 'panel.contentType.contentTypeValidator.hint',
+  /**
+   * Create content-type
+   */
+  panelContentTypeContentTypeValidatorButtonCreate = 'panel.contentType.contentTypeValidator.button.create',
+  /**
+   * Add missing fields to content-type
+   */
+  panelContentTypeContentTypeValidatorButtonAdd = 'panel.contentType.contentTypeValidator.button.add',
+  /**
+   * Change content-type of the file
+   */
+  panelContentTypeContentTypeValidatorButtonChange = 'panel.contentType.contentTypeValidator.button.change',
   /**
    * Actions
    */

src/panelWebView/components/ContentType/ContentTypeValidator.tsx

@@ -6,6 +6,8 @@ import { Field } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { IMetadata } from '../Metadata';
 import { VsLabel } from '../VscodeComponents';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IContentTypeValidatorProps {
   fields: Field[];
@@ -64,29 +66,27 @@ export const ContentTypeValidator: React.FunctionComponent<IContentTypeValidator
             />
           </svg>
 
-          <span>Content-type</span>
+          <span>
+            {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorTitle)}
+          </span>
         </div>
       </VsLabel>
 
-      <p className="inline_hint">
-        We noticed field differences between the content-type and the front matter data.
-      </p>
 
-      <p className="inline_hint">
-        Would you like to create, update, or set the content-type for this content?
-      </p>
+      {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorHint).split(`\n`).map(s => (<p className="inline_hint">{s}</p>))}
+
 
       <div className="hint__buttons">
         <VSCodeButton appearance={`secondary`} onClick={generateContentType}>
-          Create content-type
+          {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorButtonCreate)}
         </VSCodeButton>
 
         <VSCodeButton appearance={`secondary`} onClick={addMissingFields}>
-          Add missing fields to content-type
+          {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorButtonAdd)}
         </VSCodeButton>
 
         <VSCodeButton appearance={`secondary`} onClick={setContentType}>
-          Change content-type of the file
+          {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorButtonChange)}
         </VSCodeButton>
       </div>