✨ Related Technology Global Setup

[bettybondoc]

cc @wicksipedia @isaaclombardssw @UlyssesMaclaren @adamcogan @miichaelsmedley @louisroa8189

Description:
Create a global setup feature where users can add, edit, and manage all related technologies in one central location. These technologies can then be referenced in the Card Component, allowing users to select pre-defined technologies as content. This setup ensures content consistency across pages and enables centralized updates, so any changes made to a technology are reflected globally.

Acceptance Criteria

• The global technology setup includes the following functionality:

• A centralized interface to add, edit, and delete technology entries.

• Each technology entry includes:

  • Technology Name (Text Field).
  • Description (WYSIWYG or Text Field).
  • Icon Selector (from a pre-defined library).
  • Optional Link Field (e.g., documentation or external resources).
  • Image Uploader/Selector

• In the Card Component:

  • Users can select pre-defined technologies from the global setup as content for the card.
  • The selected technology’s content (name, description, icon, link, image) is displayed in the Card Component.
  • Changes made to a technology in the global setup are automatically reflected in all associated Card Components.

• Fully responsive across desktop, tablet, and mobile
• Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge)
• Code is ready for theming (e.g., Light/Dark modes, custom colors – see linked PBI: ✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300)
• Tested and approved by Wicksy, Louis, and Betty
• Documentation is provided, including:
  • Steps to set up and manage global technologies
  • Examples of referencing technologies in the Card Component
  • Guidance on content updates and their global impact

Tasks:

• TODO - Developer to update

[jeoffreyfischer]

⚠️ Note: This new component is a wrapper around the card component - it uses the existing technology data.
A clean-up might be necessary

[Calinator444]

We have an existing technology field schema

Here's a list of fields that we have already:

• Technology Name (Text Field)
• Description (WYSIWYG or Text Field)
• Image Uploader/Selector (has a thumbnail field)
• Optional Link Field ("readMoreSlug", It should probably be renamed if we're allowing absolute URLs)

The only field we need is:

• Icon Selector (from a pre-defined library).

[Calinator444]

Not done yet - I've set up the schema for the global card's component but haven't set up the component yet.

[Calinator444]

I've set up the schema for the technology card carousel and created a component that massages the data into the existing card carousel component. I haven't tested it though.

I won't be able to finish this because I'll be on leave for a couple of weeks. Here's the branch with my changes
https://github.com/SSWConsulting/SSW.Website/tree/3320-related-technology-global-setup

[isaaclombardssw]

✅ Done - This is complete, a related technologies v2 schema ("global" data) has been created and seeded with the old related tech data. As per my conversation with Louis, he wants to go through those and organise them.

A new block has also been created which branches off the card component and reads the technology data.

[isaaclombardssw]

Screenshots of the Tina Editor and UI