button.hbs

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

{{page-title "Copy::Button Component"}}

<Shw::Text::H1>Copy::Button</Shw::Text::H1>

<section data-test-percy>

  <Shw::Text::H2>Content</Shw::Text::H2>

  <input type="hidden" id="targetToCopy" value="This is some text stored in a hidden &lt;input&gt; element" />

  <Shw::Flex as |SF|>
    <SF.Item @label="Default">
      <Hds::Copy::Button @text="Copy" @targetToCopy="#targetToCopy" />
    </SF.Item>
    <SF.Item @label="Icon only">
      <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @targetToCopy="#targetToCopy" />
    </SF.Item>
  </Shw::Flex>

  <Shw::Text::H2>Sizes</Shw::Text::H2>

  <Shw::Flex as |SF|>
    {{#each @model.SIZES as |size|}}
      <SF.Item @label={{capitalize size}}>
        <Hds::Copy::Button @text="Copy" @size={{size}} @targetToCopy="#targetToCopy" />
      </SF.Item>
    {{/each}}
    <SF.Item @label="Full width">
      <Shw::Outliner {{style width="300px"}}>
        <Hds::Copy::Button @text="Copy" @isFullWidth={{true}} @targetToCopy="#targetToCopy" />
      </Shw::Outliner>
    </SF.Item>
  </Shw::Flex>

  <Shw::Text::H2>States</Shw::Text::H2>

  <Shw::Grid @columns={{6}} as |SG|>
    {{#each @model.SIZES as |size|}}
      {{#each @model.STATES as |state|}}
        <SG.Item @label={{if (eq size "small") (capitalize state)}}>
          <Hds::Copy::Button @text="Copy" @size={{size}} mock-state-value={{state}} @targetToCopy="#targetToCopy" />
        </SG.Item>
      {{/each}}
      {{#let (array "success" "error") as |statuses|}}
        {{#each statuses as |status|}}
          <SG.Item @label={{if (eq size "small") (capitalize status)}}>
            <Hds::Copy::Button @text="Copy" @size={{size}} @targetToCopy="#targetToCopy" mock-copy-status={{status}} />
          </SG.Item>
        {{/each}}
      {{/let}}
    {{/each}}
  </Shw::Grid>

  <Shw::Divider />

  <Shw::Text::H2>Compositions</Shw::Text::H2>

  <Shw::Flex as |SF|>
    <SF.Item @label="With MaskedInput::Base">
      <div class="shw-component-copy-button-composition-masked-input-base">
        <Hds::Form::MaskedInput::Base @value="Lorem ipsum dolor" />
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @textToCopy="Lorem ipsum dolor" />
      </div>
    </SF.Item>
    <SF.Item @label="With MaskedInput::Base (multiline)">
      <div class="shw-component-copy-button-composition-masked-input-base">
        <Hds::Form::MaskedInput::Base @isMultiline={{true}} @value="Lorem ipsum dolor" />
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @textToCopy="Lorem ipsum dolor" />
      </div>
    </SF.Item>
  </Shw::Flex>

  <Shw::Flex as |SF|>
    <SF.Item @label="With Form::Field + MaskedInput::Base">
      <Hds::Form::Field @layout="vertical" as |F|>
        <F.Label>This is the label</F.Label>
        <F.HelperText>This is the helper text</F.HelperText>
        <F.Control>
          <div class="shw-component-copy-button-composition-masked-input-base">
            <Hds::Form::MaskedInput::Base @value="Lorem ipsum dolor" />
            <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @textToCopy="Lorem ipsum dolor" />
          </div>
        </F.Control>
      </Hds::Form::Field>
    </SF.Item>
    <SF.Item @label="With Form::Field + MaskedInput::Base (multiline)">
      <Hds::Form::Field @layout="vertical" as |F|>
        <F.Label>This is the label</F.Label>
        <F.HelperText>This is the helper text</F.HelperText>
        <F.Control>
          <div class="shw-component-copy-button-composition-masked-input-base">
            <Hds::Form::MaskedInput::Base @isMultiline={{true}} @value="Lorem ipsum dolor" />
            <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @textToCopy="Lorem ipsum dolor" />
          </div>
        </F.Control>
      </Hds::Form::Field>
    </SF.Item>
  </Shw::Flex>

  <Shw::Flex as |SF|>
    <SF.Item @label="With MaskedInput::Field">
      <div class="shw-component-copy-button-composition-masked-input-field">
        <Hds::Form::MaskedInput::Field @value="Lorem ipsum dolor" as |F|>
          <F.Label>This is the label</F.Label>
          <F.HelperText>This is the helper text</F.HelperText>
        </Hds::Form::MaskedInput::Field>
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @textToCopy="Lorem ipsum dolor" />
      </div>
    </SF.Item>
    <SF.Item @label="With MaskedInput::Field (multiline)">
      <div class="shw-component-copy-button-composition-masked-input-field">
        <Hds::Form::MaskedInput::Field @value="Lorem ipsum dolor" @isMultiline={{true}} as |F|>
          <F.Label>This is the label</F.Label>
          <F.HelperText>This is the helper text</F.HelperText>
        </Hds::Form::MaskedInput::Field>
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy" @textToCopy="Lorem ipsum dolor" />
      </div>
    </SF.Item>
  </Shw::Flex>

  <Shw::Divider />

  <Shw::Text::H2>Demo</Shw::Text::H2>

  <Shw::Text::H3>With <code>text</code> as argument</Shw::Text::H3>

  <Shw::Flex as |SF|>
    <SF.Item>
      <Hds::Copy::Button @text="Copy a secret key" @textToCopy="someSecretThingGoesHere" />
    </SF.Item>
    <SF.Item>
      {{! context: https://github.com/hashicorp/design-system/pull/1564 }}
      <Hds::Copy::Button @text="Copy a number" @textToCopy={{123456789}} />
    </SF.Item>
    <SF.Item>
      <Hds::Copy::Button @text="Copy a Bigint number" @textToCopy={{this.bigIntNumber}} />
    </SF.Item>
  </Shw::Flex>

  <Shw::Text::H4>Special cases</Shw::Text::H4>

  <Shw::Flex as |SF|>
    <SF.Item>
      <Hds::Copy::Button @text="Copy an empty string" @textToCopy="" />
    </SF.Item>
    <SF.Item>
      <Hds::Copy::Button @text="Copy the number '0'" @textToCopy={{0}} />
    </SF.Item>
  </Shw::Flex>

  <Shw::Divider @level={{2}} />

  <Shw::Text::H3>With <code>target</code> element</Shw::Text::H3>

  <Shw::Text::H4>Target types</Shw::Text::H4>

  <Shw::Flex @columns={{3}} @gap="2rem" as |SF|>
    <SF.Item @label="Target as a CSS selector (`string`)">
      <div class="shw-component-copy-button-flex-container">
        <p class="shw-text-body" id="test-target-string">Lorem ipsum dolor</p>
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the content in the node"
          @targetToCopy="#test-target-string"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Target as a DOM element (`Node`)">
      <div class="shw-component-copy-button-flex-container">
        <p class="shw-text-body" id="test-target-node-element">Lorem ipsum dolor</p>
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the content in the node"
          @targetToCopy={{this.targetNodeElement}}
        />
      </div>
    </SF.Item>
  </Shw::Flex>

  <Shw::Text::H4>HDS components</Shw::Text::H4>

  <Shw::Grid @columns={{3}} @gap="2rem" as |SG|>
    <SG.Item @label="Input component" class="shw-component-copy-button-input-component">
      <Hds::Form::TextInput::Field @value="036140285924" @name="test-input" @id="test-input" as |F|>
        <F.Label>Input Label</F.Label>
      </Hds::Form::TextInput::Field>
      <Hds::Copy::Button @text="Copy the input value" @targetToCopy="#test-input" />
    </SG.Item>
    <SG.Item @label="Input component (readonly)" class="shw-component-copy-button-input-component">
      <Hds::Form::TextInput::Field
        readonly
        @value="036140285924-readonly"
        @name="test-input-readonly"
        @id="test-input-readonly"
        as |F|
      >
        <F.Label>Input Label</F.Label>
      </Hds::Form::TextInput::Field>
      <Hds::Copy::Button @text="Copy the input value" @targetToCopy="#test-input-readonly" />
    </SG.Item>
    <SG.Item @label="Input component (disabled)" class="shw-component-copy-button-input-component">
      <Hds::Form::TextInput::Field
        disabled
        @value="036140285924-disabled"
        @name="test-input-disabled"
        @id="test-input-disabled"
        as |F|
      >
        <F.Label>Input Label</F.Label>
      </Hds::Form::TextInput::Field>
      <Hds::Copy::Button @text="Copy the input value" @targetToCopy="#test-input-disabled" />
    </SG.Item>
    <SG.Item @label="Textarea component">
      <div class="shw-component-copy-button-flex-container">
        <Hds::Form::Textarea::Base
          @value="This is a normal
multiline text
that should be copied"
          @name="test-textarea"
          id="test-textarea"
        />
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy the textarea value" @targetToCopy="#test-textarea" />
      </div>
    </SG.Item>
    <SG.Item @label="Textarea component (readonly)">
      <div class="shw-component-copy-button-flex-container">
        <Hds::Form::Textarea::Base
          readonly
          @value="This is a redonly
multiline text
that should be copied"
          @name="test-textarea-readonly"
          id="test-textarea-readonly"
        />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the textarea value"
          @targetToCopy="#test-textarea-readonly"
        />
      </div>
    </SG.Item>
    <SG.Item @label="Textarea component (disabled)">
      <div class="shw-component-copy-button-flex-container">
        <Hds::Form::Textarea::Base
          disabled
          @value="This is a disabled
multiline text
that should be copied"
          @name="test-textarea-disabled"
          id="test-textarea-disabled"
        />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the textarea value"
          @targetToCopy="#test-textarea-disabled"
        />
      </div>
    </SG.Item>
    <SG.Item @label="Select component">
      <div class="shw-component-copy-button-flex-container">
        <Hds::Form::Select::Base @name="test-select" id="test-select" as |C|>
          <C.Options>
            <option>Lorem ipsum dolor</option>
            <option selected>Sit amet</option>
            <option>Consectetur adipiscing elit</option>
          </C.Options>
        </Hds::Form::Select::Base>
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy the textarea value" @targetToCopy="#test-select" />
      </div>
    </SG.Item>
    <SG.Item @label="Select component (disabled)">
      <div class="shw-component-copy-button-flex-container">
        <Hds::Form::Select::Base disabled @name="test-select-disabled" id="test-select-disabled" as |C|>
          <C.Options>
            <option>Lorem ipsum dolor</option>
            <option>Sit amet</option>
            <option selected>Consectetur adipiscing elit</option>
          </C.Options>
        </Hds::Form::Select::Base>
        <Hds::Copy::Button @isIconOnly={{true}} @text="Copy the textarea value" @targetToCopy="#test-select-disabled" />
      </div>
    </SG.Item>
  </Shw::Grid>

  <Shw::Grid @columns={{3}} @gap="2rem" as |SG|>
    <SG.Item @label="Within a Dropdown">
      <Hds::Dropdown @listPosition="bottom-left" as |dd|>
        <dd.ToggleButton @text="Open menu" />
        <dd.Generic>
          <div class="shw-component-copy-button-demo-container">
            <p class="shw-text-h4">With HDS components</p>
            <p class="shw-text-body">Input</p>
            <div class="shw-component-copy-button-demo-flex-container">
              <Hds::Form::TextInput::Base
                @name="test-dropdown-text-input"
                id="test-dropdown-text-input"
                @value="Lorem ipsum dolor"
              />
              <Hds::Copy::Button
                @isIconOnly={{true}}
                @text="Copy the text input value"
                @targetToCopy="#test-dropdown-text-input"
              />
            </div>
            <Shw::Divider @level={{2}} />
            <p class="shw-text-h4">With HTML blocks</p>
            <p class="shw-text-body">Structured content</p>
            <div class="shw-component-copy-button-demo-flex-container">
              <p class="shw-component-copy-button-demo-paragraph" id="test-dropdown-structured-content">This is the
                <span><strong>some</strong>
                  <em>structured</em></span>
                content that will be
                <a href="#">targeted</a>
                by the
                <code>button</code>.</p>
              <Hds::Copy::Button
                @isIconOnly={{true}}
                @text="Copy the structured content"
                @targetToCopy="#test-dropdown-structured-content"
              />
            </div>
            <p class="shw-text-body">Code block with 'contentEditable'</p>
            <div class="shw-component-copy-button-demo-flex-container">
              {{!-- prettier-ignore --}}
              <pre class="shw-component-copy-button-code-block"><code
            id="test-dropdown-code-block-editable"
            contenteditable="true"
          >&lt;h1&gt;Lorem&lt;/h1&gt;
&lt;p&gt;Ipsum dolor&lt;/p&gt;</code></pre>
              <Hds::Copy::Button
                @isIconOnly={{true}}
                @text="Copy the code block content"
                @targetToCopy="#test-dropdown-code-block-editable"
              />
            </div>
          </div>
        </dd.Generic>
      </Hds::Dropdown>
    </SG.Item>
    <SG.Item @label="Within a Modal">
      <Hds::Button @color="secondary" @text="Open modal" {{on "click" this.activateModal}} />

      {{! template-lint-disable no-autofocus-attribute }}
      {{#if this.isModalActive}}
        <Hds::Modal id="test-copy-button-modal" @onClose={{this.deactivateModal}} as |M|>
          <M.Header>
            Lorem ipsum dolor
          </M.Header>
          <M.Body>
            <form name="test-copy-button-modal-form" class="shw-component-copy-button-demo-container">
              <p class="shw-text-h4">With HDS components</p>
              <p class="shw-text-body">Input</p>
              <div class="shw-component-copy-button-demo-flex-container">
                <Hds::Form::TextInput::Base
                  @name="test-modal-text-input"
                  id="test-modal-text-input"
                  @value="Lorem ipsum dolor"
                />
                <Hds::Copy::Button
                  @isIconOnly={{true}}
                  @text="Copy the text input value"
                  @targetToCopy="#test-modal-text-input"
                />
              </div>
              <Shw::Divider @level={{2}} />
              <p class="shw-text-h4">With HTML blocks</p>
              <p class="shw-text-body">Structured content</p>
              <div class="shw-component-copy-button-demo-flex-container">
                <p class="shw-component-copy-button-demo-paragraph" id="test-modal-structured-content">This is the
                  <span><strong>some</strong>
                    <em>structured</em></span>
                  content that will be
                  <a href="#">targeted</a>
                  by the
                  <code>button</code>.</p>
                <Hds::Copy::Button
                  @isIconOnly={{true}}
                  @text="Copy the structured content"
                  @targetToCopy="#test-modal-structured-content"
                />
              </div>
              <p class="shw-text-body">Code block with 'contentEditable'</p>
              <div class="shw-component-copy-button-demo-flex-container">
                {{!-- prettier-ignore --}}
                <pre class="shw-component-copy-button-code-block"><code
              id="test-modal-code-block-editable"
              contenteditable="true"
            >&lt;h1&gt;Lorem&lt;/h1&gt;
&lt;p&gt;Ipsum dolor&lt;/p&gt;</code></pre>
                <Hds::Copy::Button
                  @isIconOnly={{true}}
                  @text="Copy the code block content"
                  @targetToCopy="#test-modal-code-block-editable"
                />
              </div>
            </form>
          </M.Body>
          <M.Footer as |F|>
            <Hds::ButtonSet>
              <Hds::Button type="submit" @text="OK" {{on "click" this.deactivateModal}} />
              <Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
            </Hds::ButtonSet>
          </M.Footer>
        </Hds::Modal>
      {{/if}}
    </SG.Item>
  </Shw::Grid>

  <Shw::Text::H4>HTML blocks</Shw::Text::H4>

  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
    <SG.Item @label="Structured content">
      <Hds::Copy::Button @text="Copy the content below" @targetToCopy="#test-structured-content" />
      <ul class="shw-component-copy-structured-content" id="test-structured-content">
        <li class="shw-text-body">
          <p>This whole list is the
            <span><strong>target</strong>
              <em>element</em></span></p>
        </li>
        <li class="shw-text-body">
          <p>The button will
            <code>copy</code>
            the
            <a href="#">text</a>
            in this
            <cite>target</cite>
            element.</p>
        </li>
      </ul>
    </SG.Item>
    <SG.Item @label="With hidden content">
      <Hds::Copy::Button @text="Copy the content below" @targetToCopy="#test-hidden-content" />
      <p class="shw-text-body" id="test-hidden-content">This paragraph contains some
        <strong class="shw-component-copy-button-display-none">not</strong>
        hidden content
        <strong class="shw-component-copy-button-visibility-hidden">, or not?</strong>
      </p>
    </SG.Item>
  </Shw::Grid>

  <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
    <SG.Item @label="Code block">
      <Hds::Copy::Button @text="Copy the code block" @targetToCopy="#test-code-block" />
      {{!-- prettier-ignore --}}
      <pre class="shw-component-copy-button-code-block"><code id="test-code-block">&lt;h1&gt;A page header example&lt;/h1&gt;
&lt;p&gt;Some paragraph text also&lt;/p&gt;</code></pre>
    </SG.Item>
    <SG.Item @label="Code block with 'contenteditable'">
      <Hds::Copy::Button @text="Edit and copy the code block" @targetToCopy="#test-code-block-editable" />
      {{!-- prettier-ignore --}}
      <pre class="shw-component-copy-button-code-block"><code id="test-code-block-editable" contenteditable="true">&lt;h1&gt;A page header example&lt;/h1&gt;
&lt;p&gt;Some paragraph text also&lt;/p&gt;</code></pre>
    </SG.Item>
  </Shw::Grid>

  <Shw::Text::H4>HTML input elements</Shw::Text::H4>

  <Shw::Flex @gap="2rem" as |SF|>
    <SF.Item @label="Text input">
      <div class="shw-component-copy-button-flex-container">
        <input type="text" name="test-generic-input-text" id="test-generic-input-text" value="Lorem ipsum dolor" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input text value"
          @targetToCopy="#test-generic-input-text"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Password input">
      <div class="shw-component-copy-button-flex-container">
        <input
          type="password"
          name="test-generic-input-password"
          id="test-generic-input-password"
          value="Thisisapassword"
        />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input password value"
          @targetToCopy="#test-generic-input-password"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Number input">
      <div class="shw-component-copy-button-flex-container">
        <input type="number" name="test-generic-input-number" id="test-generic-input-number" value="123456" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input number value"
          @targetToCopy="#test-generic-input-number"
        />
      </div>
    </SF.Item>
    <SF.Item @label="URL input">
      <div class="shw-component-copy-button-flex-container">
        <input type="url" name="test-generic-input-url" id="test-generic-input-url" value="https://www.hello.com" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input url value"
          @targetToCopy="#test-generic-input-url"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Email input">
      <div class="shw-component-copy-button-flex-container">
        <input type="email" name="test-generic-input-email" id="test-generic-input-email" value="info@hello.com" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input email value"
          @targetToCopy="#test-generic-input-email"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Date input">
      <div class="shw-component-copy-button-flex-container">
        <input type="date" name="test-generic-input-date" id="test-generic-input-date" value="2018-07-22" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input date value"
          @targetToCopy="#test-generic-input-date"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Time input">
      <div class="shw-component-copy-button-flex-container">
        <input type="time" name="test-generic-input-time" id="test-generic-input-time" value="23:59" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input time value"
          @targetToCopy="#test-generic-input-time"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Range input">
      <div class="shw-component-copy-button-flex-container">
        <input type="range" name="test-generic-input-range" id="test-generic-input-range" min="0" max="10" value="6" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input range value"
          @targetToCopy="#test-generic-input-range"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Color input">
      <div class="shw-component-copy-button-flex-container">
        <input type="color" name="test-generic-input-color" id="test-generic-input-color" value="#e66465" />
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic input color value"
          @targetToCopy="#test-generic-input-color"
        />
      </div>
    </SF.Item>
  </Shw::Flex>
  <Shw::Flex @gap="2rem" as |SF|>
    <SF.Item @label="Textarea">
      <div class="shw-component-copy-button-flex-container">
        <textarea name="test-generic-textarea" id="test-generic-textarea" rows="3">Lorem ipsum dolor</textarea>
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic textarea value"
          @targetToCopy="#test-generic-textarea"
        />
      </div>
    </SF.Item>
    <SF.Item @label="Select">
      <div class="shw-component-copy-button-flex-container">
        <select name="test-generic-select" id="test-generic-select">
          <option>Lorem ipsum dolor</option>
          <option>Sit amet</option>
          <option>Consectetur adipiscing elit</option>
        </select>
        <Hds::Copy::Button
          @isIconOnly={{true}}
          @text="Copy the generic select value"
          @targetToCopy="#test-generic-select"
        />
      </div>
    </SF.Item>
  </Shw::Flex>

</section>