From a8d99b6eeff6942249ef0cd18d199656dd05d459 Mon Sep 17 00:00:00 2001
From: NatashaKab <133793701+NatashaKab@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:30:46 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Retire=20rose=20form=20?=
 =?UTF-8?q?textarea=20(#1735)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 Retire rose form textarea
---
 .../rose/addon/components/rose/form/index.hbs |   1 -
 .../components/rose/form/index.stories.mdx    |  18 ++-
 .../components/rose/form/textarea/index.hbs   |  64 -----------
 .../components/rose/form/textarea/index.js    |  13 ---
 .../rose/form/textarea/index.stories.mdx      | 107 +++---------------
 .../rose/form/textarea/textarea/index.hbs     |  14 ---
 .../components/rose/form/textarea/textarea.js |   6 -
 .../integration/components/rose/form-test.js  |   9 +-
 .../components/rose/form/textarea-test.js     |  90 ---------------
 9 files changed, 40 insertions(+), 282 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/form/textarea/index.hbs
 delete mode 100644 addons/rose/addon/components/rose/form/textarea/index.js
 delete mode 100644 addons/rose/addon/components/rose/form/textarea/textarea/index.hbs
 delete mode 100644 addons/rose/app/components/rose/form/textarea/textarea.js
 delete mode 100644 addons/rose/tests/integration/components/rose/form/textarea-test.js

diff --git a/addons/rose/addon/components/rose/form/index.hbs b/addons/rose/addon/components/rose/form/index.hbs
index a2f805e3b..33f7e6086 100644
--- a/addons/rose/addon/components/rose/form/index.hbs
+++ b/addons/rose/addon/components/rose/form/index.hbs
@@ -27,7 +27,6 @@
         'rose/form/checkbox/group' disabled=this.disabled
       )
       input=(component 'rose/form/input' disabled=this.disabled)
