@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.0

package/components/form/demo/index.md

@@ -41,32 +41,28 @@ Each element will be added using the element's `name` attribute as the key, and
 
 A real-world example of this might be:
 
-```json
-{
+<pre class="language-json"><code class="language-json">{
   "hotelCity": "New York",
   "dates": ["2022-01-01", "2022-01-15"],
   "numberOfGuests": 2
-}
-```
+}</code></pre>
 
 If your project uses TypeScript, consider using a type like this to represent the form data:
 
-```typescript
-// Generic type for form values
-type AuroFormValue<T> = T | null;
-
+<pre class="language-typescript"><code class="language-typescript">// Generic type for form values
+type AuroFormValue&lt;T&gt; = T | null;
+​
 // Example types
-type AuroInputValue = AuroFormValue<string | number>;
-type AuroDatePickerValue = AuroFormValue<string[]>;
-
+type AuroInputValue = AuroFormValue&lt;string | number&gt;;
+type AuroDatePickerValue = AuroFormValue&lt;string[]&gt;;
+​
 // This is the type returned from the `AuroForm.value` getter
 interface AuroFormState {
   // value varies based on form element
   hotelCity: AuroInputValue;
   dates: AuroDatePickerValue;
   numberOfGuests: AuroInputValue;
-}
-```
+}</code></pre>
 
 ## Accessing Form Data
 
@@ -99,30 +95,28 @@ The most basic form implementation requires an `auro-input` and an optional auro
 By default, Auro Form connects a `submit` event to all `type="submit"` buttons within the form.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-form>
-    <auro-input id="search-box" name="searchBox" required>
-      <span slot="label">Search flights</span>
-    </auro-input>
-    <br />
-    <auro-button type="submit">Submit</auro-button>
-  </auro-form>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-form>
+<auro-input id="search-box" name="searchBox" required>
+<span slot="label">Search flights</span>
+</auro-input>
+<br />
+<auro-button type="submit">Submit</auro-button>
+</auro-form>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-form>
-  <auro-input id="search-box" name="searchBox" required>
-    <span slot="label">Search flights</span>
-  </auro-input>
-  <br />
-  <auro-button type="submit">Submit</auro-button>
-</auro-form>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-form&gt;
+  &lt;auro-input id="search-box" name="searchBox" required&gt;
+    &lt;span slot="label"&gt;Search flights&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+&lt;/auro-form&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>