added examples to the showcase

Author: zamoore

packages/components/src/modifiers/hds-code-editor.ts

@@ -33,7 +33,7 @@ import hdsDarkHighlightStyle from './hds-code-editor/highlight-styles/hds-dark-h
 import type { PositionalArgs, NamedArgs } from 'ember-modifier';
 import type { HdsCodeEditorLanguages } from 'src/types/hds-code-editor.types';
 
-const LANGUAGE_MAP: Record<HdsCodeEditorLanguages, Extension> = {
+export const LANGUAGE_MAP: Record<HdsCodeEditorLanguages, Extension> = {
   go: go(),
   javascript: javascript(),
   json: json(),

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

@@ -7,31 +7,44 @@ import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 
 export default class CodeEditorController extends Controller {
-  @tracked demoCode = `function greetUser(username) {
-    // Get the current hour of the day
-    const currentHour = new Date().getHours();
-    let greeting;
+  languages = [
+    {
+      value: 'go',
+      label: 'Go',
+      code: `package main
 
-    // Determine the greeting based on the time of day
-    if (currentHour < 12) {
-        greeting = "Good morning";
-    } else if (currentHour < 18) {
-        greeting = "Good afternoon";
-    } else {
-        greeting = "Good evening";
-    }
+import "fmt"
 
-    // Create a personalized message
-    const message = \`\${greeting}, \${username}! Welcome to our site.\`;
+func main() {
+    fmt.Println("Hello, world!")
+    fmt.Println("Welcome to Go!")
+}`
+    },
+    {
+      value: 'javascript',
+      label: 'JavaScript',
+      code: `function greet() {
+    console.log('Hello, world!');
+}
 
-    // Create a new HTML element to display the message
-    const greetingElement = document.createElement("div");
-    greetingElement.textContent = message;
-    greetingElement.style.fontSize = "20px";
-    greetingElement.style.fontWeight = "bold";
-    greetingElement.style.marginTop = "20px";
+greet();`
+    },
+    {
+      value: 'json',
+      label: 'JSON',
+      code: `{
+    "message": "Hello, world!",
+    "status": "success",
+    "data": null
+}`
+    },
+    {
+      value: 'sql',
+      label: 'SQL',
+      code: `SELECT 'Hello, world!';
+SELECT 'Welcome to SQL!';
+SELECT 'Enjoy coding!';`
+    }
+  ];
 
-    // Add the greeting element to the document body
-    document.body.appendChild(greetingElement);
-  }`;
 }

showcase/app/templates/components/code-editor.hbs

@@ -8,13 +8,55 @@
 <Shw::Text::H1>CodeEditor</Shw::Text::H1>
 
 <section data-test-percy>
-  <Hds::CodeEditor
-    @canCopy={{true}}
-    @canExpand={{true}}
-    @title="Lorem Ipsum"
-    @description="lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    @value={{this.demoCode}}
-    @language="json"
-    @onInput={{fn (mut this.demoCode)}}
-  />
+  <Shw::Text::H2>Content</Shw::Text::H2>
+  <Shw::Flex @direction="column" as |SF|>
+    <SF.Item @label="No content">
+      <Hds::CodeEditor />
+    </SF.Item>
+    <SF.Item @label="With initial content">
+      <Hds::CodeEditor @value={{this.demoJavascript}} />
+    </SF.Item>
+  </Shw::Flex>
+
+  <Shw::Text::H2>Header</Shw::Text::H2>
+  <Shw::Flex @direction="column" as |SF|>
+    <SF.Item @label="With title">
+      <Hds::CodeEditor @title="Code editor with title" />
+    </SF.Item>
+    <SF.Item @label="With description">
+      <Hds::CodeEditor @description="Code editor with description" />
+    </SF.Item>
+    <SF.Item @label="Expandable editor">
+      <Hds::CodeEditor @canExpand={{true}} />
+    </SF.Item>
+    <SF.Item @label="With copyable content">
+      <Hds::CodeEditor @canCopy={{true}} @value={{this.demoJavascript}} />
+    </SF.Item>
+    <SF.Item @label="With custom header content">
+      <Hds::CodeEditor as |CE|>
+        <CE.ToolbarButton @text="Custom button" />
+      </Hds::CodeEditor>
+    </SF.Item>
+    <SF.Item @label="Complex header">
+      <Hds::CodeEditor
+        @title="Complex header"
+        @description="This is a complex example"
+        @canCopy={{true}}
+        @canExpand={{true}}
+        @value={{this.demoJavascript}}
+        as |CE|
+      >
+        <CE.ToolbarButton @text="Custom button" />
+      </Hds::CodeEditor>
+    </SF.Item>
+  </Shw::Flex>
+
+  <Shw::Text::H2>Syntax highlighting</Shw::Text::H2>
+  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
+    {{#each this.languages as |lang|}}
+      <SG.Item @label={{lang.label}}>
+        <Hds::CodeEditor @language={{lang.value}} @value={{lang.code}} />
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
 </section>

showcase/tests/integration/modifiers/hds-code-editor-test.js

@@ -6,10 +6,8 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Modifier | hds-code-editor', function (hooks) {
   setupRenderingTest(hooks);
 
-  // Replace this with your real tests.
-  test('it renders', async function (assert) {
-    await render(hbs`<div {{hds-code-editor}}></div>`);
-
-    assert.ok(true);
+  test('it converts the element it is applied to into a CodeMirror editor', async function (assert) {
+    await render(hbs`<div id="code-editor-wrapper" {{hds-code-editor}}></div>`);
+    assert.dom('#code-editor-wrapper .cm-editor').exists('code editor is rendered');
   });
 });