-      textarea=(component 'rose/form/textarea' disabled=this.disabled)
       fieldset=(component 'rose/form/fieldset')
       actions=(component
         (if
diff --git a/addons/rose/addon/components/rose/form/index.stories.mdx b/addons/rose/addon/components/rose/form/index.stories.mdx
index 5a90b6327..900017655 100644
--- a/addons/rose/addon/components/rose/form/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/index.stories.mdx
@@ -18,7 +18,13 @@ export const Template = (args) => ({
         as |form|
       >
         <form.input @label='Label' @helperText='Helper text' @value='Text' />
-        <form.textarea @label='Label' @helperText='Helper text' @value='Text' />
+        <Hds::Form::Textarea::Field  
+          @value="This is my description"
+          disabled={{form.disabled}}
+          as |F|>
+          <F.Label>Short description</F.Label>
+          <F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
+        </Hds::Form::Textarea::Field>
         <Hds::Form::Select::Field
           @value={{selectedValue}}
           @isInvalid={{false}}
@@ -78,8 +84,14 @@ export const Template = (args) => ({
   as |form|
 >
   <form.input @label='Label' @helperText='Helper text' @value='Text' />
-  <form.textarea @label='Label' @helperText='Helper text' @value='Text' />
-
+  <Hds::Form::Textarea::Field
+    @value='This is my description'
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>Short description</F.Label>
+    <F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
+  </Hds::Form::Textarea::Field>
   <Hds::Form::Select::Field
     @value={{selectedValue}}
     @isInvalid={{false}}
diff --git a/addons/rose/addon/components/rose/form/textarea/index.hbs b/addons/rose/addon/components/rose/form/textarea/index.hbs
deleted file mode 100644
index 39b4f6cf5..000000000
--- a/addons/rose/addon/components/rose/form/textarea/index.hbs
+++ /dev/null
@@ -1,64 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-{{#if @contextual}}
-  {{yield
-    (hash
-      label=(component 'rose/form/label' for=this.id error=@error)
-      helperText=(component
-        'rose/form/helper-text' id=(concat 'helper-text-' this.id) error=@error
-      )
-      field=(component
-        'rose/form/textarea/textarea'
-        id=this.id
-        name=@name
-        value=@value
-        disabled=@disabled
-        error=@error
-        aria-describedby=(concat
-          (if @helperText (concat 'helper-text-' this.id))
-          (if @error (concat ' errors-' this.id))
-        )
-      )
-      errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
-    )
-  }}
-{{else}}
-  <div class='rose-form-input'>
-
-    <Rose::Form::Label @for={{this.id}} @error={{@error}}>
-      {{@label}}
-    </Rose::Form::Label>
-
-    {{#if @helperText}}
-      <Rose::Form::HelperText
-        @id='helper-text-{{this.id}}'
-        @error={{@error}}
-        @link={{@link}}
-        @linkText={{@linkText}}
-      >
-        {{@helperText}}
-      </Rose::Form::HelperText>
-    {{/if}}
-
-    <Rose::Form::Textarea::Textarea
-      ...attributes
-      @id={{this.id}}
-      @name={{@name}}
-      @value={{@value}}
-      @disabled={{@disabled}}
-      @error={{@error}}
-      @aria-describedby='{{if @helperText (concat "helper-text-" this.id)}} {{if
-        @error
-        (concat "errors-" this.id)
-      }}'
-    />
-
-    {{yield
-      (hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)))
-    }}
-
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/form/textarea/index.js b/addons/rose/addon/components/rose/form/textarea/index.js
deleted file mode 100644
index e0f3d33f7..000000000
--- a/addons/rose/addon/components/rose/form/textarea/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { generateComponentID } from '../../../../utilities/component-auto-id';
-
-export default class RoseFormTextareaComponent extends Component {
-  // =attributes
-
-  id = generateComponentID();
-}
diff --git a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
index 367ae34d4..6f431ad31 100644
--- a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
@@ -1,39 +1,30 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
 
-<Meta title="Rose/Form/Textarea" component="Form/Textarea" />
+<Meta title="Rose/Form/Textarea (removed)" component="Form/Textarea" />
 
-# Form Textarea
+# Textarea (removed)
 
-Renders a simple form textarea.
+Rose/Form/Textarea has been removed in favor of
+[HDS::Form::Textarea](https://design-system-components-hashicorp.vercel.app/components/form/textarea).
 
 ```handlebars
-<Rose::Form::Textarea
-  @name='field'
-  @value='Descriptive content'
-  @label='Description'
-  @helperText='Enter a description'
-  @error={{false}}
-  @disabled={{false}}
-  readonly={{false}}
-  @link='www.example.net'
-  @linkText='link text goes here'
-/>
+<Hds::Form::Textarea::Field
+  @value='This is my description'
+  disabled={{form.disabled}}
+  as |F|
+>
+  <F.Label>Short description</F.Label>
+  <F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
+</Hds::Form::Textarea::Field>
 ```
 
 export const Template = (args) => ({
   template: hbs`
-      <Rose::Form::Textarea
-        @name='field'
-        @value={{value}}
-        @label={{label}}
-        @helperText={{helperText}}
-        @error={{false}}
-        @disabled={{disabled}}
-        readonly={{read-only}}
-        @link='www.example.net'
-        @linkText='link text goes here'
-      />`,
+    <Hds::Form::Textarea::Field name="field" @value={{value}} @isOptional={{isOptional}} disabled={{disabled}} as |F|>
+      <F.Label>{{label}}</F.Label>
+      <F.HelperText>{{helperText}}</F.HelperText>
+    </Hds::Form::Textarea::Field>`,
   context: args,
 });
 
@@ -45,74 +36,10 @@ export const Template = (args) => ({
       value: 'Value',
       label: 'Label',
       helperText: 'Helper text',
-      link: 'link',
-      linkText: 'link text goes here',
       disabled: false,
-      'read-only': false,
+      isOptional: true,
     }}
   >
     {Template.bind({})}
   </Story>
 </Preview>
-
-export const ErrorTemplate = (args) => ({
-  template: hbs`
-      <Rose::Form::Textarea
-        @name='field'
-        @value={{value}}
-        @label={{label}}
-        @helperText={{helperText}}
-        @error={{true}}
-        @disabled={{disabled}}
-        readonly={{read-only}}
-        as |field|
-      >
-        <field.errors as |errors|>
-          <errors.message>An error occurred.</errors.message>
-        </field.errors>
-      </Rose::Form::Textarea>`,
-  context: args,
-});
-
-<Preview>
-  <Story
-    name="Textarea with Errors"
-    height="10rem"
-    args={{
-      value: 'Value',
-      label: 'Label',
-      helperText: 'Helper text',
-      disabled: false,
-      'read-only': false,
-    }}
-  >
-    {ErrorTemplate.bind({})}
-  </Story>
-</Preview>
-
-export const ContextualTemplate = (args) => ({
-  template: hbs`
-      <Rose::Form::Textarea
-        @value='Text'
-        @error={{true}}
-        @contextual={{true}}
-        as |field|
-      >
-        <hr />
-        <field.label>Label</field.label>
-        <hr />
-        <field.helperText>Help</field.helperText>
-        <hr />
-        <field.field />
-        <hr />
-        <field.errors as |errors|>
-          <errors.message>An error occurred.</errors.message>
-        </field.errors>
-        <hr />
-      </Rose::Form::Textarea>`,
-  context: args,
-});
-
-<Preview>
-  <Story name="Fully Contextual Textarea">{ContextualTemplate.bind({})}</Story>
-</Preview>
diff --git a/addons/rose/addon/components/rose/form/textarea/textarea/index.hbs b/addons/rose/addon/components/rose/form/textarea/textarea/index.hbs
deleted file mode 100644
index 0d67ccf08..000000000
--- a/addons/rose/addon/components/rose/form/textarea/textarea/index.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Textarea
-  ...attributes
-  class='rose-form-input-field{{if @error " error"}}'
-  id={{@id}}
-  name={{@name}}
-  disabled={{@disabled}}
-  @value={{@value}}
-  aria-describedby={{@aria-describedby}}
-/>
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/form/textarea/textarea.js b/addons/rose/app/components/rose/form/textarea/textarea.js
deleted file mode 100644
index 3bb81ca7c..000000000
--- a/addons/rose/app/components/rose/form/textarea/textarea.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from 'rose/components/rose/form/textarea/textarea';
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
index 9aebe5e86..0e4f62482 100644
--- a/addons/rose/tests/integration/components/rose/form-test.js
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -46,7 +46,14 @@ module('Integration | Component | rose/form', function (hooks) {
         as |form|
       >
         <form.input @label="Input" @name="input-field" />
-        <form.textarea @label="Textarea" @name="textarea-field" />
+        <Hds::Form::Textarea::Field 
+          @value="This is my description" 
+          name="textarea-field" 
+          disabled={{form.disabled}}
+          as |F|>
+          <F.Label>Short description</F.Label>
+          <F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
+        </Hds::Form::Textarea::Field>
 
         <Hds::Form::Select::Field
           @isInvalid={{false}}
diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js
deleted file mode 100644
index 680a5cfe3..000000000
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/form/textarea', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Form::Textarea @value="Text" @label="Label" />`);
-    assert.strictEqual(await find('label').textContent.trim(), 'Label');
-    assert.strictEqual(await find('textarea').value, 'Text');
-  });
-
-  test('it displays optional helper text', async function (assert) {
-    await render(hbs`<Rose::Form::Textarea @helperText="Help me" />`);
-    const fieldEl = find('textarea');
-    const id = fieldEl.id;
-    const helperId = `helper-text-${id}`;
-    const helperTextEl = find('.rose-form-helper-text');
-    assert.strictEqual(helperTextEl.textContent.trim(), 'Help me');
-    assert.strictEqual(helperTextEl.id, helperId);
-    assert.strictEqual(
-      fieldEl.getAttribute('aria-describedby').trim(),
-      helperId
-    );
-  });
-
-  test('it displays optional errors', async function (assert) {
-    await render(hbs`
-      <Rose::Form::Textarea @error={{true}} as |field|>
-        <field.errors as |errors|>
-          <errors.message>An error occurred.</errors.message>
-        </field.errors>
-      </Rose::Form::Textarea>
-    `);
-    const fieldEl = find('textarea');
-    const id = fieldEl.id;
-    const errorsId = `errors-${id}`;
-    const errorMessageEl = find('.rose-form-errors');
-    assert.strictEqual(errorMessageEl.id, errorsId);
-    assert.strictEqual(errorMessageEl.textContent.trim(), 'An error occurred.');
-    assert.strictEqual(
-      fieldEl.getAttribute('aria-describedby').split(' ')[1],
-      errorsId
-    );
-  });
-
-  test('it supports disabled attribute', async function (assert) {
-    await render(hbs`<Rose::Form::Textarea @disabled={{true}} />`);
-    assert.ok(await find('[disabled]'));
-  });
-
-  test('it supports readonly attribute', async function (assert) {
-    await render(hbs`<Rose::Form::Textarea readonly={{true}} />`);
-    assert.ok(await find('[readonly]'));
-  });
-
-  test('it gets an `error` class when @error=true', async function (assert) {
-    await render(hbs`<Rose::Form::Textarea @error={{true}} />`);
-    assert.ok(await find('.error'));
-  });
-
-  test('it supports a fully contextual usage', async function (assert) {
-    assert.expect(5);
-    await render(hbs`
-      <Rose::Form::Textarea @value="Text" @error={{true}} @contextual={{true}} as |field|>
-        <field.label>Label</field.label>
-        <field.helperText>Help</field.helperText>
-        <field.field />
-        <field.errors as |errors|>
-          <errors.message>An error occurred.</errors.message>
-        </field.errors>
-      </Rose::Form::Textarea>
-    `);
-    assert.notOk(
-      find('.rose-form-input'),
-      'The form field wrapper element is not present in contextual mode'
-    );
-    assert.ok(find('.rose-form-label.error'));
-    assert.ok(find('.rose-form-helper-text.error'));
-    assert.ok(find('.rose-form-input-field.error'));
-    assert.ok(find('.rose-form-error-message'));
-  });
-});