Static Widgets

Static Widgets is a page features all the widgets located in the components/widgets folder which are automatically injected into this static page to display all the available templates using Webpack.

Requirements

The requirement for this setup is to have a mockdata.js file at the same level as your Widget file. This file will serve as the data source your widget will use to render the layout on the Static Widgets page.

apps
|------ starter
|------|------ components
|------|------|------ widgets
|------|------|------|------ header
|------|------|------|------|------ HeaderWidget.jsx
|------|------|------|------|------ mockdata.js

If the mockdata.js file is missing or if the object structure within it is incorrect, an error block will be displayed instead: The widget vactory_default:47 does not have a mockdata.js file or the data is empty.

To ensure optimal functionality, your mockdata.js file must meet the following requirements:

• The file must be named mockdata.js
• It should be located at the same directory level as your Widget file.
• It must be named-exported as the mockdata variable.
• Inside the settings object, a toHide key is required. If set to true, the static widget will not be displayed on the Static Widgets page.
• Also within the settings object, a containerLayout key is necessary. This key can have one of the following values:
  • full: This indicates that the widget will occupy the full width of the viewport.
  • default: This applies the container class.
• The file should contain a data section that serves the same purpose as the actual data coming from the Drupal back office. See the example below:

export const mockdata = {
    settings: {
        toHide: false,
        containerLayout: "default",
        /* containerLayout options: ["default", "full"] */
    },
    data: {
        components: [
            {
                title: "Tranquil Beach Escape",
                description:
                    "Quand l'intranet d'entreprise se pense comme une digitale workplace adoptant les codes des réseaux sociaux.",
                link: {
                    url: "#",
                    title: "See more",
                    id: "some-id",
                    target: "_blank",
                    className: "some-class",
                    rel: null,
                },
                image: {
                    _default: "/assets/img/house.webp",
                    meta: {
                        width: 1200,
                        height: 600,
                        alt: "House image",
                    },
                },
            },
        ],
    },
}