Showcase: Convert Form Base Elements to gts

showcase/app/components/page-components/form/base-elements/code-fragments/with-character-count.gts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import type Owner from '@ember/owner';
+
+import { HdsFormCharacterCount } from '@hashicorp/design-system-components/components';
+
+export interface CodeFragmentWithCharacterCountSignature {
+  Args: {
+    value?: string;
+    ariaLabel?: string;
+    minLength?: number;
+    maxLength?: number;
+    customContent?: boolean;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class CodeFragmentWithCharacterCount extends Component<CodeFragmentWithCharacterCountSignature> {
+  @tracked value = '';
+  uuid = guidFor(this);
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithCharacterCountSignature['Args'],
+  ) {
+    super(owner, args);
+    this.value = this.args.value ?? '';
+  }
+
+  updateValue = (event: Event) => {
+    const { value } = event.target as HTMLInputElement;
+    this.value = value;
+  };
+
+  <template>
+    {{! template-lint-disable require-input-label }}
+    <input
+      type="text"
+      aria-label={{@ariaLabel}}
+      id={{this.uuid}}
+      value={{this.value}}
+      {{on "input" this.updateValue}}
+    />
+    {{#if @customContent}}
+      <HdsFormCharacterCount
+        @minLength={{@minLength}}
+        @maxLength={{@maxLength}}
+        @controlId={{this.uuid}}
+        @value={{this.value}}
+        as |CC|
+      >
+        maxLength={{CC.maxLength}}; minLength={{CC.minLength}}; remaining={{CC.remaining}};
+        shortfall={{CC.shortfall}}; currentLength={{CC.currentLength}};
+      </HdsFormCharacterCount>
+    {{else}}
+      <HdsFormCharacterCount
+        @minLength={{@minLength}}
+        @maxLength={{@maxLength}}
+        @controlId={{this.uuid}}
+        @value={{this.value}}
+      />
+    {{/if}}
+    {{! template-lint-enable require-input-label }}
+  </template>
+}

showcase/app/components/page-components/form/base-elements/index.gts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { pageTitle } from 'ember-page-title';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+
+import SubSectionCharacterCount from 'showcase/components/page-components/form/base-elements/sub-sections/character-count';
+import SubSectionError from 'showcase/components/page-components/form/base-elements/sub-sections/error';
+import SubSectionField from 'showcase/components/page-components/form/base-elements/sub-sections/field';
+import SubSectionFieldset from 'showcase/components/page-components/form/base-elements/sub-sections/fieldset';
+import SubSectionHelperText from 'showcase/components/page-components/form/base-elements/sub-sections/helper-text';
+import SubSectionIndicator from 'showcase/components/page-components/form/base-elements/sub-sections/indicator';
+import SubSectionLabel from 'showcase/components/page-components/form/base-elements/sub-sections/label';
+import SubSectionLegend from 'showcase/components/page-components/form/base-elements/sub-sections/legend';
+import SubSectionVisibilityToggle from 'showcase/components/page-components/form/base-elements/sub-sections/visibility-toggle';
+
+export default class FormBaseElementsIndex extends Component {
+  @tracked showHighlight = false;
+
+  toggleHighlight = () => {
+    this.showHighlight = !this.showHighlight;
+  };
+
+  <template>
+    {{pageTitle "BaseElements Component"}}
+
+    <ShwTextH1>Form / Base elements</ShwTextH1>
+
+    <section data-test-percy>
+      <SubSectionLabel />
+      <SubSectionHelperText />
+      <SubSectionIndicator />
+      <SubSectionCharacterCount />
+      <SubSectionError />
+      <SubSectionLegend />
+      <SubSectionField
+        @showHighlight={{this.showHighlight}}
+        @toggleHighlight={{this.toggleHighlight}}
+      />
+      <SubSectionFieldset
+        @showHighlight={{this.showHighlight}}
+        @toggleHighlight={{this.toggleHighlight}}
+      />
+      <SubSectionVisibilityToggle />
+    </section>
+  </template>
+}

showcase/app/components/page-components/form/base-elements/sub-sections/character-count.gts

@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwTextBody from 'showcase/components/shw/text/body';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+
+import CodeFragmentWithCharacterCount from 'showcase/components/page-components/form/base-elements/code-fragments/with-character-count';
+
+const SubSectionCharacterCount: TemplateOnlyComponent = <template>
+  <ShwTextH2>Character count</ShwTextH2>
+
+  <ShwTextH3>Default content</ShwTextH3>
+
+  <ShwTextBody>Base</ShwTextBody>
+
+  <ShwGrid @columns={{4}} as |SG|>
+    <SG.Item @label="currentLength = 0">
+      <CodeFragmentWithCharacterCount @ariaLabel="currentLength = 0" />
+    </SG.Item>
+    <SG.Item @label="currentLength > 0">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength > 0"
+        @value="cl"
+      />
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwTextBody>maxLength</ShwTextBody>
+
+  <ShwGrid @columns={{4}} as |SG|>
+    <SG.Item @label="currentLength = 0">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength = 0"
+        @maxLength={{25}}
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength < maxLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength < maxLength"
+        @maxLength={{25}}
+        @value="cluster"
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength = maxLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength = maxLength"
+        @maxLength={{25}}
+        @value="cluster-length-is-longer-"
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength > maxLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength > maxLength"
+        @maxLength={{25}}
+        @value="cluster-length-is-longer-than"
+      />
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwTextBody>minLength</ShwTextBody>
+
+  <ShwGrid @columns={{4}} as |SG|>
+    <SG.Item @label="currentLength = 0">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength = 0"
+        @minLength={{3}}
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength < maxLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength < maxLength"
+        @minLength={{3}}
+        @value="c"
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength >= minLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength >= minLength"
+        @minLength={{3}}
+        @value="clu"
+      />
+    </SG.Item>
+    <SG.Item />
+  </ShwGrid>
+
+  <ShwTextBody>minLength + maxLength</ShwTextBody>
+
+  <ShwGrid @columns={{4}} as |SG|>
+    <SG.Item @label="currentLength = 0">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength = 0"
+        @minLength={{3}}
+        @maxLength={{25}}
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength < minLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength < minLength"
+        @minLength={{3}}
+        @maxLength={{25}}
+        @value="c"
+      />
+    </SG.Item>
+    <SG.Item @label="minLength <= currentLength <= maxLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="minLength <= currentLength <= maxLength"
+        @minLength={{3}}
+        @maxLength={{25}}
+        @value="cluster"
+      />
+    </SG.Item>
+    <SG.Item @label="currentLength > maxLength">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="currentLength > maxLength"
+        @minLength={{3}}
+        @maxLength={{25}}
+        @value="cluster-length-is-longer-than"
+      />
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Custom content</ShwTextH3>
+
+  <ShwFlex @direction="column" as |SF|>
+    <SF.Item @label="With custom content">
+      <CodeFragmentWithCharacterCount
+        @ariaLabel="with custom content"
+        @minLength={{20}}
+        @maxLength={{40}}
+        @customContent={{true}}
+        @value="Lorem ipsum dolor"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
+</template>;
+
+export default SubSectionCharacterCount;

showcase/app/components/page-components/form/base-elements/sub-sections/error.gts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwOutliner from 'showcase/components/shw/outliner';
+
+import { HdsFormError } from '@hashicorp/design-system-components/components';
+
+const SubSectionError: TemplateOnlyComponent = <template>
+  <ShwTextH2>Error</ShwTextH2>
+
+  <ShwFlex @direction="column" as |SF|>
+    <SF.Item @label="With simple text">
+      <HdsFormError>This is a simple error message</HdsFormError>
+    </SF.Item>
+    <SF.Item @label="With text that spans multiple lines">
+      <ShwOutliner {{style width="250px"}}>
+        <HdsFormError>This is a very long error message that should span on
+          multiple lines</HdsFormError>
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item @label="With multiple error messages">
+      <HdsFormError as |Error|>
+        <Error.Message>First error message</Error.Message>
+        <Error.Message>Second error message</Error.Message>
+      </HdsFormError>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
+</template>;
+
+export default SubSectionError;