SSWConsulting / SSWConsulting/SSW.Website

✨ Develop the Comparison Table Component

Open
#3,322 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
14
Forks
10
Avg merge
13h 51m
Merged PRs (30d)
38

Description

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

Description:
Create the Comparison Table component for Consulting Pages. This component should allow users to compare features or items in a tabular format with flexible customization options for content, categories, and styling. The component should support repeatable table items and categories with logical grouping and prioritization for usability.

Acceptance Criteria:

  • The Comparison Table component includes the following customization options:
  • Background Selector:
    • Transparent
    • Grey-700
    • Gradient 1/2/3/4
  • Heading Text Field
  • Description Text Field
  • Button 1 & Button 2:
    • Before Icon Selector
    • Text Field
    • After Icon Selector
    • Style Selector (Primary, Secondary)
  • Table Heading
  • Comparison Category (Repeatable)
  • Table Item (Repeatable):
    • Item Heading Text Field
    • Item Description Text Field
    • Item Code Text Field
    • Comparison Categories Multiselect
  • Fully responsive across desktop, tablet, and mobile.
  • Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge).
  • Fields and sections can be enabled or disabled for flexibility.
  • The UI for customization options is grouped logically for ease of use (e.g., table items grouped with corresponding settings).
  • Code is ready for theming (e.g., Light/Dark modes, custom colors – see linked PBI: https://github.com/SSWConsulting/SSW.Website/issues/3300).
  • Tested and approved by Wicksy, Louis, and Betty.

Tasks:

  • TODO - Developer to update

Image
Figure: Comparison Table - Desktop

Image
Figure: Comparison Table - Mobile

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source files, tests, or entry points are named. Start by inspecting the existing Consulting Pages components and TinaCMS configuration in SSW.Website, then compare their responsive and theming patterns with the supplied desktop and mobile figures. Done means the requested fields, repeatable categories and items, responsive layouts, browser support, and theming are implemented and approved by the named reviewers.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.