cleanup demo component

Author: driskull

coordinate-calcite-js/index.html

@@ -17,7 +17,7 @@
   <!-- Demo imports -->
   <script src="./app.js" defer></script>
   <link rel="stylesheet" href="./style.css" />
-  <script type="module" src="../esri-devsummit/esri-devsummit.esm.js"></script>
+  <script type="module" src="../esri-demo/esri-demo.esm.js"></script>
   <style>
     html,
     body,
@@ -56,7 +56,7 @@
       <calcite-accordion selection-mode="single" scale="l">
         <calcite-accordion-item heading="1. Create Calcite HTML" description="Set up the DOM using calcite-components"
           icon-start="code">
-          <esri-devsummit-code source="export function createCustomCoordinateConversion(view) {
+          <esri-demo-code source="export function createCustomCoordinateConversion(view) {
   const vm = new CoordinateConversionViewModel({
     view,
     multipleConversions: false,
@@ -80,11 +80,11 @@
     &lt;/div&gt;
   `;
   // ...
-}"></esri-devsummit-code>
+}"></esri-demo-code>
         </calcite-accordion-item>
         <calcite-accordion-item heading="2. Watch the ViewModel for changes and react to them"
           description="Watching VM properties to update the DOM" icon-start="recurrence">
-          <esri-devsummit-code source="watch(
+          <esri-demo-code language="js" source="watch(
   () =&gt; vm.conversions.getItemAt(0)?.format,
   (format) =&gt; updateFormats(format),
   { initial: true }
@@ -103,11 +103,11 @@
 function updateCoordinates(activeDisplayCoordinate) {
   coordinateInput.value = activeDisplayCoordinate;
   coordinateInput.status = &quot;valid&quot;;
-}"></esri-devsummit-code>
+}"></esri-demo-code>
         </calcite-accordion-item>
         <calcite-accordion-item heading="3. Listening to calcite components for changes"
           description="Add event listeners for calcite components to update the ViewModel" icon-start="recurrence">
-          <esri-devsummit-code source="coordinateSelect.addEventListener(&quot;calciteSelectChange&quot;, (event) =&gt; {
+          <esri-demo-code language="js" source="coordinateSelect.addEventListener(&quot;calciteSelectChange&quot;, (event) =&gt; {
   const value = event.target.value;
   const format = vm.formats.find((format) =&gt; format.name === value);
   const newConversion = new Conversion({ format });
@@ -117,11 +117,11 @@
 
 coordinateMode.addEventListener(&quot;calciteSegmentedControlChange&quot;, (event) =&gt; {
   vm.mode = event.target.value;
-});"></esri-devsummit-code>
+});"></esri-demo-code>
         </calcite-accordion-item>
         <calcite-accordion-item heading="4. Capturing a point"
           description="Calling a ViewModel method and navigating to the returned point" icon-start="pin">
-          <esri-devsummit-code source="  async function reverseConvert() {
+          <esri-demo-code language="js" source="  async function reverseConvert() {
     coordinateEditable.editingEnabled = false;
     const value = coordinateInput.value;
     try {
@@ -137,17 +137,17 @@
     () =&gt; {
       reverseConvert();
     }
-  );"></esri-devsummit-code>
+  );"></esri-demo-code>
         </calcite-accordion-item>
         <calcite-accordion-item heading="5. Applying some CSS" description="A small bit of CSS" icon-start="palette">
-          <esri-devsummit-code source=".custom-coordinate-conversion {
+          <esri-demo-code language="css" source=".custom-coordinate-conversion {
   display: flex;
   flex-direction: column;
   padding: 10px;
   gap: 10px;
   background-color: white;
   min-width: 350px;
-}"></esri-devsummit-code>
+}"></esri-demo-code>
         </calcite-accordion-item>
       </calcite-accordion>
     </div>

coordinate-calcite-js/style.css

@@ -25,7 +25,7 @@ calcite-action-pad {
   margin-inline-end: 0.5rem;
 }
 
-esri-devsummit-code {
+esri-demo-code {
   margin: 15px 0;
   font-size: 18px;
   line-height: 24px;

coordinate-fluent-react-js/index.html

@@ -12,7 +12,7 @@
   <!-- Demo imports -->
   <script src="./app.js" defer></script>
   <link rel="stylesheet" href="./style.css" />
-  <script type="module" src="../esri-devsummit/esri-devsummit.esm.js"></script>
+  <script type="module" src="../esri-demo/esri-demo.esm.js"></script>
   <style>
     html,
     body,
@@ -48,10 +48,10 @@
     <div slot="content">
       <calcite-accordion selection-mode="single" scale="l">
         <calcite-accordion-item expanded heading="1. TODO" description="TODO" icon-start="group-layout-elements">
-          <esri-devsummit-code source="TODO"></esri-devsummit-code>
+          <esri-demo-code language="js" source="TODO"></esri-demo-code>
         </calcite-accordion-item>
         <calcite-accordion-item heading="2. TODO" description="TODO" icon-start="list">
-          <esri-devsummit-code source="TODO"></esri-devsummit-code>
+          <esri-demo-code language="js" source="TODO"></esri-demo-code>
         </calcite-accordion-item>
       </calcite-accordion>
     </div>

coordinate-fluent-react-js/style.css

@@ -25,7 +25,7 @@ calcite-action-pad {
   margin-inline-end: 0.5rem;
 }
 
-esri-devsummit-code {
+esri-demo-code {
   margin: 15px 0;
   font-size: 18px;
   line-height: 24px;