code-editor.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
}}

{{page-title "CodeEditor Component"}}

<Shw::Text::H1>CodeEditor</Shw::Text::H1>

<section data-test-percy>
  <Shw::Text::H2>Content</Shw::Text::H2>
  <Shw::Flex @direction="column" as |SF|>
    <SF.Item @label="No content">
      <Hds::CodeEditor />
      <Hds::CodeEditor @language="bubba" />
    </SF.Item>
    <SF.Item @label="With initial content">
      <Hds::CodeEditor @value={{this.demoCode}} />
    </SF.Item>
  </Shw::Flex>

  <Shw::Text::H2>Header</Shw::Text::H2>

  <Shw::Text::H3>Title and description</Shw::Text::H3>
  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
    <SG.Item @label="With title">
      <Hds::CodeEditor as |CE|>
        <CE.Title>Code editor with title</CE.Title>
      </Hds::CodeEditor>
    </SG.Item>
    <SG.Item @label="With description">
      <Hds::CodeEditor as |CE|>
        <CE.Description>This is a code editor with a description</CE.Description>
      </Hds::CodeEditor>
    </SG.Item>
    <SG.Item @label="With title and description">
      <Hds::CodeEditor as |CE|>
        <CE.Title>Code editor with title</CE.Title>
        <CE.Description>This is a code editor with a description</CE.Description>
      </Hds::CodeEditor>
    </SG.Item>
  </Shw::Grid>

  <Shw::Text::H3>Actions</Shw::Text::H3>
  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
    <SG.Item @label="Fullscreen toggle">
      <Hds::CodeEditor @hasFullScreenButton={{true}} />
    </SG.Item>
    <SG.Item @label="Copy button">
      <Hds::CodeEditor @value="Copy me!" @hasCopyButton={{true}} />
    </SG.Item>
    <SG.Item @label="Fullscreen toggle and copy button">
      <Hds::CodeEditor @hasFullScreenButton={{true}} @hasCopyButton={{true}} />
    </SG.Item>
  </Shw::Grid>

  <Shw::Text::H3>Custom content</Shw::Text::H3>
  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
    <SG.Item @label="With custom header content">
      <Hds::CodeEditor>
        <Hds::Button @text="Custom button" @size="small" />
      </Hds::CodeEditor>
    </SG.Item>
  </Shw::Grid>

  <Shw::Text::H3>Complex examples</Shw::Text::H3>
  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
    <SG.Item @label="With title, description, and internal actions">
      <Hds::CodeEditor @hasFullScreenButton={{true}} @hasCopyButton={{true}} as |CE|>
        <CE.Title>Code editor with title</CE.Title>
        <CE.Description>This is a code editor with a description</CE.Description>
      </Hds::CodeEditor>
    </SG.Item>
    <SG.Item @label="With title, description, and custom content">
      <Hds::CodeEditor as |CE|>
        <CE.Title>Code editor with title</CE.Title>
        <CE.Description>This is a code editor with a description</CE.Description>
        <Hds::Button @text="Custom button" @size="small" />
        <Hds::Icon @name="code" @color="#fff" />
      </Hds::CodeEditor>
    </SG.Item>
    <SG.Item @label="With title, description, internal actions, and custom content">
      <Hds::CodeEditor @hasFullScreenButton={{true}} @hasCopyButton={{true}} as |CE|>
        <CE.Title>Code editor with title</CE.Title>
        <CE.Description>This is a code editor with a description</CE.Description>
        <Hds::Button @text="Custom button" @size="small" />
        <Hds::Icon @name="code" @color="#fff" />
      </Hds::CodeEditor>
    </SG.Item>
  </Shw::Grid>

  <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>

  <Shw::Text::H2>Standalone modifier usage</Shw::Text::H2>
  <Shw::Flex @direction="column" as |SF|>
    <SF.Item @label="`div` element with `hds-code-editor` modifier">
      <div {{hds-code-editor value=this.demoCode}} />
    </SF.Item>
  </Shw::Flex>
</section>