Website: Convert Modal demos to new format

website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.hbs

@@ -0,0 +1,15 @@
+<Hds::Button @text="Open basic modal" @color="secondary" {{on "click" this.activateModal}} />
+
+{{#if this.isOpen}}
+  <Hds::Modal id="basic-modal" @onClose={{this.deactivateModal}} as |M|>
+    <M.Header>
+      Modal title
+    </M.Header>
+    <M.Body>
+      <p class="hds-typography-body-300 hds-foreground-primary">Modal content</p>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}

website/docs/components/modal/partials/code/code-snippets/modal-basic.classic.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class LocalComponent extends Component {
+  @tracked isOpen = false;
+
+  @action
+  activateModal() {
+    this.isOpen = true;
+  }
+
+  @action
+  deactivateModal() {
+    this.isOpen = false;
+  }
+}

website/docs/components/modal/partials/code/code-snippets/modal-basic.gts

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+
+import {
+  HdsModal,
+  HdsButton,
+} from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  @tracked isOpen = false;
+
+  activateModal = () => {
+    this.isOpen = true;
+  };
+
+  deactivateModal = () => {
+    this.isOpen = false;
+  };
+
+  <template>
+    <HdsButton
+      @text="Open basic modal"
+      @color="secondary"
+      {{on "click" this.activateModal}}
+    />
+
+    {{#if this.isOpen}}
+      <HdsModal id="basic-modal" @onClose={{this.deactivateModal}} as |M|>
+        <M.Header>
+          Modal title
+        </M.Header>
+        <M.Body>
+          <p class="hds-typography-body-300 hds-foreground-primary">Modal
+            content</p>
+        </M.Body>
+        <M.Footer as |F|>
+          <HdsButton type="button" @text="Confirm" {{on "click" F.close}} />
+        </M.Footer>
+      </HdsModal>
+    {{/if}}
+  </template>
+}

website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.hbs

@@ -0,0 +1,30 @@
+<Hds::Button @text="Open form modal" @color="secondary" {{on "click" this.activateModal}} />
+
+{{#if this.isOpen}}
+  <Hds::Modal id="form-modal" @onClose={{this.deactivateModal}} as |M|>
+    <M.Header>
+      Why do you want to leave the beta?
+    </M.Header>
+    <M.Body>
+      <Hds::Form id="leaving-beta-form" {{on "submit" this.submitForm}} as |FORM|>
+        <FORM.Section>
+          <Hds::Form::Select::Field @width="100%" as |F|>
+            <F.Label>Select the primary reason</F.Label>
+            <F.Options>
+              <option></option>
+            </F.Options>
+          </Hds::Form::Select::Field>
+          <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
+            <F.Label>Your feedback</F.Label>
+          </Hds::Form::Textarea::Field>
+        </FORM.Section>
+      </Hds::Form>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button type="submit" form="leaving-beta-form" @text="Leave Beta" />
+        <Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}

website/docs/components/modal/partials/code/code-snippets/modal-with-form.classic.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class Index extends Component {
+  @tracked isOpen = false;
+
+  @action
+  activateModal() {
+    this.isOpen = true;
+  }
+
+  @action
+  deactivateModal() {
+    this.isOpen = false;
+  }
+
+  @action
+  submitForm() {
+    this.isOpen = false;
+  }
+}

website/docs/components/modal/partials/code/code-snippets/modal-with-form.gts

@@ -0,0 +1,78 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+
+import {
+  HdsModal,
+  HdsButton,
+  HdsButtonSet,
+  HdsForm,
+  HdsFormSelectField,
+  HdsFormTextareaField,
+} from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  @tracked isOpen = false;
+
+  activateModal = () => {
+    this.isOpen = true;
+  };
+
+  deactivateModal = () => {
+    this.isOpen = false;
+  };
+
+  submitForm = () => {
+    this.isOpen = false;
+  };
+
+  <template>
+    <HdsButton
+      @text="Open form modal"
+      @color="secondary"
+      {{on "click" this.activateModal}}
+    />
+
+    {{#if this.isOpen}}
+      <HdsModal id="form-modal" @onClose={{this.deactivateModal}} as |M|>
+        <M.Header>
+          Why do you want to leave the beta?
+        </M.Header>
+        <M.Body>
+          <HdsForm
+            id="leaving-beta-form"
+            {{on "submit" this.submitForm}}
+            as |FORM|
+          >
+            <FORM.Section>
+              <HdsFormSelectField @width="100%" as |F|>
+                <F.Label>Select the primary reason</F.Label>
+                <F.Options>
+                  <option></option>
+                </F.Options>
+              </HdsFormSelectField>
+              <HdsFormTextareaField @isOptional={{true}} as |F|>
+                <F.Label>Your feedback</F.Label>
+              </HdsFormTextareaField>
+            </FORM.Section>
+          </HdsForm>
+        </M.Body>
+        <M.Footer as |F|>
+          <HdsButtonSet>
+            <HdsButton
+              type="submit"
+              form="leaving-beta-form"
+              @text="Leave Beta"
+            />
+            <HdsButton
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </HdsButtonSet>
+        </M.Footer>
+      </HdsModal>
+    {{/if}}
+  </template>
+}

website/docs/components/modal/partials/code/how-to-use.md

@@ -26,31 +26,7 @@ When the Modal has been closed, the browser automatically returns the focus to t
 
 ## How to use this component
 
-```handlebars
-<Hds::Button
-  @text="Open basic modal"
-  @color="secondary"
-  {{on "click" (fn this.activateModal "basicModalActive")}}
-/>
-
-{{#if this.basicModalActive}}
-  <Hds::Modal
-    id="basic-modal"
-    @onClose={{fn this.deactivateModal "basicModalActive"}}
-    as |M|
-  >
-    <M.Header>
-      Modal title
-    </M.Header>
-    <M.Body>
-      <p class="hds-typography-body-300 hds-foreground-primary">Modal content</p>
-    </M.Body>
-    <M.Footer as |F|>
-      <Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
-    </M.Footer>
-  </Hds::Modal>
-{{/if}}
-```
+[[code-snippets/modal-basic]]
 
 ### Form within a Modal dialog
 
@@ -60,49 +36,4 @@ The `<form>` element should be placed in the yielded `Body` subcomponent. We als
 
 When the Modal dialog contains information that might be lost on close, use a confirmation message before discarding it.
 
-```handlebars
-<Hds::Button
-  @text="Open form modal"
-  @color="secondary"
-  {{on "click" (fn this.activateModal "formModalActive")}}
-/>
-
-{{#if this.formModalActive}}
-  <Hds::Modal
-    id="form-modal"
-    @onClose={{fn this.deactivateModal "formModalActive"}}
-    as |M|
-  >
-    <M.Header>
-      Why do you want to leave the beta?
-    </M.Header>
-    <M.Body>
-      <Hds::Form
-        id="leaving-beta-form"
-        {{on "submit" (fn this.submitForm)}}
-        as |FORM|
-      >
-        <FORM.Section>
-          <Hds::Form::Select::Field autofocus @width="100%" as |F|>
-            <F.Label>Select the primary reason</F.Label>
-            <F.Options>
-              <option></option>
-            </F.Options>
-          </Hds::Form::Select::Field>
-          <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
-            <F.Label>Your feedback</F.Label>
-          </Hds::Form::Textarea::Field>
-        </FORM.Section>
-      </Hds::Form>
-    </M.Body>
-    <M.Footer as |F|>
-      <Hds::ButtonSet>
-        <Hds::Button type="submit" form="leaving-beta-form" @text="Leave Beta" />
-        <Hds::Button type="button" @text="Cancel" @color="secondary"
-          {{on "click" F.close}}
-        />
-      </Hds::ButtonSet>
-    </M.Footer>
-  </Hds::Modal>
-{{/if}}
-```
+[[code-snippets/modal-with-form]]