added docs and changeset

Author: zamoore

.changeset/smooth-bobcats-hang.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+hds-code-editor: Add language syntax highlighting suport for JavaScript and Rego

showcase/app/controllers/components/code-editor.js

@@ -12,6 +12,21 @@ sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua`;
 
   languages = [
+    {
+      value: 'rego',
+      label: 'Rego',
+      code: `package example.test
+import data.users
+default allow = false
+# single-line comment
+allow with data.something as foo {
+  some i in input.paths
+  not forbidden
+  time.now() >= /* inline block comment */ 1672531200
+}
+deny { base64.decode(input.encoded) == "decoded" }
+`,
+    },
     {
       value: 'ruby',
       label: 'Ruby',
@@ -58,6 +73,18 @@ func main() {
       code: `variable "region" {
   type    = string
   default = "us-west-1"
+}`,
+    },
+    {
+      value: 'javascript',
+      label: 'JavaScript',
+      code: `const message = 'Hello, world!';
+
+function sayMessage() {
+  console.log(message);
+}
+
+sayMessage();
 }`,
     },
     {

website/docs/components/code-editor/partials/code/component-api.md

@@ -29,7 +29,7 @@ This component uses [CodeMirror 6](https://codemirror.net/) under the hood.
   <C.Property @name="isStandalone" @type="boolean" @default="true">
     Applies rounded borders to the component. When used within another component or when the context requires it, you can turn it off.
   </C.Property>
-  <C.Property @name="language" @type="string" @values={{array "go" "hcl" "json" "ruby" "sentinel" "shell" "sql" "yaml"}}>
+  <C.Property @name="language" @type="string" @values={{array "go" "hcl" "javascript" "json" "rego" "ruby" "sentinel" "shell" "sql" "yaml"}}>
     The coding language to use for syntax highlighting. If you need additional languages <LinkTo class="doc-link-generic" @route="show" @model="about/support">contact the Design Systems Team</LinkTo>.
   </C.Property>
   <C.Property @name="value" @type="string">

website/docs/components/code-editor/partials/code/how-to-use.md

@@ -59,7 +59,7 @@ The default `@tag` is `"h2"`, however, the correct value is dependent on the ind
 
 ### Language
 
-The `language` argument sets the syntax highlighting used. We support the following languages: `ruby`, `sentinel`, `shell`, `go`, `hcl`, `json`, `sql`, and `yaml`. If you need additional languages, <LinkTo class="doc-link-generic" @route="show" @model="about/support">contact the Design Systems Team</LinkTo>.
+The `language` argument sets the syntax highlighting used. We support the following languages: `rego`, `ruby`, `sentinel`, `shell`, `go`, `hcl`, `javascript`, `json`, `sql`, and `yaml`. If you need additional languages, <LinkTo class="doc-link-generic" @route="show" @model="about/support">contact the Design Systems Team</LinkTo>.
 
 ```handlebars
 <Hds::CodeEditor

yarn.lock

@@ -2124,6 +2124,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@codemirror/lang-javascript@npm:^6.2.2":
+  version: 6.2.2
+  resolution: "@codemirror/lang-javascript@npm:6.2.2"
+  dependencies:
+    "@codemirror/autocomplete": "npm:^6.0.0"
+    "@codemirror/language": "npm:^6.6.0"
+    "@codemirror/lint": "npm:^6.0.0"
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.17.0"
+    "@lezer/common": "npm:^1.0.0"
+    "@lezer/javascript": "npm:^1.0.0"
+  checksum: 10/eac2e57a7a595cf0c93afd4bb42034902230c73e5525554ba925bad12aa544ca58014c017466288a2b34f1684d6efa5537507ed8b57e276d02665c2821c7a9d6
+  languageName: node
+  linkType: hard
+
 "@codemirror/lang-json@npm:^6.0.1":
   version: 6.0.1
   resolution: "@codemirror/lang-json@npm:6.0.1"
@@ -2186,6 +2201,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@codemirror/lint@npm:^6.0.0":
+  version: 6.8.4
+  resolution: "@codemirror/lint@npm:6.8.4"
+  dependencies:
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.35.0"
+    crelt: "npm:^1.0.5"
+  checksum: 10/401ead0591d88d31d1bf6527d4caba26e0deb7b49382dfbb8c712037d858047b0699fa2c15831a07db928194549eea9b942004fee42f334b34ff5973c7dbec58
+  languageName: node
+  linkType: hard
+
 "@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0, @codemirror/state@npm:^6.5.0":
   version: 6.5.0
   resolution: "@codemirror/state@npm:6.5.0"
@@ -2195,7 +2221,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.36.2":
+"@codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.35.0, @codemirror/view@npm:^6.36.2":
   version: 6.36.2
   resolution: "@codemirror/view@npm:6.36.2"
   dependencies:
@@ -3924,6 +3950,7 @@ __metadata:
     "@babel/runtime": "npm:^7.26.0"
     "@codemirror/commands": "npm:^6.8.0"
     "@codemirror/lang-go": "npm:^6.0.1"
+    "@codemirror/lang-javascript": "npm:^6.2.2"
     "@codemirror/lang-json": "npm:^6.0.1"
     "@codemirror/lang-sql": "npm:^6.8.0"
     "@codemirror/lang-yaml": "npm:^6.1.2"
@@ -4535,7 +4562,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.2.0":
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3, @lezer/highlight@npm:^1.2.0":
   version: 1.2.1
   resolution: "@lezer/highlight@npm:1.2.1"
   dependencies:
@@ -4544,6 +4571,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lezer/javascript@npm:^1.0.0":
+  version: 1.4.21
+  resolution: "@lezer/javascript@npm:1.4.21"
+  dependencies:
+    "@lezer/common": "npm:^1.2.0"
+    "@lezer/highlight": "npm:^1.1.3"
+    "@lezer/lr": "npm:^1.3.0"
+  checksum: 10/7f8b1f469103e74dc2c39e7e75e6cc670e4cf6f48b5317e2a0e267521c9924641e8de41c6e740af8cc919f5c7e03c0a97fc2f261486c96f1625c3e3bbb23b80a
+  languageName: node
+  linkType: hard
+
 "@lezer/json@npm:^1.0.0":
   version: 1.0.3
   resolution: "@lezer/json@npm:1.0.3"
@@ -4555,7 +4593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/lr@npm:^1.0.0, @lezer/lr@npm:^1.4.0":
+"@lezer/lr@npm:^1.0.0, @lezer/lr@npm:^1.3.0, @lezer/lr@npm:^1.4.0":
   version: 1.4.2
   resolution: "@lezer/lr@npm:1.4.2"
   dependencies:
@@ -11031,6 +11069,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crelt@npm:^1.0.5":
+  version: 1.0.6
+  resolution: "crelt@npm:1.0.6"
+  checksum: 10/5ed326ca6bd243b1dba6b943f665b21c2c04be03271824bc48f20dba324b0f8233e221f8c67312526d24af2b1243c023dc05a41bd8bd05d1a479fd2c72fb39c3
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^6.0.0":
   version: 6.0.6
   resolution: "cross-spawn@npm:6.0.6"