Development Guidelines

Guideline to work with Custom Components

These guidelines outline the best practices and requirements for developing custom components in Limio.

How to create new Custom Components

To create a Custom Components, you can:

• take an existing Limio Component and turn it into a Custom Component to accelerate your development.
• Create one from scratch.

It is important to note that all Custom Components are owned and maintained by your development team once created or forked. Each Custom Component can be laid out as you wish, spit into multiple files or a single file containing all of your logic.

Styling

Use .css files for styling your components. Sass (.scss, .sass) and Less (.less) are also supported, and shipped Limio components use them. CSS modules work for each of these: name the file .module.css, .module.scss or .module.less and import the class names.

Supported imports

Import platform code from @limio/sdk and its subpaths only. Those exports are the supported interface, and they are the ones this documentation describes.

A deep import into another Limio package, for example @limio/shop/src/shop/checkout/basket/index.ts, reaches internal code. Limio renames, moves and deletes internal code in any release, and the release notes do not list those changes, because they are not part of the supported interface. A component that imports internal code can therefore stop building, or stop working, after an upgrade.

If you need behaviour that @limio/sdk does not export, ask Limio Support. Do not reach into the internals.

Understanding your Key files

There are some key files you should know about:

1. Component Entry Point:

   • File Path: ./components/[componentDir]/index.js
   • This is the main file of your component where your React component is exported.
   • Your component must be exported as the default export from this file.
2. Storybook File:

   • File Path: ./component-playground/src/stories/[componentDir].stories.js
   • This file defines your component's stories for Storybook, allowing you to display and test your component in various states and configurations.
   • Use Storybook to test and showcase your component in various states. This ensures functionality across multiple scenarios and datasets.
3. Component Package JSON:

   • File Path: ./components/[componentDir]/package.json
   • Contains:

     • Dependencies: Manage external packages required by your component. Where your environment permits third-party packages, Limio runs npm install in your component folder at build time and bundles the packages with your component. The install runs with --ignore-scripts, so a package that must run a post-install script does not work. Ask Limio Support to permit third-party packages in your environment.
     • Limio Props: Define custom properties (e.g., string, boolean, picklist) to make your component customizable within the Limio ecosystem. This allows users to adapt the component's behavior and appearance according to their needs. You can learn more about each Prop Types here.
     • Translatable Fields: List in translatableFields the default text that a content editor can translate. Limio then shows a Localisation tab for your component in the Page Builder. Each item in the list must be the exact default text that your component gives to the t() function of the useTranslation hook. An empty list gives no tab. See Localisation for translatable fields.
   • Declare React as a peer dependency with "react": "*", and do not add it to dependencies. React is supplied by the platform at runtime rather than bundled with your component, so pinning a version here has no effect and risks disagreeing with the version Limio actually runs.
   • Keep your package.json clean and test fields to ensure smooth integration with Limio.
   • The name, description, and version for your component are defined in the package.json file. These fields:

     • Appear to the user in Limio's Page Builder.
     • Are pulled into your component during rendering.

Example package.json

{
  "name": "headings",
  "version": "1.0.0",
  "description": "A headings component",
  "main": "./index.js",
  "dependencies": {
    "react-i18next": "^11.3.1"
  },
  "peerDependencies": {
    "react": "*"
  },
  "limioProps": [
    {
      "id": "heading",
      "label": "Heading",
      "type": "string",
      "default": "Lorem ipsum dolor sit amet"
    },
    {
      "id": "subheading",
      "label": "Subheading",
      "type": "string",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "id": "componentId",
      "label": "Component Id",
      "type": "string",
      "default": "headings-limio"
    }
  ]
}

SEO best practices

• Use Semantic Headings (h1, h2, etc.) Properly

  • Each component should use appropriate heading levels (h2, h3, etc.) based on its placement in the page.
  • Avoid multiple <h1> tags unless the component is the primary heading of the page.
• Ensure Proper Use of ARIA Attributes

  • If the component is interactive (e.g., buttons, modals, dropdowns), use proper ARIA roles (e.g., role="button", aria-expanded, aria-labelledby).
  • This helps screen readers and improves usability, indirectly benefiting SEO.
• Use Descriptive alt Attributes for Images

  • If the component includes an image, always provide an alt attribute.
  • Avoid generic descriptions like "image"; use meaningful content.
• Avoid Excessive Nesting

  • Use only the necessary number of divs (<div>), spans, or other elements. Over-nesting can make the HTML structure difficult to interpret.
• Use Meaningful Link Text

  • If the component includes links, avoid generic anchor text like "Click here".
  • Instead, use descriptive text like <a href="example.com">Learn more about our services</a>.

Accessibility best practices

Custom components must meet WCAG 2.1 AA standards, required under the European Accessibility Act (EAA) from June 2025.

Must-haves:

• Keyboard navigable — all interactive elements (buttons, links, inputs) must be usable without a mouse
• Visible focus indicators — never remove outline styles without a visible replacement
• Colour contrast — 4.5:1 ratio for normal text, 3:1 for large text
• Image alt text — meaningful alt on informative images, alt="" on decorative ones
• Form labels — every input needs an associated <label>, not just placeholder text
• ARIA for interactive components — use aria-expanded, aria-label, aria-live etc. where native HTML semantics aren't sufficient