Component JSON options update and related changes

packages/materialdesign-components/components.json

@@ -28,9 +28,21 @@
     "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
     "props": {
       "onClick": "event",
-      "variant": "string",
+      "variant": {
-      "colour": "string",
+        "type": "options",
-      "size": "string",
+        "options": ["text", "raised", "unelevated", "outlined"],
+        "default": "text"
+      },
+      "colour": {
+        "type": "options",
+        "options": ["primary", "secondary"],
+        "default": "primary"
+      },
+      "size": {
+        "type": "options",
+        "options": ["small", "medium", "large"],
+        "default": "medium"
+      },            
       "href": "string",
       "icon": "string",
       "trailingIcon": "bool",
@@ -159,7 +171,6 @@
       "onClick": "event",
       "id": "string",
       "label": "string",      
-      "names": "string",
       "name": "string",
       "checked": "bool",
       "disabled": "bool",
@@ -189,12 +200,28 @@
     "props": {
       "onChange": "event",
       "label": "string",
-      "variant": "string",
+      "variant": {
+        "type": "options",
+        "options": ["standard", "outlined", "filled"],
+        "default": "standard"
+      },
       "disabled": "bool",
       "fullwidth": "bool",
-      "colour":"string",
+      "colour": {
-      "size":"string",
+        "type": "options",
-      "type": "string",
+        "options": ["primary", "secondary"],
+        "default": "primary"
+      },
+      "size":{
+        "type": "options",
+        "options": ["small", "medium", "large"],
+        "default": "medium"
+      },
+      "type": {
+        "type": "options",
+        "options": ["text", "password"],
+        "default": "text"
+      },
       "required": "bool",
       "minLength": "number",
       "maxLength": "number",

packages/materialdesign-components/src/Button/Button.svelte

@@ -4,11 +4,11 @@
   import ripple from "../Common/Ripple.js"
   import ClassBuilder from "../ClassBuilder.js"
 
-  const cb = new ClassBuilder("button", ["primary", "medium"])
+  const cb = new ClassBuilder("button", ["primary", "medium", "text"])
 
   export let onClick = () => {}
 
-  export let variant = "raised"
+  export let variant = "text"
   export let colour = "primary"
   export let size = "medium"