Fix motion todo example by removing mwc components

Author: binlabs

packages/lit-dev-content/samples/examples/motion-todos/motion-todos.ts

@@ -4,12 +4,6 @@ import {classMap} from 'lit/directives/class-map.js';
 import {repeat} from 'lit/directives/repeat.js';
 import {animate, fadeOut, flyBelow} from '@lit-labs/motion';
 import {styles} from './styles.js';
-import {TextField} from '@material/mwc-textfield';
-import {Checkbox} from '@material/mwc-checkbox';
-import '@material/mwc-textfield';
-import '@material/mwc-button';
-import '@material/mwc-checkbox';
-import '@material/mwc-formfield';
 
 const data = [
   {id: 1, value: 'Go running.', completed: false},
@@ -34,7 +28,7 @@ export class MotionTodos extends LitElement {
 
   @property({type: Array}) data = data;
 
-  @query('mwc-textfield') textField!: TextField;
+  @query('input[type="text"]') textField!: HTMLInputElement;
 
   addItem() {
     if (!this.textField.value) {
@@ -91,24 +85,22 @@ export class MotionTodos extends LitElement {
               skipInitial: true,
             })}
           >
-            <mwc-formfield label="${item.id}. ${item.value}"
-              ><mwc-checkbox
+            <label>
+              ${item.id}. ${item.value}
+              <input
                 type="checkbox"
                 ?checked=${completed}
                 @change=${(e: Event) =>
-                  this.updateItem(item, (e.target! as Checkbox).checked)}
-              ></mwc-checkbox></mwc-formfield
-            ><button @click=${() => this.removeItem(item)}>
-              remove_circle_outline
-            </button>
+                  this.updateItem(item, (e.target! as HTMLInputElement).checked)}
+              ></label><button @click=${() => this.removeItem(item)}>x</button>
           </li>`
         )}
       </ul>
     </div>`;
     return html`
-      <mwc-textfield outlined label="Enter a todo..."></mwc-textfield>
+      <input type="text" placeholder="Enter a todo...">
       <div class="controls">
-        <mwc-button @click=${this.addItem} raised>Add Todo</mwc-button>
+        <button @click=${this.addItem}>Add Todo</button>
       </div>
       <div class="lists">${list()} ${list(true)}</div>
     `;

packages/lit-dev-content/samples/examples/motion-todos/project.json

@@ -8,7 +8,7 @@
     "styles.ts": {},
     "index.html": {},
     "package.json": {
-      "content": "{\n  \"dependencies\": {\n    \"lit\": \"^3.0.0\",\n    \"@lit-labs/motion\": \"^1.0.1\",\n    \"@material/mwc-textfield\": \"^0.25.1\",\n    \"@material/mwc-checkbox\": \"^0.25.1\",\n    \"@material/mwc-button\": \"^0.25.1\",\n    \"@material/mwc-formfield\": \"^0.25.1\"\n  }\n}",
+      "content": "{\n  \"dependencies\": {\n    \"lit\": \"^3.0.0\",\n    \"@lit-labs/motion\": \"^1.0.1\",\n  }\n}",
       "hidden": true
     }
   },

packages/lit-dev-content/samples/examples/motion-todos/styles.ts

@@ -6,17 +6,11 @@ export const styles = [
       display: inline-block;
       outline: none;
       padding: 8px;
-      --mdc-theme-primary: #0069c0;
-      --mdc-theme-secondary: #1b5e20;
-      --mdc-typography-body2-font-size: 1.1rem;
-      --mdc-typography-body2-font-weight: 600;
-      --mdc-checkbox-unchecked-color: black;
     }
 
-    mwc-textfield {
+    input[type='text'] {
       display: block;
       margin-top: 16px;
-      --mdc-shape-small: 12px;
     }
 
     .controls {
@@ -54,12 +48,11 @@ export const styles = [
       border: none;
       background: none;
       outline: none;
-      font-family: 'Material Icons';
       font-size: 24px;
       cursor: pointer;
     }
 
-    li > mwc-formfield {
+    li > label {
       flex: 1;
     }