Skip to main content

Toolbox

The toolbox module is the implementation and integration of the Toolbox UI Micro-Frontend.

Product Overview​

Toolbox is a feature for Neds that allows the user to see what tools are available how many allocations of each tool they have, and details on what the tools are and how to use them

Links / Briefings​

Designs​

Dependencies​

There are some specific navigation and transition logic that form part of the UX designs. While we will try to achieve this without introducing any new dependencies, it is likely some may be required.

This section will be updated over the course of development.

Component Model​

Due to the nature of the tools in the toolbox, there is very little variance in the screens except for minor changes to names, icons and colours. As such, we will be implementing a strategy pattern whereby a tool definition will be created for each tool type and the screens will be largely agnostic of precisely which tool is being shown, deferring any decision making back to the strategy.

The strategy will include basic information, such as the name/descriptions, the styling information, such as icon and colours, and callbacks for differing logic, such as the call to action (e.g. navigate to the racing page).

Styling​

Despite the toolbox only being relevant in Neds, the theme is being used to define all colours and styling related values.

Testing​

Components and functions are tested with Jest. Snapshot testing should be minimally used, preferring explicit assertions of values wherever possible.

Implementation​

The implementation should lean on and integrate with the MFE code as much as possible. The more shared logic that can be tapped into the better the maintainability of the feature will be in the long run.

That said, native components should still be defined in the native-apps repo as per existing MFE implementations at Entain.

File Structure​

Generally, files will only exist in the neds/app directory except in cases where interfaces must be provided or stubbed in order for ladbrokes to be compiled.

  • Components: neds/app/components/toolbox/
  • Hooks: neds/app/hooks/toolbox/
  • Utils: neds/app/utils/toolbox/