fix: use a nicer icon for static properties

.storybook/app.scss

@@ -24,4 +24,8 @@ body {
             background: var(--bs-tertiary);
         }
     }
+}
+
+html.dark button{
+    color: white;
 }

src/components/plugins/CollapsibleProperties.vue

@@ -18,9 +18,9 @@
                     </template>
                     <template #buttonRight="{collapsed}">
                         <span class="d-flex flex-grow-1 align-items-center justify-content-between">
-                            <span class="d-flex gap-1">
+                            <span class="d-flex gap-2">
                                 <Tooltip v-if="showDynamic && !isDynamic(property)" class="d-flex" title="Non-dynamic">
-                                    <Cancel class="text-danger" />
+                                    <AlphaSBoxOutline class="text-danger" />
                                 </Tooltip>
                                 <Tooltip v-if="property['$beta']" class="d-flex" title="Beta">
                                     <AlphaBBox class="text-warning" />
@@ -63,7 +63,7 @@
     import PropertyDetail from "./PropertyDetail.vue";
     import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
     import Alert from "vue-material-design-icons/Alert.vue";
-    import Cancel from "vue-material-design-icons/Cancel.vue";
+    import AlphaSBoxOutline from "vue-material-design-icons/AlphaSBoxOutline.vue";
     import AlphaBBox from "vue-material-design-icons/AlphaBBox.vue";
     import type {JSONSchema} from "./SchemaToHtml.vue";
     import EyeOutline from "vue-material-design-icons/EyeOutline.vue";

storybook/components/plugins/CollapsibleProperties.stories.jsx

@@ -0,0 +1,66 @@
+import CollapsibleProperties from "../../../src/components/plugins/CollapsibleProperties.vue";
+
+export default {
+  title: "Components/plugins/CollapsibleProperties",
+  component: CollapsibleProperties,
+};
+
+const Template = (args) => ({
+  components: {CollapsibleProperties},
+  setup() {
+    return () => 
+            <CollapsibleProperties {...args}/>
+      },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  sectionName: "Default Section",
+  properties: {
+    property1: {$required: true, type: "string"},
+    property2: {type: "number"},
+  },
+  showDynamic: true,
+  initiallyExpanded: false,
+};
+
+export const WithDynamicProperties = Template.bind({});
+WithDynamicProperties.args = {
+  sectionName: "Dynamic Properties Section",
+  properties: {
+    property1: {$required: true, type: "string", $dynamic: true},
+    property2: {type: "number", $dynamic: false},
+  },
+  showDynamic: true,
+  initiallyExpanded: false,
+};
+
+export const InitiallyExpanded = Template.bind({});
+InitiallyExpanded.args = {
+  sectionName: "Initially Expanded Section",
+  properties: {
+    property1: {$required: true, type: "string"},
+    property2: {type: "number"},
+  },
+  showDynamic: true,
+  initiallyExpanded: true,
+};
+
+export const LargePropertiesList = Template.bind({});
+LargePropertiesList.args = {
+  sectionName: "Large Properties List",
+  properties: {
+    property1: {$required: true, type: "string"},
+    property2: {type: "number", $dynamic: true, $deprecated: true},
+    property3: {type: "boolean", $dynamic: true},
+    property4: {type: "array", $dynamic: true, $deprecated: true},
+    property5: {type: "object", $deprecated: true},
+    property6: {type: "string"},
+    property7: {type: "number", $dynamic: true},
+    property8: {type: "boolean", $dynamic: true},
+    property9: {type: "array", $dynamic: true},
+    property10: {type: "object", $dynamic: true},
+  },
+  showDynamic: true,
+  initiallyExpanded: false,
+};