[Shared UX] Markdown Component

.github/CODEOWNERS

@@ -988,6 +988,9 @@ packages/shared-ux/card/no_data/types @elastic/shared-ux
 packages/shared-ux/link/redirect_app/impl @elastic/shared-ux
 packages/shared-ux/link/redirect_app/mocks @elastic/shared-ux
 packages/shared-ux/link/redirect_app/types @elastic/shared-ux
+packages/shared-ux/markdown/impl @elastic/shared-ux
+packages/shared-ux/markdown/mocks @elastic/shared-ux
+packages/shared-ux/markdown/types @elastic/shared-ux
 packages/shared-ux/page/analytics_no_data/impl @elastic/shared-ux
 packages/shared-ux/page/analytics_no_data/mocks @elastic/shared-ux
 packages/shared-ux/page/analytics_no_data/types @elastic/shared-ux

package.json

@@ -372,6 +372,9 @@
     "@kbn/shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/impl",
     "@kbn/shared-ux-link-redirect-app-mocks": "link:bazel-bin/packages/shared-ux/link/redirect_app/mocks",
     "@kbn/shared-ux-link-redirect-app-types": "link:bazel-bin/packages/shared-ux/link/redirect_app/types",
+    "@kbn/shared-ux-markdown": "link:bazel-bin/packages/shared-ux/markdown/impl",
+    "@kbn/shared-ux-markdown-mocks": "link:bazel-bin/packages/shared-ux/markdown/mocks",
+    "@kbn/shared-ux-markdown-types": "link:bazel-bin/packages/shared-ux/markdown/types",
     "@kbn/shared-ux-page-analytics-no-data": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/impl",
     "@kbn/shared-ux-page-analytics-no-data-mocks": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/mocks",
     "@kbn/shared-ux-page-analytics-no-data-types": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/types",
@@ -1131,6 +1134,9 @@
     "@types/kbn__shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/impl/npm_module_types",
     "@types/kbn__shared-ux-link-redirect-app-mocks": "link:bazel-bin/packages/shared-ux/link/redirect_app/mocks/npm_module_types",
     "@types/kbn__shared-ux-link-redirect-app-types": "link:bazel-bin/packages/shared-ux/link/redirect_app/types/npm_module_types",
+    "@types/kbn__shared-ux-markdown": "link:bazel-bin/packages/shared-ux/markdown/impl/npm_module_types",
+    "@types/kbn__shared-ux-markdown-mocks": "link:bazel-bin/packages/shared-ux/markdown/mocks/npm_module_types",
+    "@types/kbn__shared-ux-markdown-types": "link:bazel-bin/packages/shared-ux/markdown/types/npm_module_types",
     "@types/kbn__shared-ux-page-analytics-no-data": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/impl/npm_module_types",
     "@types/kbn__shared-ux-page-analytics-no-data-mocks": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/mocks/npm_module_types",
     "@types/kbn__shared-ux-page-analytics-no-data-types": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/types/npm_module_types",

packages/BUILD.bazel

@@ -315,6 +315,9 @@ filegroup(
     "//packages/shared-ux/link/redirect_app/impl:build",
     "//packages/shared-ux/link/redirect_app/mocks:build",
     "//packages/shared-ux/link/redirect_app/types:build",
+    "//packages/shared-ux/markdown/impl:build",
+    "//packages/shared-ux/markdown/mocks:build",
+    "//packages/shared-ux/markdown/types:build",
     "//packages/shared-ux/page/analytics_no_data/impl:build",
     "//packages/shared-ux/page/analytics_no_data/mocks:build",
     "//packages/shared-ux/page/analytics_no_data/types:build",
@@ -639,6 +642,9 @@ filegroup(
     "//packages/shared-ux/card/no_data/mocks:build_types",
     "//packages/shared-ux/link/redirect_app/impl:build_types",
     "//packages/shared-ux/link/redirect_app/mocks:build_types",
+    "//packages/shared-ux/markdown/impl:build_types",
+    "//packages/shared-ux/markdown/mocks:build_types",
+    "//packages/shared-ux/markdown/types:build_types",
     "//packages/shared-ux/page/analytics_no_data/impl:build_types",
     "//packages/shared-ux/page/analytics_no_data/mocks:build_types",
     "//packages/shared-ux/page/kibana_no_data/impl:build_types",

packages/shared-ux/markdown/impl/BUILD.bazel

@@ -0,0 +1,145 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "impl"
+PKG_REQUIRE_NAME = "@kbn/shared-ux-markdown"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mdx",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  "@npm//react",
+  "@npm//enzyme",
+  "@npm//@elastic/eui",
+  "//packages/kbn-ambient-ui-types",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "//packages/kbn-ambient-ui-types",
+  "//packages/kbn-shared-ux-utility:npm_module_types",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/shared-ux/markdown/impl/README.mdx

@@ -0,0 +1,33 @@
+---
+id: sharedUX/Components/Markdown
+slug: /shared-ux/components/markdown
+title: Markdown
+description: A wrapper around EuiMarkdownEditor and EuiMarkdownFormat.
+tags: ['shared-ux', 'component']
+date: 2022-10-03
+---
+
+## Description
+
+This markdown component uses the **EuiMarkdownEditor** and **EuiMarkdownFormat** managed by `@elastic/eui`. If `readOnly` is set to true, and `markdownContent` or `children` are set, then the component renders **EuiMarkdownFormat** text. Otherwise the component will render the **EuiMarkdownEditor**. The height of the component can be set, but in order the control the width of the component, you can place the `<Markdown />` component in another component.
+Markdown extends all the EuiMarkdownEditorProps except for the `editorId`, `uiPlugins`, and `MarkdownFormatProps`.
+
+## Component Properties 
+
+| Prop Name | Type | Description |
+|---|---|---|
+| `readOnly` | `boolean` | Needed to differentiate where markdown is used as a presentation of error messages. This was previous the MarkdownSimple component |
+| ** TODO ** `openLinksInNewTab` | `boolean` | An optional property needed to replace the Markdown component from kibana-react |
+|`markdownContent` | `string` | This prop can be set along with `readOnly` to display error.message etc text to the kibana user. This property is optional. |
+| `ariaLabelContent` | `string` | An optional property to be set for the markdown component. It will be `markdown component` if not set explicitly. |
+| `height` | `number` or `'full'` | The height of the markdown component can be set to a number. By default, height is set to `'full'`. To set the width, include a container for the markdown component to be within with set width. |
+| `placeholder` | `string` or `undefined` | This prop can be set to a string to display the placeholder content of the markdown component. |
+| `defaultValue` | `string` | The default value for the markdown editor. If not set it will default to an empty string. |
+
+## API
+
+| Export | Description |
+|---|---|
+| `Markdown` | This component provides a markdown editor or text to be supported with Markdown formatting (must have static content set for the `markdownContent`) prop and be `readOnly` |
+| `MarkdownProps` | Exported by `@kbn/shared-ux-markdown-types` |
+