Add cspNonce argument to Hds::CodeEditor component (#3132)

Author: zamoore

.changeset/brown-ways-invite.md

@@ -0,0 +1,9 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+<!-- START components/code-editor -->
+
+`CodeEditor` - Added a `cspNonce` argument which passes a value of the same name to the `hds-code-editor` modifier. `cspNonce` is used to add a nonce value to the style tag
+
+<!-- END -->

packages/components/src/components/hds/code-editor/index.hbs

@@ -55,6 +55,7 @@
       ariaDescribedBy=this.ariaDescribedBy
       ariaLabel=@ariaLabel
       ariaLabelledBy=this.ariaLabelledBy
+      cspNonce=@cspNonce
       extraKeys=@extraKeys
       hasLineWrapping=@hasLineWrapping
       isLintingEnabled=@isLintingEnabled

showcase/tests/integration/components/hds/code-editor/index-test.js

@@ -24,6 +24,20 @@ module('Integration | Component | hds/code-editor/index', function (hooks) {
     assert.dom('#test-code-editor').hasClass('hds-code-editor');
   });
 
+  // cspNonce
+  test('it should render the injected style tag with the provided `@cspNonce` value', async function (assert) {
+    const cspNonce = 'csp-nonce-123';
+
+    this.set('cspNonce', cspNonce);
+
+    await setupCodeEditor(
+      hbs`<Hds::CodeEditor @cspNonce={{this.cspNonce}} as |CE|><CE.Title>Test Title</CE.Title></Hds::CodeEditor>`,
+    );
+
+    // can't use assert.dom to access elements in head
+    assert.ok(document.querySelector(`style[nonce="${cspNonce}"]`));
+  });
+
   // title
   test('it should render the component with a title using the default tag', async function (assert) {
     await setupCodeEditor(