druxt-blocks 0.14.5 → 0.15.0

package/dist/components/DruxtBlock.vue

@@ -5,13 +5,37 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
 import { mapActions } from 'vuex'
 
 /**
- * Renders a Drupal Block by UUID or Drupal's internal ID.
+ * The DruxtBlock component is used to render a Drupal Block by UUID or Drupal's
+ * internal ID.
  *
- * @example @lang vue
+ * While the DruxtBlock component can't automatically render every Drupal block,
+ * it does provide the Block settings to a targetted Druxt wrapper component for
+ * manual theming.
+ *
+ * @example <caption>Render a block using **id**</caption> @lang vue
  * <DruxtBlock id="umami_branding" />
  *
- * @example @lang vue
+ * @example <caption>Render a block using **uuid**</caption> @lang vue
  * <DruxtBlock uuid="59104acd-88e1-43c3-bd5f-35800f206394" />
+ *
+ * @example <caption>DruxtBlock Wrapper component boilerplate</caption> @lang vue
+ * <template>
+ *   <DruxtDebug :json="block" />
+ * </template>
+ *
+ * <script>
+ * import { DruxtBlocksBlockMixin } from 'druxt-blocks'
+ * export default {
+ *   mixins: [DruxtBlocksBlockMixin]
+ * }
+ *
+ * @example <caption>DruxtBlock with template injection</caption> @lang vue
+ * <DruxtBlock id="umami_branding">
+ *   <template #default="{ block }">
+ *     <!-- Do whatever you want here -->
+ *     <DruxtDebug :json="block" />
+ *   </template>
+ * </DruxtBlock>
  */
 export default {
   name: 'DruxtBlock',
@@ -38,6 +62,8 @@ export default {
     /**
      * The Block Entity UUID.
      *
+     * If used, the **id** prop will be ignored.
+     *
      * @type {string}
      *
      * @example @lang vue
@@ -71,6 +97,16 @@ export default {
     block: ({ resource }) => (resource || {}).data,
   },
 
+  watch: {
+    id() {
+      this.$fetch()
+    },
+
+    uuid() {
+      this.$fetch()
+    }
+  },
+
   methods: {
     /**
      * Maps Vuex action to methods.
@@ -92,6 +128,8 @@ export default {
      * @returns {ComponentOptions}
      */
     componentOptions: ({ block }) => {
+      if (!block) return []
+
       // Get Plugin and Plugin ID data.
       let plugin = block.attributes.plugin || ''
       let pluginId = null
@@ -164,13 +202,29 @@ export default {
       const scopedSlots = {}
 
       // Debug data.
-      scopedSlots.debug = () => h('DruxtDebug',
-        { props: { summary: `Missing wrapper component for '${((this.block || {}).attributes || {}).drupal_internal__id}'`} },
-        [
-          h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
-          h('label', ['Block settings:', h('pre', [JSON.stringify(((this.block || {}).attributes || {}).settings, null, '  ')])])
+      /* @slot Debug information */
+      scopedSlots.default = () => {
+        let summary = `Placeholder for the '${((this.block || {}).attributes || {}).drupal_internal__id}' block.`
+        let description = [
+          h('p', 'DruxtBlocks knows that a block can be rendered, and has information provided by Drupal, but not enough to automatically determine the behaviour of the block.'),
+          h('p', 'To render this block manually, create a Nuxt component with one of the following component options.'),
         ]
-      )
+
+        // Ensure an ID or UUID.
+        if (!this.id && !this.uuid) {
+          summary = "Missing required 'id' or 'uuid' prop."
+          description = [h('p', "The DruxtBlock component requires either the 'id' or 'uuid' prop to be set.")]
+        }
+
+        return h('DruxtDebug',
+          { props: { summary } },
+          [
+            h('div', description),
+            !!this.component.options.length && h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
+            ((this.block || {}).attributes || {}).settings && h('label', ['Block settings:', h('pre', [JSON.stringify(this.block.attributes.settings, null, '  ')])])
+          ]
+        )
+      }
 
       return scopedSlots
     },

package/dist/components/DruxtBlockRegion.vue

@@ -5,15 +5,33 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
 import { mapActions, mapState } from 'vuex'
 
 /**
- * Renders all visible blocks by theme and region name.
+ * The DruxtBlockRegion component renders visible blocks based on region and
+ * theme.
  *
- * Additional, non-visible blocks are available as slots and props data.
+ * All blocks, including those not visible, are provided as slots for the Druxt
+ * Wrapper component.
  *
  * @example @lang vue
- * <DruxtBlockRegion
- *   name="header"
- *   theme="umami"
- * />
+ * <DruxtBlockRegion name="header" theme="umami" />
+ *
+ * @example <caption>DruxtBlockRegion Wrapper component boilerplate</caption> @lang vue
+ * <template>
+ *   <DruxtDebug :json="blocks" />
+ * </template>
+ *
+ * <script>
+ * import { DruxtBlocksRegionMixin } from 'druxt-blocks'
+ * export default {
+ *   mixins: [DruxtBlocksRegionMixin]
+ * }
+ *
+ * @example <caption>DruxtBlockRegion with template injection</caption> @lang vue
+ * <DruxtBlock id="umami_branding">
+ *   <template #default="{ block }">
+ *     <!-- Do whatever you want here -->
+ *     <DruxtDebug :json="block" />
+ *   </template>
+ * </DruxtBlock>
  */
 export default {
   name: 'DruxtBlockRegion',
@@ -72,6 +90,16 @@ export default {
     })
   },
 
+  watch: {
+    name() {
+      this.$fetch()
+    },
+
+    theme() {
+      this.$fetch()
+    }
+  },
+
   methods: {
     /**
      * Checks if a given block shoud be visible.

package/dist/druxt-blocks.esm.js

@@ -8,24 +8,35 @@ async function DruxtBlocksStorybook({ stories }) {
   const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
   const query = new DrupalJsonApiParams().addFilter("status", true);
   const blocks = (await druxt.getCollectionAll("block--block", query)).map((collection) => collection.data).flat();
-  const blockStories = blocks.map((block) => {
+  const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
+  addTemplate({
+    src: resolve(__dirname, `../templates/druxt-block.stories.js`),
+    fileName: `stories/druxt-block.stories.js`,
+    options: { blocks }
+  });
+  blocks.forEach((block) => {
     addTemplate({
-      src: resolve(__dirname, `../templates/druxt-block.stories.js`),
+      src: resolve(__dirname, `../templates/druxt-block.instance.stories.js`),
       fileName: `stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`,
       options: {
         block,
         title: titleFn(["Druxt", "Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
       }
     });
-    return resolve(options.buildDir, `./stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`);
   });
-  stories.push.apply(stories, blockStories);
-  const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
-  const regionStories = themes.map((theme) => {
+  addTemplate({
+    src: resolve(__dirname, `../templates/druxt-block-region.stories.js`),
+    fileName: `stories/druxt-block-region.stories.js`,
+    options: {
+      regions: Array.from(new Set(blocks.map((o) => o.attributes.region))),
+      themes
+    }
+  });
+  themes.forEach((theme) => {
     const regions = Array.from(new Set(blocks.filter((o) => o.attributes.theme === theme).map((o) => o.attributes.region)));
-    return regions.map((region) => {
+    regions.forEach((region) => {
       addTemplate({
-        src: resolve(__dirname, `../templates/druxt-block-region.stories.js`),
+        src: resolve(__dirname, `../templates/druxt-block-region.instance.stories.js`),
         fileName: `stories/druxt-block-region.${theme}.${region}.stories.js`,
         options: {
           region,
@@ -33,10 +44,12 @@ async function DruxtBlocksStorybook({ stories }) {
           theme
         }
       });
-      return resolve(options.buildDir, `./stories/druxt-block-region.${theme}.${region}.stories.js`);
     });
-  }).flat();
-  stories.push.apply(stories, regionStories);
+  });
+  stories.push(resolve(options.buildDir, `./stories/druxt-block.stories.js`));
+  stories.push(resolve(options.buildDir, `./stories/druxt-block-region.stories.js`));
+  stories.push(resolve(options.buildDir, `./stories/druxt-block.*.stories.js`));
+  stories.push(resolve(options.buildDir, `./stories/druxt-block-region.*.stories.js`));
 }
 
 const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
@@ -55,7 +68,6 @@ const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
     dirs.push({ path: join(__dirname, "components/blocks") });
   });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-blocks/dist/components/*.stories.mjs");
     await DruxtBlocksStorybook.call(this, { stories });
   });
 };
@@ -75,5 +87,22 @@ const DruxtBlocksBlockMixin = {
   }
 };
 
+const DruxtBlocksRegionMixin = {
+  props: {
+    blocks: {
+      type: Array,
+      required: true
+    },
+    name: {
+      type: String,
+      default: "content"
+    },
+    theme: {
+      type: String,
+      required: true
+    }
+  }
+};
+
 export default DruxtBlocksNuxtModule;
-export { DruxtBlocksBlockMixin };
+export { DruxtBlocksBlockMixin, DruxtBlocksRegionMixin };

package/dist/druxt-blocks.ssr.js

@@ -12,24 +12,35 @@ async function DruxtBlocksStorybook({ stories }) {
   const druxt$1 = new druxt.DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
   const query = new drupalJsonapiParams.DrupalJsonApiParams().addFilter("status", true);
   const blocks = (await druxt$1.getCollectionAll("block--block", query)).map((collection) => collection.data).flat();
-  const blockStories = blocks.map((block) => {
+  const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
+  addTemplate({
+    src: path.resolve(__dirname, `../templates/druxt-block.stories.js`),
+    fileName: `stories/druxt-block.stories.js`,
+    options: { blocks }
+  });
+  blocks.forEach((block) => {
     addTemplate({
-      src: path.resolve(__dirname, `../templates/druxt-block.stories.js`),
+      src: path.resolve(__dirname, `../templates/druxt-block.instance.stories.js`),
       fileName: `stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`,
       options: {
         block,
         title: titleFn(["Druxt", "Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
       }
     });
-    return path.resolve(options.buildDir, `./stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`);
   });
-  stories.push.apply(stories, blockStories);
-  const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
-  const regionStories = themes.map((theme) => {
+  addTemplate({
+    src: path.resolve(__dirname, `../templates/druxt-block-region.stories.js`),
+    fileName: `stories/druxt-block-region.stories.js`,
+    options: {
+      regions: Array.from(new Set(blocks.map((o) => o.attributes.region))),
+      themes
+    }
+  });
+  themes.forEach((theme) => {
     const regions = Array.from(new Set(blocks.filter((o) => o.attributes.theme === theme).map((o) => o.attributes.region)));
-    return regions.map((region) => {
+    regions.forEach((region) => {
       addTemplate({
-        src: path.resolve(__dirname, `../templates/druxt-block-region.stories.js`),
+        src: path.resolve(__dirname, `../templates/druxt-block-region.instance.stories.js`),
         fileName: `stories/druxt-block-region.${theme}.${region}.stories.js`,
         options: {
           region,
@@ -37,10 +48,12 @@ async function DruxtBlocksStorybook({ stories }) {
           theme
         }
       });
-      return path.resolve(options.buildDir, `./stories/druxt-block-region.${theme}.${region}.stories.js`);
     });
-  }).flat();
-  stories.push.apply(stories, regionStories);
+  });
+  stories.push(path.resolve(options.buildDir, `./stories/druxt-block.stories.js`));
+  stories.push(path.resolve(options.buildDir, `./stories/druxt-block-region.stories.js`));
+  stories.push(path.resolve(options.buildDir, `./stories/druxt-block.*.stories.js`));
+  stories.push(path.resolve(options.buildDir, `./stories/druxt-block-region.*.stories.js`));
 }
 
 const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
@@ -59,7 +72,6 @@ const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
     dirs.push({ path: path.join(__dirname, "components/blocks") });
   });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-blocks/dist/components/*.stories.mjs");
     await DruxtBlocksStorybook.call(this, { stories });
   });
 };
@@ -79,5 +91,23 @@ const DruxtBlocksBlockMixin = {
   }
 };
 
+const DruxtBlocksRegionMixin = {
+  props: {
+    blocks: {
+      type: Array,
+      required: true
+    },
+    name: {
+      type: String,
+      default: "content"
+    },
+    theme: {
+      type: String,
+      required: true
+    }
+  }
+};
+
 exports.DruxtBlocksBlockMixin = DruxtBlocksBlockMixin;
+exports.DruxtBlocksRegionMixin = DruxtBlocksRegionMixin;
 exports.default = DruxtBlocksNuxtModule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-blocks",
-  "version": "0.14.5",
+  "version": "0.15.0",
   "description": "Drupal Block and Block Region Druxt components.",
   "keywords": [
     "block",
@@ -44,9 +44,9 @@
   "dependencies": {
     "axios": "^0.21.1",
     "drupal-jsonapi-params": "^1.1.12",
-    "druxt": "^0.16.0",
-    "druxt-entity": "^0.23.0",
-    "druxt-router": "^0.25.0"
+    "druxt": "^0.17.0",
+    "druxt-entity": "^0.24.0",
+    "druxt-router": "^0.26.0"
   },
   "optionalDependencies": {
     "vue": "^2.6.14",

package/templates/druxt-block-region.instance.stories.js

@@ -0,0 +1,42 @@
+import DruxtBlockRegion from 'druxt-blocks/dist/components/DruxtBlockRegion.vue'
+
+export default {
+  title: '<%= options.title %>',
+  component: DruxtBlockRegion,
+  argTypes: {
+    name: {
+      control: false
+    },
+    theme: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Renders all visible blocks assigned to the **<%= options.region %>** region for the **<%= options.theme %>** theme.\n\n```jsx\n\n<DruxtBlockRegion name="<%= options.region %>" theme="<%= options.theme %>" />\n```'
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: '<DruxtBlockRegion v-bind="$props" v-on="$props" />',
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  name: '<%= options.region %>',
+  theme: '<%= options.theme %>',
+}
+Default.storyName = 'DruxtBlockRegion'
+Default.parameters = {
+  docs: {
+    source: {
+      code: '<DruxtBlockRegion name="<%= options.region %>" theme="<%= options.theme %>" />'
+    }
+  }
+}

package/templates/druxt-block-region.stories.js

@@ -1,35 +1,80 @@
 import DruxtBlockRegion from 'druxt-blocks/dist/components/DruxtBlockRegion.vue'
 
 export default {
-  title: '<%= options.title %>',
+  title: 'Druxt/Blocks/DruxtBlockRegion',
   component: DruxtBlockRegion,
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'The <strong><%= options.region %></strong> Block region for the <strong><%= options.theme %></strong> theme.'
-      },
+  argTypes: {
+    name: {
+      options: [<%= (options.regions || []).map((s) => `'${s}'`).join(', ') %>],
+      control: {
+        type: 'select'
+      }
+    },
+    theme: {
+      options: [<%= (options.themes || []).map((s) => `'${s}'`).join(', ') %>],
+      control: {
+        type: 'select'
+      }
     },
-  },
-}
-
-const Template = (args, { argTypes }) => {
-  return {
-    props: Object.keys(argTypes),
-    template: '<DruxtBlockRegion v-bind="$props" v-on="$props" />',
   }
 }
 
+const Template = (args, { argTypes }) => ({
+  components: { DruxtBlockRegion },
+  props: Object.keys(argTypes),
+  template: `<DruxtBlockRegion v-bind="$props" />`
+})
+
 export const Default = Template.bind({})
-Default.args = {
-  name: '<%= options.region %>',
-  theme: '<%= options.theme %>',
-}
 Default.storyName = 'DruxtBlockRegion'
-Default.parameters = {
+
+let code
+
+// Wrapper story.
+code = `<template>
+  <DruxtDebug :json="blocks" />
+</template>
+
+<script>
+import { DruxtBlocksRegionMixin } from 'druxt-blocks'
+export default {
+  mixins: [DruxtBlocksRegionMixin]
+}
+</script>`
+export const Wrapper = (args, { argTypes }) => ({
+  components: { DruxtBlockRegion },
+  props: Object.keys(argTypes),
+  template: `<DruxtBlockRegion v-bind="$props" ref="module">
+  <template #default>
+    Component options:
+    <ul>
+      <li v-for="option of $refs.module.getModuleComponents()" :key="option.name">{{ option.name }}</li>
+    </ul>
+  </template>
+</DruxtBlock>`
+})
+Wrapper.parameters = {
+  docs: {
+    storyDescription: 'The DruxtBlockRegion component can be themed by using a Druxt Wrapper component.\n\nCreate an appropriately named component, using the relevant component option, with the following boilerplate:\n\n```jsx\n' + code + '\n```',
+    source: { code }
+  }
+}
+
+// Template injection story.
+code = `<DruxtBlockRegion theme="">
+  <template #default="{ blocks }">
+    <!-- Do whatever you want here -->
+    <DruxtDebug :json="blocks" open />
+  </template>
+</DruxtBlockRegion>`
+export const TemplateInjection = (args, { argTypes }) => ({
+  components: { DruxtBlockRegion },
+  props: Object.keys(argTypes),
+  template: code.replace('theme=""', 'v-bind="$props"')
+})
+TemplateInjection.parameters = {
   docs: {
-    source: {
-      code: '<DruxtBlockRegion name="<%= options.region %>" theme="<%= options.theme %>" />'
-    }
+    storyDescription: 'The DruxtBlockRegion component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    source: { code }
   }
 }

package/templates/druxt-block.instance.stories.js

@@ -0,0 +1,42 @@
+import DruxtBlock from 'druxt-blocks/dist/components/DruxtBlock.vue'
+
+const code = '<DruxtBlock id="<%= options.block.attributes.drupal_internal__id %>" />'
+
+export default {
+  title: '<%= options.title %>',
+  component: DruxtBlock,
+  argTypes: {
+    id: {
+      control: false,
+    },
+    uuid: {
+      control: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Renders the **<%= options.block.attributes.settings.label || options.block.attributes.drupal_internal__id %>** block.\n\n```jsx\n\n' + code + '\n```'
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: '<DruxtBlock v-bind="$props" v-on="$props" />',
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  id: '<%= options.block.attributes.drupal_internal__id %>',
+  uuid: '<%= options.block.id %>',
+}
+Default.storyName = 'DruxtBlock'
+Default.parameters = {
+  docs: {
+    source: { code }
+  }
+}

package/templates/druxt-block.stories.js

@@ -1,34 +1,79 @@
 import DruxtBlock from 'druxt-blocks/dist/components/DruxtBlock.vue'
 
 export default {
-  title: '<%= options.title %>',
+  title: 'Druxt/Blocks/DruxtBlock',
   component: DruxtBlock,
-  parameters: {
-    docs: {
-      description: {
-        component: ' '
-      },
+  argTypes: {
+    id: {
+      options: [<%= (options.blocks || []).map((o) => `'${o.attributes.drupal_internal__id}'`).join(', ') %>],
+      control: {
+        type: 'select'
+      }
     },
-  },
+    uuid: {
+      options: [<%= (options.blocks || []).map((o) => `'${o.id}'`).join(', ') %>],
+      control: {
+        type: 'select'
+      }
+    }
+  }
 }
 
-const Template = (args, { argTypes }) => {
-  return {
-    props: Object.keys(argTypes),
-    template: '<DruxtBlock v-bind="$props" v-on="$props" />',
+// Default story.
+export const Default = (args, { argTypes }) => ({
+  components: { DruxtBlock },
+  props: Object.keys(argTypes),
+  template: `<DruxtBlock v-bind="$props" />`
+})
+
+let code
+
+// Wrapper story.
+code = `<template>
+  <DruxtDebug :json="block" />
+</template>
+
+<script>
+import { DruxtBlocksBlockMixin } from 'druxt-blocks'
+export default {
+  mixins: [DruxtBlocksBlockMixin]
+}
+</script>`
+export const Wrapper = (args, { argTypes }) => ({
+  components: { DruxtBlock },
+  props: Object.keys(argTypes),
+  template: `<DruxtBlock v-bind="$props" ref="module">
+  <template #default>
+    Component options:
+    <ul>
+      <li v-for="option of $refs.module.getModuleComponents()" :key="option.name">{{ option.name }}</li>
+    </ul>
+  </template>
+</DruxtBlock>`
+})
+Wrapper.parameters = {
+  docs: {
+    storyDescription: 'The DruxtBlock component can be themed by using a Druxt Wrapper component.\n\nCreate an appropriately named component, using the relevant component option, with the following boilerplate:\n\n```jsx\n' + code + '\n```',
+    source: { code }
   }
 }
 
-export const Default = Template.bind({})
-Default.args = {
-  id: '<%= options.block.attributes.drupal_internal__id %>',
-  uuid: '<%= options.block.id %>',
-}
-Default.storyName = 'DruxtBlock'
-Default.parameters = {
+// Template injection story.
+code = `<DruxtBlock id="">
+  <template #default="{ block }">
+    <!-- Do whatever you want here -->
+    <DruxtDebug :json="block" open />
+  </template>
+</DruxtBlock>`
+export const TemplateInjection = (args, { argTypes }) => ({
+  components: { DruxtBlock },
+  props: Object.keys(argTypes),
+  template: code.replace('id=""', 'v-bind="$props"')
+})
+TemplateInjection.parameters = {
   docs: {
-    source: {
-      code: '<DruxtBlock id="<%= options.block.attributes.drupal_internal__id %>" />'
-    }
+    storyDescription: 'The DruxtBlock component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    source: { code }
   }
 }
+

package/dist/components/DruxtBlock.stories.mjs

@@ -1,15 +0,0 @@
-import DruxtBlock from './DruxtBlock.vue'
-
-export default {
-  title: 'Druxt/Blocks/DruxtBlock',
-  component: DruxtBlock
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { DruxtBlock },
-  props: Object.keys(argTypes),
-  template: `<DruxtBlock v-bind="$props" />`
-})
-
-export const Default = Template.bind({})
-Default.storyName = 'DruxtBlock'

package/dist/components/DruxtBlockRegion.stories.mjs

@@ -1,15 +0,0 @@
-import DruxtBlockRegion from './DruxtBlockRegion.vue'
-
-export default {
-  title: 'Druxt/Blocks/DruxtBlockRegion',
-  component: DruxtBlockRegion
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { DruxtBlockRegion },
-  props: Object.keys(argTypes),
-  template: `<DruxtBlockRegion v-bind="$props" />`
-})
-
-export const Default = Template.bind({})
-Default.storyName = 'DruxtBlockRegion'